Primeiras aulas do curso JavaScript: objetos

JavaScript: objetos

O que são objetos - Apresentação

Juliana: Olá, boas vindas ao curso de fundamentos do JavaScript com objetos, neste curso vamos realmente focar no que são objetos em JavaScript e começar bem do começo, como criamos um objeto literal, como que acessamos, modificamos, percorremos.

Depois vamos ver quais são os tipos de dados que um objeto pode conter, e em seguida passar para um conteúdo um pouco mais específico de protótipos, herança, e dar uma introdução em orientação a objetos.

Esse curso, ele é voltado para quem está começando agora em programação, e escolheu o JavaScript como linguagem inicial, não vamos falar nada, não vai ter conteúdo sobre frontend nesse curso, porém, os conceitos de objetos que vamos trabalhar aqui, eles também podem ser usados no frontend sem nenhum problema.

André: Onde começamos os nossos estudos aqui? Para começar vamos entender para que serve o objeto, como construir ele usando a sintaxe do JavaScript, começamos trabalhando com objetos literais, ou seja, objetos únicos.

Boa parte do trabalho do programador envolve lidar com objetos, seja programação web, programação desktop, enfim, um backend, um frontend, invariavelmente você vai trabalhar com a sintaxe de objetos.

Então aqui no curso vamos ver como criar, percorrer, buscar e alterar as propriedades de um objeto, começando por objeto literal, indo até aos conceitos de OO mais um pouco mais na frente.

Juliana: Vamos trabalhar também com um conceito que é do JavaScript, que é uma linguagem baseada em protótipo, vamos entender o que significa isso, e dar uma introdução ao assunto, dizendo o que são protótipos, como que acessamos os protótipos e o que, como funciona a herança de protótipo, essa parte ela é muito importante para entendermos como que o JavaScript funciona por baixo dos panos.

E vamos trabalhar também com uma introdução à orientação a objetos, ao paradigma de programação orientada a objetos, ouvimos falar de várias maneiras, vamos dar uma introdução a esse assunto, e vamos te mostrar como que trabalhamos com esse paradigma de programação utilizando o JavaScript.

André: Então neste curso vamos trabalhar com conceitos, como tipos de dados, funções, arrays, então para você aproveitar melhor esse curso, é importante, seria interessante já ter visto os fundamentos de JavaScript, tipos, variáveis e funções, e fundamentos do JavaScript com arrays.

Juliana: E depois que você finalizar esse curso, aí junto com o que André acabou de falar, temos uns cursos de fundamentos anteriores, o de funções, tipos de dados e arrays, você já pode começar a fazer as suas primeiras aplicações backend utilizando o JavaScript e trabalhar também com arquivos no formato Json.

Juliana: Eu sou a Ju Amoasei

André: Meu nome é André Bessa

Juliana: Vamos então começar o nosso curso.

André: Vamos lá pessoal, programando.

O que são objetos - O que são objetos

Juliana: Olá, começando então com o nosso curso de JavaScript focado em objetos nessa estrutura de dados super importante para trabalhar, não só com JavaScript mas com qualquer linguagem de programação.

Vamos começar esse vídeo explicando um pouco sobre o que é objetos, a diferença entre objetos e arrays, e como que montamos, como que é a cara do objeto.

Eu vou começar criando então um arquivo que eu vou chamar “objetos.js” e o André que está aqui comigo, vai falar um pouco sobre como funciona os objetos, como que montamos um objeto, e qual que é a diferença de um objeto para um array. Vamos lá André?

André: Vamos lá Ju. Então pessoal, no JavaScript, para trabalhar com objetos, temos que ter a ideia, a noção, que ele é formado, todo objeto no JavaScript ele é formado com a chave valor, diferente de um array, que o array você tem lá os elementos do array e você consegue acessar pelo índice.

Então só para exemplificar, vamos criar um array aqui, então const listaCPFs = [], então eu preciso armazenar aqui, alguns CPFs de usuários, clientes, enfim, estou digitando a esmo pessoal, const listaCPFs = [“12365242625”, “9242624265”].

Juliana: Se for o seu CPF aparecendo na tela é mera coincidência.

