Javascript é uma linguagem que possui uma sintaxe muito simples, em outras palavras, se pode expressar uma ideia imensa com poucas linhas de código.

Depois de entender o que são e como funcionam Arrays, Objetos e Funções, pode-se fazer praticamente tudo em JavaScript.

Arrays⌗

São as listas do Javascript, ou seja, servem para armazenar múltiplos elementos.

Arrays são representados por um par de colchetes ([]).

Exemplos:

Podemos ter um array vazio:

  const umArrayVazio = []

Um array com dados:

  const umArrayComNumeros = [1, 2, 3, 4, 5]

Um array com arrays:

  const umArrayDeArrays = [[1], [], [3], []]

Em Javascript, não é necessário que todos os elementos de um array sejam do mesmo tipo, o que nos permite fazer coisas como:

  const saladaDeFrutas = [1, '2', 'tres', false, undefined, null, /expressao_regular/, {}]

Os arrays em Javascript são objetos, o que significa que eles possuem atributos e “métodos”. Ou seja, podemos fazer coisas como:

Saber o tamanho de um array:

  const arraySimples = [1, 2, 4]
  console.log(arraySimples.length) // 3

Adicionar novos elementos no final:

  const arraySimples = [1, 2, 4]
  arraySimples.push(5)
  console.log(arraySimples) // [1, 2, 4, 5]

Iterar sobre os elementos:

  const arraySimples = [1, 2, 4]

  arraySimples.forEach(function(elemento) {
    console.log(elemento)
  })

Acessando elementos de um array:⌗ 

  const arraySimples = [1, 2, 4]
  const primeiroElemento = arraySimples[0]
  console.log(primeiroElemento) // 1

Quando tentamos acessar um elemento que não existe, recebemos undefined:

  const arraySimples = [1, 2, 4]
  const vigesimoElemento = arraySimples[20]
  console.log(vigesimoElemento) // undefined

Mais informações sobre arrays.

Objetos⌗

Em Javascript, objetos nada mais são do que um mapa, ou mais simplesmente, um conjunto de pares de informações no formato chave/valor.

Objetos são representados por um par de chaves ({}).

Exemplos:

Podemos ter um objeto vazio:

  const umObjetoVazio = {}

Um objeto com campos:

  const pessoa = {
    nome: 'Silva',
    idade: 30
  }

Não existe restrição quanto ao tipo de informação que se pode guardar em um campo de um objeto.

Podemos ter, por exemplo:

Um objeto com um campo que contém outro objeto:

  const pessoaComPet = {
    nome: 'Silva',
    idade: 30,
    pet: {
      nome: 'Silvinha',
      tipo: 'gato',
      idade: 5
    }
  }

Um campo que contém um array:

  const resultadoDaLoteria = {
    nome: 'Mega Sena',
    data: '2018-05-02',
    numerosSorteados: [10, 40, 23, 35, 50, 87]
  }

Um campo que contém um array que contém outros objetos:

  const aviao = {
    fabricante: 'Boeing',
    modelo: '787-900',
    voos: [
      {
        numero: 'LA751',
        horarioDePartida: '07:30',
        origem: 'GRU',
        destino: 'SCL'
      },
      {
        numero: 'LA750',
        horarioDePartida: '16:30',
        origem: 'SCL',
        destino: 'MIA'
      }
    ]
  }

Construindo objetos com variáveis⌗

Podemos construir objetos à partir de outras variáveis, ou seja, não precisamos sempre colocar os dados de maneira estática em cada campo (como fora demonstrado até então). Podemos fazer coisas como:

const nome = 'Lopes'
const idade = 30

const pessoa = {
  nome: nome,
  idade: idade
}

Ou, podemos simplificar para o seguinte:

const pessoa = {
  nome,
  idade
}

Acessando elementos de um objeto⌗

Existem diferentes maneiras de se acessar elementos de um objeto, a mais comum é através do ponto (.). Considerando os exemplos acima:

  console.log(pessoa.nome) // 'Silva'
  console.log(pessoaComPet.pet.nome) // 'Silvinha'
  console.log(aviao.voos[0].numero) // 'LA751'

Assim como num array, também podemos usar a notação de chaves para acessar os elementos de um objeto:

  console.log(pessoa['nome']) // 'Silva'
  console.log(pessoaComPet['pet']['nome']) // 'Silvinha'

Também como nos arrays, acessar um elemento inexistente de um objeto nos retorna undefined:

  console.log(pessoa.aaaaaaa) // undefined
  console.log(pessoa['aaaaaaa']) // undefined

