Exemplo de como funciona a definição de escopo em JavaScript

01-escopo.js

// x está no escopo global
var x = 1;

// Uma function cria um novo escopo
function test() {
  
  // y só existe dentro de test
  var y = 2;
  
  // x é acessível de dentro de test
  console.log(x + y); // 3
}

// y não pode ser acessada de fora de seu escopo
console.log(y); // undefined

02-closure.js

/**
 * Cria um somador.
 * 
 * @param {Number} x - Número que será somado.
 * @returns {Function} - Function que soma x com um segundo número
 *                       fornecido.
 */
function criaSomador(x) {
  var primeiro = x;
  
  // Esta function aninhada é uma closure
  function soma(segundo) {
    
    // A closure "lembra" do valor da variável 'primeiro'
    // mesmo depois da function 'criaSomador' já ter executado
    return primeiro + segundo;
  }
  
  // Retorna a function que faz a soma
  return soma;
}

// Cria um somador de 1
var soma1 = criaSomador(1);

soma1(1); // 2
soma1(2); // 3

03-apenas-functions-criam-escopo.js

if (true) {
  var x = 1;
}

console.log(x); // 1

function test() {
  var y = 2;
}

console.log(y); // undefined

04-hoisting.js

var x = 1;

// Em tempo de execução, primeiro é feita a 
// declaração e depois a atribuição
var x;
x = 1;

// Hoisting também se aplica a funções nomeadas
testA(); // teste a

function testA() {
  console.log('teste a');
}

// Em tempo de execução 'testA' é "içado" para
// o início do escopo
function testA() {
  console.log('teste a');
}

testA(); // teste a

// Mas não para funções anônimas, cuidado!
testB(); // TypeError: testB is not a function

var testB = function () {
  console.log('teste b');
}

// O que realmente acontece é:
var testB;
testB(); // 'testB' é undefined neste ponto

testB = function () {
  console.log('teste b');
}

05-funcoes-imediatas.js

// Exemplo de função imediata
(function () {
  
  // Mensagem só existe dentro deste escopo
  var mensagem = 'Este código executa assim que esta função é criada.';
  console.log(mensagem);
})();

console.log(mensagem); // ReferenceError: mensagem is not defined

// Uma função imediata é o equivalente a fazer isto:
var teste = function () {
  // ...
};

teste();

// No jQuery, isto não é uma função imediata
// pois só executa após o DOM ter carregado
$(function () {
  // ...
});

// Pois na verdade não passa de um atalho para isso:
$(document).ready(function(){
  // ...
});