[Javscript] 스프레드 문법, 디스트럭처링

이번에 프로젝트 개발을 진행하면서 다른 사람들의 스프레드 문법, 디스트럭처링을 많이 사용하는 모습을 보면서 한 번 정리하고자 해본다.

처음에는 스프레드 연산자는 종종 사용했지만, 최대, 최소값을 구하기 위해 Math.min, Math.max를 할 때 Math.max(...arr)처럼 사용함을 알게 되었다.

등장 시기

위 두 가지 기능은 ES6(ECMAScript 2015)에서 도입된 기능이며, 객체나 배열을 다루기 쉽게 해주는 도구들이다

스프레드 문법(Spread Syntax)

문법 형태는 ...를 사용하며 하나로 뭉쳐있는 여러 값들을 개별적인 값들의 목록으로 만든다

복사하거나 결합할 때 유용하다. 참고로 해당 문법은 복사 시 얕은 복사를 진행한다

• 스프레드 문법 특징 2가지
  • 순회할 수 있는 이터러블(iterable)에 한정한다.
    • Array, String, Map, Set
  • 스프레드 결과는 값이 아니다. 즉, 결과 값을 변수에 할당할 수 없다

    • const arr = ...[1,2,3] // SyntaxError

스프레드 문법 여러 예시

🎈 스프레드 문법을 이용해 얕은 복사를 한다

const original = [1, 2, 3]
const copy = [...original]

console.log(copy) // [1, 2, 3]
console.log(original === copy) // false

🎈 객체 리터럴에서 사용하는 경우
프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선한다

const result = { ...{x: 1, y: 2}, y: 150 }
console.log(result) // {x: 1, y: 150}
const result2 = { y: 150, ...{x: 1, y: 2} }
console.log(result2) // {y: 2, x: 1}

속성 추가, 삭제에도 이용할 수 있다

디스트럭처링(Destructuring)

배열이나 객체의 값을 분해하여 개별 변수에 할당하는 문법

마찬가지로 할당의 대상은 이터러블(iterable)이여야 한다

디스트럭처링 여러 예시

배열 디스트럭처링

const arr = [1,2,3]
const [a, b, c] = arr
console.log(a, b, c) // 1 2 3

 const [x, ...y] = [1, 2, 3];
 console.log(x, y); 1 [2, 3]

객체 디스트럭처링

객체 프로퍼티의 key를 기준으로 분해하여 변수에 할당한다

const obj = { x:10, y: 20 }
const { x, y } = obj
console.log(x, y) // 10 20

// 프로퍼티 키와 다른 이름으로 프로퍼티 값을 할당받을 수 있다.
const { x: ab, y: cd } = obj;
console.log(ab, cd) // 10 20

// 중첩 객체인 경우
const user = {
	name: 'sheep',
    address: {
    	city: 'seoul'
    }
}
 //adress 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
 const { address: { city } } = user;
 console.log(city); //seoul