1679136241
Como escrever código limpo em JavaScript
Neste tutorial, você aprenderá como escrever um código limpo em JavaScript. Siga estas mais de 7 dicas simples para ajudá-lo a escrever JavaScript mais limpo e eficiente.
Escrever um código limpo melhora a capacidade de manutenção do aplicativo e torna os desenvolvedores produtivos. No entanto, alguns desenvolvedores desconhecem os recursos de linguagem disponíveis para aprimorar ainda mais o código.
Neste artigo, discutirei como podemos utilizar os recursos do JavaScript para escrever um código limpo.
3+ maneiras de escrever código limpo em JavaScript
Codificar é uma arte, então por que não torná-lo o mais limpo possível? Neste tutorial, examino 3 técnicas que gosto de implementar para ajudar a tornar meu código JavaScript mais fácil de ler e estender.
01-avoid-else-statements.js
function getThemeColors() {
let currentHour = new Date().getHours();
let textColor;
let backgroundColor;
if (currentHour > 20 && currentHour < 7) {
textColor = "#ffffff";
backgroundColor = "#222222";
} else {
textColor = "#222222";
backgroundColor = "#ffffff";
}
return {
textColor: textColor,
backgroundColor: backgroundColor
};
}
02-skip-loop-iterations.js
const numbers = [4, 9, 2, 7, 11];
// Find factors of 12
for (const n of numbers) {
if (12 % n === 0) {
console.log(`${n} is a factor of 12!`);
}
}
03-array-map-for-transformations.js
const names = ["dom", "peter", "aleisha", "sam"];
const capitalized = [];
for (const n of names) {
const newName = n[0].toUpperCase() + n.slice(1);
capitalized.push(newName);
}
Escrevendo código limpo em JavaScript
7 dicas de codificação limpa de JavaScript que todo desenvolvedor deve saber
Escrever um código limpo melhora a capacidade de manutenção do aplicativo e torna os desenvolvedores produtivos. No entanto, alguns desenvolvedores desconhecem os recursos de linguagem disponíveis para aprimorar ainda mais o código.
Neste artigo, discutirei como podemos utilizar os recursos do JavaScript para escrever um código limpo.
1. Use a desestruturação de objetos
A desestruturação de objetos permite que você pegue campos específicos de um objeto e os atribua a uma variável instantaneamente. Ele reduz o número de linhas de código necessárias para extrair as propriedades do objeto e torna seu código mais fácil de entender.
A desestruturação de objetos economiza uma grande quantidade de declarações de variáveis explícitas e é realmente útil em situações em que:
- Usando várias propriedades de um objeto.
- Usando a mesma propriedade várias vezes.
- Usando uma propriedade que está profundamente aninhada em um objeto.
const employee = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};
//with destucturing
const {name, email, phone} = employee;
//without destucturing
const name = employee.name;
const email = employee.email;
const phone = employee.phone;A saída dos dois exemplos acima (com e sem desestruturação) são idênticas. Porém, usar a desestruturação de objetos torna o código muito mais simples e fácil de entender.
2. Use vários parâmetros sobre o parâmetro de objeto único
Ao declarar uma função, devemos sempre usar vários parâmetros de entrada em vez de entradas de objeto único. Essa abordagem ajuda os desenvolvedores a entender facilmente o número mínimo de parâmetros que precisam ser passados observando a assinatura do método.
Além disso, melhora o desempenho do aplicativo, pois não há necessidade de criar parâmetros de objeto ou coletar lixo.
//recommended
function CustomerDetail (CustomerName, CustomerType, Order){
console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');
}
//not-recommended
function CustomerDetail (User){
console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');
}No entanto, se o número de parâmetros de entrada aumentar, você deve voltar a usar parâmetros de objeto para evitar complexidades de código desnecessárias.
Nota : Se você usa TypeScript e tem vários parâmetros, é mais fácil definir a interface dos parâmetros para se beneficiar da verificação de tipo e sugestões automáticas.
3. Use as funções de seta
As funções de seta fornecem uma maneira concisa de escrever funções JavaScript enquanto resolvem o problema de acessar thispropriedades dentro de retornos de chamada.
Se você estiver usando funções de seta, chaves, parênteses, função e palavras-chave de retorno tornam-se opcionais. Mais importante, seu código se torna mais compreensível e claro.
O exemplo abaixo mostra uma comparação entre uma função de seta de linha única sem parênteses e uma função regular.
// Arrow function
const myOrder = order => console.log(`Customer need ${order}`);
// Regular Function
function(order){
console.log(`Customer need ${order}`);
}Embora as funções de seta sejam muito mais simples, devemos entender quando e como usá-las.
Por exemplo, usar funções de seta não é a melhor abordagem ao trabalhar com protótipos de objetos, classes ou literais de objetos.
Além disso, as funções de seta não podem ser usadas como construtores de função. Você receberá um erro se usar a palavra-chave new para criar um novo objeto a partir de uma função de seta.
4. Use Literais de Modelo para Concatenações de String
Os literais de modelo são literais delimitados por acentos graves ( `). Ele fornece uma maneira fácil de criar strings multilinhas e realizar a interpolação de strings.
Por exemplo, podemos definir um espaço reservado em uma string para eliminar todas as concatenações desnecessárias.
//before
var name = 'Peter';
var message = 'Hi'+ name + ',';
//after
var name = 'Peter';
var message = `Hi ${name},`;5. Operador de extensão de spread
O operador de extensão de propagação (…) é outro recurso introduzido com o ES6. Ele é capaz de expandir os literais como arrays em elementos individuais com uma única linha de código.
Este operador é muito útil quando precisamos colocar um array ou objeto em um novo array ou objeto ou combinar vários parâmetros no array.
O código abaixo mostra como combinar 2 arrays usando o operador spread. Como você pode ver, torna o código limpo e fácil de entender, pois não precisamos usar loops ou condições.
let x = [car, bus,van];
let y = [bike, truck, ..x, lorry]
console.log (y);
// bike, truck, car, bus, van, lorry6. Evite chamadas de retorno
Callbacks costumavam ser a maneira mais popular de expressar e manipular funções assíncronas em programas JavaScript. No entanto, se você ainda estiver usando, espero que já conheça a dor de lidar com vários retornos de chamada aninhados.
Por exemplo, o código a seguir contém 4 funções de retorno de chamada e ficará ainda mais difícil à medida que o código começar a crescer.
function1(function (err, data) {
...
function2(user, function (err, data) {
...
function3(profile, function (err, data) {
...
function4(account, function (err, data) {
....
});
});
});
});Como solução, ES6 e ES7 introduziram, Promises e Async/Await para lidar com funções assíncronas, e são muito mais fáceis de usar e tornam seu código facilmente compreensível para outras pessoas.
Mas, se você usar Promises ou Async/Await, seu código ficará limpo e muito fácil de entender.
// Promises
function1()
.then(function2)
.then(function3)
.then(function2)
.catch((err) => console.error(err));
// Async/Await
async function myAsyncFunction() {
try {
const data1= await function1();
const data2= await function2(data1);
const data3= await function3(data2);
return function4(data4);
}
catch (e) {
console.error(err);
}}7. Use taquigrafia sempre que possível
Ao trabalhar com condições, o método abreviado pode economizar muito tempo e espaço.
Por exemplo, se você escrever uma condição para verificar condições vazias, nulas e indefinidas para uma variável, deverá escrever 2 condições dentro da instrução if.
if (x !== “” && x !== null && x !== undefined) { ... }No entanto, se você estiver usando o operador abreviado, basta escrever uma única condição como abaixo:
if ( !!x ) { ... }Pensamentos finais
Neste artigo, discuto como podemos utilizar os recursos do JavaScript para escrever um código limpo.
12 dicas para escrever JavaScript limpo e escalável
Dimensionar seus aplicativos da web pode ser complicado. Siga estas 12 dicas simples para ajudá-lo a escrever JavaScript mais limpo e eficiente.
1. Isole seu código
A coisa mais importante que posso recomendar para manter uma base de código limpa e legível é ter blocos específicos de lógica (geralmente funções) separados por tópico. Se você escrever uma função, a função deve ter como padrão apenas um propósito e não deve fazer várias coisas ao mesmo tempo.
Além disso, você deve evitar causar efeitos colaterais, ou seja, na maioria dos casos, não deve alterar nada que seja declarado fora de sua função. Você recebe dados em funções com parâmetros; todo o resto não deve ser acessado. Se você deseja obter algo da função, returnnovos valores.
2. Modularização
Obviamente, você pode agrupar várias funções em um módulo (e/ou classe, se desejar) se essas funções forem usadas de maneira semelhante ou fizerem coisas semelhantes. Por exemplo, se você tiver muitos cálculos diferentes para fazer, divida-os em etapas isoladas (funções) que você pode encadear. No entanto, essas funções podem ser todas declaradas em um arquivo (módulo). Aqui está o exemplo em JavaScript:
function add(a, b) {
return a + b
}
function subtract(a, b) {
return a - b
}
module.exports = {
add,
subtract
}
const { add, subtract } = require('./calculations')
console.log(subtract(5, add(3, 2))Se você estiver escrevendo JavaScript front-end, definitivamente faça uso de exportações padrão para os itens mais importantes e exportações nomeadas para itens secundários.
3. Prefira vários parâmetros em vez de parâmetros de objeto único
Ao declarar uma função, você sempre deve preferir vários parâmetros a um parâmetro que espera um objeto:
// GOOD
function displayUser(firstName, lastName, age) {
console.log(`This is ${firstName} ${lastName}. She is ${age} years old.`)
}
// BAD
function displayUser(user) {
console.log(`This is ${user.firstName} ${user.lastName}. She is ${user.age} years old.`)
}A razão por trás disso é que você sabe exatamente o que precisa passar para a função quando olha para a primeira linha da declaração da função.
Mesmo que as funções devam ser limitadas em tamanho - fazendo apenas um trabalho - pode acontecer que as funções cresçam em tamanho. Examinar o corpo da função em busca das variáveis que você precisa passar (que estão aninhadas dentro de um objeto) levará mais tempo. Às vezes pode parecer mais fácil apenas usar o objeto inteiro e passá-lo para a função, mas para dimensionar seu aplicativo, essa configuração com certeza ajudará.
Há um certo ponto em que declarar parâmetros específicos não faz sentido. Para mim, está acima de quatro ou cinco parâmetros de função. Se sua função crescer tanto, você deve girar para usar parâmetros de objeto.
A principal razão aqui é que os parâmetros precisam ser passados em uma ordem específica. Se você tiver parâmetros opcionais, precisará passar undefined ou null. Com os parâmetros do objeto, você pode simplesmente passar o objeto inteiro, onde a ordem e undefined os valores não importam.
4. Desestruturando
Destructuring é uma boa ferramenta que foi introduzida com o ES6. Ele permite que você pegue campos específicos de um objeto e atribua-o a uma variável imediatamente. Você pode usar isso para qualquer tipo de objeto ou módulo.
// EXAMPLE FOR MODULES
const { add, subtract } = require('./calculations')Faz sentido importar apenas as funções que você precisa usar em seu arquivo, em vez de todo o módulo, e acessar as funções específicas a partir dele. Da mesma forma, quando você decidir que definitivamente precisa de um objeto como parâmetro de função, use a desestruturação também. Isso ainda vai te dar uma visão geral do que é necessário dentro da função:
function logCountry({name, code, language, currency, population, continent}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})Como você pode ver, ainda sei o que preciso passar para a função — mesmo que ela esteja envolvida em um objeto. Para resolver o problema de saber o que é necessário, veja a próxima dica!
(A propósito, isso também funciona para componentes funcionais do React.)
5. Use valores padrão
Valores padrão para desestruturação ou mesmo parâmetros de funções básicas são muito úteis. Em primeiro lugar, eles fornecem um exemplo de qual valor você pode passar para a função. Em segundo lugar, você pode indicar quais valores são obrigatórios e quais não são. Usando o exemplo anterior, a configuração completa da função pode ser assim:
function logCountry({
name = 'United States',
code,
language = 'English',
currency = 'USD',
population = '327 Million',
continent,
}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})Obviamente, às vezes você pode não querer usar valores padrão e, em vez disso, lançar um erro se não passar um valor. Muitas vezes, no entanto, esse é um truque útil.
6. Escassez de dados
As dicas anteriores nos levam a uma conclusão: não repasse dados que você não precisa. Aqui, novamente, pode significar um pouco mais de trabalho ao configurar suas funções. No longo prazo, no entanto, ele definitivamente fornecerá uma base de código mais legível. É inestimável saber exatamente quais valores são usados em um ponto específico.
7. Limite de linha e recuo
Eu vi arquivos grandes - arquivos muito grandes. Na verdade, mais de 3.000 linhas de código. Encontrar pedaços de lógica é incrivelmente difícil nesses arquivos.
Portanto, você deve limitar o tamanho do arquivo a um determinado número de linhas. Costumo manter meus arquivos abaixo de 100 linhas de código. Às vezes, é difícil dividir os arquivos e eles crescem para 200 a 300 linhas e, em raras ocasiões, até 400.
Acima desse limite, o arquivo fica muito confuso e difícil de manter. Sinta-se à vontade para criar novos módulos e pastas. Seu projeto deve se parecer com uma floresta, consistindo de árvores (seções de módulo) e ramificações (grupos de módulos e arquivos de módulo). Evite tentar imitar os Alpes, acumulando código em áreas confinadas.
Seus arquivos reais, em comparação, devem se parecer com o Shire, com algumas colinas (pequenos níveis de recuo) aqui e ali, mas tudo relativamente plano. Tente manter o nível de recuo abaixo de quatro.
Talvez seja útil habilitar regras de eslint para essas dicas!
8. Use mais bonito
Trabalhar em equipe requer um guia de estilo e formatação claros. O ESLint oferece um enorme conjunto de regras que você pode personalizar de acordo com suas necessidades. Há também eslint --fix, que corrige alguns dos erros, mas não todos.
Em vez disso, recomendo usar o Prettier para formatar seu código. Dessa forma, os desenvolvedores não precisam se preocupar com a formatação do código, mas simplesmente escrever um código de alta qualidade. A aparência será consistente e a formatação automática.
9. Use nomes de variáveis significativos
Idealmente, uma variável deve ser nomeada com base em seu conteúdo. Aqui estão algumas diretrizes que o ajudarão a declarar nomes de variáveis significativos.
Funções
As funções geralmente executam algum tipo de ação. Para explicar isso, os humanos usam verbos – converter ou exibir, por exemplo. É uma boa ideia nomear suas funções com um verbo no início, por exemplo, convertCurrency ou displayUserName.
Matrizes
Estes geralmente contêm uma lista de itens; portanto, acrescente um s ao nome da variável. Por exemplo:
const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']Booleanos
Simplesmente comece com is ou has se aproxime da linguagem natural. Você perguntaria algo como: “Essa pessoa é um professor?” → “Sim” ou “Não”. De forma similar:
const isTeacher = true // OR falsefunções de matriz
forEach, map, reduce, filter, etc. são ótimas funções nativas do JavaScript para lidar com arrays e executar algumas ações. Vejo muita gente simplesmente passando el ou element como parâmetro para as funções de callback. Embora isso seja fácil e rápido, você também deve nomeá-los de acordo com seu valor. Por exemplo:
const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul']
cities.forEach(function(city) {
...
})identidades
Muitas vezes, você precisa acompanhar os IDs de conjuntos de dados e objetos específicos. Quando os IDs estiverem aninhados, simplesmente deixe-os como id. Aqui, eu gosto de mapear o MongoDB _idpara simplesmente id antes de retornar o objeto para o front-end. Ao extrair ids de um objeto, inclua o tipo do objeto antes. Por exemplo:
const studentId = student.id
// OR
const { id: studentId } = student // destructuring with renamingUma exceção a essa regra são as referências do MongoDB nos modelos. Aqui, simplesmente nomeie o campo após o modelo referenciado. Isso manterá as coisas claras ao preencher os documentos de referência:
const StudentSchema = new Schema({
teacher: {
type: Schema.Types.ObjectId,
ref: 'Teacher',
required: true,
},
name: String,
...
})10. Use async / await sempre que possível
Callbacks são os piores quando se trata de legibilidade — especialmente quando aninhados. As promessas foram uma boa melhoria, mas async/await tem a melhor legibilidade, na minha opinião. Mesmo para iniciantes, ou pessoas vindo de outros idiomas, isso vai ajudar bastante. No entanto, certifique-se de entender o conceito por trás dele e não o use sem pensar em todos os lugares.
11. Ordem de importação do módulo
Como vimos nas dicas 1 e 2, manter a lógica no lugar certo é a chave para a manutenção. Da mesma forma, como você importa diferentes módulos pode reduzir a confusão em seus arquivos. Eu sigo uma estrutura simples ao importar diferentes módulos:
// 3rd party packages
import React from 'react'
import styled from 'styled-components'
// Stores
import Store from '~/Store'
// reusable components
import Button from '~/components/Button'
// utility functions
import { add, subtract } from '~/utils/calculate'
// submodules
import Intro from './Intro'
import Selector from './Selector'Usei um componente React como exemplo aqui, pois existem mais tipos de importações. Você deve ser capaz de adaptar isso ao seu caso de uso específico.
12. Livre-se do console
console.log é uma boa maneira de depurar — muito simples, rápido e faz o trabalho. Obviamente, existem ferramentas mais sofisticadas, mas acho que todo desenvolvedor ainda usa. Se você esquecer de limpar os logs, seu console acabará virando uma bagunça gigante. Depois, há logs que você realmente deseja manter em sua base de código; por exemplo, aviso e erros.
Para resolver esse problema, você ainda pode usar console.log para fins de depuração, mas para logs duradouros, use uma biblioteca como loglevel ou winston . Além disso, você pode avisar sobre instruções do console com ESLint. Dessa forma, você pode facilmente procurar console... e remover globalmente essas declarações.
#javascript
What is GEEK
Buddha Community
1622207074
What is JavaScript - Stackfindover - Blog
Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.
Who invented JavaScript?
JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.
What is JavaScript?
JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.
Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.
JavaScript Hello World Program
In JavaScript, ‘document.write‘ is used to represent a string on a browser.
<script type="text/javascript">
document.write("Hello World!");
</script>
How to comment JavaScript code?
- For single line comment in JavaScript we have to use // (double slashes)
- For multiple line comments we have to use / * – – * /
<script type="text/javascript">
//single line comment
/* document.write("Hello"); */
</script>
Advantages and Disadvantages of JavaScript
#javascript #javascript code #javascript hello world #what is javascript #who invented javascript
1616670795
Hire Dedicated JavaScript Developers -Hire JavaScript Developers
It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.
Does your business need an interactive website or app?
Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.
The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.
Get your business app with JavaScript
For more inquiry click here https://bit.ly/31eZyDZ
Book Free Interview: https://bit.ly/3dDShFg
#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers
1589255577
The essential JavaScript concepts that you should understand
As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.
#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips
1679136241
Como escrever código limpo em JavaScript
Neste tutorial, você aprenderá como escrever um código limpo em JavaScript. Siga estas mais de 7 dicas simples para ajudá-lo a escrever JavaScript mais limpo e eficiente.
Escrever um código limpo melhora a capacidade de manutenção do aplicativo e torna os desenvolvedores produtivos. No entanto, alguns desenvolvedores desconhecem os recursos de linguagem disponíveis para aprimorar ainda mais o código.
Neste artigo, discutirei como podemos utilizar os recursos do JavaScript para escrever um código limpo.
3+ maneiras de escrever código limpo em JavaScript
Codificar é uma arte, então por que não torná-lo o mais limpo possível? Neste tutorial, examino 3 técnicas que gosto de implementar para ajudar a tornar meu código JavaScript mais fácil de ler e estender.
01-avoid-else-statements.js
function getThemeColors() {
let currentHour = new Date().getHours();
let textColor;
let backgroundColor;
if (currentHour > 20 && currentHour < 7) {
textColor = "#ffffff";
backgroundColor = "#222222";
} else {
textColor = "#222222";
backgroundColor = "#ffffff";
}
return {
textColor: textColor,
backgroundColor: backgroundColor
};
}
02-skip-loop-iterations.js
const numbers = [4, 9, 2, 7, 11];
// Find factors of 12
for (const n of numbers) {
if (12 % n === 0) {
console.log(`${n} is a factor of 12!`);
}
}
03-array-map-for-transformations.js
const names = ["dom", "peter", "aleisha", "sam"];
const capitalized = [];
for (const n of names) {
const newName = n[0].toUpperCase() + n.slice(1);
capitalized.push(newName);
}
Escrevendo código limpo em JavaScript
7 dicas de codificação limpa de JavaScript que todo desenvolvedor deve saber
Escrever um código limpo melhora a capacidade de manutenção do aplicativo e torna os desenvolvedores produtivos. No entanto, alguns desenvolvedores desconhecem os recursos de linguagem disponíveis para aprimorar ainda mais o código.
Neste artigo, discutirei como podemos utilizar os recursos do JavaScript para escrever um código limpo.
1. Use a desestruturação de objetos
A desestruturação de objetos permite que você pegue campos específicos de um objeto e os atribua a uma variável instantaneamente. Ele reduz o número de linhas de código necessárias para extrair as propriedades do objeto e torna seu código mais fácil de entender.
A desestruturação de objetos economiza uma grande quantidade de declarações de variáveis explícitas e é realmente útil em situações em que:
- Usando várias propriedades de um objeto.
- Usando a mesma propriedade várias vezes.
- Usando uma propriedade que está profundamente aninhada em um objeto.
const employee = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};
//with destucturing
const {name, email, phone} = employee;
//without destucturing
const name = employee.name;
const email = employee.email;
const phone = employee.phone;A saída dos dois exemplos acima (com e sem desestruturação) são idênticas. Porém, usar a desestruturação de objetos torna o código muito mais simples e fácil de entender.
2. Use vários parâmetros sobre o parâmetro de objeto único
Ao declarar uma função, devemos sempre usar vários parâmetros de entrada em vez de entradas de objeto único. Essa abordagem ajuda os desenvolvedores a entender facilmente o número mínimo de parâmetros que precisam ser passados observando a assinatura do método.
Além disso, melhora o desempenho do aplicativo, pois não há necessidade de criar parâmetros de objeto ou coletar lixo.
//recommended
function CustomerDetail (CustomerName, CustomerType, Order){
console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');
}
//not-recommended
function CustomerDetail (User){
console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');
}No entanto, se o número de parâmetros de entrada aumentar, você deve voltar a usar parâmetros de objeto para evitar complexidades de código desnecessárias.
Nota : Se você usa TypeScript e tem vários parâmetros, é mais fácil definir a interface dos parâmetros para se beneficiar da verificação de tipo e sugestões automáticas.
3. Use as funções de seta
As funções de seta fornecem uma maneira concisa de escrever funções JavaScript enquanto resolvem o problema de acessar thispropriedades dentro de retornos de chamada.
Se você estiver usando funções de seta, chaves, parênteses, função e palavras-chave de retorno tornam-se opcionais. Mais importante, seu código se torna mais compreensível e claro.
O exemplo abaixo mostra uma comparação entre uma função de seta de linha única sem parênteses e uma função regular.
// Arrow function
const myOrder = order => console.log(`Customer need ${order}`);
// Regular Function
function(order){
console.log(`Customer need ${order}`);
}Embora as funções de seta sejam muito mais simples, devemos entender quando e como usá-las.
Por exemplo, usar funções de seta não é a melhor abordagem ao trabalhar com protótipos de objetos, classes ou literais de objetos.
Além disso, as funções de seta não podem ser usadas como construtores de função. Você receberá um erro se usar a palavra-chave new para criar um novo objeto a partir de uma função de seta.
4. Use Literais de Modelo para Concatenações de String
Os literais de modelo são literais delimitados por acentos graves ( `). Ele fornece uma maneira fácil de criar strings multilinhas e realizar a interpolação de strings.
Por exemplo, podemos definir um espaço reservado em uma string para eliminar todas as concatenações desnecessárias.
//before
var name = 'Peter';
var message = 'Hi'+ name + ',';
//after
var name = 'Peter';
var message = `Hi ${name},`;5. Operador de extensão de spread
O operador de extensão de propagação (…) é outro recurso introduzido com o ES6. Ele é capaz de expandir os literais como arrays em elementos individuais com uma única linha de código.
Este operador é muito útil quando precisamos colocar um array ou objeto em um novo array ou objeto ou combinar vários parâmetros no array.
O código abaixo mostra como combinar 2 arrays usando o operador spread. Como você pode ver, torna o código limpo e fácil de entender, pois não precisamos usar loops ou condições.
let x = [car, bus,van];
let y = [bike, truck, ..x, lorry]
console.log (y);
// bike, truck, car, bus, van, lorry6. Evite chamadas de retorno
Callbacks costumavam ser a maneira mais popular de expressar e manipular funções assíncronas em programas JavaScript. No entanto, se você ainda estiver usando, espero que já conheça a dor de lidar com vários retornos de chamada aninhados.
Por exemplo, o código a seguir contém 4 funções de retorno de chamada e ficará ainda mais difícil à medida que o código começar a crescer.
function1(function (err, data) {
...
function2(user, function (err, data) {
...
function3(profile, function (err, data) {
...
function4(account, function (err, data) {
....
});
});
});
});Como solução, ES6 e ES7 introduziram, Promises e Async/Await para lidar com funções assíncronas, e são muito mais fáceis de usar e tornam seu código facilmente compreensível para outras pessoas.
Mas, se você usar Promises ou Async/Await, seu código ficará limpo e muito fácil de entender.
// Promises
function1()
.then(function2)
.then(function3)
.then(function2)
.catch((err) => console.error(err));
// Async/Await
async function myAsyncFunction() {
try {
const data1= await function1();
const data2= await function2(data1);
const data3= await function3(data2);
return function4(data4);
}
catch (e) {
console.error(err);
}}7. Use taquigrafia sempre que possível
Ao trabalhar com condições, o método abreviado pode economizar muito tempo e espaço.
Por exemplo, se você escrever uma condição para verificar condições vazias, nulas e indefinidas para uma variável, deverá escrever 2 condições dentro da instrução if.
if (x !== “” && x !== null && x !== undefined) { ... }No entanto, se você estiver usando o operador abreviado, basta escrever uma única condição como abaixo:
if ( !!x ) { ... }Pensamentos finais
Neste artigo, discuto como podemos utilizar os recursos do JavaScript para escrever um código limpo.
12 dicas para escrever JavaScript limpo e escalável
Dimensionar seus aplicativos da web pode ser complicado. Siga estas 12 dicas simples para ajudá-lo a escrever JavaScript mais limpo e eficiente.
1. Isole seu código
A coisa mais importante que posso recomendar para manter uma base de código limpa e legível é ter blocos específicos de lógica (geralmente funções) separados por tópico. Se você escrever uma função, a função deve ter como padrão apenas um propósito e não deve fazer várias coisas ao mesmo tempo.
Além disso, você deve evitar causar efeitos colaterais, ou seja, na maioria dos casos, não deve alterar nada que seja declarado fora de sua função. Você recebe dados em funções com parâmetros; todo o resto não deve ser acessado. Se você deseja obter algo da função, returnnovos valores.
2. Modularização
Obviamente, você pode agrupar várias funções em um módulo (e/ou classe, se desejar) se essas funções forem usadas de maneira semelhante ou fizerem coisas semelhantes. Por exemplo, se você tiver muitos cálculos diferentes para fazer, divida-os em etapas isoladas (funções) que você pode encadear. No entanto, essas funções podem ser todas declaradas em um arquivo (módulo). Aqui está o exemplo em JavaScript:
function add(a, b) {
return a + b
}
function subtract(a, b) {
return a - b
}
module.exports = {
add,
subtract
}
const { add, subtract } = require('./calculations')
console.log(subtract(5, add(3, 2))Se você estiver escrevendo JavaScript front-end, definitivamente faça uso de exportações padrão para os itens mais importantes e exportações nomeadas para itens secundários.
3. Prefira vários parâmetros em vez de parâmetros de objeto único
Ao declarar uma função, você sempre deve preferir vários parâmetros a um parâmetro que espera um objeto:
// GOOD
function displayUser(firstName, lastName, age) {
console.log(`This is ${firstName} ${lastName}. She is ${age} years old.`)
}
// BAD
function displayUser(user) {
console.log(`This is ${user.firstName} ${user.lastName}. She is ${user.age} years old.`)
}A razão por trás disso é que você sabe exatamente o que precisa passar para a função quando olha para a primeira linha da declaração da função.
Mesmo que as funções devam ser limitadas em tamanho - fazendo apenas um trabalho - pode acontecer que as funções cresçam em tamanho. Examinar o corpo da função em busca das variáveis que você precisa passar (que estão aninhadas dentro de um objeto) levará mais tempo. Às vezes pode parecer mais fácil apenas usar o objeto inteiro e passá-lo para a função, mas para dimensionar seu aplicativo, essa configuração com certeza ajudará.
Há um certo ponto em que declarar parâmetros específicos não faz sentido. Para mim, está acima de quatro ou cinco parâmetros de função. Se sua função crescer tanto, você deve girar para usar parâmetros de objeto.
A principal razão aqui é que os parâmetros precisam ser passados em uma ordem específica. Se você tiver parâmetros opcionais, precisará passar undefined ou null. Com os parâmetros do objeto, você pode simplesmente passar o objeto inteiro, onde a ordem e undefined os valores não importam.
4. Desestruturando
Destructuring é uma boa ferramenta que foi introduzida com o ES6. Ele permite que você pegue campos específicos de um objeto e atribua-o a uma variável imediatamente. Você pode usar isso para qualquer tipo de objeto ou módulo.
// EXAMPLE FOR MODULES
const { add, subtract } = require('./calculations')Faz sentido importar apenas as funções que você precisa usar em seu arquivo, em vez de todo o módulo, e acessar as funções específicas a partir dele. Da mesma forma, quando você decidir que definitivamente precisa de um objeto como parâmetro de função, use a desestruturação também. Isso ainda vai te dar uma visão geral do que é necessário dentro da função:
function logCountry({name, code, language, currency, population, continent}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})Como você pode ver, ainda sei o que preciso passar para a função — mesmo que ela esteja envolvida em um objeto. Para resolver o problema de saber o que é necessário, veja a próxima dica!
(A propósito, isso também funciona para componentes funcionais do React.)
5. Use valores padrão
Valores padrão para desestruturação ou mesmo parâmetros de funções básicas são muito úteis. Em primeiro lugar, eles fornecem um exemplo de qual valor você pode passar para a função. Em segundo lugar, você pode indicar quais valores são obrigatórios e quais não são. Usando o exemplo anterior, a configuração completa da função pode ser assim:
function logCountry({
name = 'United States',
code,
language = 'English',
currency = 'USD',
population = '327 Million',
continent,
}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})Obviamente, às vezes você pode não querer usar valores padrão e, em vez disso, lançar um erro se não passar um valor. Muitas vezes, no entanto, esse é um truque útil.
6. Escassez de dados
As dicas anteriores nos levam a uma conclusão: não repasse dados que você não precisa. Aqui, novamente, pode significar um pouco mais de trabalho ao configurar suas funções. No longo prazo, no entanto, ele definitivamente fornecerá uma base de código mais legível. É inestimável saber exatamente quais valores são usados em um ponto específico.
7. Limite de linha e recuo
Eu vi arquivos grandes - arquivos muito grandes. Na verdade, mais de 3.000 linhas de código. Encontrar pedaços de lógica é incrivelmente difícil nesses arquivos.
Portanto, você deve limitar o tamanho do arquivo a um determinado número de linhas. Costumo manter meus arquivos abaixo de 100 linhas de código. Às vezes, é difícil dividir os arquivos e eles crescem para 200 a 300 linhas e, em raras ocasiões, até 400.
Acima desse limite, o arquivo fica muito confuso e difícil de manter. Sinta-se à vontade para criar novos módulos e pastas. Seu projeto deve se parecer com uma floresta, consistindo de árvores (seções de módulo) e ramificações (grupos de módulos e arquivos de módulo). Evite tentar imitar os Alpes, acumulando código em áreas confinadas.
Seus arquivos reais, em comparação, devem se parecer com o Shire, com algumas colinas (pequenos níveis de recuo) aqui e ali, mas tudo relativamente plano. Tente manter o nível de recuo abaixo de quatro.
Talvez seja útil habilitar regras de eslint para essas dicas!
8. Use mais bonito
Trabalhar em equipe requer um guia de estilo e formatação claros. O ESLint oferece um enorme conjunto de regras que você pode personalizar de acordo com suas necessidades. Há também eslint --fix, que corrige alguns dos erros, mas não todos.
Em vez disso, recomendo usar o Prettier para formatar seu código. Dessa forma, os desenvolvedores não precisam se preocupar com a formatação do código, mas simplesmente escrever um código de alta qualidade. A aparência será consistente e a formatação automática.
9. Use nomes de variáveis significativos
Idealmente, uma variável deve ser nomeada com base em seu conteúdo. Aqui estão algumas diretrizes que o ajudarão a declarar nomes de variáveis significativos.
Funções
As funções geralmente executam algum tipo de ação. Para explicar isso, os humanos usam verbos – converter ou exibir, por exemplo. É uma boa ideia nomear suas funções com um verbo no início, por exemplo, convertCurrency ou displayUserName.
Matrizes
Estes geralmente contêm uma lista de itens; portanto, acrescente um s ao nome da variável. Por exemplo:
const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']Booleanos
Simplesmente comece com is ou has se aproxime da linguagem natural. Você perguntaria algo como: “Essa pessoa é um professor?” → “Sim” ou “Não”. De forma similar:
const isTeacher = true // OR falsefunções de matriz
forEach, map, reduce, filter, etc. são ótimas funções nativas do JavaScript para lidar com arrays e executar algumas ações. Vejo muita gente simplesmente passando el ou element como parâmetro para as funções de callback. Embora isso seja fácil e rápido, você também deve nomeá-los de acordo com seu valor. Por exemplo:
const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul']
cities.forEach(function(city) {
...
})identidades
Muitas vezes, você precisa acompanhar os IDs de conjuntos de dados e objetos específicos. Quando os IDs estiverem aninhados, simplesmente deixe-os como id. Aqui, eu gosto de mapear o MongoDB _idpara simplesmente id antes de retornar o objeto para o front-end. Ao extrair ids de um objeto, inclua o tipo do objeto antes. Por exemplo:
const studentId = student.id
// OR
const { id: studentId } = student // destructuring with renamingUma exceção a essa regra são as referências do MongoDB nos modelos. Aqui, simplesmente nomeie o campo após o modelo referenciado. Isso manterá as coisas claras ao preencher os documentos de referência:
const StudentSchema = new Schema({
teacher: {
type: Schema.Types.ObjectId,
ref: 'Teacher',
required: true,
},
name: String,
...
})10. Use async / await sempre que possível
Callbacks são os piores quando se trata de legibilidade — especialmente quando aninhados. As promessas foram uma boa melhoria, mas async/await tem a melhor legibilidade, na minha opinião. Mesmo para iniciantes, ou pessoas vindo de outros idiomas, isso vai ajudar bastante. No entanto, certifique-se de entender o conceito por trás dele e não o use sem pensar em todos os lugares.
11. Ordem de importação do módulo
Como vimos nas dicas 1 e 2, manter a lógica no lugar certo é a chave para a manutenção. Da mesma forma, como você importa diferentes módulos pode reduzir a confusão em seus arquivos. Eu sigo uma estrutura simples ao importar diferentes módulos:
// 3rd party packages
import React from 'react'
import styled from 'styled-components'
// Stores
import Store from '~/Store'
// reusable components
import Button from '~/components/Button'
// utility functions
import { add, subtract } from '~/utils/calculate'
// submodules
import Intro from './Intro'
import Selector from './Selector'Usei um componente React como exemplo aqui, pois existem mais tipos de importações. Você deve ser capaz de adaptar isso ao seu caso de uso específico.
12. Livre-se do console
console.log é uma boa maneira de depurar — muito simples, rápido e faz o trabalho. Obviamente, existem ferramentas mais sofisticadas, mas acho que todo desenvolvedor ainda usa. Se você esquecer de limpar os logs, seu console acabará virando uma bagunça gigante. Depois, há logs que você realmente deseja manter em sua base de código; por exemplo, aviso e erros.
Para resolver esse problema, você ainda pode usar console.log para fins de depuração, mas para logs duradouros, use uma biblioteca como loglevel ou winston . Além disso, você pode avisar sobre instruções do console com ESLint. Dessa forma, você pode facilmente procurar console... e remover globalmente essas declarações.
#javascript
1626321063
JS Development Company India | JavaScript Development Services
PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.
With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.
Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.
Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.
#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company