JavaScript Básico 7: Objetos

Código do Vídeo:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script>
        let objetoVazio = {};

        let carro = {
            ano : 2010,

            venda : true,

            modelo : "Carro X",

            revendedores: ["empresa 1", "empresa 2", "empresa 3"],

            opcionais: {
                arCondicionado : true,
                computadorDeBordo : false,
                anosGarantiaExtra: 5,
            }
        }

        //console.log(objetoVazio);

        console.log(carro.ano);
        console.log(carro["venda"]);
        console.log(carro.modelo);
        console.log(carro["revendedores"][0]);
        console.log(carro.opcionais.anosGarantiaExtra);
    </script>
</body>

</html>

O que são objetos no JavaScript?

Os objetos são tipos de dados compostos. Isso quer dizer que eles podem armazenar diversas informações de um jeito mais complexo que variáveis do tipo String ou do tipo Numérico.

Como criar um objeto mesmo?

Para criar um objeto, você cria uma variável e o adiciona usando “ { } “ e criando propriedades separadas por virgula.

let objeto = {
    valorNumerico : 123,
    outroValorNumerico : 345,
    valorString : "Olá Mundo"
}

Por que preciso de dados compostos?

Apesar de ser possível criar uma variável simples para cada situação, o uso de objetos no JavaScript para conter todos os dados de um objeto real (exemplo do carro no vídeo) permite ao desenvolvedor poder se organizar melhor com a utilização e acesso as variáveis corretas.

Quando começarmos a ver mais sobre a criação de sistema e nosso código se estender por diversos arquivos, será possível observar como os objetos são grandes ferramentas para organizarmos os dados.

Como posso acessar os dados dentro do objeto?

Para acessar é simples, você pode fazer assim:

meuObjeto.valor

Ou assim:

meuObjeto["valor"];

E se eu precisar trocar o valor de uma propriedade?

Para isso, basta fazer o que já viemos fazendo com as variaveis normais. A única diferença é que você as acessará de dentro do objeto conforme o exemplo abaixo

let objeto = {
    valor : 1
}

//exibirá 1
console.log(objeto.valor);

objeto.valor = 55;

//exibirá 55
console.log(objeto.valor);

objeto.valor = "Hakuna Matata";

//exibirá Hakuna Matata
console.log(objeto.valor);

Esses objetos têm algo a ver com orientação a objetos?

Sim e não. Por enquanto vamos esquecer que esse conceito existe pois temos muitas coisas a para ver antes de chegar lá. Estamos criando objetos sem precisar de funções ou classes para que todos se acostumem a usa-los primeiro.

Exercícios

Crie uma variável chamada casa que execute as seguintes operações:
1. Atribua um objeto a variável com as propriedades:
  1. quartos = 2
  2. tipo = “casa”
  3. endereco = “rua teste 123 – ZS”
2. Exiba no console a seguinte frase (usando TODOS as propriedades): Casa com 2 quartos localizada na rua teste 123 – ZS.

Corrija o objeto abaixo de forma a não ocorrer erro quando você executar o comando console.log(produtos.jogos.acao[2]).

let produtos = {
    videos : {
        comedia: ["comedia1","comedia2"],
        romance: ["romance1", "romance2"]
    },

    revistas : [
        moda  = ["lalala", "lililili"],
        saude  = ["lalala", "lililili"],
    ]

    jogos : {
        rpg: ["rpg1", "rpg2", rpg3],
        acao: ["acao1", "God of War"]
    }
}

Altere os dados do objeto e exiba no console o texto abaixo usando as propriedades linha1 e linha2:
```
let objetoTexto = {
    linha1: "Olá",
    linha2: "Estudando o que?"
}
```

Texto no console(nova linha inclusa):

Olá Mundo,

Estudando objetos JavaScript.