o JavaScript 코드를 개선하는 방법

이미 JavaScript로 여정을 시작했다면 언어를 마스터하는 것이 첫 번째 단계에 불과하다는 것을 알고 계실 것입니다. 작성한 코드 품질은 유지 관리를 촉진하고 장기적으로 문제를 방지하는 데 있어 큰 차이를 만들 수 있습니다. 모범 사례를 따르면 코드의 가독성이 향상될 뿐만 아니라 다른 개발자와의 공동작업에도 도움이 되고 버그 위험이 줄어듭니다. .

이 글에서는 모든 개발자가 JavaScript를 작성할 때 채택해야 하는 5가지 필수 모범 사례를 공유하겠습니다. 이러한 팁은 변수의 올바른 사용부터 코드 모듈화에 이르기까지 다양하며, 코드를 보다 효율적, 정리 및 하도록 보장합니다. 이해하기 쉽다. 갈까요?

1. var: 대신 const와 let을 사용하세요.

수없이 들어보셨겠지만 믿어주세요, 일상생활에서 입양하기 위한 필수 팁입니다.

var를 제한을 존중하지 않는 사람으로 생각하면 마치 존재하지 않는 것처럼 장벽을 무시하면서 코드 전체에 순환이 허용됩니다(이 경우 블록 범위). 루프 내부에 변수를 선언했는데 갑자기 아무 일도 없었던 것처럼 루프 외부에 변수가 나타난다고 상상해 보세요. 완전한 혼란.

이제 const와 let을 사용하여 이러한 장벽을 부과합니다. Let은 한계를 존중할 줄 아는 동료처럼 행동하는 반면, const는 자신의 의견을 결코 바꾸지 않는 완고한 친구입니다. 이는 코드 구성을 개선하는 것 외에도 var의 "자유"로 인해 발생하는 추적하기 어려운 버그를 피할 수 있음을 의미합니다.

따라서 최신 브라우저에서 var를 사용하는 것은 기본적으로 버그를 생성하라는 의미입니다!

// Com var (confusão garantida)
for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // 3 (Você esperava que o i ficasse apenas dentro do loop? Pois é... surpresa!)


// Com let (tudo nos seus devidos lugares)
for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // Erro: i is not defined (como deveria ser!)

팁: 값이 변경되지 않는 변수에는 const를 사용하고, 재할당 가능한 변수에는 let을 사용하세요.

예:

// Usando const (valor constante)
const pi = 3.14159;
console.log(pi); // 3.14159

// Tentar reatribuir um valor a pi causará erro
// pi = 3.14; // Erro: Assignment to constant variable.

// Usando let para valores que mudam
let totalPedidos = 0;
totalPedidos += 1; // Novo pedido chegou
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 1

// Um novo pedido chegou, então podemos atualizar a variável
totalPedidos += 1;
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 2

---

2. 객체 및 배열 구조 분해

객체와 배열을 구조화하는 것은 선물을 열고 모든 것을 검색할 필요 없이 관심 있는 항목을 바로 찾는 것과 같습니다. 각 속성이나 항목에 개별적으로 액세스하는 대신 구조 분해를 사용하면 빠르고 우아한 방식으로 필요한 것을 정확하게 얻을 수 있습니다. — 훨씬 더 실용적이죠?

// Sem destruturação (muito trabalho)
const pessoa = { nome: 'João', idade: 30, profissão: 'Engenheiro' };
const nome = pessoa.nome;
const idade = pessoa.idade;
console.log(nome, idade); // João 30

// Com destruturação (muito mais simples)
const { nome, idade } = pessoa;
console.log(nome, idade); // João 30

배열에서도 같은 마법이 일어납니다. 값 목록이 있고 처음 몇 개의 요소만 원한다고 가정해 보겠습니다. 계속해서 항목별로 선택할 필요가 없습니다. 구조 분해를 사용하면 원하는 것을 직접 가져올 수 있습니다.

