Javascript Training Ground

Practice makes perfect

Understanding how a code works is one thing. But it is important to be able to write the code "out-of-your- head" from memory.

Study one code at a time and them write them in the Training Area and press Run to see if it works correctly.

Tip: If a code at first seems a little complex, try breaking it into workable parts. It is important to understand how the code works. Start with the big picture, the shape of the code, where the functions are, how they are called and so on. Once you can easily code the shape then start with the details

Training Ground

header.innerHTML = "Hello world";

// check main heading

Code Examples

lexical scope

function foo(a) {

  var b = a * 2;

  function bar(c) {
    console.log( a, b, c );
  }

  bar(b * 3);
}

foo( 2 );

function scope

function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }

  var b;

  b = a + doSomethingElse( a * 2 );

  console.log( b * 3 );
}

doSomething( 2 );

IIFE - Immediately Invoked Function Expression

var a = 2;

(function foo(){

var a = 3;
console.log( a );
})();

console.log( a );

IIFE - With Parameters

var a = 2;

(function IIFE( global ){

  var a = 3;
  console.log( a );
  console.log( global.a );

})( window );

  console.log( a );

IIFE variation

var a = 2;

(function IIFE( def ){
  def( window );
})(function def( global ){

  var a = 3;
  console.log( a );
  console.log( global.a );

});

CLOSURE

function foo() {
  var a = 2;

  function bar() {
    console.log( a );
  }

  return bar;
}

var baz = foo();

baz();

Module

single module instance

Module parameters

public API

this