JavaScript Orientado à Objeto

Bem-vindo ao tutorial politicamente incorreto de JavaScript orientado à objeto.

Como declarar uma variável Sério mesmo, como declarar uma variável!

Existem duas maneiras de declarar uma variável em JavaScript. A maneira mais antiga, que utiliza a palavra-chave var, e tem várias pegadinhas que veremos mais para frente. E a maneira mais nova, com a palavra-chave let, que se comporta de maneira mais similar à que estamos acostumados em outras linguagens. Existe também a possibilidade de declararmos constantes com const.

Declaramos uma constante com a palavra-chave const, seguida pelo nome da constante, e obrigatoriamente o sinal de igual e um valor a ser atribuído à constante.

declaração de constantes

'use strict';

const naoPodeMudar = 'o valor';
const vaiLancarErro; // é obrigatório atribuir o valor às constantes assim que as declaramos

Declaramos uma variável com a palavra-chave let ou com var, seguidas do nome da variável. Opcionalmente atribuímos um valor para ela. Se não atribuirmos, ela terá o valor padrão undefined.

declaração de variáveis

'use strict';

let naoInicializada; // possui valor undefined
let dica = 'JavaScript não é "fortemente tipado"';

var naoInicializada2; // possui valor undefined
var dica2 = 'Use "let" ao invés de "var"';

Não declaramos o tipo da variável, pois JavaScript não proíbe que o tipo dela mude (não é fortemente tipada). O tipo é inferido através do valor atualmente atribuído à variável. Note porém que se mantivermos o mesmo tipo da variável ao longo da execução de nosso código, o compilador consegue aplicar otimizações de performance. Se necessário, é possível verificar de maneira limitada o tipo da variável usando o operador typeof ou outros métodos como Array.isArray.

A lista completa dos tipos das variáveis pode ser vista no MDN, que é o portal de desenvolvimento da Mozilla. Vamos ver apenas os tipos que diferem de alguma maneira de seus primos em outras linguagens.

Note que podemos chamar métodos de instâncias através das literais como veremos em alguns exemplos.

Conversão de tipos e falsy values

Além de não proibir que o tipo das variáveis mude ao longo da execução do código, JavaScript converte tipos automaticamente em true e false quando necessário. Isso nos proporciona uma sintaxe reduzida para verificar estes valores e a existência de variáveis.

Os valores que são convertidos para false são chamados de falsy. são eles '' (string vazia), 0, null, undefined e NaN. Todos os demais são convertidos para true.

var objeto = {};

// a verificação reduzida
if (objeto) {
	//
}

// equivale a verificação
if (objeto === true) {
	//
}

// e ainda à verificação
if (objeto !== false && objeto !== '' && objeto !== 0 && objeto !== null && objeto !== undefined && objeto !== NaN) {
	//
}

Note que existem dois comparadores de igualdade em JavaScript. == e ===, assim como seus opostos != e !==. A primeira forma converte automaticamente os tipos, enquanto que a outra não.

Null e nullable

Como podemos possivelmente mudar livremente os tipos das varáveis que declaramos (embora não seja recomendado), não existe uma sintaxe especial para indicar que as variáveis podem ser nullable. Basta não atribuir valor nenhum, e nesse caso a variável terá o valor especial undefined. Ou atribuir o valor null a elas. Em algumas linguagens existe um operador específico para lidar com tipos nulos, chamado null coalescing operator (geralmente representado como ?? ou ainda uma forma abreviada do operador ?:, também chamado de operador Elvis). Em JavaScript, quem faz as vezes desse operador é o OR lógico ||.

TODO mostrar em outras linguagens quando pode ser nullable

tipos null com let

'use strict';

let k; // undefined
let l = null; // null

// || funciona como null coalescing operator
// isso quer dizer que se k for undefined ou null, m recebe o valor 2 ao invés de k
// o mesmo vale para n, que recebe o valor 2 se l for undefined ou null

let m = k || 2; // 2
let n = l || 2; // 2

// existem outros valores que podem ser entendidos como null, como mencionei anteriormente no tópico falsy values

let o = '';
let p = o || 2; // 2, pois '' é falsy

Namespaces

Essa funcionalidade, juntamente com var, costumava ser utilizada para simular namespaces, já que JavaScript não os possui nativamente. Note que atualmente a utilização de um padrão de módulos chamados AMD é mais recomendada por motivos de uso de memória. Existe também uma expecificação para criação de módulos usando as palavras import e export, que ainda não foi implementada em nenhum navegador.

tipos null com var

'use strict';

var a = 1;
var b = null;

// var permite que se declare a mesma variável mais de uma vez
// então se a ou b já existirem, utilizamos o valor das variáveis existentes
// se não, atribuímos o valor 2

var a = a || 2; // 1
var b = b || 2; // 2

Num mesmo arquivo a utilidade disso não parece muito grande, mas em dois arquivos, este padrão se mostrava mais atrativo.

sanfona.js - namespaces

'use strict'

// namespace widgets
var widgets = widgets || {}; // garantimos que widgets exista antes de adicionarmos propriedades a ele

// namespace sanfona
widgets.sanfona = {};

calendario.js - namespaces

'use strict'

// namespace widgets
var widgets = widgets || {}; // garantimos que widgets exista antes de adicionarmos propriedades a ele

// namespace calendario
widgets.calendario = {};

var console = console || {}; // cria um objeto somente se console não existir

Vimos anteriormente que utilizando funções anônimas autoexecutáveis isolamos um escopo. Porém, não conseguimos acessá-lo de fora. Para tanto, precisamos simular um namespace. Aproveitamos que JavaScript permite adicionar dinamicamente propriedades em objetos para fazer isso.

simulação de namespaces

var namespace = namespace || {};
namespace.subnamespace = namespace.subnamespace || {};

namespace.subnamespace.meuObjeto = {
	metodo: function() {
		//
	}
};

(function() {
	// "import"
	var meuObjeto = namespace.subnamespace.meuObjeto;

	meuObjeto.metodo();
})();

O primeiro nivel do namescape ocupa o espaço global, que como já vimos, é compartilhado por todos os arquivos e blocos de script da página. Portanto, podemos acrescentar mais coisas posteriormente ao mesmo namespace em um arquivo diferente.

