전개구문 Spread, 나머지 매개변수 Rest , +@ assign()

1. Spread 전개

2. Rest 나머지 매개변수

3. Object.assign()

 

1. Spread 전개구문

 

인용글(MDN)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

 

코드 예시(배열)

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

 

전개구문이 없을 때에는 배열에 요소를 추가/수정 하려면 splice(수정) 또는 push(추가), concat(붙이기) 를 사용해야 했지만 전개구문을 사용 하면 배열 어느 곳에서든 위 예시와 같이 새로운 배열을 추가/수정 할 수 있음.

주의사항

var arr1 = [0, 1, 2];

var arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]

 

위 코드와 같이 arr1이 합쳐진 배열로 반환 됨.

코드 예시 (객체)

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

얕은 복제(prototype 제외) 또는 객체의 병합은 이제 Object.assign() 보다 더 짧은 문법을 사용해 가능합니다.

** Object.assign()함수를 대체하거나 흉내낼 수 없음을 유의합니다. **

2. 나머지 매개변수

 

참고문헌(MDN)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

 

코드 예시

// 구문

function f(a, b, ...theArgs) {
  // ...
}

// 사용예제

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

이 예제에서, 첫 번째 인수는 "a", 두 번째 인수는 "b" 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 "manyMoreArgs" 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.

배열 메서드 사용예시

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

Array 메소드는 rest 파라미터에서 사용될 수 있습니다. 예) sort(), length() 등등

3. assign() 객체 복사(병합)

참고문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

코드예시

// 구문

Object.assign(target, ...sources)


// 사용예제

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(source)
// expected output: Object {b: 4, c: 5}

target

목표 객체 - 출처 객체의 속성을 받아 반영된 목표 객체를 반환합니다.

원본 data에도 똑같이 반영되서 반환됩니다.

위 예시의 출력 => { a: 1, b: 4, c: 5 }

(returnedTarget) 와도 결과 값이 같다.

 

sources

객체(들) - 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체입니다.

위 예시의 출력 => { b: 4, c: 5 }

 

returnedTarget

복사된 객체들 - assign 된 객체를 반환 합니다.

{ a: 1, b: 4, c: 5 }

객체 복사 예시

const obj = { a: 1 };

const copy = Object.assign({}, obj);

console.log(copy); // { a: 1 }

 

깊은 복사를 위해서는 다른 방법을 사용해야 합니다. 왜냐하면 Object.assign() 은 속성 값을 복사하기 때문입니다.

객체 병합 예시

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 원본 데이터 / 목표 객체 자체가 변경됨.