Property accessors e porque você deveria saber usá-los

Este é um artigo que se propõe a explicar uma forma mais eficaz de utilizar Objetos em JavaScript. Muitos talvez conheçam este conteúdo, outros tantos nunca ouviram falar, justamente por aprenderem jQuery antes de aprender JavaScript. Mas enfim, esperamos que todos possam tirar algum proveito desta matéria. Um objeto em JavaScript nada mais é do

Este é um artigo que se propõe a explicar uma forma mais eficaz de utilizar Objetos em JavaScript.

Muitos talvez conheçam este conteúdo, outros tantos nunca ouviram falar, justamente por aprenderem jQuery antes de aprender JavaScript. Mas enfim, esperamos que todos possam tirar algum proveito desta matéria.

Um objeto em JavaScript nada mais é do que um array associativo onde cada “associação” é uma propriedade do objeto. Isso dito, todo sabemos que para acessar um array, precisamos fornecer um índice. É nesse momento que entram os property accessors.

Existem duas notações para acessar o índice desejado em um objeto JavaScript:

A notação que acabou se tornando o mais popular é a Dot Notation porque também ela é usada para encadeamento de métodos, por exemplo:

Essa notação é muito poderosa e certamente deve ser adotada como padrão, mas há limitações e casos onde o mais aconselhado é utilizar Bracket Notation. Vamos a alguns exemplos:

Acessando múltiplas propriedades:

Se você utiliza modularização de JavaScript, já deve ter deparado com o seguinte cenário:

Ok, tudo certo, mas suponhamos que, ao invés de apenas clients, pages e accounts, como no exemplo acima, eu tenha 15 módulos para iniciar.

Mas isso é horrível! E se eu quiser rodar métodos de forma dinâmica? Quem poderá nos ajudar? Aí que entra a beleza do Bracket Notation. Vamos ver duas formas de fazer isso:

O código acima utiliza o método nativo keys() do objeto JavaScript. Esse método retorna um array com todos os índices do nosso objeto. Baseado nisso, fazemos um for para executar o método init() que definimos para cada um dos módulos.

Outra forma de fazer isso é utilizando o for…in. Vejamos:

Muito melhor, não? Outra possibilidade é você executar apenas os módulos que deseja. Suponhamos que você queira carregar módulos por página, basta fazer:

Quando o laço for…in é executado em um array, ele retorna como key sempre o índice numérico, logo, nosso código está rodando o método init de cada módulo que tem o nome naquele array. Isso é muito legal.

Executando métodos de forma dinâmica:

Quando entendemos o conceito, muitas possibilidades se abrem. Vamos a outro exemplo prático: um sticky menu. Esses dias me deparei com o seguinte código:

O que está errado? Nada. Mas poderíamos fazer isso de forma mais simples com bracket notation utilizando um ternário:

Isso é possível porque um objeto jQuery tem as suas propriedades como qualquer outro objeto, logo, nós podemos acessá-las da forma como bem entendermos.

Enfim, estes são apenas exemplos simples da liberdade que temos quando compreendemos de fato como funcionam os property accessors. Este simples conceito pode mudar a forma como desenvolvemos e nos fornecer uma liberdade incrível.

E quanto a performance? Nunca tema usar a Bracket Notation: ela é mais performática. Veja em https://jsperf.com/filipe-property-accessors.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *