[JavaScript] ES6 구조분해할당

💡 특징

• 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.
• 공통점은 ... 를 사용한다. 이 문법은 이론보다 코드를 보는것이 더욱 이해가 잘된다.

📌 spread operator

spread syntax 분해

• 인자로 받은 값을 분해한다, 펼친다.
• 필요한 인자를 구분하여 펼칠수있다.

배열,객체로 펼칠수있다.

const fruits = ['grape', 'lemon', 'melon', 'kiwi']
const fruCopy = [...fruits]
console.log(fruCopy); // ['grape', 'lemon', 'melon', 'kiwi']
--------------------------------------------------------------
const test1 = {name:'park'};
const test2 = {age:25};
const run = { ...test1, ...test2};
//run 변수에 test1의 객체(key+value)와 test2 를 할당하여 run으로 펼침

console.log(run);// {name:'park',age:25}

같은 데이터처럼 보이지만 두변수는 다른 주소를 참조한다.

fruits === fruCopy // false
fruits.unshift() // 'grape'   (배열 맨처음 값 삭제 메서드)

console.log(fruits); // ['lemon', 'melon', 'kiwi']
console.log(fruCopy); // ['grape', 'lemon', 'melon', 'kiwi']

배열을 객체로 펼칠경우

const fruits = ['grape', 'lemon', 'melon', 'kiwi']
const fruCopy = {...fruits}
console.log(fruCopy); // {0: 'grape', 1: 'lemon', 2: 'melon', 3: 'kiwi'}
                     //index번호가 key 값으로 주어진다.

중간에 새로운 값을 추가하여 할당할 수 있다.

const a = [1,2,3]
const b = [6,7,8]
const c = [...a, 4, 5, ...b]
console.log(c); // [1,2,3,4,5,6,7,8]

―――――――――――――――――――――――――――――――――――――――――

📌 rest parameter

rest syntax

• 인수로 전달받은 값을 배열로 모아준다
• 파라미터값이 2개 이상이면 먼저 선언된 인수를 제외한 나머지 값을 합해서 출력한다.
• rest 를 함수의 파라미터에서 사용할때는 마지막에 설정한다.

function arr(...rest){
	console.log(rest);
}
arr(1,2,3,4,5); // [1,2,3,4,5]
-----------------------------------
function arr(a,...name){
	console.log(name);
}
arr('park','hwang','jung','lee'); // ['hwang','jung','lee']

먼저 선언된 인수 값을 제외한 나머지를 출력한다.

function arr(num1,num2,...rest){
	console.log(rest);
}
arr(1,2,3,4,5); // [3,4,5]

파라미터에서 ... 연산자를 마지막에 사용하지 않으면 에러가난다.

function arr(...rest,num1,num2){
	console.log(rest);
}
arr(1,2,3,4,5); // SyntaxError: Rest parameter must be last formal parameter

결론

spread는 인수 argument를 펼쳐주는 역할, rest는 여러개 인자 parameter를 받아 합쳐서 배열&객체로 모아주는 역할