André: É exatamente, só está aqui no automático, então criei uma lista que tem strings, que representa o CPF de um cliente, só que determinadas situações precisamos armazenar mais de um tipo de informação de um objeto, de algo do mundo real, de um cliente, de uma pessoa.

Então existe uma estrutura de dados, que conhecemos como objetos, que permitem trabalhar com essa lista de dados e informações, de maneira mais simplificada, então olha só pessoal.

Se eu quiser armazenar por exemplo, eu tenho CPFs agora do cliente, se eu quiser armazenar um nome, ou a idade, eu poderia imaginar algo tipo assim, olha só, const cliente = e vou armazenar as informações do cliente aqui um nome, André, idade, e o valor da idade 36, const cliente = [“nome”, “André”, “idade”, 36].

Então olha só, no primeiro eu só tenho informações mais simples, só CPF, só no segundo array que está armazenando mais de um tipo de informação, quero armazenar o nome, o valor do nome, idade, valor, se eu quiser armazenar o e-mail, também começa a ficar um pouco mais complexo para armazenar isso só em um array, correto Ju?

Juliana: Correto, porque teríamos que dar um jeito de dizer que a informação nome, na string, nome, ela está relacionada a André, e a informação idade, a string idade está relacionada a 36, e array, ela não permite isso, ela é só uma informação por índice e não tem nada que diga que essas informações elas são pares ligados, nome a descrição do nome, a idade a descrição da idade, então por isso que array não funciona muito bem quando temos que passar esse tipo de informação.

André: Isso ai Ju, então a ideia é que utilizemos alguma outra estrutura que tenhamos na linguagem que nos permita fazer de maneira mais simplificada, mais harmônica, mais facilitada, e um dos recursos que temos, não só em JavaScript mas em outras linguagens também, são os objetos, que são estruturas de dados que permitem você armazenar essas informações de maneira mais organizadas dentro de um único objeto.

Então eu vou criar um objeto aqui agora, só para podermos fazer a comparação, então const cliente = {} vamos receber, vai ser composto, aqui é com chaves, nome, só quebrar a linha aqui para ficar mais organizado, vou colocar dentro das chaves nome: “André”, idade:36, cpf:”1254365226”, - o CPF do André que também estou digitando a esmo -, e o email:”andre@email.com”.

Então pessoal, no JavaScript, um objeto, ele é formado por um par chave valor, então a chave aqui, eu tenho um objeto cliente, onde eu tenho a chave nome, com valor André, eu tenho a chave idade, com o valor 36, CPF com valor 123 e vai embora, a chave e-mail e o valor do e-mail.

Então no JavaScript, ele permite você criar um objeto dessa forma aqui, existe outras formas que vamos ver no decorrer do curso, então é isso, um objeto em JavaScript é formado pela cadeia, chave, valor e fica muito mais organizado.

Agora eu consigo do cliente ter as informações, saber que o nome é André, idade 36, porque da maneira que estava antes aqui, fica meio desorganizado que nem a Ju falou, então para podermos relacionar aquelas informações, o que é a chave, o que é o valor daquela chave, fica um pouco mais complexo de trabalharmos com isso ai.

Juliana: Então ambos os tipos de dados são super importantes, vamos ver um pouco mais para frente como arrays e objetos trabalham juntos, eu vou apagar essa array, só vou comentar essa array cliente aqui porque ela tem o mesmo nome, mas vimos que arrays funcionam para quando temos que organizar por exemplo informações que são do mesmo tipo, então eu tenho uma lista de CPFs, eu tenho uma lista de nomes, eu tenho uma lista de valores, por exemplo.

Agora o objeto, ele funciona quando precisamos fazer uma abstração de algo do mundo real por exemplo, então eu tenho o cliente, o cliente tem nome, o cliente tem idade, o cliente tem endereço, o cliente tem várias coisas, e precisamos organizar essa informação para que ela seja acessada de uma forma coesa, e também o cliente pode ser o André, o cliente pode ser a Juliana, o cliente pode ser você, então todos os clientes eles tem nome, eles tem idades, de acordo com o que o seu produto precisa, mas tudo pode ser representado por um único objeto cliente.

