Objetos JavaScript
Em JavaScript, objects são contêineres para armazenar coleções com chaves de dados variados e entidades mais complexas. Pense neles como uma caixa onde cada compartimento pode
Introdução aos Objetos JavaScript
Em JavaScript, os objects são elementos fundamentais que ajudam a organizar e armazenar dados. Imagine um object JavaScript como uma caixa especial onde você pode guardar vários itens. Cada item dentro dessa caixa é armazenado em um pequeno compartimento rotulado com um nome (chamamos isso de nome da propriedade), e o próprio item é o valor. Ao contrário dos tipos de dados primitivos (como números e strings), um object é um tipo de referência que pode agrupar muitos valores relacionados. Por exemplo, se tivermos uma caixa representando um livro, ela pode ter compartimentos rotulados como "título," "autor," e "número de páginas," com cada compartimento contendo as respectivas informações sobre o livro.
Criando Objects
Usando Literais de Object
Este é um método direto onde você define o object e suas propriedades usando chaves {}:
Neste exemplo, user é um object com duas propriedades: name e age. Você pode ver imediatamente o que o object contém, tornando esse método muito transparente e fácil de usar.
Usando a Sintaxe new Object()
Como alternativa, você pode começar com um object vazio e depois adicionar propriedades uma a uma:
Esse método envolve primeiro criar um object vazio (user) e depois adicionar propriedades (name e age). É útil quando as propriedades do object dependem de lógica condicional ou quando as propriedades são determinadas em tempo de execução.
Abreviação de Propriedades e Métodos
Quando o nome de uma variável corresponde ao nome da propriedade que você deseja usar, você pode evitar a repetição com a abreviação de valor de propriedade. Métodos também têm uma sintaxe mais curta — você pode omitir a parte : function:
name é o mesmo que escrever name: name, e greet() {} é o mesmo que greet: function() {}. Ambas as formas mantêm os literais de object concisos.
Nomes de Propriedades Calculados
Os nomes de propriedades não precisam ser fixos no código. Ao envolver uma expressão entre colchetes [...] dentro do literal, você calcula a chave em tempo de execução:
Isso é especialmente útil quando o nome da propriedade vem de uma entrada do usuário, de um argumento de função ou de uma constante definida em outro lugar.
Objects Aninhados
O valor de uma propriedade pode ser outro object, o que permite modelar dados estruturados e hierárquicos. Acesse valores profundos encadeando a notação de ponto ou de colchetes:
Cada nível é apenas outro object, portanto as mesmas regras de acesso se aplicam em todos os níveis.
Por Que os Objects São Importantes?
Agora que apresentamos os objects JavaScript, você pode se perguntar sobre sua importância prática. Vamos explorar por que dominar os objects JavaScript é essencial para quem está começando sua jornada no desenvolvimento web.
- Organização: Os objects ajudam a manter dados relacionados juntos, tornando seu código mais limpo e fácil de entender. Em vez de ter muitas variáveis separadas, você pode agrupar dados relacionados em um único object.
Este object book mantém todas as informações relacionadas ao livro organizadas de forma clara sob uma única variável.
- Reutilização: Uma vez criado um object, você pode reutilizá-lo em todo o seu código. Isso simplifica o gerenciamento de dados e funcionalidades comuns.
O object user pode ser passado para diferentes funções como displayUserInfo sem precisar redefinir as informações do usuário.
- Flexibilidade: Os objects em JavaScript são muito flexíveis. Você pode adicionar novas propriedades, alterar valores de propriedades existentes ou excluir propriedades conforme necessário.
- Funcionalidade: Os objects também podem conter funções. Essas funções (conhecidas como métodos) podem realizar ações usando os dados armazenados no object.
O object person tem um método greeting que utiliza seus próprios dados para produzir uma saudação. Você pode se perguntar sobre a palavra-chave this neste exemplo, sobre a qual pode encontrar mais informações em nosso artigo sobre a palavra-chave this do JavaScript.
- Protótipos: Todo object JavaScript tem um prototype. Um prototype é um object modelo do qual o object herda métodos e propriedades. Isso permite modelos de herança poderosos.
Aqui, dog herda de animal, portanto tem acesso à propriedade isAlive definida em animal, além de seu próprio método bark.
Acessando e Modificando Propriedades
Os objects permitem que você acesse e modifique suas propriedades usando notação de ponto ou notação de colchetes.
Acessando Propriedades
user.name acessa a propriedade name usando notação de ponto, que é direta e fácil de ler. user["age"] usa a notação de colchetes, útil quando o nome da propriedade está armazenado em uma variável ou não é um identificador válido.
Você também pode recuperar todas as chaves ou valores de um object usando Object.keys() e Object.values():
Esses métodos são úteis para iterar sobre propriedades de objects ou convertê-las em arrays. Para uma análise mais detalhada sobre extração de dados, incluindo Object.entries(), consulte Object.keys, values, entries.
Verificando Se uma Propriedade Existe
Para testar se uma propriedade existe, use o operador in. Ele é mais confiável do que comparar com undefined, porque uma propriedade pode legitimamente ter o valor undefined:
O operador in retorna true sempre que a chave está presente, mesmo que seu valor seja undefined. A verificação === undefined não consegue distinguir uma propriedade ausente de uma que foi explicitamente definida como undefined.
Modificando Propriedades
Você também pode alterar as propriedades de um object ou adicionar novas:
O exemplo mostra como adicionar uma nova propriedade boolean (isAdmin), alterar o valor de uma propriedade existente (name) e excluir uma propriedade (age). Isso demonstra a natureza mutável dos objects JavaScript.
Let vs Const com Objects
Let
Usar let permite a reatribuição do object a um novo object. Essa flexibilidade é útil quando o object inteiro precisa ser substituído.
Const
Com const, você pode modificar as propriedades do object, mas não pode atribuir um novo object à variável. Isso garante que a referência ao object permaneça constante.
Desestruturação de Object e Operador Rest
Desestruturação
A desestruturação permite desempacotar propriedades de um object em variáveis separadas:
Essa sintaxe extrai as propriedades firstName, lastName e age do object person em variáveis individuais, simplificando o acesso a essas propriedades.
Operador Rest
O operador rest (...) é usado para reunir as propriedades restantes que não foram desempacotadas:
Após extrair age, o operador rest coleta as propriedades restantes em um novo object nameDetails, que inclui apenas firstName e lastName.
Atributos e Métodos Avançados de Propriedades
Getters e Setters
Getters e setters são funções que controlam como você acessa e define propriedades de um object:
A propriedade fullName é controlada por um getter e um setter. O getter retorna o nome completo combinando firstName e lastName. O setter recebe um nome completo, divide-o em duas partes e as atribui a firstName e lastName, respectivamente.
Além de getters e setters, cada propriedade também possui atributos ocultos como writable, enumerable e configurable. Para aprender como inspecionar e ajustar esses atributos, consulte Flags e descritores de propriedade.
Conclusão
Os objects JavaScript fornecem uma maneira estruturada, eficiente e poderosa de gerenciar e manipular dados, o que é essencial para criar aplicações web interativas e dinâmicas. Entender como utilizar os objects de forma eficaz é fundamental para qualquer pessoa que deseja avançar suas habilidades em JavaScript.