10 convenções essenciais de nomenclatura do JavaScript que todo desenvolvedor deve conhecer

É essencial manter a simplicidade, legibilidade e facilidade de manutenção em seu código para gerenciar projetos JavaScript complexos. A adesão consistente às convenções de nomenclatura é a chave para atingir esse objetivo.

Variáveis, booleanas, funções, constantes, classes, componentes, métodos, funções privadas, variáveis ​​globais e arquivos estão entre os elementos JavaScript que requerem convenções de nomenclatura consistentes. Você pode melhorar a organização e a compreensão do código implementando convenções de nomenclatura padronizadas em todos esses componentes, economizando tempo e esforço a longo prazo.

1. Nomeando Variáveis

Em JavaScript, os dados são armazenados em variáveis. É essencial escolher nomes descritivos para variáveis ​​que reflitam com precisão sua função. Você poderia, por exemplo, substituir nome de usuário ou preço total para o nome de uma variável em vez de x.

Uma boa maneira de nomear variáveis ​​é a seguinte:

deixar Preço total = 100;
deixar nome de usuário = "John";

A legibilidade de código aprimorada pode ser alcançada usando nomes de variáveis ​​descritivos

2. Nomenclatura Booleana

Variáveis ​​que podem ter apenas dois valores, ou seja, verdadeiro ou falso, são conhecidos como booleanos. É crucial escolher nomes apropriados para variáveis ​​booleanas que expressem seu propósito.

Para ilustrar, em vez de optar por um nome de variável como é verdade, você deve preferir ir com é válido ou temValor.

Considere esta instância:

deixar isValid = verdadeiro;
deixar temValor = falso;

Neste exemplo, nomes de variáveis ​​booleanas descritivas deixam claro o que elas representam.

3. Funções de nomeação

Uma função em JavaScript refere-se a uma unidade de código independente que se destina a executar uma tarefa específica. É um bloco de código que pode ser chamado por outras partes do código e funciona como uma entidade independente.

Para nomear as funções com eficácia, use nomes descritivos que transmitam seu propósito. Por exemplo, em vez de criando uma funçãofoo, opte por nomes mais ilustrativos como validarUserInput ou calcularPreçoTotal.

Por exemplo:

funçãocalcularPreçoTotal(preço, quantidade) {
retornar preço * quantidade;
}
funçãovalidarUserInput(entrada) {
retornar entrada !== indefinido && entrada !== nulo;
}

4. Constantes de nomenclatura

Constantes são variáveis ​​que não podem ser reatribuídas. Ao nomear constantes, é importante usar todas as letras maiúsculas e sublinhados para separar as palavras.

Por exemplo:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;

Neste exemplo, todas as letras maiúsculas e sublinhados foram usados ​​para separar as palavras nos nomes das constantes.

5. Nomeando Classes

Em JavaScript, os objetos podem ser criados usando esquemas chamados classes. Para obter práticas de nomenclatura imaculadas, é de extrema importância executar PascalCase, uma convenção de nomenclatura que exige a capitalização da primeira letra de cada palavra.

Veja, por exemplo:

aulaCarrinho de compras{
construtor(marca, modelo) {
esse.fazer = fazer;
esse.modelo = modelo;
 }
}

Neste exemplo, a classe Carrinho de compras foi nomeado usando PascalCase, o que significa que a primeira letra de cada palavra no nome da classe foi maiúscula e não há espaços ou sublinhados entre as palavras.

6. Componentes de nomeação

Os componentes são blocos de construção essenciais no desenvolvimento de software moderno, particularmente em frameworks como React, que enfatizam o código reutilizável.

Ao dividir uma interface de usuário ou aplicativo complexo em partes menores e gerenciáveis, você pode criar componentes que podem ser reutilizados em diferentes projetos, reduzindo o tempo de desenvolvimento e aumentando o código eficiência.

