#002 Basicão do JS: Tipos de dados em Javascript - parte 2: Objects
Tags: javascript, beginners, frontend
Published: 2020-05-25 02:50:37

---
title: #002 Basicão do JS: Tipos de dados em Javascript - parte 2: Objects
published: true
series: Basicão do Javascript 
description: Continuando a série sobre o básico de Javascripte, agora objects
tags: javascript, beginners, frontend
cover_image: https://blog.wmitrut.com/static/710609472fc1f15f668bab8220296919/d1924/001.jpg
---


![Foto de um fusca amarelo](https://blog.wmitrut.com/static/710609472fc1f15f668bab8220296919/d1924/001.jpg)
> Photo by Moises Alex -  [@arnok](https://unsplash.com/@arnok) peguei lá no Unsplash

Semana passada (ou alguns dias mais) eu falei aqui sobre os primitivos básicos de JS, se você não leu, é essencial que dê uma conferida antes de prosseguir nesse artigo pois lá cobrimos as propriedades essenciais para começar a entender estruturas de dados em JS, você pode acessar clicando no link abaixo.

{% link https://dev.to/wmitrut/001-basicao-do-js-tipos-de-dados-em-javascript-parte-1-primitivos-1ihj %}

Quero começar este post agradecendo o [Leonardo Saraiva](https://twitter.com/vyper), que enviou pull request corrigindo algumas coisas do último texto, se você ver algum erro aqui, faça como ele e manda um PR lá!


### Objetos

Se você está começando agora e não tem noção alguma do que seja, talvez você olhe e pense: <i>"Bom, objetos são coisas que estão ao nosso redor e inanimadas"</i>. De certo modo você está certo, a abstração pro conceito de objeto em programação passa por esse caminho. 

Na sua mão muito provavelmente você está segurando um objeto enquanto lê esse artigo, e o que esse objeto tem? Atributos: Marca, cor, tamanho, memória, versão do sistema e assim por diante.

### O fusquinha amarelo

Eu sempre gosto de contar uma historinha nos posts e esse não poderia ser diferente, vamos trazer pro mundo real. Até 2016 eu era proprietário de um belo, beberrão, barulhento e confortável fusca amarelo 1975, motor 1500, movido a gasolina - semelhante ao fusca que ilustra o início deste post.

Tive muitas aventuras com este fusca e também já tive que empurrá-lo (e não foram poucas vezes) abaixo de chuva.


Pois bem, se você percebeu, o primeiro parágrafo desta sessão descrevia superficialmente o fusca, não seria necessário colocar fotos dele aqui pra entender o conceito mas sou da política de que quanto mais mastigada a explicação, melhor.

### Objetos em JS

Em outras palavras, o fusca(e qualquer outro carro) pode ser abstraído como um OBJETO. Não só do ponto de vista físico mas do ponto de vista de programação, quer ver?

![Objeto fusca](https://blog.wmitrut.com/static/16418018d9b6a5a1d4ed4b030707ee1b/d095c/002.png)

Só que no nosso caso, ao invés de atributos físicos, temos atributos como os primitivos que citamos no artigo anterior: strings, booleans e numbers. Isto posto, podemos dizer que um objeto é uma *coleção* de valores. Uma notação de chave (key) e valor (value).

![Chave e Valor](https://blog.wmitrut.com/static/6fd7449d15e14d87a55aed2fcf18ac9d/3d4da/003.png)

Simples né? Então tendo um objeto *carro* eu consigo acessar seus valores como abaixo

![004.png](https://blog.wmitrut.com/static/9ff676ffeffb711f12752e0f366877d6/5d35e/004.png)

### Notações

"Então, quer dizer que se eu usar . e [ ] chamando a propriedade é a mesma coisa?"

*Sim. Mas nem sempre.* Se acostume que essa é a máxima de JS.

![Notação com atributos de objetos.png](https://blog.wmitrut.com/static/8ddb99583775809fb760caff93581d89/fa2eb/005.png)

Na linha 7, o valor vai voltar undefined por que não existe ´chave´ em ´carro´ e na linha 8, estamos atribuindo o valor de chave à interpolação quando chamamos o objeto carro, sendo o valor de chave ´cor´, então o JS vai procurar um atributo ´cor´ dentro do objeto ´carro´ - retornando assim o valor AMARELO.

### Manipulando objetos

Como você pode notar, é fácil demais acessar dados em JS, dessa forma podemos ler e brincar um pouco com as propriedades que existem

Vamos pegar o nosso fusquinha acima e descobrir os métodos do Javascript.

- Entries

Com o método entries, ao passar nosso objeto, ele irá retornar um array com todos o dados, ou seja, você pode fragmentar seu objeto em vários pequenos objetos que possuem a chave e o valor do objeto original separados.

![Método Entries](https://blog.wmitrut.com/static/845d07a6d3fb3bcf7368e155c811e52f/fa2eb/006.png)

- Keys

Com o Keys, você pega justamente as CHAVES do objeto, ou seja, os atributos que compõem nosso objeto.

![Método Keys](https://blog.wmitrut.com/static/99ca5af221090a8e2cba38bd375dde36/fa2eb/007.png)

- Values

Values, por sua vez retornará os VALORES atribuídos a estas chaves anteriormente citadas.

![Método Values](https://blog.wmitrut.com/static/88eb3e7262cb0c7b0f612e8eb4a473e8/fa2eb/008.png)

- Delete

Com o método delete é possível se deletar o valor de um objeto.

![Método Delete](https://blog.wmitrut.com/static/4a947a1f68f8182ed41e021d084d2ca9/fa2eb/009.png)

- Assign

Se com delete eu posso deletar atributos, com assign eu consigo adicionar novos atributos:

![Método Assign](https://blog.wmitrut.com/static/59085ffb815ca218f7c770cdefee642f/fa2eb/010.png)

> Sim, eu vendi o fusca - sdds.

### Arrays e Objetos

Arrays merecem um (ou mais) posts exclusivos para eles e é um dos assuntos que mais estou ansioso para falar aqui. Acompanhe os posts, compartilhe e chame os amigos pra participar. Para o próximo post da série estou planejando falar sobre VARIÁVEIS.

## **Links**

Não por menos, abaixo seguem alguns links, como sempre:

▶ 🔗 O meu amigo [Willian Justen](https://twitter.com/Willian_justen) ta fazendo uma série de vídeos sobre [Typescript](https://www.youtube.com/watch?v=mRixno_uE2o&list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)

▶ 🔗 Se você é da região de Curitiba ou São Paulo e tá desempregado, a galera do Boticário ta contratando devs:

{% twitter 1263164088634523649 %}

----------

▶ 🔗Acompanhe as lives do [POKEMÃO](https://www.twitch.tv/pokemaobr)!


## **E mais**

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

[![Me siga na twitch](https://blog.wmitrut.com/static/fc44dd8bd18c6b8a4170bff71ee059ac/fa2eb/twitchbanner.png)](https://www.twitch.tv/wmitrut)