simulação de namespaces, outro arquivo

var namespace = namespace || {};
namespace.subnamespace = namespace.subnamespace || {};

namespace.subnamespace.meuOutroObjeto = {
	metodo: function() {
		//
	}
};

(function() {
	// "import"
	var meuObjeto = namespace.subnamespace.meuObjeto;
	var meuOutroObjeto = namespace.subnamespace.meuOutroObjeto;

	meuObjeto.metodo();
	meuOutroObjeto.metodo();
})();

Number

É o único tipo numérico existente em JavaScript. Sempre é um double (double-precision 64-bit binary format IEEE 754-2008) independente da notação que usamos. Pode também conter os valores especiais NaN, infinito positivo (Number.POSITIVE_INFINITY) e infinito negativo (Number.NEGATIVE_INFINITY).

formatos números

'use strict';

let i = 1; // é um double!
let area = 4.527; // também é um double
const negativo = -2; // sem notação especial para números negativos
let abreviado = .7; // 0.7

// notação científica usa e ou E
let c1 = 1e0; // 1 × 10^0 = 1 × 1 = 1
let c2 = 1E-1; // 1 × 10^-1 = 1 × 0.1 = 0.1
let c3 = -.7e-2; // -0.7 × 10^-2 = -0.7 × 0.01 = -0.007

// notação binária usa b ou B
// também são double
let binario = 0b01;
let bipolarOtimista = 0B11010;
let bipolarNegativo = -0b11010;

// notação octal usa o (letra ó minúsculo) ou O (letra ó maiúsculo)
// vc adivinhou, eles também são double
let octal = 0o01234567;
let entreMeusDedos = 0O12345670;

// notação hexadecimal usa x ou X
// isso mesmo, você é quase um expert
// os números que utilizam essa notação também são double
let hexadecimal = 0x0123456789ABCDEF;
let cor = 0Xff0000;

// NOTAÇÃO DECIMAL
// ===============
// JavaScript permite que os números
// sejam precedidos por 0 sem
// que isso influencie em seu valor
int i1 = 10;
int p1 = 01;

let impossible1 = 1 / 0; /// Infinity

let impossible2 = Math.sqrt(-1); // NaN
let impossible3 = Number.parseInt('wrong format'); // NaN

area.toFixed(1); // retorna '4.5'

1.9.toFixed(); // retorna '2'

Números não sofrem overflow nem underflow, mas não dão aviso se você tentar passar dos limites.

formatos números

'use strict';

let i = Number.MAX_VALUE;
let j = Number.MAX_VALUE + 1; // não dá aviso
if (i === j) {
	console.log('j foi limitado');
}

i = -i
j = -j - 1; // não dá aviso
if (i === j) {
	console.log('j foi limitado');
}

String

É um objeto imutável. Pode usar como delimitador aspas simples ou duplas dependendo da necessidade. Para quebrá-la em mais de uma linha, escapamos a quebra de linha com uma barra invertida. Podemos escapar caracteres especiais assim como em outras linguagens.

tipos de strings

'use strict';

let simples = 'A primeira faz "tchan"';
let dupla = "A segunda faz 'tchun'";

const iara = "mãe d'água";
const modoDificil = 'O\'Reilly';
let html = '<em class="especial">ênfase</em>';

let calvinHarris = 'how deep\nis your love'; // 2 linhas

let pareceMasNaoE = 'começa e \
termina na mesma linha?'; // 1 linha apenas

// várias linhas
let josePauloPaes = 'Meu amor é simples, Dora,\n\
Como a água e o pão.\n\
\n\
Como o céu refletido\n\
Nas pupilas de um cão.';

let emoji = '😍';
let es5 = '\uD83D\uDE0D'; // code units / surrogates
let es6 = '\u{1F60D}'; // code point

// string é imutável, então seus métodos retornam novas instâncias
let beeGees = calvinHarris.replace('love', 'looove'); // pq um tutorial de programação não é completo sem uma homenagem aos bee gees ;)

'Gritando'.toUpperCase(); // retorna 'GRITANDO'

Existem strings um pouco mais poderosas à partir da versão ES6, chamadas Template Strings. Elas permitem ser quebradas em mais de uma linha. Seu demilitador é a crase.

template strings

'use strict';

let duplaTemplate = `A primeira faz "tchan". A segunda faz 'tchun'`;

// várias linhas
let leminskiTemplate = `Merda é veneno.
No entanto, não há nada
que seja mais bonito
que uma bela cagada.
Cagam ricos, cagam pobres,
cagam reis e cagam fadas.
Não há merda que se compare
à bosta da pessoa amada.`;

A representação interna das strings é UTF-16. Nas versões ES6+, podemos iterar pelos code points das strings, isto é, ler caractere por caractere independente do número de bytes que eles usam. Nas versões ES5-, apenas code units são suportadas. O site 2ality tem um artigo bem completo sobre codificação de strings e outro atualizado para ES6.

code points

'use strict';

const multibyte = 'd😍b';
for (let caractere of multibyte) {
	console.log(caractere);
	console.log(caractere.length);
}

// d
// 1
// 😍
// 2
// b
// 1

Interpolação de variáveis

O real motivo das template strings existirem é para facilitar a utilização de variáveis junto com strings.

strings simples e template strings com variáveis

'use strict';

let nome = 'Pafúncio';
let respostaSimples = 'Oi ' + nome + '. Já te ligo ok?';
let respostaTemplate = `Oi ${nome}. Já te ligo ok?`;
// ambos geram Oi Pafúncio. Já te ligo ok?

Existe ainda um uso mais avançado de templates que veremos em na parte sobre funções.

Array

Mistura de Array e ArrayList<Object>, isto é, muda de tamanho conforme a necessidade, e pode armazenar tipos misturados. Podemos inicializar com um tamanho inicial por motivos de performance. Acessamos os elementos dela com o operador []. Note que não é feito nenhum tipo de restrição para acessar índices inexistentes na Array!

Assim como ganhamos performance ao manter sempre o mesmo tipo para uma variável, ganhamos performance ao armazenar sempre o mesmo tipo de variáveis numa Array.

arrays

'use strict';

let noticias = []; // array vazia