Novamente, é altamente recomendável usar a convenção de nomenclatura PascalCase para nomear componentes. Isso significa colocar em maiúscula a primeira letra de cada palavra no nome do componente.

Essa convenção ajuda você a distinguir componentes de outros segmentos de código, simplificando a identificação e a manipulação.

funçãoBotão(adereços) {
retornar<botão>{props.label}botão>;
}

Neste exemplo, a convenção de nomenclatura PascalCase foi usada para nomear o componente Botão.

7. Métodos de nomeação

Ao nomear métodos, é crucial usar nomes descritivos que comuniquem com sucesso o que o método realiza, pois métodos são funções que pertencem a um objeto.

Por exemplo:

aulaCarro{
construtor(marca, modelo) {
esse.fazer = fazer;
esse.modelo = modelo;
 }
 Ligue o motor() {
// código para iniciar o motor 
 } 
 stopEngine() { 
// código para parar o motor 
 }
 }
}

Nomes descritivos (Ligue o motor, parar o motor) são usados ​​para os métodos neste exemplo, garantindo que a finalidade pretendida seja facilmente compreendida.

8. Nomeando Funções Privadas

As funções definidas como privadas são restritas ao acesso apenas dentro do objeto onde são definidas. É crucial adicionar um sublinhado inicial (_) para indicar que as funções são privadas.

Aqui está um exemplo:

aulaCarro{
construtor(marca, modelo) {
esse.fazer = fazer;
esse.modelo = modelo;
 }
 _Ligue o motor() {
// código para iniciar o motor
 }
 _stopEngine() {
// código para parar o motor
 }
}

Ao usar um sublinhado inicial neste exemplo, é indicado que as funções são privadas.

9. Nomeando Variáveis ​​Globais

As variáveis ​​classificadas como globais podem ser acessadas de qualquer parte da base de código. Ao nomear essas variáveis ​​globais, é crucial usar nomes claros e descritivos que transmitam efetivamente a finalidade pretendida.

Por exemplo:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;
funçãoVeja o preço(preço) {
se (preço > MAX_PRICE) {
// código para lidar com preços altos
 } outrose (preço < MIN_PRICE) {
// código para lidar com preços baixos
 }
}

10. Nomeando arquivos

A organização eficiente de arquivos é um aspecto crucial do gerenciamento bem-sucedido de projetos JavaScript. Para garantir convenções de nomenclatura simplificadas e consistentes, é essencial separar as palavras nos nomes dos arquivos usando letras minúsculas e hífens.

Letras minúsculas são preferidas porque JavaScript é uma linguagem que diferencia maiúsculas de minúsculas, o que significa que a linguagem trata letras minúsculas e maiúsculas de maneira diferente. Usar letras minúsculas para nomes de arquivo garante consistência e evita confusão ao fazer referência a arquivos no código.

Hífens são usados ​​para separar palavras em nomes de arquivo porque espaços não são permitidos em nomes de arquivo. Outras alternativas, como sublinhados ou camelCase, também podem ser usadas, mas hífens são geralmente preferidos por sua legibilidade.

O uso de hifens também torna os nomes de arquivo mais acessíveis para usuários com leitores de tela ou outras tecnologias assistivas.

meu-aplicativo/
├── src/
 ├── componentes/
 ├── botão.js
 ├── input-field.js
├── utilitários/
 ├── string-utils.js
 ├── date-utils.js
├── app.js
├── index.js

Neste exemplo, letras minúsculas e hifens são usados ​​para separar as palavras nos nomes dos arquivos.

Importância de seguir as convenções de nomenclatura em JavaScript

Seguir boas convenções de nomenclatura é um aspecto essencial da escrita de código limpo e sustentável em JavaScript. Seguindo essas convenções, você pode tornar seu código mais legível e fácil de manter, especialmente em alguns Estruturas de JavaScript em que é necessário lidar com código volumoso, o que pode economizar tempo e esforço na longo prazo.