JavaScript 코드에 대한 10가지 팁

반응형

=== 대신 == 사용

=== 대신 ==를 사용하면 코드에서 예기치 않은 동작이 발생할 수 있습니다. == 연산자는 유형 강제를 수행합니다. 즉, 피연산자를 비교하기 전에 공통 유형으로 변환합니다. 이는 특히 다양한 유형을 비교할 때 의도하지 않은 결과를 초래할 수 있습니다.

예를 들어:

console.log(1 == '1'); // 진실

console.log(1 === '1'); // 거짓

이러한 실수를 방지하려면 엄격한 동등 비교를 위해 항상 ===를 사용하세요. 이 연산자는 값과 유형을 모두 비교하므로 피연산자가 동일한 유형이고 동일한 값을 갖는 경우에만 true를 반환합니다.

const와 let을 사용하지 않음

var를 사용하여 변수를 선언하면 코드에서 예기치 않은 동작이 발생할 수 있습니다. var에는 함수 범위가 있기 때문입니다. 이는 변수가 선언된 블록 외부에서도 함수 내 어디에서나 변수에 액세스할 수 있음을 의미합니다. 이로 인해 버그가 발생하고 추론하기가 더 어려워질 수 있습니다. 귀하의 코드에 대해.

대신 블록 범위 변수에는 const 및 let을 사용하십시오. 재할당되지 않는 변수에는 const를 사용해야 하고, 재할당될 변수에는 let을 사용해야 합니다.

예를 들어:

// var 사용

함수 foo() {

  var x = 1;

  만약 사실이라면) {

    var x = 2;

  }

  console.log(x); // 2

}

// let 사용

함수 바() {

  x = 1이라고 하자;

  만약 사실이라면) {

    x = 2라고 하자;

  }

  console.log(x); // 1

}

// const 사용

const PI = 3.14;

세미콜론을 사용하지 않음

JavaScript는 어떤 경우에는 자동으로 세미콜론을 삽입하지만 이에 의존하면 버그와 예상치 못한 동작이 발생할 수 있습니다. 이러한 문제를 방지하려면 항상 세미콜론을 사용하는 것이 가장 좋습니다.

예를 들어:

// 세미콜론 없이

const x = 1

const y = 2

// 세미콜론 사용

const x = 1;

const y = 2;

오류를 처리하지 않음

오류를 처리하지 못하면 프로그램이 충돌하거나 예기치 않게 동작할 수 있습니다. 항상 try-catch 블록이나 오류 콜백을 사용하여 오류를 올바르게 처리해야 합니다.

예를 들어:

노력하다 {

  // 오류가 발생할 수 있는 일부 코드

} 잡기 (오류) {

  console.error('오류가 발생했습니다:', err);

}

엄격 모드를 사용하지 않음

엄격 모드는 코드에 더 엄격한 규칙을 적용하여 일반적인 실수를 포착하고 나쁜 관행을 방지합니다. 오류를 조기에 포착하고 코드 품질을 향상시키려면 항상 코드에서 엄격 모드를 사용하십시오.

엄격 모드를 활성화하려면 JavaScript 파일 또는 함수 시작 부분에 다음 문을 추가하세요.

'엄격하게 사용하세요';

중괄호를 사용하지 않음

코드에 중괄호를 사용하면 더 쉽게 읽고 이해할 수 있습니다. 블록에 명령문이 하나만 포함된 경우에도 항상 중괄호를 블록에 사용하세요.

예를 들어:

// 중괄호 없이

만약 사실이라면)

  console.log('안녕하세요');

// 중괄호 사용

만약 사실이라면) {

  console.log('안녕하세요');

}

Array.prototype.forEach()를 사용하지 않음

for 루프를 사용하여 배열을 반복하면 오류가 발생하기 쉽고 읽기 어려울 수 있습니다. 코드를 단순화하려면 대신 Array.prototype.forEach()를 사용하세요.

예를 들어:

const 숫자 = [1, 2, 3, 4];

// for 루프 사용

for (let i = 0; i < 숫자.길이; i++) {

  console.log(숫자[i]);

}

// forEach 사용

숫자.forEach((숫자) => {

  console.log(번호);

});

함수를 정의할 때 const를 사용하지 않음

함수를 정의할 때 항상 const를 사용하여 함수가 코드의 다른 곳에서 실수로 재할당되거나 수정되지 않도록 하세요.

예를 들어:

// const를 사용하여 함수 정의

const 추가 = (a, b) => {

  a + b를 반환합니다.

};

// 함수를 정의하기 위해 let을 사용합니다. (피하세요)

빼기 = function(a, b) {

  a - b를 반환합니다.

};

for 루프에서 let 키워드를 사용하지 않음

for 루프 대신 var를 사용하면 var에 함수 범위가 있으므로 루프 외부에서 변수에 액세스할 수 있으므로 예기치 않은 동작이 발생할 수 있습니다. 이로 인해 코드의 다른 부분에서 변수를 재사용할 때 문제가 발생할 수 있습니다.

대신 let을 사용하여 for 루프에서 변수를 선언하여 블록 범위로 만들고 루프 외부에서 액세스할 수 없도록 합니다.

예를 들어:

// for 루프에서 var 사용

for (var i = 0; i < 5; i++) {

  console.log(i);

}

console.log(i); // 5

// for 루프에서 let 사용

for (j = 0; j < 5; j++) {

  console.log(j);

}

console.log(j); // ReferenceError: j가 정의되지 않았습니다.

null 또는 정의되지 않은 상태에서 === 또는 !==를 사용하지 않음

null 또는 정의되지 않음을 확인할 때 항상 엄격한 항등 연산자(=== 및 !==)를 사용하여 예기치 않은 동작을 방지하세요.

예를 들어:

// null 또는 정의되지 않은 상태에서 == 사용

console.log(null == 정의되지 않음); // 진실

console.log(null == 0); // 거짓

console.log(정의되지 않음 == 0); // 거짓

// null 또는 정의되지 않은 상태에서 === 사용

console.log(null === 정의되지 않음); // 거짓

console.log(null === 0); // 거짓

console.log(정의되지 않음 === 0); // 거짓

// null인지 정의되지 않았는지 확인

const 값 = null;

if (값 === null || 값 === 정의되지 않음) {

  console.log('값이 null이거나 정의되지 않았습니다.');

}

이러한 일반적인 코딩 실수를 피함으로써 보다 안정적이고 유지 관리가 쉬운 JavaScript 코드를 작성할 수 있습니다.

반응형