Scope Chains & Closures – O Escopo – Global

View Github Repository Open presentation in a new window

nubunto

See all presentation from nubunto

Scope Chains & Closures – O Escopo – Global

0 1

3-ns-talk

Talk para o 3º Nodeschool Campinas 2015

On Github nubunto / 3-ns-talk

Scope Chains & Closures

Introdução. Apresentação. Comentar sobre as diferenças entre escopos de outras linguagens e JS. Comentar sobre closures. Dificuldades.

O Escopo

  • Diferente das outras linguagens
  • Funções em JS
Apontar sobre as diferenças de escopo. Falar sobre funções em JS.

Global

var nome = 'Pablo Escobar';
function dizerNome() {
	return alert(nome);
}
console.log(nome);
O contexto global é a janela do navegador, acessível pelo objeto window (no browser) e global no Node.

Local

function figuraOculta() {
	var oculta = 'cachorro';
	return alert('Existe uma figura oculta, que é um ' + oculta + ' atras.');
}
alert(oculta); // erro
Ao contrário do escopo global, as variáveis dentro de uma função pertencem a função que engloba estas variáveis. Vale lembrar que em JavaScript, declarações sem var resultam na variável sendo jogada para o escopo global.

Declaração de variáveis

  • Regras de declaração de variáveis
  • Declarações com e sem "var"
  • Diferenças para com outras linguagens procedurais/orientadas a objetos
  • Variable hoisting
  • Function hoisting
  • "use strict";
function variableHoisting() {
	alert(nome);
	var nome = 'foo';
}
variableHoisting(); // o que acontece?
					
function variableHoisting() {
	alert(nome); 
	var nome = 'foo';
}
variableHoisting(); // não resulta em erro!
O código executado fica, na verdade, assim: 
function variableHoisting() {
	var nome; // declaração movida para início do escopo
	alert(nome); 
	nome = 'foo';
}
variableHoisting(); // alerta undefined
E se definirmos uma função dentro de uma função? 
function digaNome(nome) {
	function capitalizar() {
		return nome[0].toUpperCase() + nome.substr(1).toLowerCase();
	}
	return alert(capitalizar());
}
digaNome("RoBeRTO"); // alerta "Roberto".
capitalizar() // erro!
As regras são as mesmas.
Vamos voltar ao último exemplo. 
function digaNome(nome) {
	function capitalizar() {
		return nome[0].toUpperCase() + nome.substr(1).toLowerCase();
	}
	return alert(capitalizar());
}
Mesmo que eu não tenha declarado a variável nome dentro da função capitalizar, consigo usar este valor dentro da função "de dentro".

Closures

Uma função "se lembra" de variáveis definidas no contexto no qual ela própria é definida.

Este é o conceito de closures.

Funções são a única construção no Javascript que cria um novo escopo. Isto significa que é possível usar funções para encapsular valores, mantendo-os "privados". 
(function() {
	var a = 0;
	console.log(a); // escreve "0" no console

	// a variável "a" só existe neste escopo.
	// Logo, deixará de existir assim que esta função acabar
})();
console.log(a); // erro
Note como é possível criar uma função e executá-la envolvendo-a em parênteses e chamando-a.

Funções são primeira classe

Podemos retorná-las de funções como se fossem valores. 
function soma(a) {
	return function (b) {
		return a + b;
	}
}
var soma5 = soma(5);
var resultado = soma5(3);
alert(resultado); // alerta "8"
Este código só funciona porque a função retornada se "lembra" do valor passado na primeira chamada. Aliando closures a funções de primeira classe abre espaço para abstrações poderosas.

Module Pattern

Consiste em retornar um objeto de uma closure, mas manter dados sensíveis encapsulados de usuários do "lado de fora". 
function Walker(seed) {
	var init = seed || 0;
	return {
		next: function() {
			return ++init;
		},
		cur: function() {
			return init;
		},
		back: function() {
			return --init;
		}
	};
}
var first = Walker(5);
console.log(first.next()); // 6
console.log(first.next()); // 7 
console.log(first.next()); // 8

var second = Walker();
console.log(second.next()); // 1
console.log(second.cur());  // 1
console.log(second.back()); // 0

// first.seed -> erro!
// second.seed -> erro!
Isso permite que possamos escolher quais métodos estão abertos para usuários da nossa função, e também regras para acesso das variáveis privadas.

E as scope chains?

É como a runtime engine JavaScript resolve o lookup de variáveis. Devemos visualizar o escopo como uma "cadeia".

Dúvidas?

Obrigado!

Twitter: @panuto_

Github: @nubunto

Nodeschool Campinas 2015

Scope Chains & Closures Introdução. Apresentação. Comentar sobre as diferenças entre escopos de outras linguagens e JS. Comentar sobre closures. Dificuldades.