console.log(noticias.length); // mostra 0
console.log(noticias[56]); // mostra undefined e continua normalmente

// array é mutável, então seus métodos modificam a array
noticias.push('notícia extremamente curta :P'); // insere um elemento ao final da Array
noticias[5] = 'e outra reduzida também'; // insere um elemento no índice 5
noticias.push('ao vivo'); // insere um elemento no índice 6, que é o final da Array

let noticias2 = new Array(10); // array vazia com espaço pré-alocado para 10 elementos.

console.log(noticias2.length); // mostra 10
console.log(noticias2[4]); // mostra undefined, pois não atribuímos um valor para este índice
console.log(noticias2[20]); // mostra undefined, pois não atribuímos um valor para este índice

noticias2.push('vai no índice 11'); // os 10 primeiros são undefined

let bagunca = [38, 'texto']; // perfeitamente legal, embora seja lento

A Array possui alguns métodos nativos úteis, como forEach, filter, map e reduce. Mas devido ao modelo de paralelismo da linguagem, creio que a otimização desses métodos não seja tão grande assim.

Os exemplos abaixo são um pouco mais complicados, então talvez você queira ler a parte sobre funções e objetos e voltar aqui depois se não entender alguma coisa.

bonus métodos array

'use strict';

// retorna uma nova array sem os elementos das posições pares
// se lembre que o índice começa em 0, e não em 1
[21, 72, 3, 34, 55, 60].filter(function(element, index) {
	if(index % 2 === 0) {
		return true;
	}
	return false;
});

// cria uma array literal
[1, 2]

	// executa o callback em cada elemento da array
	.map(function(currentValue) {
		return currentValue + 1;
	}) // [2, 3]

	// executa o callback em cada elemento da array
	// e vai acumulando o resultado
	.reduce(function(previousValue, currentValue) {
		return previousValue + currentValue;
	}); // o retorno de reduce é 5

RegExp

Além do objeto RegExp, JavaScript possui expressões regulares em forma de literal, delimitadas por barras, e opcionalmente com flags após a barra final.

formatos de expressões regulares

'use strict';

const regex = /a+/gi; // expressão na forma literal com flags g (não parar no primeiro match) e i (case insensitive)
const regex2 = new RegExp('a+', 'gi'); // mesma expressão na forma de objeto

regex.test('abobrinha'); // retorna true
/why don't you/.test('me now\?'); // retorna false

Function

Em JavaScript, métodos e funções sempre são objetos! Isso significa que elas possuem propriedades e métodos como o call por exemplo.

Nunca declaramos o tipo de retorno de uma função. Uma vez que JavaScript não proíbe que os tipos das variáveis mude, é permitido que a função retorne qualquer coisa, misture os tipos de retorno, etc. O número de parâmetros também não precisa ser declarado, ou seja, todas as funções em JavaScript são variádicas. Esta funcionalidade costumava ser usada para simular sobrecarga de função, juntamente com o objeto arguments que toda a função recebe implicitamente. Porém esta é uma prática não mais recomendada. Para a solução atual recomendada, veja operador rest.

Note que embora a chamada de funções da maneira descrita acima seja permitida, o compilador ainda pode lançar exceções ao tentar utilizar variáveis que não foram devidamente passadas ao método.

chamadas válidas de métodos

'use strict';

function comum() {
	console.log(arguments); // objeto arguments iniciado automaticamente, contendo os parâmetros utilizados na chamada
}

function normal(texto) {
	console.log(arguments); // objeto arguments iniciado automaticamente, contendo os parâmetros utilizados na chamada
}

function retornoMisturado(numero) {
	if (numero > 0) {
		return 'texto';
	}
	return 25;
}

// chamadas perfeitamente válidas
comum(); // arguments será []
comum('lala'); // arguments será ['lala']
comum('lala', 'lolo'); // arguments será ['lala', 'lolo']
normal('lolo'); // texto será 'lolo' e  arguments será ['lolo']

// chamada válida
normal(); // o parâmetro texto terá o valor undefined e arguments será []

normal.call(this, 'dadaísmo'); // o parâmetro texto terá o valor 'dadaísmo' e arguments será ['dadaísmo']

retornoMisturado(-1); // retorna 25
retornoMisturado(1); // retorna 'texto'

Como mencionei, a possibilidade de chamar funções com parâmetros diferentes dos definidos costumava ser usada para simular sobrecarga de função. Se você precisa dar manutenção em códigos antigos, saiba que em Javascript, os métodos são diferenciados pelo seu nome exclusivamente, e sua sobrecarga antigamente era feita da seguinte maneira:

sobrecarga de função

'use strict';

function efetuarRequisicaoAjax(endereco) {

	const url = endereco;

	// SINTAXE ANTIGA!!! NÃO COPIE!!!

	if (arguments[1]) {

		if (typeof arguments[1] === 'number') { // segundo parâmetro passado para a função
			url += '?pagina=' + arguments[1];
		} else if (typeof arguments[1] === 'string') {
			url += '?token=' + arguments[1];
		}

	}

	// SINTAXE ANTIGA!!! NÃO COPIE!!!

	if (arguments[2]) {
		url += '&pagina=' + arguments[2]; // terceiro parâmetro passado para a função
	}

	console.log(url); // vamos ver um exemplo real de ajax lá no final ;)

}

// SINTAXE ANTIGA!!! NÃO COPIE!!!

efetuarRequisicaoAjax('webservicedagrecia.ashx');
efetuarRequisicaoAjax('webservicedagrecia.ashx', 2);
efetuarRequisicaoAjax('webserviceseguro.ashx', '987dcb987d6b96a9d5ab');
efetuarRequisicaoAjax('webserviceseguro.ashx', '987dcb987d6b96a9d5ab', 2);

Como mencionei lá no começo, funções podem ser selecionadas individualmente para utilizar o modo estrito. Isso é útil nos casos em que precisamos dar manutenção em códigos antigos, ou quando inserimos código dentro de tags <script />, ao invés de em arquivos externos.

funções estritas

function funcaoNormal() {
	console.log(varNaoDeclarada); // mostra undefined em navegadores antigos, nos novos lança exceção
}

