Introdução

JavaScript é atualmente uma das linguagens de programação que mais tem crescido recentemente, e é fácil saber o porquê. Ele é a linguagem utilizada por toda a internet para tornar a web dinâmica e interativa. Além disso, atualmente ela vem sendo aplicada em outras áreas de desenvolvimento como servidores, web design e aplicativos mobile.

Origem

Na década de 90 o navegador web mais popular era o Netscape, mas essa ainda é a época em que as páginas web eram estáticas, sem nenhum tipo de interação.

Em 1995, para tornar a web mais dinâmica e interativa, Netscape empregou a Brendan Eich o trabalho de desenvolver uma linguagem de scripting para o navegador baseada na popular linguagem Java. Originalmente essa linguagem fora chamada Mocha, para ser renomeada para LiveScript e atualmente JavaScript.

Standards

Em 1996 Microsoft lançou o Internet Explorer 3 com sua própria implementação do JavaScript, chamada JScript, em uma tentativa de competir com o Netscape. Isso gerou um dilema porque as duas implementações da linguagem eram incompatíveis e isso causaria problemas no futuro caso elas não fossem normalizadas.

Por causa disso Netscape entrou em contato com Ecma International para criar um padrão da linguagem. Em 1997 foi criado o ECMAScript pelo padrão ECMA-262 cujas especificações poderiam ser usadas por diferentes navegadores para universalizar a linguagem. Desde então a Mozilla Foundation (sucessora do Netscape) e Ecma International vêm atualizando a especificação.

Introdução

JavaScript é atualmente uma das linguagens de programação que mais tem crescido recentemente, e é fácil saber o porquê. Ele é a linguagem utilizada por toda a internet para tornar a web dinâmica e interativa. Além disso, atualmente ela vem sendo aplicada em outras áreas de desenvolvimento como servidores, web design e aplicativos mobile.

Origem

Na década de 90 o navegador web mais popular era o Netscape, mas essa ainda é a época em que as páginas web eram estáticas, sem nenhum tipo de interação.

Em 1995, para tornar a web mais dinâmica e interativa, Netscape empregou a Brendan Eich o trabalho de desenvolver uma linguagem de scripting para o navegador baseada na popular linguagem Java. Originalmente essa linguagem fora chamada Mocha, para ser renomeada para LiveScript e atualmente JavaScript.

Standards

Em 1996 Microsoft lançou o Internet Explorer 3 com sua própria implementação do JavaScript, chamada JScript, em uma tentativa de competir com o Netscape. Isso gerou um dilema porque as duas implementações da linguagem eram incompatíveis e isso causaria problemas no futuro caso elas não fossem normalizadas.

Por causa disso Netscape entrou em contato com Ecma International para criar um padrão da linguagem. Em 1997 foi criado o ECMAScript pelo padrão ECMA-262 cujas especificações poderiam ser usadas por diferentes navegadores para universalizar a linguagem. Desde então a Mozilla Foundation (sucessora do Netscape) e Ecma International vêm atualizando a especificação.

Tipos

JavaScript tem uma tipagem dinâmica, ou seja, não é necessário declarar o tipo de uma variável antes de atribuí-la. Além disso uma variável já declarada e com valor atribuído pode ser atribuido outro valor de outro tipo.

De acordo com a especificação ECMAScript 2022 existem 8 tipos primitivos:

Referências

• Ecma International (ECMA-262)
  • 6.1 ECMAScript Language Types

Comentários

Comentários são utilizados para adicionar uma observação em um código de tal forma a não impedir ou atrapalhar a execução de tal código. Ao chegar em comentário o processador de JavaScript simplesmente o ignorará e continuará seguindo o código. Em JavaScript existem dois tipos de comentários: De linha e de bloco.

