(14) JavaScript - 추상화 / 옵셔널 파라미터(optional parameter)

함수의 파라미터를 활용하면 전달되는 값에 따라 다양한 결과값을 얻을 수 있다.

    function sayHello(name) {
        console.log('Hello ${name}님!');
    }
    sayHello('SeopE')
    sayHello('행섭')

 

이렇게 함수를 호출 할 때 소괄호 안에 어떤 값을 넣어주게 되면

값이 파라미터로 전달이되고 함수 내부에서는 이 파라미터를 활용해서 

서로 다른 결과값을 출력하는 것을 확인할 수 있다.

 

그런데 파라미터가 있는 함수에 아무런 값도 전달해 주지 않으면?

sayHello()

 

당연히 undefined 값이 나온다.

그동안 undefined 값을 확인 할 수 있는 상황이 몇 번 있었는데

복습해보면 변수를 선언하고 아무런 값도 할당하지 않았을 때와 함수를 호출 했을 때. 총 두가지 console.log 를 썼다면

리턴문이 작성되어 있지 않은 경우에는 호출 부분이 undefined 값을 돌려받는다고 했었다.

 

그리고 위 코드를 다시 보면..

파라미터가 있는데 함수를 호출할 때 아무런 값도 전달하지 않았으므로 undefined가 출력 된 것을 볼 수 있다.

undefined 복습하기

 

그런데 필요에 따라서는 undefined가 아니라 다른 값이 자동으로 전달되게 끔 파라미터에 기본값을 설정하는 방법이 있다.

 

옵셔널 파라미터(optional parameter)

함수를 호출 할 때 파라미터 값을 전달해도 되고, 생략해도 되니까 선택적으로 전달을 받는다고해서 

이러한 파라미터를 '옵셔널 파라미터' 라고 부른다.

코드를 살펴보자면..

    //옵셔널 파라미터(optional parameter)
    function introduce(name, age, nationality = '한국') {
        console.log(`내 이름은 ${name}이다.`);
        console.log(`나이는 ${age}살 이다.`);
        console.log(`국적은 ${nationality}이다.`);
    }

    introduce('섭이', 10 , '미국') //값을 모두 전달한 경우
    console.log('--------------------------------------------');
    introduce('SeopE', 23) //파라미터 값을 생략한 경우

 

function introduce(name, age, nationality = '한국')

▲ nationality 파라미터에 할당 연산자를 통해서 '한국'이라는 값을 할당해 주고 있는 것을 볼 수 있는데, 

이렇게 미리 값을 할당한 것을 옵셔널 파라미터라고 한다.

 

    introduce('섭이', 10 , '미국') //값을 모두 전달한 경우
    console.log('--------------------------------------------');
    introduce('SeopE', 23) //파라미터 값을 생략한 경우

▲ 윗 줄 코드 보면 함수를 호출 할 때 국적을 '미국'으로 주고

맨 아래 코드에도 국적을 써야 하는데 생략했다. 이러면 당연히 결과값은 undefined 값으로 나온다.

하지만 이미 위에서 옵셔널 파라미터를 지정했기 때문에(미리 값을 할당했기 때문에)

undefined가 아닌 '한국'이라고 나올 것이다.

 

◆ 주의해야할 점 - 파라미터 위치

    //옵셔널 파라미터(optional parameter)
    function introduce(name, nationality = '한국', age) {
        console.log(`내 이름은 ${name}이다.`);
        console.log(`나이는 ${age}살 이다.`);
        console.log(`국적은 ${nationality}이다.`);
    }

    introduce('섭이','미국', 10 ) //값을 모두 전달한 경우
    console.log('--------------------------------------------');
    introduce('SeopE', 23) //파라미터 값을 생략한 경우

 

▲ 이렇게 옵셔널 파라미터가 중간에 있으면 

 

introduce('SeopE', 23) //파라미터 값을 생략한 경우

▲▼ 호출을 할 때 생략을 하려고 하면 순서가 밀려버리는 문제가 발생한다.

실행 시켜보면 23이 국적으로 전달이 되고 나이는 전달받지 않았기 때문에 undefined 살이 되어버리는 것.

 

그렇기 때문에 옵셔널 파라미터는 선언을 할 때 

반드시 생성한 다음 가장 뒤쪽으로 선언해 줘야 한다는 점이다

---

★GitHub 주소 (옵셔널 파라미터)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/6-%EC%B6%94%EC%83%81%ED%99%94/8.%EC%98%B5%EC%85%94%EB%84%90%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0.html

JavaScript_soloPlay/Basic/6-추상화/8.옵셔널파라미터.html at main · SeopE9611/JavaScript_soloPlay

 

★ notion 주소 (옵셔널 파라미터 응용)

https://www.notion.so/10ae9530b3e18066a839c397e8992425?pvs=4