function funcaoEstrita() {
	'use strict';

	console.log(varNaoDeclarada); // lança exceção
}

JavaScript suporta funções anônimas, ou expressões lambda. Expressões lambda são utilizados frequentemente em JavaScript, por isso é importante compreender o que são.

Expressões lambda são declarações de funções anônimas diretamente no meio do código. Basicamente em qualquer lugar onde podemos passar uma referência para uma função, podemos criar uma expressão lambda. Seguem exemplos em outras linguagens de expressões lambdas.

código C

// lambda em C
// pegadinha do malandro! C não tem isso.

código Swift

// lambda em Swift

superior({() -> TipoDoRetorno in
	// corpo da função
})

código Objective-C

// lambda em Objective-C (OS X v10.6+ e iOS 4+) - chamado de Block

[superior usando:^() {
	// corpo da função
}];

código C#

// lambda em C# 4 - idêntico a JavaScript

superior(() => {
	// corpo da função
});

código Java

// lambda em Java 8

superior(() -> {
	// corpo da função
});

código C++

// lambda em C++11

superior([] () {
	// corpo da função
});

código Rust

// lambda em Rust

superior(|| {
	// corpo da função
});

código PHP

// lambda em PHP - idêntico a JavaScript

superior(function() {
	// corpo da função
});

E as duas formas possíveis em JavaScript.

código JavaScript - funções de ordem superior

'use strict';

// função normal
function normal() {
	//
}

// função de ordem superior
function superior(funcao) {
	funcao(); // executa a função passada
}

// função normal sendo passado como parâmetro - note que usamos apenas o nome, sem executar com ()
superior(normal);

// expressão lambda sendo passada como parâmetro
superior(function() {
	//
});

// expressão lambda com nova sintaxe de flecha (ES6) sendo passada como parâmetro
// dependendo do que a expressão lambda fizer, alguns caracteres podem ser omitidos
superior(() => {
	//
});

Funções definidas com a flecha gorda, possuem novas regras específicas para a palavra-chave this utilizada dentro de seu corpo. Vale conferir as regras na MDN.

Além de expressões lambda, JavaScript suporta um modo de declaração chamado expressão de função. Mais adiante veremos outro uso para este tipo de declaração.

expressões de função

'use strict';

// declaração de função
function normal() {
	//
}

// expressão de função - tratamos a função como um valor
const surpresa = function() {
	//
};

// expressão de função
const outraSurpresa = normal;

normal();
surpresa();
outraSurpresa();

// expressão de função anônima - note os () em volta dela
// veremos mais adiante outros usos para essa forma
(function() {
	//
});

Operadores rest e spread

Agora que conhecemos funções, strings e arrays, podemos ver um exemplo mais completo dessas partes. Existem dois operadores em JavaScript que são representados por ..., chamados rest e spread. A função deles é respectivamente transformar uma sequência de elementos em uma Array, e expandir uma Array em uma sequência de elementos. Como ambos usam ..., o que diferencia um do outro é o local de uso.

Num local onde faça sentido expandir a Array, teremos o operador spread.

operador spread

'use strict';

let comeco = [1, 2, 3];
let completo = [...comeco, 4, 5]; // [1, 2, 3, 4, 5]

function tresArgumentos(primeiro, segundo, terceiro) {
	//
}

// expandindo argumentos passados
tresArgumentos(...comeco); // primeiro = 1, segundo = 2, terceiro = 3

E portanto, num local onde faça mais sentido juntar os elementos, teremos o operador rest.

operador rest

'use strict';

let a, b, outros;
[a, b] = [1, 2]; // a = 1, b = 2
[a, b, ...outros] = [1, 2, 3, 4, 5]; // a = 1, b = 2, outros = [3, 4, 5]

// agrupando argumentos que se espera receber
// ou funções variádicas
function variosArgumentos(primeiro, segundo, ...outros) {
	//
}

variosArgumentos(1, 2, 3, 4, 5); // primeiro = 1, segundo = 2, outros = [3, 4, 5]

Este operador é o recomendado atualmente para a programação de sobrecarga de métodos, ao invés de utilizar o objeto legado arguments. Suas vantagens incluem a maior facilidade de misturar parâmetros nomeados e não nomeados, percorrer os parâmetros não nomeados como uma Array (ao passo que arguments é um objeto com propriedades numeradas) e servir exclusivamente para gerenciar parâmetros, sendo que arguments possui propriedades depreciadas como arguments.caller e arguments.callee.

Em linguagens mais estritas, os métodos são diferenciados pela sua assinatura, que é composta pelo nome e pela quantidade e tipos de parâmetros. Portanto, podemos declarar funções e métodos com nomes diferentes desde que seus parâmetros também sejam diferentes.

sobrecarga de função em C# / Java

// Sobrecarga de método em C# / Java

public class Overloaded {
	public void skip() { /**/ }
	public void skip(int amount) { /**/ }
}

sobrecarga de função em C++

// Sobrecarga de método em C++

public class Overloaded {
	public:
	void skip() { /**/ }
	void skip(int amount) { /**/ }
}

Em JavaScript tal diferenciação não existe. As funções são diferenciadas exclusivamente pelo seu nome. Portanto, a maneira mais próxima de obtermos o que queremos, é utilizando outro recurso, também presente em diversas outras linguagens. Podemos permitir uma quantidade variável de parâmetros nas funções, e depois escolhermos o que fazer baseados nos tipos dos argumentos.

Das linguagens mais utilizadas atualmente que suportam esse recurso, C e Objective-C possuem uma sintaxe própria com macros. C++ usa templates, que são ligeiramente mais verbosos. As demais são bastante parecidas como podemos ver a seguir.

funções variádicas em Swift

// funções variádicas em Swift

// argumentos do mesmo tipo

func imprimirSimples(titulo titulo:String, paginas:Int...) {
	for pagina in paginas {
		print("Imprimindo página \(pagina) num total de \(paginas.count)")
	}
}

imprimirSimples(titulo: "resumo", paginas: 1, 2, 5)

// argumentos de todos os tipos

func imprimir(titulo titulo:String, paginas:Any...) {
	for valor in paginas {
		switch valor {
		case let pagina as Int:
			print("Imprimindo página \(pagina)")
		case let faixa as Range<Int>:
			print("Imprimindo páginas \(faixa.first!) até \(faixa.last!)")
		default:
			print("Imprimindo outra coisa")
		}
	}
}

