singuska :: JavaScript

“No JavaScript, matrizes são objetos, funções são objetos, expressões regulares são objetos, e, claro, objetos são objetos” – O Melhor do JavaScript, pág. 17 – Douglas Crockford

Da mesma maneira que matrizes (ou vetores, ou, em inglês, arrays) objetos são listas. Nos vetores os elementos das listas são índices numéricos sequenciais. Nos objetos cada item tem um par nome/valor:

var computador = {
    monitor: 'LG',
    mouse: 'Logitech',
    teclado: 'Microsoft'
};
 
alert('Meu mouse é: ' + computador.mouse);

No exemplo acima um objeto foi armazenado em uma variável chamada “computador”. Este objeto possui três items. Para acessar um valor utilizamos um ponto e o nome do elemento a ser acessado logo após o nome da variável do objeto: computador.monitor, computador.mouse, computador.teclado.

É possível inicializar um objeto vazio e adicionar valores posteriormente:

var computador = {};
 
computador.monitor = 'LG';
computador.mouse = 'Microsoft';
computador.mouse = 'Logitech';
computador.teclado = 'Microsoft';
 
alert('Meu mouse é: ' + computador.mouse);

É também possível inicializar um objeto utilizando-se a seguinte sintaxe:

var computador = new Object();

Esta forma não é considerada uma boa prática. Prefira sempre { }.

Recuperando e inserindo valores

Há duas formas de recuperar ou inserir valores. Com ponto (notação já descrita acima) e com [ ]:

var computador = {
    'mouse-sem-fio': 'Microsoft',
    'caixa-de-som': 'Creative Labs'
};
 
computador['mouse-sem-fio'] = 'Logitech';
 
alert('Mouse: ' + computador['mouse-sem-fio']);

A notação [ ] permite recuperar valores com nomes que não são constantes ou palavras reservadas. A sintaxe abaixo é inválida:

computador.mouse-sem-fio = 'Logitech';

Não é possível utilizar -, _, espaços ou outros caracteres que não sejam letras e números quando utilizamos a notação de ponto. Neste caso é preciso utilizar [ ]. Da mesma forma, ao criarmos um objeto, se o nome possuir qualquer caracter especial, aspas (simples ou duplas) deverão ser utilizadas:

var computador = { mouse-sem-fio: 'Logitech' }; // Errado
var computador = { 'mouse-sem-fio': 'Logitech' }; // Correto

Além disso, se o nome do valor a ser recuperado vier de uma outra variáve é necessário utilizar [ ]:

var computador = {
    'nome': 'Meu Computador',
    monitor: 'LG',
    mouse: 'Logitech',
    teclado: 'Microsoft'
};
 
var nome = 'mouse';
 
alert('Meu mouse é: ' + computador[nome]);
alert('Meu computador chama: ' + computador.nome);

É muito importante entender o exemplo acima, que ilustra bem a diferença entre a notação de ponto e [ ].

Percorrendo um objeto

É possível varrer todos os valores de um objeto:

var computador = {
    monitor: 'LG',
    mouse: 'Logitech',
    teclado: 'Microsoft'
};
 
for (var nome in computador) {
    alert('Nome: ' + nome + ' / Valor: ' + computador[nome]);
}

É importante salientar que este tipo de loop for / in não garante que a ordem dos elementos seja sempre a mesma. Dependendo da execução do script a ordem pode variar. Há meios de se utilizar o loop for tradicional para percorrer objetos mas isso fica para uma outra ocasião.

Objetos dentro de objetos: estruturas mais complexas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

var computador = {
    usuarios: [ 
        { login: 'sigmus', rank: 'admin' }, 
        { login: 'amigo', rank: 'guest' }
    ],
    hardware: {
        monitor: 'LG',
        mouse: 'Logitech',
        teclado: 'Microsoft',
        hd: {
            marca: 'Seagate',
            tamanho: 256
        }
    },
    software: {
        sistemaOperacional: {
            nome: 'Windows',
            versao: 7
        },
        editorPHP: 'Aptana'
    }
}; // Fim do objeto
 
// Início das funções
 
var hdPrecisaDeUpgrade = function(micro) {
    var tamanhoHd = micro.hardware.hd.tamanho;
    if (tamanhoHd < 512) {
        return true;
    }
    return false;
};
 
var usuarioEhAdmin = function(login, usuarios) {
    for (var i = 0; i < usuarios.length; i++) {
        var
        login = usuarios[i].login,
        rank = usuarios[i].rank;
 
        if (rank === 'admin') {
            return true;
        }
    }
    return false;
};
 
// Testando alguns dados
 
if (hdPrecisaDeUpgrade(computador)) {
    alert('Você precisa de um HD maior!');
}
 
if (usuarioEhAdmin('sigmus', computador.usuarios)) {
    alert('O usuário é admin!');
}

Este exemplo mostra como é possível compor estruturas de dados mais complexas com objetos. É possível inclusive embutir funções dentro de objetos, mas isso é assunto para outro post. Por enquanto é isso. O entendimento de objetos é crucial para um real entendimento do JavaScript. E é também uma das suas facetas mais fascinantes. Caso você tenha alguma dúvida ou sugestão, por favor, comente!