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!

Imagine que tenhamos que guardar o nome de três carros que vieram de um formulário. É necessário exibir um alerta se um dos carros possuir o nome Civic.

1
2
3
4
5
6
7
8

var
c1 = 'Fiesta',
c2 = 'Palio',
c3 = 'Civic';
 
if (c1 === 'Civic' || c2 === 'Civic' || c3 === 'Civic') {
    alert('Parabéns, você tem um Civic!');
}

Após um tempo em produção, formulário precisa agora ter 4 campos para de entrada. Atualizado, o novo código seria o seguinte:

1
2
3
4
5
6
7
8
9

var
c1 = 'Fiesta',
c2 = 'Palio',
c3 = 'Civic',
c4 = 'Fox';
 
if (c1 === 'Civic' || c2 === 'Civic' || c3 === 'Civic' || c4 == 'Civic') {
    alert('Parabéns, você tem um Civic!');
}

De cara dá para perceber que este código não é nem um pouco prático de ser atualizado. Uitilizando vetores, é possível agrupar os carros em uma única variável. Além disso, as informações armazenadas em um vetor são facilmente acessadas:

1
2
3
4
5
6
7

var carros = ['Fiesta', 'Palio', 'Civic', 'Fox']
 
for (indice in carros) {
    if(carros[indice] === 'Civic') {
        alert('Parabéns, você tem um Civic!');
    }
}

Acessando os elementos de um vetor

Além de strings, os vetores podem conter números:

1
2
3

var lista = [5, 25, 40];
 
alert(lista[1]);

Para acessarmos os valores do vetor lista precisamos utilizar um índice. O primeiro índice de um vetor é sempre 0. Por isso o resultado deste código é 25. O índice 1 acessa na verdade a segunda posição do vetor.

Podemos também misturar tipos diferentes de dados em um mesmo vetor:

1
2
3

var lista = ['bananas', 10];
 
alert(lista[0]);

Para inicializarmos uma lista como vazia e depois adicionar um elemento:

1
2
3
4
5

var lista = [];
lista.push('abacaxi');
lista.push('goiaba');
 
alert(lista[1]);

É também possível adicionar valores fora de sequência:

1
2
3
4
5

var lista = [];
lista[5] = 'melancia';
 
alert(lista[5]);
alert(lista[0]);

A tentativa de acesso ao índice 0 retorna undefined neste caso, pois o único índice existente é 5. Vetores podem também ser declarados utilizando-se a palavra reservada Array:

1
2
3

var lista = new Array(30, 60, 90);
 
alert(lista[2]);

A utilização de [ ] é considerada uma boa prática.

Vetores com variáveis e com outros vetores dentro

Valores de vetores podem ser outros vetores:

1
2
3
4

var meuCarro = 'Fiesta';
var lista = ['Sandero', meuCarro, 'Fox'];
 
alert(lista[1]);

Um vetor dentro de outro:

1
2
3
4
5

// exemplo-7
var numeros = [40, 45, 50]
var lista = [10, 30, numeros];
 
alert(lista[2][1]);

O nível de profundidade dos vetores em JavaScript não é definido e é dado apenas pelo limite da memória (e também pelo seu bom senso).

Quantidade de elementos de um vetor

1
2
3

var lista = [12, 24, 48];
 
alert(lista.length);

A propriedade length nos retorna um número indicando quantos elementos um vetor tem. Isso é muito importante e útil, pois nos permite “passear” pelo vetor:

1
2
3
4
5

var lista = ['primeiro', 'segundo', 'terceiro'];
 
for (var i = 0; i < lista.length; i++) {
    alert('Índice: ' + i + ' valor: ' + lista[i]);
}

Para finalizar, uma brincadeira inútil:

1
2
3
4
5
6
7
8
9
10
11

var lista = [
    'motocicleta',
    [30, function() {
        alert('Olá')
        }
     ]
];
 
alert(lista[0,0]);
 
lista[1][1]();

1
2
3
4

// exemplo-1
function a() {
    alert('Olá, sou a função.');
}

O fragmento de código acima não realiza nenhuma tarefa. A função de nome a foi apenas declarada e está pronta para ser utilizada. Para que algo aconteca precisamos invocar, chamar a função. Isso por ser feito da seguinte maneira:

5

a();

Se adicionarmos a linha acima ao nosso código, um alerta aparecerá no navegador exibindo a mensagem “Olá, sou uma função”.

E para que servem as funções? (argumentos)

Quando um programa de alguma complexidade maior é desenvolvido, problemas recorrentes tornam-se evidentes. Tarefas repetitivas que podem ser identificadas, isoladas e codificadas em funções. Vamos alterar nosso código para o seguinte:

1
2
3
4

// exemplo-2
function a(texto) {
    alert(texto);
}

A função a agora recebe o que é chamado de argumento. Este argumento tem um nome: texto. Novamente, nosso código é inútil enquando não for acionado.

5

a('Sou um exemplo de texto.');

Mais uma vez um alerta pipoca na tela no navegador, desta vez com a mensagem “Sou um exemplo de texto”. Perceba como isso é importante. Nossa função agora comporta-se de maneira diferente dependendo do argumento que lhe é passado. Nessa altura nossa função não é nem um pouco útil. Ela nada mais é do que uma espécie de “atalho” para um outra função: alert. Ambas desempenham a mesma tarefa. Vamos então modificar a função para que ela realize algo um pouco diferente:

1
2
3
4
5

// exemplo-3
function a(texto) {
    alert('O argumento passado foi: ' + texto);
}
a('um exemplo de texto.');

O resultado do exemplo 3 é: O argumento passado foi um exemplo de texto. A função continua utilizando alert, mas agora ela realiza uma tarefa um pouco mais complexa.

É possível afirmar então que funções são pedaços de código que desempenham tarefas muito parecidas, mas de maneira um pouco diferente dependendo do jeito que as acionamos. O que faz a função se comportar de forma diferente é o contexto. O contexto, nos exemplos acima, é dado pelo argumento que é pasado no momento da invocação da função.

Sobre os retornos de funções

Como já foi dito, funções podem ter nomes, receber argumentos, desempenhar uma tarefa e retornar algum resultado.

1
2
3
4
5

// exemplo-4
function a(texto) {
    return 'O argumento passado foi: ' + texto;
}
alert(a('um exemplo de texto.'));

Este exemplo se comporta de maneira igual ao anterior. Alert é chamada e recebe como argumento o retorno da função “a”. Como “a” está dentro de “alert” ela é executada primeiro. Desta forma, quando alert é chamada já temos o resultado de “a” disponível, que é passado como argumento para “alert”.

É possível pensar na sequência de operações da seguinte forma: “alert” é invocada, invoca “a”, que retorna um resultado, que é passado como argumento o argumento de “alert”.

É muito importante entender que o retorno não somente retorna um resultado. Ele também pára a execução da função.

1
2
3
4
5
6

// exemplo-5
function a(texto) {
    return;
    alert('O argumento passado foi: ');
}
a('um exemplo de texto.');

Neste caso nada acontece no navegador. Na linha 3 nossa função, invocada na linha 5, não retorna nenhum valor. Ou seja, ela para de ser executada. Esta função é inútil porque ele não desempenha nenhuma tarefa. Em nenhuma circunstância chegaremos na linha 4. É um exemplo besta mas serve para ilustrar que retornos podem ou não retornar um valor, mas sempre interrompem a execução da função.

1
2
3
4
5
6
7
8
9
10
11
12

var x = 1;
 
function fn1() {
    var x = 2;
    alert(x);
}
function fn2() {
    alert(x);
}
 
fn1();
fn2();

O resultado é: 2 e depois 1. Neste exemplo, uma outra variável x (que por acaso tem o mesmo nome) foi definida dentro da função fn1. Por isso, ao executarmos a função fn2 o valor original da variável declarada na linha 1 permanece.

Para que o resultado fosse 2 e 2:

1
2
3
4
5
6
7
8
9
10
11
12

var x = 1;
 
function fn1() {
    x = 2; // atribuição de valor sem var
    alert(x);
}
function fn2() {
    alert(x);
}
 
fn1();
fn2();

A modificação da linha 4 altera o valor da variável declarada na linha 1 e temos, consequentemente, o mesmo resultado nos dois alerts (trata-se da mesma variável com o mesmo nome).

Note que na linha 1 dos dois exemplos a variável foi declarada utilizando-se var. Entretanto, a remoção de var não implica em nenhuma mudança de comportamento. Isso acontece porque neste caso a declaração ocorre no escopo mais “exterior” do nosso código. Com ou sem var ela pode ser considerada global.

E porque isso é importante?

O uso de variáveis globais é uma péssima prática. A variável pode ser utilizada e modificada por qualquer parte do código. Isso é fonte de inúmeros bugs. A não ser que seja realmente necessário, sempre declare as variáveis como locais. É possível (e recomendável) declarar várias variáveis locais de uma vez:

1
2
3
4
5
6

    var x = 1, y, z; // boa prática
 
    var x = 1; // não tão boa
    var y;
    var z;
}