자바스크립트 전개연산자

전개 연산자

- 전개연산자는 배열 또는 객체의 값 하나하나를 반환할떄 사용하는 연산자이다.

기본구문

전개 구문의 문법은 배열이나 객체앞에 ...을 붙여주면 된다.

- 배열일 경우

arr = [...arr]

- 객체일 경우

arr = {...arr}

예제1

- 배열 arr에 전개연산자 ..을 붙혀 배열 arr1 안에 넣었다. 

const arr = [1,2,3,4,5]
const arr1 = [10,9,8,7,...arr]
console.log(arr1)  //[ 10, 9, 8, 7, 1, 2, 3, 4, 5 ]

예제2

- 배열 man을 배열 woman 안에 전개연산자를 이용해 넣었다. 배열 man은 손상되지 않고 남아있다. (push메서드와 다름)

let man = ['철수', '맹구'];
let woman = ['유리', ...man, '짱아', '흰둥이'];
console.log(woman) //[ '유리', '철수', '맹구', '짱아', '흰둥이' ]

예제3

- push()메서드를 사용 하여 두개의 다른 배열을 하나로 합칠 수 있다 arr1에 push 메서드를 적용 했으므로 arr1은 처음 arr1과 다른 배열이 되었으므로 파괴적 처리

let arr1 = ['a','b','c','d','e'];
let arr2 = [1,2,3,4,5];
arr1.push(...arr2);
console.log(arr1); //[ 'a', 'b', 'c', 'd', 'e', 1, 2, 3, 4, 5 ]

예제4

- 객체 person2와 person1을 전개 연산자로 병합하였다. pet: 흰둥이 앞에 person1의 객체가 들어갔다.

let Person1 = {
	name : "철수",
	from : "한국",
	language : "한국어"
};
let Person2 = {
	...Person1,
    pet : "흰둥이"
};

console.log(Person2) // { name: '철수', from: '한국', language: '한국어', pet: '흰둥이' }

겹치기

- person1과 person2에 겹치는 key값은 가져오지 못하고 겹치지 않는 key인 Language만 person2 객체에 삽입 되었다.

let Person1 = {
	name : "철수",
	from : "한국",
	language : "한국어"
};
let Person2 = {
	...Person1,
	name : "짱구",
	from : "일본",
    pet : "흰둥이"
};

console.log(Person2)  //{ name: '짱구', from: '일본', language: '한국어', pet: '흰둥이' }

객체 병합

- 객체 person1과 person2를 하나의 객체인 person3에 전개 연산자를 이용해 병합했다.

let Person1 = {
	name : "철수",
	from : "한국",
	
};
let Person2 = {
	language : "한국어",
    pet : "흰둥이"
};

let Person3 = {...Person1, ...Person2}

console.log(Person3)  //{ name: '철수', from: '한국', language: '한국어', pet: '흰둥이' }

전개 연산자는 ES6 최신 문법이다, push(), split() 메소드 보다 활용도가 높아, 알아두면 유용한 연산자이다.