[추상화] 09.옵셔널 파라미터

함수의 파라미터를 활용하면 전달되는 값에 따라 다양한 결과값을 얻을 수가 있습니다. 함수를 호출할 때 소괄호 안에 어떤 값들을 넣어 주게 되면 이 값이 파라미터로 전달이 되고 함수 내부에서는 이 파라미터를 활용해서 서로 다른 결과값을 출력하는 것을 확인할 수 있습니다.

 

파라미터가 있는 함수에 아무런 값도 전달해 주지 않으면 저장하고 실행해보면 undefined 값이 나온 것을 확인할 수 있습니다.

undefined 값을 확인할 수 있는 상황은

변수를 선언하고 그리고 아무런 값도 할당하지 않았을 때와

sayHello 함수처럼 함수를 호출했는데 리턴문이 작성되어 있지 않은 경우에는

이 호출 부분이 undefined 값을 돌려받습니다.

또, 파라미터가 있는데 함수를 호출할 때 아무런 값도 전달하지 않을 경우에는 undefined가 출력됩니다.

function sayHello(name){
	console.log(`안녕하세요 ${name}님`); // 안녕하세요 코드잇최고님!
}

sayHello('코드잇'); //안녕하세요 코드잇님!
sayHello(); // 안녕하세요 undefined님!

let x;
console.log(x); undefined
console.log(sayHello('코드잇최고')); undefined

console.log(x); 아무런 값도 없는 변수를 출력했기 때문에 undefined

console.log(sayHello('코드잇최고')); 에서는 

console.log(`안녕하세요 ${name}님`); // 안녕하세요 코드잇최고님!는 출력됐지만

함수 호출 부분은 undefined 값을 가지고 있습니다.

파라미터가 있는 함수에 아무런 값도 전달하지 않고 함수를 호출하는 경우에는 undefined 값이 나오는데 필요에 따라서는 undefined가 아니라 다른 값이 자동으로 전달되게끔 파라미터에 기본갑을 설정하는 방법이 있습니다. 

함수를 호출할 때 파라미터 값을 전달해도 되고 생략해도 되니까 선택적으로 전달을 받는다고 해서 이런 파라미터를 '옵셔널 파라미터'라고 부릅니다. 

// 옵셔널 파라미터 (Optional Parameters)
function introduce(name, age, nationality = '한국'){
	console.log(`제 이름은 ${name}입니다.`);
	console.log(`나이는 ${age}이고`);    
    console.log(`국적은 ${nationality}입니다.`);
}

introduce('코드잇', 4, `미국`); // 값을 모두 전달한 경우
console.log('');
introduce('코드잇', 4); // 파라미터 값을 생략한 경우

위 코드를 보면 파라미터에 할당 연산자를 통해서 값을 할당해주고 있습니다. 이렇게 미리 값을 할당한 것을 옵셔널 파라미터라고 부릅니다. 함수를 호출할 때 introduce('코드잇', 4, `미국`); 여기서는 국적을 전달해 줬는데 introduce('코드잇', 4); 이 부분은 생략을 했습니다. 

저장하고 실행해 보면 값을 전달한 경우에는 전달한 값이 출력이 됐고 값을 전달하지 않을 경우에는 미리 할당한 값이 전달이 되고 있는 것을 확인하고 있습니다. 

여기에서 한 가지 주의해야 할 점은 파라미터의 위치인데, 옵셔널 파라미터가 중간에 있으면 호출을 할 때 생략을 하려고 하면 순서가 밀려버리는 문제가 발생합니다.

4가 국적으로 전달되고 나이는 전달받지 않았기 때문에 'undefined살'이 되어버립니다.

그렇기 때문에 옵셔널 파라미터는 선언을 할 때 반드시 생성한 다음 가장 뒤쪽으로 선언해 줘야 합니다.