자바스크립트에서 많이 발생하는 오류와 해결 방법

자바스크립트는 동적 타입 언어로서 유연하지만, 그만큼 오류가 발생할 가능성도 큽니다. 여기서는 자주 발생하는 자바스크립트 오류와 그 해결 방법을 살펴보겠습니다.

---

1. undefined 또는 null 값 참조 오류

• 오류 메시지: Cannot read property 'X' of undefined 또는 Cannot set property 'X' of null
• 원인: 객체나 변수가 undefined 또는 null인 상태에서 그 속성에 접근하려 할 때 발생합니다.
• 해결 방법:
  • 변수나 객체가 초기화되었는지 확인합니다.
  • 옵셔널 체이닝을 사용하여 안전하게 속성에 접근합니다.

let obj = null;
console.log(obj?.property); // undefined

 

---

2. 타입 오류 (TypeError)

• 오류 메시지: X is not a function
• 원인: 함수로 호출하려는 값이 실제로는 함수가 아닐 때 발생합니다. 주로 잘못된 타입으로 변수를 재할당하거나 함수 대신 다른 값을 참조할 때 생깁니다.
• 해결 방법:
  • 해당 변수에 정확한 함수가 할당되었는지 확인합니다.
  • 콘솔을 통해 함수 타입을 확인하고 디버깅할 수 있습니다.

---

3. NaN 연산 오류

• 오류 메시지: 연산 결과가 NaN (Not a Number)으로 출력
• 원인: 숫자가 아닌 값과 연산을 시도할 때 발생합니다. 문자열이나 다른 타입의 값을 숫자로 변환하지 않고 연산하는 경우에 자주 나타납니다.
• 해결 방법:
  • 입력 값의 타입을 확인하고 필요한 경우 숫자로 변환합니다.

let num = parseInt("hello"); console.log(num); // NaN

해결:

let num = isNaN(parseInt("hello")) ? 0 : parseInt("hello");

---

4. 비동기 처리에서 발생하는 오류 (Promise Rejection)

• 오류 메시지: Unhandled promise rejection
• 원인: 비동기 작업(Promise)이 실패했을 때 이를 적절히 처리하지 않으면 발생합니다.
• 해결 방법:
  • catch 블록을 사용해 에러를 처리하거나, async/await 구문에서 try...catch로 예외를 잡아냅니다.

fetch('invalid-url')
  .then(response => response.json())
  .catch(error => console.error('Error:', error));

---

5. 스코프 및 변수 선언 오류 (Hoisting)

• 오류 메시지: ReferenceError: X is not defined
• 원인: 변수를 선언하기 전에 사용하거나, let이나 const가 아닌 var를 사용하여 의도치 않게 전역 스코프에서 변수가 선언되는 경우입니다.
• 해결 방법:
  • let과 const를 사용하여 변수를 블록 스코프로 안전하게 선언합니다.
  • 변수를 사용하기 전에 항상 선언합니다.

console.log(x); // ReferenceError
let x = 5;

---

6. 잘못된 this 바인딩

• 오류 메시지: TypeError: Cannot read property 'X' of undefined
• 원인: this가 의도한 객체를 가리키지 않을 때 발생합니다. 특히 콜백 함수에서 this의 컨텍스트가 달라지는 경우가 흔합니다.
• 해결 방법:
  • 화살표 함수(=>)를 사용하여 this 바인딩을 자동으로 처리하거나, bind() 메서드를 사용하여 명시적으로 바인딩합니다.

const obj = {
  name: 'test',
  printName: function() {
    setTimeout(() => {
      console.log(this.name); // 'test'
    }, 1000);
  }
};
obj.printName();

---

7. 배열 및 객체 순회 오류

• 오류 메시지: TypeError: X is not iterable
• 원인: 반복 가능한 객체가 아닌 것(예: 객체, null, undefined)을 for...of 또는 forEach로 순회하려고 할 때 발생합니다.
• 해결 방법:
  • 배열이나 객체가 제대로 초기화되었는지, 반복 가능한 타입인지 확인합니다.

let obj = { name: "John" };
for (let item of obj) {  // TypeError: obj is not iterable
  console.log(item);
}

해결 : 

let obj = { name: "John" };
for (let key in obj) {  
  console.log(obj[key]); // 정상 실행
}

---

8. 객체 비구조화 할당 오류

• 오류 메시지: Cannot destructure property 'X' of 'undefined'
• 원인: 비구조화 할당을 시도할 때, 객체나 배열이 undefined이거나 빈 상태일 경우 발생합니다.
• 해결 방법:
  • 기본 값을 설정하여 안전하게 비구조화 할당을 수행합니다.
   

let { x } = undefined;  // TypeError

해결 : 

let { x } = {};  // x는 undefined로 설정

---

자바스크립트에서 발생하는 오류는 대부분 타입, 비동기 처리, 스코프 관련 문제에서 기인합니다. 이를 해결하기 위해서는 변수와 함수 선언을 정확히 하고, 비동기 처리를 철저히 관리하며, 최신 문법을 사용하는 것이 중요합니다