imprimir(titulo: "resumo", paginas: 1, 2...5, "capítulo 2")

funções variádicas em C#

// funções variádicas em C#
// a propósito, o estilo padrão de { e } em C# é que eles fiquem em linhas separadas
// mas ia ocupar muito espaço desnecessário nesse exemplo

// argumentos do mesmo tipo

void ImprimirSimples(string titulo, params int[] paginas) {
	foreach (int pagina in paginas) {
		System.Console.WriteLine(@"Imprimindo pagina {0} num total de {1}", pagina, paginas.Length);
	}
}

ImprimirSimples(@"resumo", 1, 2, 5);

// argumentos de todos os tipos

void Imprimir(string titulo, params object[] paginas) {
	foreach (object valor in paginas) {
		if (valor is int) {
			System.Console.WriteLine(@"Imprimindo página {0}", valor);
		} else if (valor is IEnumerable<int>) {
			System.Console.WriteLine(
				@"Imprimindo páginas {0} até {1}",
				(valor as IEnumerable<int>).First(),
				(valor as IEnumerable<int>).Last()
			);
		} else {
			System.Console.WriteLine(@"Imprimindo outra coisa");
		}
	}
}

Imprimir(@"resumo", 1, Enumerable.Range(2, 4), @"capítulo 2");

funções variádicas em Java

// métodos variádicos em Java
// algumas coisas foram omitidas propositalmente como main

// argumentos do mesmo tipo

void imprimirSimples(String titulo, int... paginas) {
	for (int pagina : paginas) {
		System.out.println(String.format("Imprimindo página %1", pagina));
	}
}

imprimirSimples("resumo", 1, 2, 5);

// argumentos de todos os tipos

void imprimir(String titulo, Object... paginas) {
	for (Object valor : paginas) {
		if (valor instanceof Integer) {
			System.out.println(String.format("Imprimindo página %d", valor));
		} else if (valor instanceof Range<Integer>) {
			System.out.println(String.format(
				"Imprimindo páginas %d até %d",
				((Range<Integer>)valor).getMinimum(),
				((Range<Integer>)valor).getMaximum()
			));
		} else {
			System.out.println("Imprimindo outra coisa");
		}
	}
}

imprimir("resumo", 1, Range.between(2, 5), "capítulo 2");

funções variádicas em PHP 5.6+

// funções variádicas em PHP

// argumentos do mesmo tipo

function imprimirSimples(string $titulo, int ...$paginas) {
	foreach ($paginas as $pagina) {
		echo "Imprimindo página $pagina\n";
	}
}

imprimirSimples("resumo", 1, 2, 5);

// argumentos de todos os tipos

function imprimir(string $titulo, ...$valores) {
	foreach ($valores as $valor) {
		if (is_int($valor)) {
			echo "Imprimindo página $valor\n";
		} else if (is_array($valor)) {
			echo 'Imprimindo páginas' . $valor[0] . ' até ' . $valor[count($valor) - 1] . "\n";
		} else {
			echo "Imprimindo outra coisa\n";
		}
	}
}

imprimir("resumo", 1, range(2, 5), "capítulo 2");

funções variádicas em C++

// funções variádicas em C++

// argumentos do mesmo tipo

#include <iostream>

template<typename... Tipos>
void imprimirSimples(std::string titulo, Tipos... paginas) {

	const unsigned short int quantidadeDeParametros {sizeof...(paginas)};

	// não pode criar uma array com 0 elementos
	if (quantidadeDeParametros == 0) {
		return;
	}

	// expande os argumentos
	int paginasArray[quantidadeDeParametros] {paginas...};

	for (auto pagina : paginasArray) {
		std::cout << "Imprimindo página " << pagina << std::endl;
	}

}

imprimirSimples(1, 2, 5);

// ou com macros não seguras estilo C
// Objective-C tem que fazer igual

#include <iostream>
#include <cstdarg>

void imprimirSimplesMacro(const std::string titulo, ...) {

	// va_list argumentos recebe o que vir depois do parâmetro titulo
	va_list argumentos;
	va_start(argumentos, titulo);

	int pagina;
	while (true) {
		pagina = va_arg(argumentos, int);
		if (pagina == -1) {
			break;
		}
		std::cout << "Imprimindo " << pagina << std::endl;
	}

	va_end(argumentos);

}

// preciso sempre passar -1 no final como terminador
// se não dá overflow e lê pedaço de memória além do que deveria
imprimirSimplesMacro("resumo", 1, 2, 5, -1);

// argumentos de todos os tipos

#include <iostream>
#include <boost/range/irange.hpp>

/// imprimirHelper template genérico
template<typename T>
void imprimirHelper(T pagina) {
	// poderia usar a linha abaixo para descobrir o tipo de T
	// porém, melhor usar o template especializado
	// if (std::is_same<T, int>::value) { /* ... */ }  // optimizable...
	std::cout << "Imprimindo outra coisa" << std::endl;
}

/// imprimirHelper template especializado para int
template<>
void imprimirHelper<int>(int pagina) {
	std::cout << "Imprimindo página " << pagina << std::endl;
}

/// imprimirHelper template especializado para boost::irange
template<>
void imprimirHelper<boost::irange>(boost::irange faixa) {
	std::cout << "Imprimindo página " << std::begin(faixa) << " até " << std::end(faixa) << std::endl;
}


// foward declaration imprimir template?? Não estou certo da função disso :/
void imprimir(std::string titulo) {}

// implementação imprimir template
template<typename Tipo, typename... Tipos>
void imprimir(std::string titulo, Tipo pagina, Tipos... paginas) {
	// executa o helper especializado e chama recursivamente a si mesmo
	imprimirHelper(pagina);
	imprimir(titulo, paginas...);
}

imprimir<int, boost::irange, std::string>("resumo", 1, boost::irange(2, 5), "capítulo 2");

A forma em JavaScript é bastante parecida com a maioria. Note que não existe nenhum auxilio nativo para criar ranges, como nos outros exemplos. Optei por usar um objeto simples apenas para demonstrar a sintaxe.

