Qual a diferença entre [] e {} em JavaScript

Neste artigo você vai aprender qual a diferença entre [] e {} em JavaScript, e como utilizar estes dois tipos de dados que são bem distintos

O objeto é uma coleção de pares chave:valor, acessada pelo nome da chave (obj.nome), usada pra descrever algo com vários atributos. Detalhe que confunde muita gente: typeof retorna "object" pros dois, então pra saber se um valor é array de verdade você usa Array.isArray()

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre arrays e objetos em JavaScript!

Podemos definir estes símbolos como tipos de dados

O [] representa arrays, ou seja, uma lista que contém um conjunto de dados

Na maioria das vezes os arrays contém apenas um tipo de dados entre os seus valores, por exemplo: um array de strings ou um array de numbers

Poŕem isso não é uma regra, e podemos criar arrays com tipos de dados variados, inclusive outros arrays

Veja um exemplo:

var arr = [1, 2, 4, 6, 8, 10];
console.log(arr); // [1, 2, 4, 6, 8, 10]
console.log(typeof arr); // object

Apesar de ser um array, este tipo de dado é identificado pelo JS como um object, ou seja, objeto

Já o símbolo {} é utilizado para declarar objetos em nosso código

Estes objetos do JS se assemelham muito a arrays associativos de outras linguagem, onde possuem uma chave e um valor para cada chave

Podemos também ter objetos de um único tipo de dado, como também de diversos (situação que é mais utilizado)

Veja um exemplo na prática:

var obj = {
    nome: "Matheus",
  idade: 29,
  profissao: "Programador"
}
console.log(obj); 
console.log(typeof obj); // object

Os itens são separados por vírgula, o que é também uma característica dos arrays

E como era de se esperar o JavaScript identifica este tipo de dado como object, ou seja, um objeto

Conclusão

Neste artigo aprendemos qual a diferença entre [] e {} em javaScript

De forma resumida: os colchetes são utilizados para representar arrays na linguagem

E as chaves são utilizadas parar criar um objeto em JS

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Pra saber com certeza se um valor é array, usa Array.isArray(). É a forma mais confiável que existe, mais segura até que instanceof Array (funciona mesmo em cenários com múltiplos contextos e não dá falso positivo com null)

Regra prática: vários itens iguais numa fila? array. Um item com propriedades nomeadas? objeto

Um aviso curto de que hoje o código moderno declara variável com const por padrão (e let quando o valor vai mudar), evitando var, que ficou pra compatibilidade antiga. const e let são block-scoped e vieram no ES6.

Bloco prático que o leitor pode rodar na hora: abre o console do navegador (F12) e testa você mesmo. Faz o teste, é a maneira mais rápida de sentir na prática por que o typeof não basta e o Array.isArray resolve. (Observação de honestidade pro modo automático: NÃO afirmar ‘testamos/no nosso teste’ aqui. Pra virar primeira mão de verdade seria preciso um material próprio rodando esses comandos no console, o que não existe ainda. Por isso o bloco é escrito como convite pro leitor testar, sem alegar experiência que não temos.)