Chegamos a mais um post da minha saga de estudos 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
- 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:
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:
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 ..
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 =.
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:
console.log(user['name']) // Joaquim
console.log(user['email']) // fernando@email.com
Modificando valores:
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.
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:
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
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:
Top comments (0)