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.