4

Eu tenho esta situação:

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

O que seriam estes números 1, 2 e 3 com dois pontos e {} depois? É um objeto, então não poderia ter estes números, pois objetos são {chaves : valor}, mas aí está assim 1:{chaves : valor}.

Alguém sabe explicar?

3 Respostas 3

5

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.

2
  • 1
    Sensacional! [+1], deu ate vontade de criar uma pergunta sobre o bônus, para você poder dissertar mais sobre o tema. Commented 16/02/2019 às 1:04
  • 1
    @WictorChaves Acho que seria uma pergunta interessante. Só não sei o quanto eu iria contribuir, já que é um recurso que eu não uso muito, mas de qualquer forma, acho válido, pois fazendo uma pesquisa rápida, não achei nenhuma pergunta específica sobre isso aqui no site...
    – hkotsubo
    Commented 16/02/2019 às 10:34
3

Oque você disse está correto Objetos são constituídos por chave: valor, porém, pense da seguinte forma:

Você tem vários objetos um dentro do outro, ou seja, movies é um objeto que tem vários objetos dentro dele (1, 2, 3), estes por sua vez, tem seus atributos, id e nome.

OBS: Não é muito indicado utilizar os números no lugar da chave.

Você poderia usar da seguinte forma, fazendo um array de objetos:

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

Assim você teria acesso a cada objeto por meio do array e portanto a cada um dos seus atributos, como exemplifico abaixo, sem contar que fica muito mais fácil de trabalhar e de entender os dados.

movies[0].id
movies[0].name

Espero ter ajudado, qualquer coisa só perguntar aqui!!

3

Falando um pouco do seu exemplo

Continua sendo um objeto, como você mesmo falou na pergunta

{chaves : valor}

Só que neste caso os números são as "chaves" e os "valores" são os objetos

Uma pequena demonstração

Veja este exemplo, o "1" é representado da mesma forma que a "chave"

var objeto = {
  chave: "valor",
  1: "outro valor"
}
console.log(objeto);

Problema

Porem temos um problema na hora de utilizar uma chave com um numeral, veja o exemplo

objeto = {
  chave: "valor",
  1: "outro valor"
}

console.log(objeto["chave"]);
console.log(objeto.chave);
console.log(objeto["1"]);
//console.log(objeto.1);

Perceba que podemos acessar a chave como um parâmetro objeto.chave, ou então com o seu índice, porem se fizermos isso com uma chave numérica será retornado um erro de sintaxe.

objeto = {
  chave: "valor",
  1: "outro valor"
}

console.log(objeto["chave"]);
console.log(objeto.chave);
console.log(objeto["1"]);
console.log(objeto.1);

"SyntaxError: missing ) after argument list"

Falando brevemente de chaves

No Objeto Literal, as chaves podem ser strings com aspas simples, duplas, sem aspas, variáveis ou Symbols. Fonte

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .