JS 기본매개변수, 전개, Rest

기본매개변수를 사용하면 함수의 ( ) 에 빈칸을 넣었을때의 디폴트값을 정할 수 있다.

function multiply(a, b = 1) {

    return a * b;

}

 

a는 기본매개변수가 없고, b는 기본값이 1이므로

muiltiply(3)을 넣으면 a는 3 b는 기본값 1로 3이 return된다.

기본매개변수는 기본매개변수가 없는 값의 뒤에 작성해야 순서를 잘 인식한다.

 

전개를 사용하면 배열의 항목을 하나하나 비교가능하다.

 

const num = [1, 3, 4, 1, 6, 3]

const max = Math.max(num)

 

위 처럼 입력하면 max 변수는 NaN이 출력된다. 그 이유는 num을 어떻게 받아들일지 모르기 때문에디ㅏ.

하지만 num대신 ...num을 넣어 

 

const max = Math.max(...num)

 

를 넣는다면, 위 num 배열의 모든 값을 비교해서 6을 출력한다.

즉, num은 [1, 3, 4, 1, 6, 3] 이라는 "배열"을 출력하기때문에 NaN이 나온것이고

...num은 1, 3, 4, 1, 6, 3 이라는 "숫자"들이 출력되었기 때문에 Math로 비교가 가능하다

...hello는 h , e , l, l, o 가 출력됨

 

객체 전개를 사용할때는 순서가 중요하다.

 

const dogs = { legs: 4, family: 'dog' };

const cats = { isFurry: true, family: 'cat' };

const catdog = { ...dogs, ...cats };

 

이후 catdog를 입력하면 legs :4, family : "cat", isFurry: true 가 출력되는데, 이때 family가 cat으로

dogs의 dog가 덮혀졌다.

{...[1,2,3]} 입력시 0: 1, 1: 2, 2: 3 이 된다. 프로퍼티가 됨

 

Rest

는 ...를 입력하여 나머지 매개변수를 만들 수 있다.

 

function myFun(a, b, ...others) {

    console.log(a);

    console.log(b);

    console.log(others);

}

 

에서 myFun(1,2,4,5,6,7) 을 입력하면 출력값으로

1

2

4,5,6,7 이 출력된다. 여기서 4,5,6,7은 ...others 묶인것이다. 이를 응용해 reduce등의 계산도 가능하다. 

 

function myFun(...others) {

    return others.reduce(function (sum, val) {

        return sum + val;

    })

}

 

myFun(1,2,3) 을 입력하면 출력값은 6

만약 ...others 가 아닌 그냥 others를 입력하면

1,2,3을 입력해도 뒤의 2,3은 무시하고 1만 출력해서 reduce가 작동하지 않는다.

( myFun([1,2,3]) 와 같다. )