O objeto ele é estrutura de dados mais importantes do JavaScript, também vamos ver mais sobre isso mais um pouco para frente do curso, e ele tem essa cara de uma estrutura de chaves e valores, os valores podem ser tanto primitivos, como strings, números, booleanos, ou podem ser alguns outros tipos de estrutura que também vamos ver ao longo do curso.

Então André, acho que podemos fechar por aqui e passar para frente para começarmos a ver como que manipulamos esses objetos, então?

André: Isso ai Ju, vamos continuar agora.

Juliana: Então até o próximo vídeo.

André: Até o próximo vídeo pessoal.

O que são objetos - Acessando dados

Juliana: Olá, então continuando com o nosso curso de JavaScript focado em objetos, já vimos a estrutura do objeto como funciona, agora vamos ver, continuar, vendo como manipula cada uma das partes do objeto.

Aqui neste curso vamos trabalhar com desafios, então cada aula, cada vídeo, vamos ter um desafio diferente que vai nos ajudar a entender como trabalhamos com objetos no dia a dia.

Para este primeiro desafio vamos ter que acessar um objeto com informações de um cliente, e exibir essas informações no console, aqui durante esse curso, vamos trabalhar com o contexto de banco, então o banco tem clientes, os clientes têm conta corrente, e por aí vai, então o que temos que fazer aqui, o nosso desafio é criar aqui um objeto, ter um objeto com informações de um cliente, e conseguir acessar, vamos printar, como dizemos, essa informações do cliente no console.

Então eu vou criar um novo arquivo, eu vou chamar de “print-infos.js”, e o André que está aqui comigo vai nos dizer como podemos resolver esse desafio.

André: Então pessoal, vamos acessar agora os valores de um objeto, já vimos na última aula como criar um objeto no JavaScript, e eu vou acessar ele usando notação de ponto, vamos criar um objeto, vou escrever agora com vocês, e vamos printar na tela as informações desse objeto, posso começar?

Juliana: Pode, se você quiser André, podemos usar o mesmo objeto cliente que usou no vídeo passado, o nosso cliente aqui, o próprio André.

André: Beleza, vamos lá.

Juliana: Então eu vou dar um “Ctrl + C” no nosso arquivo do vídeo anterior, e eu vou colar, então nós temos aqui um cliente André, então como é que fazemos André para printar na tela o que precisamos.

André: Então pessoal, olha só, já temos o objeto aqui, o objeto cliente, de novo, o objeto é formado por par, chave e valor, então tem a chave nome, e o valor André, e agora para printar a informação no nosso console, eu uso aquela função console.log() e eu vou mostrar para vocês como fazer isso, de maneira bem simples.

Vamos lá, console.log() e dentro do console.log vamos colocar o valor que queremos exibir no nosso console, nesse caso eu quero receber informações de um cliente, de um objeto cliente, e como eu falei, já mencionei, vamos usar a noção de ponto, então eu vou mostrar aqui bem rápido aqui, a ideia só.

Eu já tenho um objeto criado, coloco dentro do console cliente, para acessar a informação que eu quero exibir, eu tenho que saber a chave que eu quero, então a chave que eu quero agora vai ser um nome, simples, então, console.log(cliente.nome). Então agora eu vou dizer para você o valor que está nessa chave aqui, chave nome, correto Ju?

Juliana: Correto, vamos fazer o seguinte, eu vou salvar e antes de continuarmos, vamos rodar esse arquivo, e ver se tudo funcionou certo, então no terminal eu acesso, eu rodo esse arquivo utilizando a palavra node para entrarmos no ambiente do node, e o nome do arquivo que é node print-infos.js.

Então apareceu aqui no nosso terminal, André, ou seja, console.log aqui acessou o nosso objeto cliente, e acessou o valor da chave nome, então usamos o que o André falou de notação de ponto, ou seja, acessamos a variável cliente, e através da notação de ponto conseguimos entrar na chave nome e exibir o valor dessa chave que é uma string com o valor de André, certo André?

André: Certo, isso mesmo Ju, vou melhorar um pouco essa escrita de código aqui, escrever um pouco mais, vamos usar aquele template, a string literal.

Juliana: Isso, podemos chamar de string literal, ou de template string.

