자바스크립트 문법정리 4 [rest, spread]

이 두가지 문법은 구조분해할당할때 많이사용합니다.

 

구조분해할당이란?

갇혀있는녀석들을 풀어줘서 사용하게끔 다시 할당하는것!

 

1.rest

"객체에서 괄호벗기는녀석"

 

function 함수2(...파라미터들){
  console.log(파라미터들)
}

함수2(1,2,3,4,5,6,7);

위 코드를 실행해보면 파라미터들이라는 변수를 출력해줍니다.

파라미터들이라는 변수는 모든 파라미터를 [] array 안에 담고 있습니다. 

이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터입니다. 

원하는 파라미터 왼쪽에 ... 기호를 붙여주시면 

"이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻입니다. 

그래서 출력해보면 저렇게 [1,2,3,4,5,6,7]이 나오는 것이고요. 

그 자리에 입력한 모든 파라미터(1,2,3,4,5,6,7)를 중괄호에 감싸주는게 rest 파라미터입니다. 

 

자 그러면

...을 다른 자리에 사용한다면 

 

그 자리에 있는 파라미터를 [] 안에 감싸준다고 했으면

다른 자리에 쓰면 어떻게 될까요?

function 함수2(a, b, ...파라미터들){
  console.log(파라미터들)
}

함수2(1,2,3,4,5,6,7);

위 코드를 실행해보면 [3,4,5,6,7]이 출력됩니다.

첫 두개의 파라미터는 a, b로 쓰는데

a,b 그 뒤에 나오는 모든 파라미터는 중괄호에 감싸서 파라미터들이라는 array가 됩니다. 

파라미터 종류가 많을 경우 arguments 문법보다 다루기 쉽고 간단해서 자주 사용합니다. 

function 함수2(...rest){
    for(let i =0; i<rest.length; i++){
        consolg.log(rest)[i]
    }    
    
}
함수2(1,2,3,4,5)

//조심해야할껏
//rest는 항상 마지막에 써야함

그니까 항상 파라미터가 여러개면 rest는 항상 마지막 파라미터로 넣으셔야합니다. (a, ...b, ...c)이런거안됍니다.

2.spread

"배열에서 괄호제거 해주는 녀석"

var 어레이 = ['hello', 'world'];
console.log(어레이);
console.log(...어레이);

 괄호가 제거된 'hello', 'world'만 콘솔창에 출력됩니다. 

 

이걸 어디에 쓰냐면 1. Array 합치기/복사에 매우 자주 씁니다.

var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b];

이렇게 한 뒤에 c라는 어레이를 출력해보면 [1,2,3,4,5]가 되어있습니다

 

var a = [1,2,3];
var b = a;


console.log(a);
console.log(b);

등호 = 를 이용하시면 쉽게 a에 있던 값을 b에 집어넣을 수 있습니다. ( [1,2,3] 복사완료!)

그런데 자바스크립트에선 복사를 이렇게 하시면 큰일납니다. 

등호로 복사를 하시면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어납니다. 

그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 신기한 버그가 일어납니다. 

 

var a = [1,2,3];
var b = [...a];

console.log(a);
console.log(b)

spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 겁니다.

그렇게 하시면 아까처럼 a와 b 변수의 값 공유가 일어나지 않습니다. 

 

이걸 어디에 쓰냐면 2. Object 합치기/복사에 매우 자주 씁니다.

 

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);

오브젝트의 key값 중복이 발생하면 어떻게될까요?

var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };
console.log(o2);

o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있는겁니다.

이렇게 a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 이깁니다. 

그래서 출력해보면 a : 1 이라는 자료가 담겨져있습니다.