funções variádicas em JavaScript com operador rest operator

'use strict';

// funções variádicas em JavaScript com operador rest

// argumentos do mesmo tipo

function imprimirSimples(titulo, ...paginas) {
	for (let pagina of paginas) {
		console.log(`Imprimindo página ${pagina}`);
	}
}

imprimirSimples("resumo", 1, 2, 5);

// argumentos de todos os tipos

function imprimir(titulo, ...valores) {
	for (let valor of valores) {
		if (Number.isInteger(valor)) {
			console.log(`Imprimindo página ${valor}`);
		} else if ((valor.begin || valor.begin === 0)
			&& valor.end
			) {
			console.log(`Imprimindo páginas ${valor.begin} até ${valor.end}`);
		} else {
			console.log('Imprimindo outra coisa');
		}
	}
}

imprimir("resumo", 1, {begin: 2, end: 5}, "capítulo 2");

O operador rest também é útil quando utilizado em conjunto com template strings, permitindo recursos mais avançados na manipulação do template.

misturando funções, template strings e arrays

'use strict';

function template(strings, ...values) {

	// as strings são recebidas nornalmente através do primeiro argumento
	strings[0]; // a soma de
	strings[1]; // com
	strings[2]; // resulta em
	strings[3]; // .

	// os valores são agrupados numa array através do operador rest
	values[0]; // 1
	values[1]; // 2
	values[2]; // 3, que é a soma de valor1 e valor2

	// é possível retornar qualquer coisa, string, função, objeto, etc.

}

const valor1 = 1;
const valor2 = 2;

template+ `a soma de ${valor1} com ${valor2} resulta em ${valor1 + valor2}.`;

Como declarar objetos Se vc já achou as variáveis confusas...

Foram feitas várias tentativas até chegarmos a sintaxe atual para declararmos objetos. Espero que não adicionem nenhuma nova sinceramente. Se vc precisar, incluo também as antigas como referência.

Object

Já estivemos utilizando o objeto console, que o navegador nos fornece. Além disso, os tipos de variáveis que vimos também são objetos, pois conseguimos chamar métodos deles como toFixed ou filter. Ou seja, estivemos escrevendo JavaScript orientado à objeto desde o começo! Mais um motivo pra não usar alert.

código

console.log('console é um objeto. log é um método');

JavaScript é bastante diferente de outras linguagens quanto à criação de objetos novos. Vamos nos ater ao básico por enquanto. Declaramos um objeto usando {}. Sim, um objeto literal. Não é necessário criarmos uma definição de objeto de antemão (como uma class ou struct), criamos o objeto diretamente.

Acessamos as propriedades e métodos usando ponto, como fazemos com console. Por conveniência, também existe a possibilidade de acessá-las usando a notação de Array. Esta notação é útil quando queremos passar o nome do campo dinamicamente.

Propriedades pode ter atributosr writable, enumerable e configurable, indicando que podem ser escritas, que são mostradas em laços for in e seus atributos podem ser modificados ou não, respectivamente.

Da maneira abaixo, todas as propriedades e métodos são públicos. Se você mal pode esperar pra saber como definir campos privados, fique à vontade para ir e voltar.

declaração de objetos com propriedades e métodos públicos

'use strict';

let objetoVazio = {};

const retangulo = {

	// define os métodos do objeto
	area() { // nas versões ES5- tinha que escrever area: function() {
		return this.largura * this.altura;
	},

	// define as propriedades e valores padrão
	largura: 1,
	altura: 1

};

// o objeto já está construído
// já podemos chamar seus métodos e especificar valores para suas propriedades
// todas as propriedades são writable, configurable e enumerable

retangulo.largura = 2;
console.log(retangulo.altura); // mostra 1
console.log(retangulo['altura']); // notação de Array, mostra 1
let propriedade = 'largura';
console.log(retangulo[propriedade]); // notação de Array, mostra 2
console.log(retangulo.area()); // mostra 2

{}.hasOwnProperty('prototype'); // retorna true

Existe também uma sintaxe mais parecida com a de outras linguagens, utilizando a palavra-chave class, para facilitar a criação de objetos similares. Notem que é uma tentativa de mostrar um ambiente mais familiar a programadores de outras linguagens, uma vez que JavaScript não possui classes de verdade, seu modelo de herança é baseado em protótipos, onde um objeto herda diretamente de outro objeto. Explico mais detalhadamente os problemas que isso pode trazer na parte de OOP.

Note novamente que no exemplo abaixo os campos e métodos continuam sendo todos públicos.

declaração de objetos com getters e setters

'use strict';

class Retangulo {

	// construtor

	constructor(largura, altura) {

		// define as propriedades e seus valores iniciais
		// defineProperties nos dá controle sobre os atributos writable, configurable e enumerable
		// se não especificados, o padrão é false
		Object.defineProperties(this, {
			_largura: {value: largura, writable: true},
			_altura: {value: altura, writable: true}
		});

		Object.seal(this); // mais sobre isso na parte de OOP

	}

	// métodos
	// diferente da sintaxe de objeto, os métodos aqui não são enumerable por padrão

	area() {
		return this.largura * this.altura;
	}

	// getters e setters

	get largura() {
		return this._largura;
	}

	set largura(largura) {
		this._largura = largura;
	}

	get altura() {
		return this._altura;
	}

	set altura(largura) {
		this._altura = altura;
	}

}

// cria um objeto que herda de Retangulo
const retangulo = new Retangulo(10, 20);
console.log(retangulo.largura); // mostra 10
console.log(retangulo.area()); // mostra 200
console.log(retangulo['largura']); // mostra 10

Objetos antigos

Como mencionei, JavaScript teve outras sintaxes para criar objetos, que ainda são suportadas até hoje, porém não mais recomendadas. A alternativa vigente antes da sintaxe de classes utilizava o método Object.create. Esta maneira de criar objetos expunha o método de herança que JavaScript usa, baseado em protótipos.

declaração de objetos com getters e setters

'use strict';

// NÃO COPIE!!! SINTAXE ANTIGA!!!!

