[JS] 전개구문(Spread Syntax) - ...(three dots)

전개구문(Spread Syntax)

• JavaScript ES6에 새로 추가된 문법
• 배열이나 객체를 개별요소로 확장(펼친다)

 

문법

// 객체
{...obj}

// 배열
[...arr]

 

간단히 ...으로 표현한다.

객체나 배열을 합치거나 복사하거나 매개변수의 나머지를 표현할 때 사용한다.

 

객체

const obj1 = {x: 'a', y: 1};
const obj2 = {i: 'b', j: 2};

// 복사
const clonedObj = {...obj1}; 
console.log(obj1 === clonedObj) // false 깊은 복사
console.log(JSON.stringify(clonedObj)) // {"x":"a","y":1}

// 합치기 - 1
const mergedObj = {...obj1, obj2}; 
console.log(JSON.stringify(mergedObj)) // {"x": "a", "y": 1, "obj2": {"i": "b", "j": 2}}
 
// 합치기 - 2
const job = {'job': 'developer'};
const student = {'name': 'som', ...job, 'age' : 20};

console.log(JSON.stringify(student)) // {"name":"som","job":"developer","age":20}

// 합치기 (중복 제거)
const a = {items: ["item1", "item2"]}
const b = {items: ["item1", "item2", "item3"]}

console.log({...a, ...b}) // {"items":["item1","item2","item3"]}

 

 

배열

//복사
const str = 'apple'
const strArr = [...str]
console.log(strArr) // ['a', 'p', 'p', 'l', 'e']

const arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
const arr2 = [...arr1]
console.log(arr1 === arr2) // false 깊은 복사
console.log(arr2) // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

// 함수에서의 사용
const numbers = [1, 2, 3]
const fnSum = (x, y, z) => x + y + z
console.log(fnSum(...numbers))

// 합치기 - 1 
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr3 = [...arr1, ...arr2];
const arr4 = arr1.concat(arr2);
// arr3, arr4 = [0, 1, 2, 3, 4, 5]

// 합치기 -2
const arr1 = ['shoulders', 'knees'];
const arr2 = ['head', ...arr1, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

 

나머지 매개변수로의 활용

const func = (animal, ...fruits) => {
   return {animal: animal, fruit: fruits}
}

const result = func('dog', 'apple', 'banana', 'cherry', 'tiger')
console.log(JSON.stringify(result))
// {"animal":"dog","fruit":["apple","banana","cherry","tiger"]}

 

refetence :

https://bigtop.tistory.com/62

https://aliencoder.tistory.com/18