JavaScript 함수 호출 시 undefined 오류 방지하기 – 인자 기본값 설정 방법

JavaScript에서 함수를 호출할 때 인자(argument)를 전달하지 않으면 undefined 오류가 발생하거나 예상치 못한 결과가 출력될 수 있습니다. 이러한 문제를 방지하려면 기본 매개변수(Default Parameters)와 구조 분해 할당(Destructuring)을 활용하여 기본값을 미리 설정하는 것이 좋습니다.

즉, 함수에 값을 전달하지 않으면 기본값이 출력되고, 값을 전달하면 전달된 매개변수 값이 출력됩니다.

기본값을 설정한 함수 예제

아래 코드에서는 함수 호출 시 인자가 없어도 오류가 발생하지 않도록 기본값으로 "Jack"을 설정했습니다.

function display({ name = 'Jack' } = {}) {
    console.log(`Hi My Name is ${name}!`);
}
display();
display({name:"Taylor Swift"});

코드 설명

• { name = 'Jack' } = {}: 객체 구조 분해 할당을 사용하여 name 속성의 기본값을 'Jack'으로 지정합니다.
• = {}: 함수가 아무런 인자 없이 호출될 경우 빈 객체를 기본값으로 사용하여 오류를 방지합니다.
• display(): 인자 없이 호출되므로 기본값인 'Jack'이 출력됩니다.
• display({name:"Taylor Swift"}): 객체를 인자로 전달했으므로 'Taylor Swift'가 출력됩니다.

프로그램 실행 방법

위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo171.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo171.js
Hi My Name is Jack!
Hi My Name is Taylor Swift!

정리

함수 매개변수에 기본값을 설정하면 인자가 누락되더라도 undefined 오류 없이 안전하게 함수를 실행할 수 있습니다. 특히 객체 구조 분해 할당과 함께 사용하면 여러 개의 선택적 매개변수를 깔끔하게 처리할 수 있어 실무에서 매우 유용하게 활용됩니다.