Pular para o conteúdo

JavaScript Básico #5
Objetos

Aprenda as principais características dos objetos, estruturas fundamentais da linguagem JavaScript.

Anteriormente, aprendemos como controlar a execução do fluxo do código JavaScript através de declarações. Também vimos como atribuir valores primitivos a variáveis e como manipulá-los no código. Entretanto, somente arranhamos a superfície das funcionalidades que a linguagem oferece. Nessa publicação, vamos entender melhor sobre os objetos.

Propriedades 🙝

Todo valor em JavaScript — exceto o null e o undefined — possui propriedades que podem ser acessadas por uma chave por meio do operador .. Propriedades são valores que recebem um nome no objeto. Veja o exemplo abaixo:

var str = 'javascript';
str.lenght; // → 10

var num = 3;
num.toFixed; // → function toFixed

A propriedade lenght armazena um número que representa a quantidade de caracteres que essa string possui, ou seja, o comprimento da cadeia. Já a propriedade toFixed é uma referência de uma função. Em JavaScript, funções são tratadas como valores e, por isso, podem ser atribuídas em proprieades. É comum chamar funções atribuídas em propriedades como métodos.

Objetos 🙝

Além de valores do tipo primitivo, o JavaScript possui também valores do tipo Objeto. Objetos são valores que permitem o agrupamento de outros valores identificados por meio de uma chave. Em sua essência, objetos são arranjos associativos — também chamados de mapas, tabelas de símbolos ou dicionários — onde cada chave é uma string única que apontam para outros valores.

...propriedade#1valor#1propriedade#2valor#2propriedade#3valor#3
Em JavaScript, um objeto é um conjunto de vários pares de chave-valor. Cada chave é única no objeto e aponta para somente um valor.

Declarando objetos 🙝

Em JavaScript, os objetos normalmente são declarados através do literal objeto {…}, que contém os pares de chave-valor do objeto são separadas por vírgulas. Desde o ECMAScript 2015, a última propriedade do objeto pode também ser sucedida de uma vírgula. As chaves do objeto podem ter qualquer valor, mas seguem as mesmas regras de nomes para variáveis.

var passaro = {
  nome: 'Corruíra',
  nomeCientifico: 'Troglodytes musculus',
};

Acessando as propriedades 🙝

Como qualquer outro valor, você pode acessar as propriedades de um objeto com o operador .. Veja a continuação do exemplo anterior:

console.log(passaro.nome); // → Corruíra
console.log(passaro.nomeCientifico); // → Troglodytes musculus

Você também pode atribuir valores para as propriedades da mesma forma como feito com variáveis.

passaro.nome = 'Bem-te-vi';
passaro.nomeCientifico = 'Pitangus sulphuratus';

console.log(passaro.nome); // → Bem-te-vi
console.log(passaro.nomeCientifico); // → Pitangus sulphuratus

É possível também utilizar strings como chave de objetos. Utilizar strings como chave permite a vantagem de escrever chaves que o nome não segue as regras dos identificadores de variáveis. Ou seja, você pode ter uma chave começando com número ou contendo espaço, por exemplo. No entanto, chaves definidas por strings possuem sintaxe um pouco diferente, veja abaixo:

var passaro = {
  'nome': 'Trinca-ferro',
  'nome cientifico': 'Saltator similis',
};

Há também diferença ao acessar propriedades que a chave que não segue as regras de identificadores de variáveis. Nesses casos, é necessário utilizar o operador de acesso […]. Veja os acessos do objeto do código anterior abaixo:

console.log(passaro.nome); // → Trinca-ferro
console.log(passaro['nome']); // → Trinca-ferro
console.log(passaro['nome cientifico']); // → Saltator similis

passaro.nome = 'Tico-tico';
passaro['nome cientifico'] = 'Zonotrichia capensis';

console.log(passaro.nome); // → Tico-tico
console.log(passaro['nome']); // → Zonotrichia capensis
console.log(passaro['nome cientifico']); // → Saltator similis

Adicionando propriedades 🙝

Por serem arranjos associativos, os objetos permite a inserção de propriedades após a declaração. Assim, podemos reescrever o exemplo anterior da seguinte forma:

var passaro = {}; // Objeto sem propriedades declaradas
passaro.nome = 'Sabiá-laranjeira';
passaro['nome cientifico'] = 'Turdus rufiventris';

console.log(passaro['nome']); // → Sabiá-laranjeira
console.log(passaro['nome cientifico']); // → Turdus rufiventris

Verificando a existência de uma propriedade 🙝

Quando acessamos uma propriedade que não existe no objeto, recebemos como resultado undefined. Agora, se uma propriedade existe seu valor é undefined, acessá-la também resulta em undefined. Verificar se o valor de uma propriedade é undefined não é garantia que a propriedade não exista no objeto.

Para verificar se uma propriedade existe em um objeto, utilizamos o operador in, que retorna true caso a chave a esquerda exista no objeto ou false caso contrário.

var chave = 'cor';

console.log(chave in passaro); // → false
console.log(passaro[chave]); // → undefined

passaro.cor = 'Amarelo';

console.log(chave in passaro); // → true
console.log(passaro[chave]); // → Amarelo

Removendo propriedades 🙝

O operador delete remove a propriedade do objeto.

console.log('cor' in passaro); // → true

delete passaro.cor;

console.log('cor' in passaro); // → false

Iterando sobre as propriedades com for…in 🙝

É possível também iterar em todas as chaves de um objeto por meio da declaração for…in. A cada iteração, uma das chaves é visitada pelo laço. A declaração for…in itera sobre as propriedades enumeráveis de um objeto em uma ordem arbitrária. Veja:

var passaro = {
  'nome': 'Patativa',
  'nome cientifico': 'Sporophila leucoptera',
  'id': 1,
  'extinct': false,
};

for (var chave in passaro) {
  console.log('Propriedade %s - Tipo: %s', chave, typeof passaro[chave]);
}

O resultado do código acima pode ser igual ao resultado escrito abaixo, ou ter uma ordem diferente.


  Propriedade extinct - Tipo: boolean
  Propriedade nome cientifico - Tipo: string
  Propriedade id - Tipo: number
  Propriedade nome - Tipo: string

Diferenças entre valores primitivos e objetos 🙝

No JavaScript, objetos e valores primitivos são categorizados da seguinte forma:

  • Valores primitivos são valores do tipo booleano, número, string ou os valores null e undefined;
  • Qualquer outro valor é um objeto.

A grande diferença entre os valores primitivos e objetos é o modo como eles são comparados e a mutabilidade de seus conteúdos.

Comparação 🙝

Os valores primitivos são comparados através do seu “conteúdo”, ou seja, se dois valores primitivos tem o mesmo conteúdo, eles são iguais.

var tres = 3;
console.log(3 == 4); // → false
console.log(tres == 3); // → true
console.log('xyz' == 'xyz'); // → true

Já objetos são comparados através da sua referência, cada valor tem sua identidade única e é somente igual a si mesmo. Objetos com o mesmo conteúdo não são considerados iguais.

var obj1 = { prop: 1 };
var obj2 = { prop: 1 };

obj1 == obj2; // → false
obj1 == obj1; // → true

obj1 = obj2; // Atribuímos a referência de obj2 em obj1

obj1 == obj2; // → true

Mutabilidade 🙝

Valores primitivos são considerados imutáveis, ou seja, é impossível mudar uma propriedade ou o seu valor para esses tipos de dados. Toda vez que você os manipula, na verdade você gera novos valores a partir dos antigos, mesmo que sejam idênticos.

var a = 'string';

console.log(a.lenght); // → 6

a.lenght = 9;

console.log(a.lenght); // → 6

a = 'outra string';

console.log(a.lenght); // → 12

Por outro lado, objetos são mutáveis. Alterar, adicionar ou remover uma propriedade de um objeto não gera um novo objeto a partir do antigo. O mesmo objeto modificado. Ou seja, quando atribuímos objetos para variáveis ou para propriedades de objetos, na verdade estamos indicando somente uma referência para o objeto. Se duas referências diferentes direcionam a um mesmo valor, alterar o valor reflete em mudanças para todos os objetos que “apontam” para ele.

var passaro = { nome: 'Patativa' };
var ave = passaro;

console.log(ave.nome); // → Patativa

ave.nome = 'Patativa-do-campo';

console.log(passaro.nome); // → Patativa-do-campo

Conclusão 🙝

Objetos fornecem modos de agrupar vários valores em um só "conjunto". É uma das estruturas de dados mais básicas do JavaScript. Quase todo elemento dentro da linguagem é um objeto.

Apesar de possuírem o mesmo nome, objetos não devem ser confundidos com o conceito de objeto em programação orientada a objetos, definido como instância de uma classe. Como dito anteriormente, objetos em Javascript são arranjos associativos dinâmicos.

As maioria das pessoas acredita que a ciência da computação é uma arte para gênios. Na realidade é o oposto. São somente muitas pessoas desenvolvendo coisas umas sobre as outras, como um muro de pequenas pedras.

Donald Knuth

Max Naegeler Roecker

Mestre em Ciência da Computação & Desenvolvedor de Software