André: Isso, vamos lá, então agora eu vou continuar exibindo informação do cliente, só que dessa maneira, console.log('Meu nome é'), aqui eu vou usar aquela notação de template.

Juliana: Template string, ou literal também pode usar as duas formas.

André: Então agora eu vou colocar, ${cliente.nome} e tenho, opa, cifrão.

Juliana: Cifrão e chaves.

André: Cifrão e chaves, e a chave que eu quero exibir, do objeto que eu quero exibir, então continuando o código, ${cliente.idade} anos.') então a string vai ser montada, meu nome é o valor da chave, nome do cliente, e tenho o valor da chave idade do objeto cliente, anos, então isso que vai ser exibido, correto? Ju, você coloca no console para vermos o resultado da saída?

Juliana: Vou rodar de novo aqui node print-infos.js, meu nome é André e tenho 36 anos, perfeito, lembrando então essa notação que usamos para escrever, para interpolar, é strings com variáveis, que é a chamada template string que utilizamos o acento agudo que usamos para fazer crase no lugar das aspas e o cifrão com a chave onde queremos inserir valores de variáveis, e aqui conseguimos chamar tanto o nome da variável cliente quanto já acessar o valor das chaves que estão dentro desse objeto, do objeto cliente, certo André?

André: Isso aí Ju.

Juliana: O que mais então podemos fazer aqui?

André: Olha só, trabalhando com objeto, e criamos um objeto cliente com chaves do tipo string, o nome é string, cpf, e-mail, tem idade que é um number, então aqui também tem algumas propriedades de string para essas propriedades que colocamos nesse cliente, por exemplo, vou dar um console de novo aqui, console.log() e vou usar uma função de string para o cpf, então console.log(cliente.cpf) qual método podemos usar aqui Ju, para exibir aqui?

Juliana: Podemos dizer que para a segurança, vamos só exibir os 3 primeiros números do cpf, lembrando que os números estão dentro de aspas então seriam os 3 primeiros caracteres dessa string, onde está o nosso cpf.

André: Isso, então vamos fazer o seguinte, vamos usar a função aqui, substring(), que é uma função do JavaScript para trabalhar com strings em JavaScript e vou passar aqui para essa função a faixa que eu quero exibir, que eu quero apanhar da string, então os 3 primeiros dígitos, ficando o código console.log(cliente.cpf.substring(0,3)), então de 0 até o 3, é isso mesmo Ju?

Juliana: Isso, que começamos no índice zero, da nossa array de caracteres, que é uma string, lembrando que uma string podemos dizer que é um array de caracteres, então estamos começando no índice zero, que é o número 1 e está indo até o índice 3 e parando antes dele, ou seja, vai exibir o índice zero, o índice um e o índice dois, ou seja, os 3 primeiros números, os 3 primeiros algarismos, caracteres dessa string.

André: Isso, vamos rodar então ele aqui no console.

Juliana: Vamos, então node print-infos.js, meu nome é André e tenho 36 anos, e a segunda informação que pedimos 125 que são exatamente os 3 primeiros dígitos aqui do cpf, ou seja, conseguimos, acessar o valor, aqui no segundo console.log() que o André fez, acessamos a chave cpf, dentro do objeto cliente, e a partir do momento que você acessa essa chave você consegue utilizar qualquer método do JavaScript que seja de acordo com o tipo de dado.

Ou seja, o tipo de dado do valor aqui da chave cpf, é uma string, então conseguimos utilizar um método de string próprio do JavaScript, que é o método substring() e trabalhar com ele normalmente, da mesma forma que se acessássemos a chave idade, conseguiríamos utilizar com 36, qualquer método que fosse um método de número, por exemplo, o parseFloat() que transforma de inteiro de int em float. Certo André?

André: Certo, Ju.

Juliana: Então eu acho que passamos pelo desafio, já acessamos um objeto aqui e imprimimos algumas informações no nosso terminal e acho que já estamos prontos para seguir para o próximo.

André: Beleza Ju, é isso aí.

Juliana: Então até o próximo vídeo.

André: Até o próximo vídeo pessoal.

Sobre o curso JavaScript: objetos

O curso JavaScript: objetos possui 185 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de Javascript em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Javascript acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas