Objetos JavaScript. Parte 8 Curso de JavaScript do iniciante ao avançado em 10 postagens no blog

Publicados: 2021-11-08

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

Objetos JavaScript – índice:

Objetos JavaScript
Funções do construtor de objetos

Objetos JavaScript

Objetos JavaScript têm 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 quando estivermos lidando com objetos. Eles terão propriedades e métodos. Propriedades são as coisas que os objetos javascript possuem e os métodos são as coisas que os objetos podem realizar. Vamos ver isso com alguns exemplos.

// let's define multiple objects to have a better understanding
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Plane starts taking off..."},
    land: function(){return "Plane starts landing..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "The car moves forward..."},
    smartSummon: function(){return "The car starts driving itself to you..."}
}

// we can access and console log the properties they have:
console.log("The properties for the plane:");
console.log("Can fly: " + plane.canFly);
console.log("Total number of wings: " + plane.numberOfWings);
// we can also make the plane perform actions
console.log(plane.takeOff());
console.log(plane.land());
// if you take a closer look, you can see that 
// we do not directly console.log the actions inside the methods
// instead we return them from the functions
// and in this case we are console logging them
// this way if we want we can also give the user an alert
// that tells the plane is taking off
alert(plane.takeOff());
// we can also learn about the properties the car has 
// and console log them as well for additional practice
console.log("Is it an electric car? " + car.isElectric);
console.log("What is the brand of the car: " + car.brand);
console.log("How many doors does it have? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Ao executarmos 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 outro com um carro. Assim como aviões e carros têm propriedades diferentes e podem fazer coisas diferentes, objetos diferentes que criamos podem fazer coisas diferentes e ter propriedades diferentes. Se você observar mais de perto, poderá 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 as constantes regulares, agora abrimos e fechamos um conjunto de chaves e essencialmente fornecemos os dados em pares chave-valor. Observe que definir propriedades e métodos são bastante semelhantes. A principal diferença é que ao definir propriedades, atribuímos os nomes a um valor que recuperaremos posteriormente. No entanto, quando definimos um método, temos que fornecer uma função que executaremos mais tarde. Essa diferença também se reflete em como os chamamos mais tarde. Por exemplo:

// when we retrieve a property we do not use brackets at the end
console.log("Can fly: " + plane.canFly);
// when we retrieve methods, 
// we also run them by adding brackets after them
// methods here are essentially functions that 
// belong to a specific object
console.log(plane.takeOff());

É importante adicionarmos os parênteses após os métodos, assim como fizemos com as funções normais. Caso contrário, teremos apenas a função em si ao invés de executar a função.

// in order to execute the object method we should
// add the parenthesis right after the method name
// otherwise we will get the method definition 
// like in this example
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 movimento. Neste caso estamos definindo a função sem 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. Neste caso, no entanto, não estamos usando a função em nenhum outro lugar fora da definição do objeto, não temos que dar um nome diretamente à função. Em vez disso, podemos nos referir à função de dentro do objeto com o nome do método que atribuímos.

Outra coisa que você deve saber sobre como 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 há também outra maneira comumente usada de alcançar o mesmo resultado que você deve conhecer. Esta segunda notação usa colchetes e aspas.

// both of them are equally valid and 
// give us the same results
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// check out the JavaScript console for the results

É ótimo podermos armazenar muitas propriedades e ações detalhadas 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é 1.000.000 carros cada um com um ID exclusivo e valores de propriedade variados. Teríamos que digitar todo o 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 do construtor de objetos

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

// this is how we define a blueprint for the objects
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// this is how we can instanciate the 
// javascript objects we want to create from 
// the blueprint we defined above
// in this case we create 3 car objects 
// with diffent values for the properties
const car1 = new Car(1, "white", true, 4);
const car2 = new Car(2, "black", true, 2);
const car3 = new Car(3, "red", false, 4);
// we can access object properties just like we did before
console.log("Color of first car is: " + car1.color);
console.log("Color of second car is: " + car2.color);
console.log("Color of third car is: " + car3.color);

A execução do 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 blueprint, podemos simplesmente passar valores diferentes para criar objetos javascript diferentes do blueprint inicial. Uma coisa que você provavelmente notou é que a convenção de nomenclatura para construtor de objetos é ter a primeira letra maiúscula. Neste caso, em vez de defini-lo como “carro”, demos o nome de “Carro”. Se fôssemos criar uma classe de avião, nós a chamaríamos de “Plano”.

Quando queremos criar objetos de nosso blueprint definido, usamos a palavra-chave “new” e então 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 com os quais queremos criar nosso objeto. Observe que não repetimos os nomes dos parâmetros, apenas passamos os valores na mesma ordem dos parâmetros. Você também deve ter notado que, ao criar o blueprint, estamos usando uma palavra-chave chamada “this”. Por enquanto, o que você deve saber é que a palavra-chave “this” permite fazer referência ao próprio objeto, e faz parte do código clichê que devemos escrever quando estivermos criando o blueprint do objeto.

Quando você está aprendendo a codificar, você pode ouvir o termo “código de caldeira”, isso é bastante comum, especialmente no desenvolvimento web. Basicamente significa que existem partes do código que escrevemos para colocar certas configurações no lugar. Mesmo que não haja uma solução única que fornecemos com 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 sobre os quais acabamos de aprender são um tópico grande e têm muitos detalhes à medida que nos aprofundamos. 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 executar.

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

Autor: Robert Whitney
Especialista e instrutor em JavaScript que treina departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando outras pessoas a cooperar efetivamente durante a codificação.
Ver todas as postagens

Curso de JavaScript do iniciante ao avançado em 10 posts:

Como começar a codificar em JavaScript?
Noções básicas de JavaScript
Variáveis e diferentes tipos de dados em JavaScript
Trechos e estruturas de controle
loops while e loops for
Matriz Java
Funções JavaScript
Objetos JavaScript
Métodos JavaScript e muito mais
Resumo do curso de JavaScript