주니어 개발자를 위한 JavaScript 함수 디버깅 팁

작성: 2024년 10월 19일읽기: 약 3분

JavaScript를 배우는 여정은 흥미롭지만 때로는 도전적일 수 있습니다. 특히 함수를 디버깅할 때, 오류의 원인을 찾아내는 것이 어려울 수 있습니다. 이 글에서는 JavaScript에서 함수를 디버깅할 때 유용한 몇 가지 팁을 공유하고자 합니다. 이 팁들은 코드를 더 잘 이해하고, 문제를 빠르게 해결하는 데 도움이 될 것입니다.

1. `console.log()` 사용하기

console.log()는 가장 기본적이면서도 강력한 디버깅 도구 중 하나입니다. 함수 내부에서 변수의 값이나 함수가 호출될 때의 상태를 확인하고 싶을 때, console.log()를 사용하여 콘솔에 정보를 출력할 수 있습니다.

function add(a, b) {
  console.log(`add 함수 호출됨: a=${a}, b=${b}`);
  return a + b;
}

add(5, 3);

2. 디버거 사용하기

대부분의 현대 브라우저와 개발 환경은 디버거를 내장하고 있습니다. debugger; 문을 코드에 추가하면, 브라우저가 해당 지점에서 실행을 일시 중지하고 개발자가 변수의 값을 검사하고 코드의 실행 흐름을 단계별로 진행할 수 있게 합니다.

function multiply(a, b) {
  debugger;
  return a * b;
}

multiply(4, 2);

3. 함수의 반환 값 확인하기

함수가 예상대로 동작하지 않을 때, 반환 값이 올바른지 확인하는 것이 중요합니다. 반환 값이 예상과 다르다면, 함수 내부 로직에 문제가 있을 가능성이 높습니다.

function subtract(a, b) {
  return a - b;
}

console.log(`subtract 함수 결과: ${subtract(10, 5)}`);

4. 조건문 로깅하기

조건문이 포함된 함수에서 문제가 발생했다면, 조건문이 예상대로 실행되는지 확인해야 합니다. 조건문 내부에 console.log()를 추가하여 어떤 조건이 충족되었는지 확인할 수 있습니다.

function checkAge(age) {
  if (age >= 18) {
    console.log("성인입니다.");
  } else {
    console.log("미성년자입니다.");
  }
}

checkAge(20);

5. 함수의 인자 확인하기

함수에 잘못된 인자가 전달되어 문제가 발생하는 경우가 종종 있습니다. 함수가 호출될 때 전달되는 인자를 로깅하여, 올바른 값이 전달되었는지 확인하세요.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice");