Objetos
Published: 2021-03-22 23:18:34

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

No post de hoje irei falar sobre Objetos.

### Objetos

Objetos são uma parte enorme da linguagem, são o core, o núcleo de muitas coisas que podem ser feitas em JavaScript.

Aprender a trabalhar com objetos é essencial para entender e dominar a linguagem.

Uma forma interessante de explicar objetos em JavaScript, é traçar um paralelo com objetos do mundo real.

No mundo real, a gente pode definir que objetos possuem algumas características, que iremos chamar de `propriedades` e também possuem alguma forma de ação disponível para usarmos nele, que iremos chamar de `métodos`.

Vamos pegar um celular de exemplo:

Ele possui algumas propriedades:
- Cor
- Tamanho
- Modelo

E também possui alguns métodos:
- Fazer ligações
- Tirar fotos
- Tocar músicas

No JavaScript, os objetos também possuem propriedades e métodos.

Iremos pegar como exemplo um usuário:

Propriedades:
- Nome
- Login
- E-mail
- Idade
- Senha

Métodos:
- Fazer Login
- Fazer Logout

Outro exemplo, um objeto post de um blog:

Propriedades:
- Título
- Conteúdo
- Autor

Métodos:
- Publicar
- Despublicar
- Deletar

Portanto, objetos em JavaScript irão nos possibilitar a criação de estruturas de dados que representam certos elementos do nosso código ou das nossas aplicações.

A própria linguagem possui alguns objetos acoplados, como por exemplo o objeto `date` e o objeto `Math`.

Mas também existem os objetos criados por nós, que chamamos de objetos literais.

#### Criando um objeto literal

Para criarmos um objeto, usaremos a abertura e fechamento de chaves `{}`.

Dentro do objeto ficam as propriedades e cada propriedade é formada por uma chave e um valor.

Para atribuirmos um valor a uma chave, utilizaremos a anotação de dois pontos `:`.

As propriedades devem ser separadas por vírgula `,`.

Dentro de um objeto, podemos ter propriedades que recebem vários tipos de valores, `string`, `number`, `array`... e até mesmo, outros objetos.

Abaixo irei criar o objeto `user`, contendo algumas propriedades, observem a sintaxe:

```js
const user = {
 name: 'Fernando',
 age: 35,
 email: 'fernando@email.com',
 city: 'Rio de Janeiro',
 blogPosts: ['Estudando JavaScript', 'Criando componentes Vue.js']
}

console.log(typeof user) // object
```

Pegando como exemplo a propriedade `name` acima, podemos observar que `name` é a chave e `'Fernando'` é o valor.

Agora irei imprimir no console o objeto criado acima:

```js
console.log(user) // // {name: "Fernando", age: 35, email: "fernando@email.com", city: "Rio de Janeiro", blogPosts: Array(2)}
```

Para acessar as propriedades do objeto, deveremos utilizar a anotação de ponto `.`.

```js
console.log(user.name) // Fernando
console.log(user.age) // 35
console.log(user.email) // fernando@email.com
console.log(user.city) // Rio de Janeiro
console.log(user.blogPosts) // (2) ['Estudando JavaScript', 'Criando componentes Vue.js']
```

Para sobrescrever uma propriedade do objeto, utilizaremos a reatribuição com o sinal de igual `=`.

```js
console.log(user.name) // Fernando

user.name = 'Joaquim'

console.log(user.name) // Joaquim
```

Também é possível acessar e reatribuir valores utilizando a anotação de colchetes `[]`.

O nome da propriedade dentro dos colchetes precisa ser uma string ou uma variável que armazene uma string.

Acessando valores:

```js
console.log(user['name']) // Joaquim
console.log(user['email']) // fernando@email.com
```

Modificando valores:

```js
user['name'] = 'Patrick'

console.log(user['name']) // Patrick
```

Na maioria das vezes será utilizado a notação de ponto `user.name` para trabalhar com objetos, mas em alguns casos a utilização de colchetes `[]` será necessária, conforme iremos ver em posts mais a frente.

#### Adicionando Métodos

Agora iremos adicionar métodos aos objetos literais, ou seja, adicionaremos algumas funções ao objeto.

Com isso, sabemos que funções criadas fora de um objeto são chamadas de `funções` e as criada dentro de um objeto são chamadas de `métodos`.

```js
const dog = {
 name: 'Buddy',
 age: 6
 color: 'Brown'
 walk: function () {
  console.log('Walking...')
 }
 bark: function () {
  console.log('Au! au! au!')
 }
}
```

No objeto criado acima, foram adicionadas duas propriedades que recebem uma função cada, andar `walk` e de latir `bark`. Como armazenam funções, essas propriedades são na verdade `métodos`.

Para executar, basta utilizarmos a chamada deles:

```js
console.log(dog.walk) // Walking...
console.log(dog.bark) // Au! au! au!
```

Por hoje ficamos por aqui com essa introdução a objetos. Vou deixar abaixo o link para a documentação sobre o tipo de dados `object`.

Documentação da MDN sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)