Objetos JavaScript. Parte 8 Curso de JavaScript do Iniciante ao Avançado em 10 postagens de blog

Esta é a parte 8 da série de postagens do blog sobre JavaScript que o levará do nível iniciante ao avançado. Se você não leu a postagem anterior sobre funções JavaScript, você pode ver aqui. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Sem mais delongas, vamos começar com o oitavo tutorial.

Objetos JavaScript – índice:

1. Objetos JavaScript
2. Funções construtoras de objetos

Objetos JavaScript

Os objetos JavaScript desempenham um papel importante. Embora seja um tópico relativamente grande, também pode ser relativamente fácil desenvolver uma compreensão deles. Uma das maneiras mais comuns de entender objetos é pensar neles como se você estivesse recriando um carro em código. Teremos dois conceitos principais ao lidarmos com objetos. Eles terão propriedades e métodos. Propriedades são as coisas que os objetos JavaScript têm e os métodos são as coisas que os objetos podem realizar. Vamos ver isso com alguns exemplos.

// vamos definir múltiplos objetos para ter uma melhor compreensão
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "O avião começa a decolar..."},
    land: function(){return "O avião começa a pousar..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "O carro avança..."},
    smartSummon: function(){return "O carro começa a dirigir-se até você..."}
}

// podemos acessar e registrar no console as propriedades que eles têm:
console.log("As propriedades do avião:");
console.log("Pode voar: " + plane.canFly);
console.log("Número total de asas: " + plane.numberOfWings);
// também podemos fazer o avião realizar ações
console.log(plane.takeOff());
console.log(plane.land());
// se você olhar mais de perto, pode ver que 
// não registramos diretamente as ações dentro dos métodos
// em vez disso, as retornamos das funções
// e, neste caso, estamos registrando-as no console
// dessa forma, se quisermos, também podemos dar um alerta ao usuário
// que informa que o avião está decolando
alert(plane.takeOff());
// também podemos aprender sobre as propriedades que o carro tem 
// e registrá-las no console para prática adicional
console.log("É um carro elétrico? " + car.isElectric);
console.log("Qual é a marca do carro: " + car.brand);
console.log("Quantas portas ele tem? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Quando executamos o código acima, devemos obter a seguinte saída:

Acabamos de ver dois exemplos principais de objetos JavaScript: um com um avião e um com um carro. Assim como aviões e carros têm propriedades diferentes e coisas diferentes que podem fazer, diferentes objetos que criamos podem fazer coisas diferentes e ter propriedades diferentes. Se você olhar mais de perto, pode começar a ver um padrão na maneira como definimos objetos, propriedades e métodos.

Começamos definindo objetos da mesma forma que definimos variáveis ou constantes; neste caso, geralmente é suficiente usar constantes ao definir objetos JavaScript. Mas, em vez de simplesmente atribuir essa constante a um valor, assim como fizemos com constantes regulares, agora abrimos e fechamos um conjunto de chaves e essencialmente fornecemos os dados em pares de chave-valor. Observe que definir propriedades e métodos é bastante semelhante. A principal diferença é que, ao definir propriedades, atribuímos os nomes a um valor que recuperaremos mais tarde. No entanto, quando definimos um método, temos que fornecer uma função que executaremos mais tarde. Essa diferença também se reflete na forma como os chamamos mais tarde. Por exemplo:

// quando recuperamos uma propriedade, não usamos colchetes no final
console.log("Pode voar: " + plane.canFly);
// quando recuperamos métodos, 
// também os executamos adicionando colchetes após eles
// métodos aqui são essencialmente funções que 
// pertencem a um objeto específico
console.log(plane.takeOff());

É importante que adicionemos os parênteses após os métodos, assim como fizemos com funções regulares. Caso contrário, teremos apenas a função em si, em vez de executar a função.

// para executar o método do objeto, devemos
// adicionar os parênteses logo após o nome do método
// caso contrário, obteremos a definição do método 
// como neste exemplo
alert(plane.takeOff);

O resultado exibido é exatamente o que definimos ao criar o método. Você também pode ver que estamos definindo uma função em tempo real. Neste caso, estamos definindo a função sem um nome, o que é possível em JavaScript. Isso nem sempre é preferível, pois dar um nome à função torna mais claro quando a vemos sendo exibida. No entanto, neste caso, não estamos usando a função em nenhum outro lugar fora da definição do objeto, não precisamos dar diretamente um nome à função. Em vez disso, podemos nos referir à função de dentro do objeto com o nome do método que atribuímos a ele.

Outra coisa que você deve saber sobre recuperar propriedades ou métodos de um objeto é que há mais de uma maneira de conseguir isso. Usamos uma das práticas mais comuns nos exemplos acima, que é usar a notação de ponto. Mas também há outra maneira comumente usada de alcançar o mesmo resultado que você deve conhecer. Esta segunda notação usa colchetes e aspas.

// ambas são igualmente válidas e 
// nos dão os mesmos resultados
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// confira o console do JavaScript para os resultados

É ótimo que possamos armazenar muitas propriedades detalhadas e ações que podemos realizar usando objetos, mas e se precisássemos usar objetos, não apenas para 1 carro, mas digamos para 20 carros, 100 carros ou até mesmo 1.000.000 de carros, cada um com um ID exclusivo e valores de propriedade variados. Teríamos que digitar todo esse código do zero para cada carro? A resposta é não. Em vez disso, podemos aproveitar algo chamado função construtora de objetos.

Funções construtoras de objetos

As funções construtoras de objetos podem acelerar massivamente seu processo de codificação e podem tornar seu código significativamente mais DRY. Com funções construtoras de objetos, essencialmente definimos um modelo para o objeto. Uma vez que temos um modelo para o objeto, podemos criar quantas instâncias desse objeto de maneira muito mais clara, com muito menos repetição. Vamos ver isso com alguns exemplos.

// assim definimos um modelo para os objetos
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// assim podemos instanciar os 
// objetos JavaScript que queremos criar a partir 
// do modelo que definimos acima
// neste caso, criamos 3 objetos de carro 
// com valores diferentes para as propriedades
const car1 = new Car(1, "branco", true, 4);
const car2 = new Car(2, "preto", true, 2);
const car3 = new Car(3, "vermelho", false, 4);
// podemos acessar as propriedades do objeto da mesma forma que fizemos antes
console.log("A cor do primeiro carro é: " + car1.color);
console.log("A cor do segundo carro é: " + car2.color);
console.log("A cor do terceiro carro é: " + car3.color);

Executar o código acima nos daria a seguinte saída de código:

Como você pode ver no código acima, uma vez que temos um modelo, podemos simplesmente passar valores diferentes para criar diferentes objetos JavaScript a partir do modelo inicial. Uma coisa que você provavelmente notou é que a convenção de nomenclatura para construtores de objetos é ter a primeira letra maiúscula. Neste caso, em vez de defini-lo como “carro”, o nomeamos como “Carro”. Se fôssemos criar uma classe de avião, a nomearíamos como “Avião”.

Quando queremos criar objetos a partir do nosso modelo definido, usamos a palavra-chave “new” e, em seguida, escrevemos o nome da função construtora de objetos que queremos usar. Após o nome, abrimos e fechamos um conjunto de parênteses e passamos os argumentos que queremos usar para criar nosso objeto. Observe que não repetimos os nomes dos parâmetros, apenas passamos os valores na mesma ordem que os parâmetros. Você também pode ter notado que, ao criar o modelo, estamos usando uma palavra-chave chamada “this”. Por enquanto, o que você deve saber é que a palavra-chave “this” permite referir-se ao próprio objeto, e faz parte do código padrão que devemos escrever ao criar o modelo para o objeto.

Quando você está aprendendo a programar, pode ouvir o termo “código padrão”, isso é na verdade bastante comum, especialmente no desenvolvimento web. Basicamente, significa que há partes do código que escrevemos para configurar certas coisas. Mesmo que não haja uma solução única que fornecemos com o código, temos que escrever essas partes para ter um código funcional. Dependendo do código padrão, alguns IDEs fornecem até atalhos para fornecer esses códigos padrão.

Os objetos JavaScript que acabamos de aprender são um tópico grande e têm muitos detalhes à medida que mergulhamos mais fundo. Mas, em um nível fundamental, você deve saber que podemos imitar objetos da vida real com código usando objetos. Esses objetos JavaScript podem ter diferentes propriedades e métodos que podemos acessar e realizar.

No próximo tutorial, descobriremos mais tópicos e conceitos que são bastante importantes e comumente usados em JavaScript.