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));
Mas eu ainda acho meio "estranho" ter as informações neste formato, pois para mim parece melhor ter um array de filmes, em vez de um objeto cujas chaves são os ID's desses filmes. Dê uma lida nesta pergunta, que tem uma discussão interessante sobre um caso parecido com o seu.
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.