Funções⌗

No começo, funções são a parte mais confusa do Javascript, pois a natureza da linguagem permite que as tratemos como qualquer outro objeto, o que significa que podemos fazer coisas como:

  • Guardar uma função em uma variável
  • Enviar uma função por parâmetro
  • Ter uma função que retorna uma função
  • Ter uma função como membro de um objeto
  • Ter uma função dentro de outra função

Vamos começar pelo começo, entendendo como declarar e chamar uma função.

Declarando uma função simples:


function saudacao() {
  return "Oi"
}

Chamando a função que acabamos de declarar:


const resultado = saudacao()

console.log(resultado) // Oi

Funções com parâmetros⌗

Podemos especificar os parâmetros que desejamos que uma função receba:

function saudacao(nome) {
  return "Olá, " + nome
}

const resultado = saudacao('Silva')

console.log(resultado) // Olá, Silva

Apesar de termos especificado que a função deve receber um parâmetro, o Javascript não impedirá que a gente a chame sem passar os parâmetros:

function saudacao(nome) {
  return "Olá, " + nome
}

const resultado = saudacao()

console.log(resultado) // Olá, undefined

Para evitar problemas nestas situações, podemos definir um valor padrão para cada parâmetro. Desta forma, quando a função for chamada sem a passagem dos parâmetros, os valores que definimos serão utilizados:

function saudacao(nome = 'Anônima') {
  return "Olá, " + nome
}

const resultado = saudacao()

console.log(resultado) // Olá, Anônima

Funções em variáveis⌗

Em qualquer linguagem, é comum guardar valores em variáveis, onde tais valores podem ser números, arrays, strings, objetos, etc.

Javascript vai um pouco além ao permitir guardar também funções em variáveis (o que nem sempre vemos em outras linguagens):

const saudacao = function(nome = 'Anônima') {
  return "Olá, " + nome
}

const resultado = saudacao()

console.log(resultado) // Olá, Anônima

Isso permite usar funções como se fossem dados, ou seja, passá-las por parâmetros, retorná-las, defini-las como um campo de um objeto, etc.

Funções por parâmetro⌗

É amplamente comum enviar funções por parâmetro em JavaScript. Vejamos um exemplo:

function oi(nome) {
  return 'Oi, ' + nome
}

function tchau(nome) {
  return 'Tchau, ' + nome
}

function saudacaoCustomizada(saudacao, nome) {
  return saudacao(nome)
}

console.log(saudacaoCustomizada(oi, 'Silva')) // Oi, Silva
console.log(saudacaoCustomizada(tchau, 'Silva')) // Tchau, Silva

Callbacks⌗

Acabamos de ver como passar uma função por parâmetro para outra função, o que é extremamente útil no JavaScript e nos ajuda em diversas situações. Geralmente, chamamos estas funções passadas por parâmetros de callbacks. Este é um padrão amplamente utilizado no JavaScript, portanto, vejamos alguns exemplos de onde os callbacks são utilizados.

Percorrendo e manipulando listas sem loops⌗

Os arrays do Javascript possuem algumas funções extremamente úteis para quando necessitamos manipular listas. Tais funções possuem uma pequena curva de aprendizado, mas uma vez que se entenda como elas são utilizadas, se torna muito mais confortável manipular uma lista (ou array, já que se trata de Javascript), especialmente quando precisamos transformar elementos, filtrá-los de acordo com condições específicas, encontrar um ou mais elementos, etc.

forEach⌗

Vejamos primeiro a maneira tradicional (usando for) de percorrer um array:

const numeros = [1, 2, 3, 4]

for (let numero in numeros) {
  console.log(numero)
}

Esse loop irá percorrer o array numeros, escrevendo cada número no console.

Agora, a mesma operação usando Array.prototype.forEach:

const numeros = [1, 2, 3, 4]

numeros.forEach(function(numero) {
  console.log(numero)
})

Nesta versão, passamos uma função como callback para a função forEach. A função forEach por sua vez chamará o nosso callback, passando a ele cada item do array individualmente. Ou seja, neste caso, nosso callback será chamado quatro vezes, uma vez para cada item do array:

  • A primeira chamada enviará 1 como argumento para o callback
  • A segunda chamada enviará 2 como argumento para o callback
  • A terceira chamada enviará 3 como argumento para o callback
  • A quarta chamada enviará 4 como argumento para o callback

Mais informações sobre funções.