Comentários de linha ignoram apenas uma linha por vez e servem para adicionar uma curta observação em um trecho de código. Esse tipo de comentário utiliza duas barras (//) para iniciar o comentário.

// A variável nome recebe o valor "João"
// A variável idade recebe o valor 18
var nome = "João";
var idade = 18;

Comentários de bloco tem um início e fim bem definidos, sendo que tudo entre esses dois pontos será ignorado, e servem para adicionar uma observação mais envolvida e longa em um trecho de código. Esse tipo de comentário utiliza uma barra e asterisco (/*) para iniciar o comentário e um asterisco e barra (*/) para finalizá-lo.

/*
A velocidade tem 3 níveis:
1 - Devagar
2 - Médio
3 - Rápido
*/
var velocidade = 3;

Referências

• Ecma International (ECMA-262)
  • 12.4 Comments

Variáveis

JavaScript é uma linguagem tipada dinamicamente, ou seja, embora haja as variáveis terem um tipo de dados associado a seu valor, as variáveis em si podem guardar qualquer tipo sem a necessidade de especificar um tipo àquela variável.

As regras para nomear uma variável são as seguintes:

• Só pode conter letras, números ou _ e $;
• Deve começar com _, $ ou uma letra;
• Uma capitalização diferente gera uma variável diferente (sensível à capitalização)
• Letras do ISO 8859-1, como ü e è também pode ser utilizados
• Não pode ser uma palavra reservada da linguagem (var, function, if, etc)

Para se declarar uma variável pode-se utilizar a palavra-chave var e a variável pode opcionalmente ter valor atribuido na declaração ou mais à frente no código.

Exemplos de declaração de variáveis podem ser:

var _string = ":)";
var bool = true;
var $ = 0;
var Variável = null;

Exemplos de declaração de variáveis que geram um erro:

var 1lugar = "João";
var #teamseas = true;
var duas partes = 22;
var function;

Pode-se até declarar varias variáveis ao mesmo tempo com o uso da vírgula:

var nome = "João",
  sobrenome = "Silva",
  idade = "18";

É possível também declarar variáveis mas atribuir valores a elas após a declaração:

var nome; // neste momento nome tem valor undefined

nome = "João";

Referências

• Mozilla Foundation (Sintaxe e tipos)
• Ecma International (ECMA-262)
  • 12.6 Names and Keywords
  • 14.3 Declarations and the Variable Statement
    • 14.3.2 Variable Statement

Funções

Em JavaScript funções são blocos de códigos que podem ser reutilizados quantas vezes quisermos para executar a mesma tarefa repetidas vezes.

Existem dois conceitos sobre funções que é necessário entender: Parâmetros e Retorno. Uma função pode receber parâmetros quando for chamada e utilizar esses valores dentro do seu corpo. Uma função também pode retornar um valor que poderá ser utilizado em nosso programa.

Como exemplo de função, vamos criar uma função que recebe um número e retorna o dobro desse número. A função terá um parâmetro n que será o número que será passado para a função e um retorno que será o dobro de n:

var numero = 3;

function dobro(n) {
  return n * 2;
}

var b = dobro(numero); // b agora é 6

É importante notar o uso de parênteses no final da função. Isso é necessário para que o JavaScript entenda que a função é um comando e não uma atribuição:

function tres() {
  return 3;
}

var a = tres(); // a agora é 3
var b = tres; // b agora é a função tres

Outra coisa a se notar é que o parametro n é apenas uma cópia da variável numero. Quando a função é chamada, o valor da variável numero não é alterado:

var numero = 3;

function quatro(n) {
  n = 4;
}

quatro(numero);

numero; // numero continua com o valor 3

Se quisermos alterar o valor de numero dentro da função, devemos acessar a variável diretamente:

var numero = 3;

function quatro() {
  numero = 4;
}

quatro();

numero; // numero agora é 4

• Ecma International (ECMA-262)
  • 15.2 Function Definitions

Console

O console JavaScript é uma ferramenta presente em todos os navegadores modernos, que permite executar comandos de forma rápida e fácil e visualizar o resultado desses comandos. Todos os códigos aqui apresentados podem ser executados no console para fins de teste.

Para acessar o console no Chrome ou no Edge basta apertar a tecla F12.

Quando se estiver utilizando o console, você tem acesso ao objeto console que é utilizado para executar comandos relacionados aos console em si.

Algumas das aplicações do objeto console são:

console.log()

Pode ser usado para exibir o valor de qualquer tipo de dado, incluindo strings, números, objetos, arrays, etc.

console.log("Hello World");
console.log(123);
console.log({ name: "João", age: 18 });
console.log([1, 2, 3, 4]);

// Resultado exibido no console:
// Hello World
// 123
// { name: 'João', age: 18 }
// [ 1, 2, 3, 4 ]

console.info(), console.warn(), console.error()

Funcionam como console.log() mas servem para exibir mensagens de informação, avisos ou erros, respectivamente. O navegador exibe essas mensagens de cores diferentes, dependendo do tipo de mensagem. Além disso é possível escolher o nível de mensagem que será exibida no menu do navegador, de forma que, por exemplo, se escolhermos o nível error, apenas mensagens de erro serão exibidas.

console.clear()

É usado para limpar completamente o console. Os comandos que foram executados anteriormente não são apagados mas apenas deixam de ser exibidos.

console.time()

É usado para medir o tempo de execução de um determinado bloco de código entre duas chamadas de console.time() e console.timeEnd().

console.time("Timer");

/* Código que demora 1 segundo ... */

console.timeEnd("Timer");

// Resultado exibido no console:
// Timer: 1000.0 ms

É possível até usar nomes diferentes para os timers, permitindo ter mais de um timer ao mesmo tempo.

console.time("Timer 1");

/* Código que demora 1 segundo ... */

console.time("Timer 2");

/* Código que demora 1 segundo ... */

console.timeEnd("Timer 1");
console.timeEnd("Timer 2");

// Resultado exibido no console:
// Timer 1: 2000.0 ms
// Timer 2: 1000.0 ms

console.table()

É usado para exibir uma tabela com os dados de um objeto.

console.table({ name: "João", age: 18 });

// Resultado:
//          +-------+
//          | Valor |
// +--------+-------+
// | name   | João  |
// +--------+-------+
// | age    | 18    |
// +--------+-------+

console.count()

É usado para contar o número de vezes que um determinado comando foi executado.

console.count("Hello World");
console.count("Hello World");
console.count("Hello World");

// Resultado:
// Hello World: 1
// Hello World: 2
// Hello World: 3

Referências

• Mozilla Foundation (Console)

Condicional If

O condicional if é usado para desviar o fluxo do programa dependendo de uma condição. Isso permite que o programa execute uma parte do código, caso a condição seja verdadeira, e outra parte do código, caso a condição seja falsa.

A forma mais simples do condicional if contém apenas um bloco de código:

if (condição) {
  // código que será executado caso a condição seja verdadeira
}

O condicional ainda pode vir acompanhado da palavra-chave else e de um bloco de código que será executado caso a condição seja falsa:

if (condição) {
  // código que será executado caso a condição seja verdadeira
} else {
  // código que será executado caso a condição seja falsa
}

É possível ainda conectar dois condicionais para criar uma estrutura de decisão mais complexa:

if (condição1) {
  // código que será executado caso a condição1 seja verdadeira
} else if (condição2) {
  // código que será executado caso a condição1 seja falsa e condição2 seja verdadeira
} else {
  // código que será executado caso as duas condições sejam falsas
}

Exemplos

var debug = true;

if (debug) {
  console.log("Debugando...");
}

// Resultado: "Debugando..."

var grande = true;
var pesado = true;

if (grande && pesado) {
  console.log("Grande e pesado!");
} else if (grande) {
  console.log("Grande!");
} else if (pesado) {
  console.log("Pesado!");
} else {
  console.log("Não é grande nem pesado!");
}

// Resultado: "Grande e pesado!"

function compararValores(valor1, valor2) {
  if (valor1 > valor2) {
    return "Maior";
  } else if (valor1 < valor2) {
    return "Menor";
  } else {
    return "Iguais";
  }
}

compararValores(10, 20);
// Resultado: "Menor"

compararValores(20, 10);
// Resultado: "Maior"

compararValores(10, 10);
// Resultado: "Iguais"

Referências

• Mozilla Foundation (if...else)
• Ecma International (ECMA-262)
  • 14.6 The if Statement

Objetos

JavaScript é uma linguagem de programação que suporta o paradigma de programação orientada a objetos, portanto é possível criar objetos e manipular seus atributos e métodos. Um objeto simples é representado por uma série de chaves e valores, onde o nome da chave é o nome do atributo e o valor é o valor do atributo. É possível criar objetos com atributos de qualquer tipo, inclusive de arrays, outros objetos e funções (chamadas de métodos).

Para criar um objeto pode-se usar o comando new Object() ou ainda {} e usar : para criar o objeto com atributos já definidos.

var objeto1 = new Object();
var objeto2 = {};
var objeto3 = {
  atributo1: "valor1",
  atributo2: "valor2",
};

Acessando Atributos

É possível adicionar atributos a um objeto usando o operador . e o nome do atributo. Usando o mesmo operador é possível alterar o valor do atributo. As regras para o nome dos atributos são as mesmas que para os nomes de variáveis.

var carro = {};

carro.cor = "vermelho";
carro.portas = 4;
carro.ligado = true;
carro.buzinar = function () {
  console.log("Beep!");
};

console.log(carro.cor); // vermelho
console.log(carro.portas); // 4
console.log(carro.ligado); // true
carro.buzinar(); // Beep!

Outra maneira de acessar os atributos de um objeto é usando o operador [] e o nome do atributo na forma de uma string. Por causa disso também é possível associar qualquer tipo de dados que possa ser convertido em string a um atributo. Entretanto, vale notar que o valor que realmente será armazenado no objeto será o valor convertido para string.

var carro = {
  cor: "vermelho",
  portas: 4,
  ligado: true,
};

carro["cor"] = "azul";

console.log(carro.cor); // azul

carro[0] = "valor";

console.log(carro[0]); // valor
console.log(carro["0"]); // valor

Para deletar um atributo de um objeto é possível usar o operador delete e o nome do atributo.

var carro = {
  cor: "vermelho",
  portas: 4,
  ligado: true,
};

console.log(carro.cor); // vermelho

delete carro.cor;

console.log(carro.cor); // undefined

Comparação entre Objetos

Objetos são únicos e dessa forma uma comparação entre objetos só será verdadeira se eles forem o mesmo objeto, mesmo que tenham os mesmos atributos e valores. Assim uma atribuição de variável para outra variável que guarda um objeto é considerada uma atribuição de referência.

var carro1 = {
  cor: "vermelho",
  portas: 4,
  ligado: true,
};

var carro2 = {
  cor: "vermelho",
  portas: 4,
  ligado: true,
};

var carro3 = carro1;

console.log(carro1 == carro2); // false
console.log(carro1 == carro3); // true

Funções Construtoras

Se quisermos utilizar um mesmo modelo de objeto para criar vários objetos similares é possível usar funções construtoras que retornam um objeto com os atributos definidos e do tipo definido pela função construtora.

Quando utilizamos uma função construtora, é preciso utilizar a palavra-chave this para definir os atributos do objeto e a palavra-chave new para criar o objeto.

É muito importante perceber que a função construtora não é uma classe, apesar de funcionar de maneira semelhante.

// É de costume que o nome da função construtora comece com letra maiúscula
function Carro(cor, portas, ligado) {
  this.cor = cor;
  this.portas = portas;
  this.ligado = ligado;
  this.buzinar = function () {
    console.log("Beep!");
  };
}

var carro1 = new Carro("vermelho", 4, true);
var carro2 = new Carro("azul", 2, false);

console.log(carro1); // Carro { cor: 'vermelho', portas: 4, ligado: true, buzinar: [Function] }
console.log(carro2); // Carro { cor: 'azul', portas: 2, ligado: false, buzinar: [Function] }

Referências

• Mozilla Foundation (Trabalhando com objetos)
• Ecma International (ECMA-262)
  • 20.1 Object Objects

Funções Arrow

Funções arrow foram introduzidas em ES6, para ser uma maneira mais simples de criar funções com poucos parâmetros, lógica simples e que retornam um valor. Por causa disso elas são ideais para quando se precisa de uma função de callback.

O exemplo mais simples de uma função arrow é:

var soma = (a, b) => {
  return a + b;
};

soma(1, 2);
// Resultado: 3

Se a função possuir apenas um parâmetro, os parênteses podem ser omitidos:

var quadrado = (a) => {
  return a * a;
};

quadrado(2);
// Resultado: 4

Se a função for composta apenas do retorno, sem nenhuma operação adicional, pode-se omitir as chaves e a palavra return:

var quadrado = (a) => a * a;

quadrado(5);
// Resultado: 25

Outros Exemplos

// Funções simples
var maximo = (a, b) => (a > b ? a : b);

// Funções sem parâmetros
setTimeout(() => console.log("Hello World"), 1000);

// Callbacks
[1, 2, 3, 4, 5].reduce((total, valorAtual) => total + valorAtual);

Referências

• Mozilla Foundation (Arrow Functions)
• Ecma International (ECMA-262)
  • 15.3 Arrow Function Definitions

Arrays

Em JavaScript os arrays são estruturas de dados do tipo lista que armazenam vários valores em uma única variável. Os arrays não têm um tamanho fixo, assim o número de elementos que podem ser armazenados é dinâmico. Além disso os arrays podem armazenar qualquer tipo de dado, inclusive armazenar outros arrays e valores de tipos diferentes ao mesmo tempo.

Para criar um array vazio em JavaScript basta declarar uma variável com o valor igual a []. Podemos até preenchê-lo com valores iniciais usando a vírgula para separar cada item. Eis um exemplo:

// Cria um array vazio
var array1 = [];

// Cria um array com valores iniciais
var array2 = [1, "string", false];

Para acessar os elementos de um array basta usar o índice do elemento (isso serve para tanto escrita e leitura). O índice começa em 0 e vai até o tamanho do array menos 1. Assim se quisermos acessar o primeiro elemento de um array basta usarmos o índice 0, se quisermos acessar o segundo elemento basta usar o índice 1 e assim por diante. A sintaxe para acessar um valor em um array é a seguinte:

var array = [1, 2, 3];

console.log(array[0]); // Resultado: 1
console.log(array[1]); // Resultado: 2
console.log(array[2]); // Resultado: 3

// Altera o valor do primeiro elemento do array
array[0] = "string";

console.log(array[0]); // Resultado: "string"
console.log(array[1]); // Resultado: 2
console.log(array[2]); // Resultado: 3

Se quisermos acessar o comprimento de um array basta acessar a propriedade length do array. Essa propriedade pode ser sobrescrita, mas não é recomendado. Caso a propriedade length sobrescrita for maior que o comprimento do array, o array será preenchido com espaços vazios. Caso a propriedade length sobrescrita for menor que o comprimento do array, os elementos a mais serão removidos.

var array = [1, 2, 3];

console.log(array.length); // Resultado: 3

array.length = 5;

console.log(array); // Resultado: [1, 2, 3, , ]

array.length = 2;

console.log(array); // Resultado: [1, 2]

Métodos Comuns

push()

Adiciona um ou mais elementos no final do array.

var array = [1, 2, 3];

array.push(4, 5);

console.log(array); // Resultado: [1, 2, 3, 4, 5]

pop()

Remove o último elemento do array, retornando o valor removido.

var array = [1, 2, 3];

var ultimo = array.pop();

console.log(array); // Resultado: [1, 2]
console.log(ultimo); // Resultado: 3

shift()

Remove o primeiro elemento do array, retornando o valor removido.

var array = [1, 2, 3];

var primeiro = array.shift();

console.log(array); // Resultado: [2, 3]
console.log(primeiro); // Resultado: 1

unshift()

Adiciona um elemento no início do array.

var array = [1, 2, 3];

array.unshift(4, 5);

console.log(array); // Resultado: [4, 5, 1, 2, 3]

splice()

Remove ou adiciona em qualquer posição do array. Pode remover 1 ou mais elementos e retorna outro array com os elementos removidos. Esse método altera o array original.

O primeiro número passado à função é a posição do elemento que será removido. O segundo número passado é o número de elementos que serão removidos. Se não for passado um segundo número, todos os elementos a partir da posição passada serão removidos. Parâmetros adicionais são os elementos que serão adicionados no array.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(array); // Resultado: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Remove o segundo elemento
array.splice(1, 1);

console.log(array); // Resultado: [1, 3, 4, 5, 6, 7, 8, 9, 10]

// Remove o terceiro e o quarto elemento
array.splice(2, 2);

console.log(array); // Resultado: [1, 3, 6, 7, 8, 9, 10]

// Remove todos os elementos a partir do sexto elemento
array.splice(5);

console.log(array); // Resultado: [1, 3, 6, 7, 8]

// Adiciona dois elementos após o terceiro elemento
array.splice(3, 0, 11, 12);

console.log(array); // Resultado: [1, 3, 6, 11, 12, 7, 8]

slice()

Retorna um novo array com os elementos do array original. O primeiro número passado à função é a posição do primeiro elemento que será retornado. O segundo número passado é a posição do último elemento que será retornado. Esse método não altera o array original.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(array.slice(0, 5)); // Resultado: [1, 2, 3, 4, 5]
console.log(array.slice(5)); // Resultado: [6, 7, 8, 9, 10]

indexOf()

Encontra o índice do primeiro elemento do array que é igual ao valor passado.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(array.indexOf(5)); // Resultado: 4

sort()

Ordena os elementos do array usando a função de comparação passada como parâmetro. A função de comparação deve conter dois parâmetros e retornar um número negativo, zero ou positivo dependendo do que o primeiro parâmetro seja menor, igual ou maior que o segundo parâmetro, respectivamente.

var array = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

// Ordenação crescente
array.sort((a, b) => a - b);

console.log(array); // Resultado: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

forEach()

Executa uma função de callback para cada elemento do array. A função opcionalmente pode ter como parâmetro o elemento atual, o índice do elemento e o próprio array.

var array = [1, 2, 3];

array.forEach((elemento, indice, array) => {
  console.log(elemento); // Resultado: 1, 2, 3
  console.log(indice); // Resultado: 0, 1, 2
  console.log(array); // Resultado: [1, 2, 3], [1, 2, 3], [1, 2, 3]
});

Referências

• Mozilla Foundation (Array)
• Ecma International (ECMA-262)
  • 23.1 Array Objects

Arrays Multidimensionais

Um array pode conter qualquer tipo de dados, inclusive outros arrays. Assim é possível criar arrays multidimensionais, onde cada elemento do array pode ser um array. Nesse caso para acessar qualquer elemento dessa estrutura é necessário usar um índice para cada dimensão do array multidimensional. Ná prática a maioria dos arrays multidimensionais contém apenas 2 dimensões, sendo necessário usar apenas 2 índices para acessar cada elemento.

Um exemplo utilizando um array que guarda o tabuleiro do jogo da velha:

var tabuleiro = [
  [" ", " ", " "],
  [" ", " ", " "],
  [" ", " ", " "],
];

console.table(tabuleiro);
//     +---+---+---+
//     | 0 | 1 | 2 |
// +---+---+---+---+
// | 0 |   |   |   |
// +---+---+---+---+
// | 1 |   |   |   |
// +---+---+---+---+
// | 2 |   |   |   |
// +---+---+---+---+

tabuleiro[0][0] = "X";

console.table(tabuleiro);
//     +---+---+---+
//     | 0 | 1 | 2 |
// +---+---+---+---+
// | 0 | X |   |   |
// +---+---+---+---+
// | 1 |   |   |   |
// +---+---+---+---+
// | 2 |   |   |   |
// +---+---+---+---+

tabuleiro[1][1] = "O";

console.table(tabuleiro);
//     +---+---+---+
//     | 0 | 1 | 2 |
// +---+---+---+---+
// | 0 | X |   |   |
// +---+---+---+---+
// | 1 |   | O |   |
// +---+---+---+---+
// | 2 |   |   |   |
// +---+---+---+---+

Se quisermos criar um array bidimensional dinamicamente usamos o for loop:

var tabuleiro = [];

for (var i = 0; i < 3; i++) {
  // Cria um array dentro do array principal
  tabuleiro[i] = [];

  for (var j = 0; j < 3; j++) {
    // Insere um elemento dentro do array criado
    tabuleiro[i][j] = " ";
  }
}

console.table(tabuleiro);
//     +---+---+---+
//     | 0 | 1 | 2 |
// +---+---+---+---+
// | 0 |   |   |   |
// +---+---+---+---+
// | 1 |   |   |   |
// +---+---+---+---+
// | 2 |   |   |   |
// +---+---+---+---+

Um dos usos mais comuns do array multidimensional é guardar dados de uma tabela de dados. Por exemplo, se quiser guardar uma lista que contenha o nome de cada jogador e sua pontuação, podemos criar um array multidimensional como:

var jogadores = [
  ["Jogador 1", 100],
  ["Jogador 2", 90],
  ["Jogador 3", 80],
  ["Jogador 4", 70],
  ["Jogador 5", 60],
];

console.table(jogadores);
//     +-----------+----+
//     | 0         | 1  |
// +---+-----------+----+
// | 0 | Jogador 1 | 100|
// +---+-----------+----+
// | 1 | Jogador 2 | 90 |
// +---+-----------+----+
// | 2 | Jogador 3 | 80 |
// +---+-----------+----+
// | 3 | Jogador 4 | 70 |
// +---+-----------+----+
// | 4 | Jogador 5 | 60 |
// +---+-----------+----+

Referências

• Mozilla Foundation (Array)
• Ecma International (ECMA-262)
  • 23.1 Array Objects

For Loop

O for loop é uma estrutura de repetição que executa um bloco de código um determinado número de vezes baseado em uma condição. Em JavaScript, o for loop é implementado com a palavra-chave for e contém 3 variantes: O for, o for in e o for of.

For

O for loop simples é composto por 4 partes:

for (inicialização; condição; expressão) {
  declaração;
}

• inicialização: é o que será executado apenas uma vez no início de cada loop.
• condição: é a condição que será avaliada para verificar se o loop deve continuar ou não.
• expressão: é o que será executado após cada iteração do loop.
• declaração: é o que será executado em cada iteração do loop.

Um exemplo de como se pode utilizar um for loop para iterar sobre um array:

var array = [1, 2, 3, 4, 5];

for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// Resultado:
// 1, 2, 3, 4, 5

O que está acontecendo aqui é que o for inicializa a variável i com o valor 0, e a condição é verificada enquanto i seja menor que o tamanho do array. No exemplo acima, o loop será executado 5 vezes, sendo que cada iteração irá imprimir o valor de array[i]. Somente quando o valor de i atingir o tamanho do array, o loop será finalizado.

No for loop todas as partes são opcionais, mas é importante saber que caso a condição não exista o loop será executado infinitamente, a menos que se utilize a palavra-chave break.

Outros exemplos:

var i = 0;

for (; i < 5; ) {
  console.log(i++); // Resultado: 0, 1, 2, 3, 4
}

for (;;) {
  console.log(1); // Resultado: 1, 1, 1, 1, 1, 1, ... (infinitamente)
}

For Of

O for of é uma forma de iterar sobre qualquer objeto iterável, como um array ou string.

var array = [1, 2, 3, 4, 5];
var string = "Hello World";
var objeto = {
  nome: "João",
  sobrenome: "Silva",
};

for (var item of array) {
  console.log(item); // Resultado: 1, 2, 3, 4, 5
}

for (var char of string) {
  console.log(char); // Resultado: H, e, l, l, o, , W, o, r, l, d
}

For In

O for in é uma forma de iterar sobre as propriedades de um objeto. A iteração é feita na ordem em que as propriedades aparecem no objeto.

var objeto = {
  nome: "João",
  sobrenome: "Silva",
};

for (var propriedade in objeto) {
  console.log(propriedade + " => " + objeto[propriedade]);
}

// Resultado:
// nome => João
// sobrenome => Silva

Referências

• Mozilla Foundation
  • for
  • for of
  • for in
• Ecma International (ECMA-262)
  • 14.7 Iteration Statements
    • 14.7.4 The for Statement
    • 14.7.5 The for-in, for-of, and for-await-of Statements

Condicional Switch

O condicional switch (também conhecido como Switch/Case) é uma estrutura de decisão que permite que você escolha entre várias opções de acordo com o valor de uma expressão. Ele contém um bloco de código dividido em vários case que são testados para igualdade com o valor da expressão.

Ele é muito parecido com o condicional if, porém, ele não possui uma condição de parada em cada case, sendo necessário o uso do comando break.

Existe também o comando default que é executado quando nenhum dos case é igual ao valor da expressão.

Exemplo da estrutura do condicional switch:

switch (valor) {
  case opcao1:
    // Executa o código quando o valor da expressão for igual a opcao1
    break;
  case opcao2:
    // Executa o código quando o valor da expressão for igual a opcao2
    break;
  default:
    // Executa o código quando nenhuma das opções for igual ao valor da expressão
    break;
}

Exemplo

var dia = "quinta";

switch (dia) {
  case "segunda":
    console.log("Hoje é segunda-feira");
    break;
  case "terça":
    console.log("Hoje é terça-feira");
    break;
  case "quarta":
    console.log("Hoje é quarta-feira");
    break;
  case "quinta":
    console.log("Hoje é quinta-feira");
    break;
  case "sexta":
    console.log("Hoje é sexta-feira");
    break;
  case "sábado":
    console.log("Hoje é sábado");
    break;
  case "domingo":
    console.log("Hoje é domingo");
    break;
  default:
    console.log("Dia inválido");
    break;
}

// Resultado: "Hoje é quinta-feira"

Uso do comando break

Quando se usa o condicional switch é importante que se use o comando break para que o código não continue executando os case restantes que não sejam iguais ao valor da expressão. Exemplo:

var dia = "quinta";

switch (dia) {
  case "segunda":
    console.log("Hoje é segunda-feira");
  case "terça":
    console.log("Hoje é terça-feira");
  case "quarta":
    console.log("Hoje é quarta-feira");
  case "quinta":
    console.log("Hoje é quinta-feira");
  case "sexta":
    console.log("Hoje é sexta-feira");
  case "sábado":
    console.log("Hoje é sábado");
  case "domingo":
    console.log("Hoje é domingo");
  default:
    console.log("Dia inválido");
}

// Resultado:
// "Hoje é quinta-feira"
// "Hoje é sexta-feira"
// "Hoje é sábado"
// "Hoje é domingo"
// "Dia inválido"

Referências

• Mozilla Foundation (switch)
• Ecma International (ECMA-262)
  • 14.12 The switch Statement

Operador Condicional (Ternário)

O operador é basicamente uma forma abreviada de uma expressão condicional, exceto que ela retorna um valor dependendo da condição. A sintaxe básica desse operador é:

resultado = condicao ? valor_se_verdadeiro : valor_se_falso;

Quando esse operador é chamado, primeiro é analisada a condição, e se o resultado for verdadeiro a expressão valor_se_verdadeiro é calculada e retornada, senão a expressão valor_se_falso é calculada e retornada.

Esse operador também é comumente chamado como ternário, pois é formado por três partes.

Exemplos

Em funções que retornam um valor dependendo de uma condição:

function maximo(a, b) {
  // Se a for maior que b, retorna a, senão retorna b
  return a > b ? a : b;
}

maximo(10, 20); // Resultado: 20
maximo(20, 10); // Resultado: 20

Em conjunto para simular um if/else if/else ou um switch/case:

var numero = 2;

var texto = numero == 1 ? "um" : numero == 2 ? "dois" : "outro";

texto;
// Resultado: "dois"

Referências

• Mozilla Foundation (Operador Condicional Ternário)
• Ecma International (ECMA-262)
  • 13.14 Conditional Operator ( ? : )

Parâmetros Rest

Os parâmetros rest são utilizados para passar um número indefinido de argumentos para uma função e poder acessar esses argumentos dentro da função. Os parâmetros rest são declarados com o operador ... e sempre devem ser o último parâmetro da função. Dentro da função o parametro rest é um array.

Exemplos de uso:

// Soma todos os números
function soma(...numeros) {
  return numeros.length ? numeros.reduce((a, b) => a + b) : 0;
}

soma(1, 2, 3, 4, 5);
// Resultado: 15

// Multiplica todos os números depois do primeiro pelo primeiro número e retorna o array
function multiplicaArray(multiplicador, ...numeros) {
  return numeros.map((numero) => numero * multiplicador);
}

multiplicaArray(2, 1, 2, 3, 4, 5);
// Resultado: [2, 4, 6, 8, 10]

Operador de Espalhamento

Os parâmetros rest podem ser utilizados em conjunto com o operador de espalhamento (...) para passar um array para uma função que aceita parâmetros rest.

// Soma todos os números
function soma(...numeros) {
  return numeros.length ? numeros.reduce((a, b) => a + b) : 0;
}

var array = [1, 2, 3, 4, 5];

soma(...array);
// Resultado: 15

Referências

• Mozilla Foundation
  • Parâmetros Rest
  • Sintaxe de Espalhamento
• Ecma International (ECMA-262)
  • 15.2 Function Definitions
  • 13.2 Primary Expression
    • 13.2.4 Array Initializer

Geradores

No JavaScript um gerador é uma função que retorna uma lista de valores, só que um por vez. Para conseguirmos o próximo valor, usamos a função next() que retorna um objeto com o atributo value que é o próximo valor e o atributo done que indica se a gerador terminou. Além disso é necessário um asterisco * na frente da função.

Quando um gerador atinge a palavra-chave yield, ele pausa e retorna o valor atual. Na próxima chamada, o gerador continua a partir do local onde parou.

Por exemplo se quisermos criar um gerador de números de 1 a 10, podemos fazer:

var contador = function* (n) {
  var numero = 1;
  while (numero <= n) {
    yield numero;
    numero++;
  }
};

var gerador = contador(10);

while (true) {
  var proximo = gerador.next();

  // Verifica se a geração terminou
  if (proximo.done) break;

  console.log(proximo.value);
}

Um gerador não necessariamente precisa ter um fim, podemos criar um gerador que vai gerar números infinitamente:

var fibonacci = function* (n) {
  var a = 1,
    b = 1;
  while (true) {
    yield a;
    var temp = a;
    a = b;
    b = temp + b;
  }
};

var gerador = fibonacci();

while (true) {
  var proximo = gerador.next();

  // Verifica se a geração terminou (nunca vai acontecer)
  if (proximo.done) break;

  console.log(proximo.value);
}

// Resultado: 1, 1, 2, 3, 5, 8, 13, ... (infinitamente)

Ainda existe a sintaxe yield* que serve para chamar um gerador de outro gerador. Por exemplo:

var contador1 = function* (n) {
  var numero = 1;
  while (numero <= n) {
    yield numero;
    numero++;
  }
};

var contador2 = function* (n) {
  var numero = 1;
  while (numero <= n) {
    yield* contador1(numero);
    numero++;
  }
};

var gerador = contador2(4);

while (true) {
  var proximo = gerador.next();

  // Verifica se a geração terminou
  if (proximo.done) break;

  console.log(proximo.value);
}

// Resultado: 1,  1, 2,  1, 2, 3,  1, 2, 3, 4

Referências

• Mozilla Foundation (Generator)
• Ecma International (ECMA-262)
  • 15.5 Generator Function Definitions