// cria um objeto que herda de Object para servir como base
const retangulo = Object.create(Object.prototype, {

	// método qualquer usado para inicializar o objeto
	// a prática comum é chamà-lo de init
	// é quase como um construtor, mas esta sintaxe não necessita de construtores
	// o objeto já é usável antes de chamar init
	init: {
		value: function(largura, altura) {
			this.largura = largura;
			this.altura = altura;
		},
		writable: false
	},

	// NÃO COPIE!!! SINTAXE ANTIGA!!!!

	// define os métodos
	area: {
		value: function() {
			return this.largura * this.altura;
		},
		writable: false
	},

	// NÃO COPIE!!! SINTAXE ANTIGA!!!!

	// define os getters e setters

	largura: {
		get: function() {
			return this._largura;
		},
		set: function(largura) {
			this._largura = largura;
		}
	},

	// NÃO COPIE!!! SINTAXE ANTIGA!!!!

	altura: {
		get: function() {
			return this._altura;
		},
		set: function(altura) {
			this._altura = altura;
		}
	},

	// NÃO COPIE!!! SINTAXE ANTIGA!!!!

	// define as propriedades

	largura: {
		value: 0,
		writable: true
	},

	altura: {
		value: 0,
		writable: true
	},

});

// NÃO COPIE!!! SINTAXE ANTIGA!!!!

// cria uma instância de retangulo
const meuRetangulo = Object.create(retangulo);
meuRetangulo.init(10, 20);
Object.seal(meuRetangulo);

// cria outra instância de retangulo
const outroRetangulo = Object.create(retangulo);
outroRetangulo.init(15, 17);
Object.seal(outroRetangulo);

console.log(outroRetangulo.largura); // mostra 15
console.log(outroRetangulo.area()); // mostra 255
console.log(outroRetangulo['largura']); // mostra 17

Existe ainda outra sintaxe para criar objetos, que foi a primeira disponibilizada. Ela utiliza funções e a palavra-chave new. Assim como com class, foi uma tentativa de não causar estranheza aos programadores vindos de outras linguagens, simulando o comportamento que eles já estavam acostumados nas linguagens baseadas em classes. Novamente, isso escondia o verdadeiro funcionamento dos objetos em JavaScript. Douglas Crockford, que é um guru e um dos redatores da linguagem não recomenda a utilização desta sintaxe antiga. Vou mostrar apenas a título de curiosidade uma das variantes da sintaxe antiga.

Outra desvantagem deste método é ter que se lembrar de declarar os métodos no protótipo do objeto, sendo que as propriedades são declaradas diretamente dentro do construtor. As sintaxes mais novas são mais uniformes quanto à isso.

declaração de objetos com sintaxe antiga, não use!

'use strict';

// NÃO COPIE!!! SINTAXE ANTIGA!!!!

const objetoVazio = new Object();

// define o objeto base
function Retangulo(largura, altura) {
	// define as propriedades e valores padrão
	this.largura = largura;
	this.altura = altura;
}

// NÃO COPIE!!! SINTAXE ANTIGA!!!!

// define os métodos do objeto
Retangulo.prototype.area = function() {
	return this.largura * this.altura;
};

// NÃO COPIE!!! SINTAXE ANTIGA!!!!

// cria uma instância de retangulo
const meuRetangulo = new Retangulo(10, 20);

// cria outra instância de retangulo
const outroRetangulo = new Retangulo(15, 17);

console.log(outroRetangulo.largura); // mostra 15
console.log(outroRetangulo.area()); // mostra 255
console.log(outroRetangulo['largura']); // mostra 17

Os muitos laços for

Além do laço for clássico presente em outras linguagens, existem duas outras formas de iteração rápida pelas propriedades de um objeto. A mais recente delas, for of funciona de maneira similar ao foreach ou for : de outras linguagens. Ele irá iterar pelos índices de uma Array ou pelas propriedades expostas por um objeto que implemente [Symbol.iterator].Estas são as duas maneiras recomendadas de realizar este tipo de iteração.

tipos de laços for

'use strict';

const lala = [1, 2, 486];

// nova, também suporta iterators
for (let propriedade of lala) {
	// 1, 2, 486
}

// clássica manual
for (let i = 0; i < lala.length; i++) {
	// 1, 2, 486
}

A outra forma, intermediária, possui comportamento mais complexo e inconsistente, e portanto não se tornou muito popular. Ela itera não só pelos índices da Array, mas também pelas propriedades dela e de seus protótipos. Para evitar este comportamento indesejado, é necessário incluir uma verificacão extra dentro do laço. Porém, a ordem de iteração não é garantida, e não há meios de reparar isso.

tipos de laços for

'use strict';

const lala = [1, 2, 486];

// NÃO COPIE!!! SINTAXE ANTIGA!!!

// zoada
for (let propriedade in lala) {
	if (lala.hasOwnProperty(propriedade)) {
		// qualquer ordem é válida segundo a especificação
	}
}

As arrays contam ainda com mais uma opção, que é o método forEach, e que pode estar presente mesmo em navegadores que não suportam for of. A desvantagem dessa abordagem é que a iteração não pode ser interrompida pela instrução break.

tipos de laços for

'use strict';

const lala = [1, 2, 486];

lala.forEach((currentValue, index, array) => {
	// 1, 2, 486
	// sem a possibilidade de usar break :(
});

Ado, a ado, cada um no seu quadrado

Quando eu escrevi esse título originalmente, era começo de 2014 e essa música era menos trash, mas não muito :P

Escopo das variáveis

Lá no começo disse que haviam duas maneiras de declarar uma variável, a mais recente, usando let e a mais antiga usando var. Agora é o momento de vermos suas diferenças, as pegadinhas e boas práticas.

Dependendo da palavra-chave que você utiliza, a variável obedecerá regras de escopo diferentes. Não conheço nenhuma outra linguagem que tenha essa característica. O motivo disto ter sido feito desta maneira em JavaScript é que a introdução de let foi um puxadinho feito depois na linguagem, para não quebrar a compatibilidade com códigos já existentes que utilizavam var.

Primeiro, o comportamento de let.

escopo de variáveis let

'use strict';

let todosVe = '\o/';
let i = 0;

for (i = 0; i < 5; i++) {
	//
}

console.log(i); // 5

for (let dentroDoFor = 0; dentroDoFor < 7; dentroDoFor++) {
	//
}

