Language

자바스크립트 spread syntax(...)

궁금한게 많은 개발자 2022. 4. 3. 20:18

ES2015에서 새로 추가된 syntax : 병합, 구조 분배 할당(destructuring) 등에 다양하게 활용

각각의 멤버를 흩뿌려서 가진다라는 의미로 생각할 수 있음

override기능도 존재 -> 뒷쪽에 spread syntax를 써주면 앞쪽에 공통으로 겹치는 멤버를 override할 수 있음(앞쪽 불가)

 

주요 기능 : 여러 객체를 하나의 객체로 손쉽게 병합, 하나의 객체에서 원하는 멤버만 빼서 분배 가능, 배열 병합 가능

 특정 변수 지정 및 남은 모든 원소들을 배열에서 받아오는 할당 기능이 존재

예시를 통해 확인

const array = [1,2,3,4,5]
const head = [head, ...rest] = array

/* head = 1, rest = 2,3,4,5 */

const personalData = {
	email: 'abc@def.com'
    password: '*****'
}

const publicData = {
	nickname : 'foo'
}

const override = {
	email : 'def@def.com'
}

const shouldOverride = false

const user = {
	...personalData,
    ...publicData,
    ...(shouldOverride ? override : null),	// email: 'def@def.com'
}							// shouldOverride에 따라 overriding정해짐

function에도 spread를 사용할 수 있음 (코드를 깔끔하게 만들면서 가독성을 높일 수 있다)

function foo(hed, ...rest) {
	console.log(head)
    console.log(rest)
}

// parameter에도 사용하여 다양하게 사용 가능