// Sem destruturação
const numeros = [10, 20, 30, 40];
const primeiro = numeros[0];
const segundo = numeros[1];
console.log(primeiro, segundo); // 10 20

// Com destruturação
const [primeiro, segundo] = numeros;
console.log(primeiro, segundo); // 10 20

팁:

객체나 배열의 여러 값에 액세스해야 할 때마다 구조 분해를 사용하세요. 이렇게 하면 코드가 더 깔끔하고 가독성이 됩니다.

---

3. 익명 기능의 과도한 사용을 피하세요

익명 기능을 사용하면 편리해 보일 수도 있지만, 책임을 묻지 않고 지시를 내리는 것과 같습니다. 모든 것이 올바르게 작동하면 정말 좋습니다. 하지만 뭔가 잘못되면 누구를 비난하겠습니까? 문제를 찾기가 어렵습니다. 함수에 이름을 지정하면 코드가 명확해지고 디버깅이 쉬워집니다.

기능 이름을 지정하고 각 기능이 수행하는 작업을 완전히 제어할 수 있습니다.

// Função anônima (sem nome, sem controle)
setTimeout(function() {
    console.log('Função anônima em ação');
}, 1000);

// Função nomeada (muito mais organizado)
function exibeMensagem() {
    console.log('Função com nome');
}
setTimeout(exibeMensagem, 1000);

팁:
가능하다면 함수 이름을 명확하게 설명적으로 지정하세요. 가독성이 높은 코드는 유지 관리가 훨씬 쉽습니다.

---

4. ==보다 ===를 선호하세요

'반짝이는 것이 모두 금은 아니다'라는 말 아시죠? ==가 바로 그런 경우입니다. 암시적 변환을 수행하지만 결국 예기치 않은 결과를 ​​가져옵니다.

=== "생각해보자"에 대한 내용은 없습니다. 엄격한 비교를 수행하여 값과 유형이 정확히 동일한지 확인합니다.

==가 ​​형사라면 신뢰할 수 없는 단서라도 받아들일 것입니다. === 확실한 증거가 있어야만 작동합니다. 가는 길에 혼란이 없을 것이라고 보장합니다.

// Comparação com == (pode ser traiçoeiro)
console.log(1 == '1'); // true (conversão implícita de tipo)

// Comparação com === (comparação estrita)
console.log(1 === '1'); // false (os tipos são diferentes e não são convertidos)

팁:
값과 유형을 모두 올바르게 비교하려면 항상 ===를 사용하세요. "놀라움"을 방지하고 버그를 방지하는 데 도움이 됩니다.

---

5. Modularize seu código

Modularizar seu código é como organizar suas ferramentas em caixas separadas. Em vez de ter tudo jogado em um só lugar, você separa cada parte em "caixas" (ou módulos), e só pega o que vai utilizar. Isso deixa seu projeto mais organizado, fácil de manter e até mais rápido de entender.

Em vez de ter um arquivo gigantesco com funções e variáveis espalhadas, você pode dividir tudo em módulos reutilizáveis. É como ter uma oficina bem organizada, onde cada ferramenta tem seu devido lugar.

// Criando um módulo (operacoes.js)
export function soma(a, b) {
    return a + b;
}

export function subtracao(a, b) {
    return a - b;
}

// Usando o módulo em outro arquivo (app.js)
import { soma, subtracao } from './operacoes.js';
console.log(soma(5, 3)); // 8
console.log(subtracao(5, 3)); // 2

Dica:
Mantenha seu código organizado separando funcionalidades em módulos. Isso facilita a manutenção, o reuso e a colaboração em projetos maiores, onde várias partes do código precisam se comunicar de forma clara.

Boas práticas em JavaScript não só melhoram a organização e clareza do código, como também facilitam a manutenção. Aplicar essas cinco dicas pode fazer uma grande diferença positiva no seu código.

위 내용은 o JavaScript 코드를 개선하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!