Skip to main content
3 de 5
removeu 6 caracteres do conteúdo
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

No JavaScript, um objeto é um conjunto de vários pares chave/valor, separado pelos dois pontos (ou seja, chave : valor).

Sobre as chaves

A chave pode ser uma string:

// a chave é uma string (está entre aspas)
let x = { 'chave' : 'valor' }
console.log(x); // { "chave": "valor" }

Mas também pode ser usado um número, que o objeto é criado sem nenhum problema:

// a chave é um número (está sem aspas)
let x = { 1 : 'valor' }
// mas ao imprimir, vemos que a chave está entre aspas
console.log(x); // { "1": "valor" }
// isso acontece porque ela foi convertida para string
console.log(Object.keys(x)); // [ "1" ]
console.log(typeof(Object.keys(x)[0])); // string

Veja que o objeto é criado usando o número como chave (o 1 está sem aspas). Mas ao imprimir o objeto, ela aparece entre aspas ("1"). Isso acontece porque quando um número é usado como chave, ele é convertido para string. Segundo a documentação:

Any non-string object, including a number, is typecasted into a string via the toString method.

Ou seja, implicitamente é chamado o método toString() que faz a conversão do número para string.

Então na verdade, não há nada errado com as chaves do seu objeto, do ponto de vista sintático (há, talvez, um problema mais semântico/conceitual, mas já chegaremos lá).

O único ponto - que pode ser inconveniente - é o que o @Wictor Chaves mencionou: a forma de acessar estas propriedades. Enquanto uma chave string pode ser acessada como x.chave, com chaves numéricas isso não é possível (x.1 dá erro de sintaxe), e o único jeito é usar os colchetes:

let x = { 1: 'abc', 'chave': 'def' };

console.log(x.chave); // def
// console.log(x.1); // erro de sintaxe

// assim funciona
console.log(x[1]); // abc
console.log(x['1']); // abc
console.log(x['chave']); // def

Repare que chamar x[1] (com o 1 sem aspas) funciona, pois ele também é convertido para string (então é o mesmo que x['1']).


Sobre os valores

Quanto aos valores, eles podem ser de qualquer tipo: número, string, booleano, array, e até mesmo outro objeto. Ou seja, se eu tiver isso:

let x = {
  1: {
    id: 1,
    name: 'Planet Earth',
  }
};

console.log(x); // { "1": { "id": 1, "name": "Planet Earth" } }

// a chave "1" contém um objeto
console.log(x[1]); // { "id": 1, "name": "Planet Earth" }
console.log(typeof(x[1])); // object

Repare que em 1 : { "id": 1, "name" : "Planet Earth" }, o 1 é uma chave, e o seu valor é outro objeto ({ "id": 1, "name" : "Planet Earth" }).

Ou seja, o objeto x contém a chave 1, cujo valor é outro objeto (que por sua vez possui as chaves id - cujo valor é um número - e name - cujo valor é uma string).

Novamente, do ponto de vista sintático, nada de errado aqui. Só estamos definindo que uma das chaves possui como valor um outro objeto, isso é perfeitamente normal.


Sobre o seu objeto em si

O que pode ser estranho é o formato específico deste objeto, e o fato desses números parecerem redundantes. Pelo menos no exemplo dado, o valor da chave é o mesmo do respectivo id, então talvez fosse melhor simplesmente ter um array de objetos (conforme sugerido pela resposta do @emilioheinz):

// array com 3 filmes (delimitado por [ ])
const movies = [
  {
    id: 1,
    name: 'Planet Earth',
  },
  {
    id: 2,
    name: 'Selma',
  },
  {
    id: 3,
    name: 'Million Dollar Baby',
  }
];

console.log(movies);

// imprimir id e name do primeiro filme
console.log(movies[0].id); // 1
console.log(movies[0].name); // "Planet Earth"

// imprimir nome e id de todos os filmes
movies.forEach(filme => console.log(filme.id, filme.name));

Repare que os delimitadores passaram a ser [ e ], pois agora movies é um array, sendo que cada elemento é um objeto (que por sua vez, possui as chaves id e name). E como agora temos um array, não precisamos colocar as chaves, somente os valores.

A diferença é que arrays começam com o índice zero, então o primeiro elemento (o filme com id 1) será movies[0], o segundo será movies[1] e assim por diante.


Mas se você está recebendo o objeto movies no formato indicado, dá para percorrê-lo sem problemas:

const movies = {
  1: {
    id: 1,
    name: 'Planet Earth',
  },
  2: {
    id: 2,
    name: 'Selma',
  },
  3: {
    id: 3,
    name: 'Million Dollar Baby',
  }
};

// imprime a chave e o nome do respectivo filme
Object.keys(movies).forEach(chave => console.log(chave, movies[chave].name));

// ou esqueça a chave (já que é igual ao id) e use somente os valores
Object.values(movies).forEach(filme => console.log(filme.id, filme.name));


Bônus

Apenas como curiosidade, quando a documentação diz que qualquer objeto é convertido para string quando usado como chave, é qualquer objeto mesmo:

let x = {};

// usar função como chave
x[function() { }] = 'function';

// usar regex como chave
x[/.+/] = 'regex';

// a function e a regex são convertidas para string
console.log(x); // { "function() { }": "function", "/.+/": "regex" }

A única restrição é que não dá para usar a function e a regex diretamente (fazendo algo como x = { /.+/ : 'regex'}, pois dá erro de sintaxe). Mas usando os colchetes, é perfeitamente possível, por mais estranho que possa parecer. Mas não é de todo inútil, sempre tem alguém que encontra algum uso para essas coisas.

hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170