console.log(dentroDoFor); // ReferenceError, dentroDoFor não está definido

if (i > 0) {
	let dentroDoIf = true;
}

console.log(dentroDoIf); // ReferenceError, dentroDoIf não está definido

Nada de muito extraordinário aqui certo? O comportamento é similar ao de outras linguagens. Mas let nem sempre esteve disponível nos navegadores, então precisamos ver a alternativa legada.

Para var, o único delimitador de escopo é a função. Variáveis fora de funções estão no espaço global, e variáveis declaradas em blocos script ou arquivos diferentes compartilham o mesmo espaço global. Isso foi feito assim porque o programador original da linguagem não tinha tempo de fazer um linker.

escopo de variáveis var

'use strict';

var todosVe = '\o/';
var i = 0;

for (i = 0; i < 5; i++) {
	//
}

console.log(i); // 5

for (var dentroDoFor = 0; dentroDoFor < 7; dentroDoFor++) {
	//
}

console.log(dentroDoFor); // 7. Surpresa. dentroDoFor foi declarado no espaço global.

if (i > 0) {
	var dentroDoIf = true;
}

console.log(dentroDoIf); // true. Mais surpresa.

Este é um dos motivos pelos quais declaramos todas as varíaveis no topo do arquivo ou no começo da função. De qualquer maneira, vamos ver como resolver parte desse problema quando abordarmos closures.

Variable Hoisting

Outro motivo para se declarar as variáveis no começo do escopo é uma característica do compilador JavaScript, chamada variable hoisting.

O que isso significa é que, apenas para variáveis declaradas com var,independente de onde você declarar sua variável, o compilador vai mover a declaração de forma transparente para o topo do escopo e deixá-la com valor undefined. A linha onde um valor é atribuído à variável não é afetada. Isso pode causar problemas se o código depender de uma verificação da existência da variável. Isso não ocorre para variáveis declaradas com let.

variable hoisting

'use strict';

// o que vc escreveu

console.log(estranha); // mostra undefined e continua normalmente
var estranha = 11;
console.log(estranha); // mostra 11

Ou seja, o que o compilador vai fazer de modo transparente é:

variable hoisting explicado

'use strict';

// o que o compilador vê

var estranha; // o compilador moveu a declaracão que usa var (let não é afetado), para o topo do arquivo
console.log(estranha);
estranha = 11; // e manteve a atribução do valor na mesma linha
console.log(estranha);

Módulos simples

Se quisermos evitar poluir o espaço global, temos que usar uma função anônima (lambda) autoexecutável. Projetos de aplicativos windows 8 escritos em JavaScript já utilizam por padrão esse procedimento.

Vamos ver primeiramente um exemplo em que nada entra nem sai do escopo, pois é mais simples de entender.

função anônima autoexecutável definindo escopo

(() => {
	var segredo = '******';
})();
console.log(segredo); // lança exceção

// ou

(function(){
	var segredo = '******';
})();
console.log(segredo); // undefined em navegadores mais antigos ou lança exceção se modo estrito ou em navegadores novos

Para memorizar isso eu geralmente escrevo assim:

Declaro a função.

() => { /**/ }
// ou
function(){ /**/ }

Transformo ela em expressão como vimos lá na parte sobre funções.

( () => { /**/ } );
// ou
( function(){ /**/ } );

Executo ela.

(() => { /**/ })();
// ou
(function(){ /**/ })();

Closures

Resumidamente, uma closure é uma função mais seu contexto, isto é, as variáveis que ela consegue acessar (ou captura se você preferir) presentes no escopo em que ela foi criada. Essa definição não diz muito sobre as consequências dessa funcionalidade, então vamos desenvolver essa ideia em código em algumas etapas.

Colocando coisas dentro do escopo e type aliasing

Estamos prontos para complicar um pouquinho mais os exemplos de módulos simples acima, passando valores para dentro do escopo. É bem comum fazer isso em conjunto com jQuery. Note que esse padrão também permite que nós habilitemos o modo estrito num determinado escopo.

Mas para não no embolarmos na sintaxe necessária para isso, que quase lembra Lisp, vamos fazer antes um pequeno exercício mental antes sobre funções e nomes de parâmetros.

nomes de parâmetros

'use strict';

// a função "mostrar" não conhece os nomes das variáveis que são passadas para ela
// tudo o que ela sabe é que ela pode acessá-los genericamente chamando-os de "numero"
function mostrar(numero) {
	console.log(numero);
}

const um = 1;
const dois = 2;
const tres = 3;

// ou seja, as variáveis "um", "dois" e "tres" são referenciadas temporariamente
// como "numero" na execução da função, como consequência do funcionamento normal
// da programação que escrevemos
mostrar(um);
mostrar(dois);
mostrar(tres);

Este ocorrido da mudança de nomes possui um segundo uso menos frequente, que é o de podermos atribuir aliases (outros nomes) às nossas variáveis. De maneira genérica, temos:

nomes de parâmetros

'use strict';

function cabineTelefonica(superHomem) {
	// superHomem é o nome que damos ao parâmetro passado para esta função
	// se chamarmos esta função passando clarkKent como parâmetro
	// dentro dela podemos chamar clarkKent pelo nome de superHomem
	// referenciamos o mesmo objeto por dois nomes distintos
}

let clarkKent = '\o/';

cabineTelefonica(clarkKent);

Estamos acostumados a fazer isso frequentemente quando programamos com a sintaxe acima. Outra maneira seria usando a sintaxe de flecha.

nomes de parâmetros

'use strict';

const cabineTelefonica = (superHomem) => {
	// mesma coisa que o exemplo acima, porém usando a sintaxe de flecha
};

let clarkKent = '\o/';

cabineTelefonica(clarkKent);

E finalmente, usando uma função anônima autoexecutável.

nomes de parâmetros

'use strict';

let clarkKent = '\o/';

((superHomem) => {
	// mesma coisa que os exemplos anteriores
	// chamamos esta função passando clarkKent como parâmetro
	// e chamamos esse parâmetro de superHomem enquanto estivermos dentro do escopo da função
})(clarkKent);

Vejamos então o exemplo completo envolvendo jQuery.