[자바스크립트]spread 펼침연산자 & rest 나머지 연산자

어떤 객체나 배열의 값을 복사하고 싶을 때 쓰는 연산자.

배열 또는 객체의 변수명 앞에 '...'을 붙여서 만든다. 

 

1. spread 펼침연산자 

c++언어를 공부할 때 복사생성자가 필요한 이유가 떠오르는 연산자다. 

 

예를 들어 A가 닭꼬치 집을 차렸는데 손님이 자기는 양념치킨맛 닭꼬치를 먹고 싶다고 한다. 

그럼 A는 기존의 닭꼬치메뉴에 양념치킨맛 닭꼬치를 추가한다. 

 

const 양념닭꼬치 = 기본닭꼬치;

기본닭꼬치.맛 = '양념치킨 맛';

이라고 하면 이건 메뉴를 추가한게 아니라 기본닭꼬치를 양념닭꼬치로 바꾼 것이다. 

 

기본 닭꼬치에 양념만 추가하고 싶을 때 이 spread연산자(펼침연산자)를 쓴다. 

 

const 닭꼬치 ={

    고기 : '닭',

    조리 : '구이',

}

 

const 양념닭꼬치 ={

    ...닭꼬치,

    양념 : '양념치킨맛'

}

 

console.log(닭꼬치); // { '고기': '닭', '조리': '구이' }

console.log(양념닭꼬치);//{ '고기': '닭', '조리': '구이', '양념': '양념치킨맛' }

 

 

이렇게 하면 기본닭꼬치의 의 속성값을 모두 가진 위에 맛을 추가시킨 메뉴를 정의할 수 있다 

 

즉 대입연산자를 쓰면 값은 참조값을 보기 때문에 한 객체에 대한 편집이 이뤄지지만 

펼침연산자를 쓰면 값만 복사하고 별도의 객체를 만들 수 있다.

기본닭꼬치의 값을 가져와 양념닭꼬치의 값에 덮어씌워준다.

 

기존의 객체는 그대로 둔 채로, 해당객체의 값만 복사해 새로운 객체에 넣어줄 때 사용한다. 

그리고 이것은 배열에도 적용할 수 있다. 

 

const array = [1,2,3];

const new_array = [...array, 5, ...array, ...array];

를 하면 

console.log(array);//[1,2,3] 기존 배열은 그대로

console.log(new_array) : // [1,2,3,5,1,2,3,1,2,3] array배열의 값만 복사해서 추가됨

 

함수 인수로서 유용하게 사용할 수 있다.

const params =[1,2,3,4,5]

fun(...params);

 

2. rest 연산자

 

rest연산자는 다수의 속성을 가진 객체중에서 특정 속성을 뺀 나머지 속성을 가진 새로운 개체를 생성하고 싶을 때 쓴다. 

 

위의 양념치킨맛 닭꼬치를 양념만 묻힌채로 준비만 하고 싶다면 조리속성을 빼면된다. 

이때 쓰는 것이 바로 rest연산자이다. 앞에 빼고 싶은 속성을 나열한뒤 뒤쪽에 '...'와 새로운 개체이름을 넣어주면 된다.

const {조리, ...준비된양념꼬치} = 양념닭꼬치;

console.log(준비된양념꼬치) ;//{ '고기': '닭', '양념': '양념치킨맛' }

 

이 연산자 역시 배열에서 쓸 수 있다. 

const array = [1,2,3];

const [first, ...rest] = array;

 

console.log(first); // 1

console.log(rest);// [2,3]

 

이 레스트 연산자는 함수의 파라미터 수가 일정하지 않을 때 유용하게 사용할 수 있다 

function fun (...param){

.....

}