전개 구문(Spread, Rest)

chosey·2022년 11월 21일
0

React

목록 보기
2/4

MDN, 전개 구문

전개 구문이라고도 하는 Spread 또는 Rest 연산자는 점 3개로 이루어진 연산자인데, 어디에서 사용하는지에 따라 스프레드 또는 레스트라고 부른다.


Spread

배열의 원소나 객체의 속성을 나열하는 데 사용.
함수 호출에서 파라미터 배열로도 사용할 수 있는데, Rest 라 불림.

const newNumbers = [ ...currArray, 1, 2 ]
const newObject = { ...currObject, newProp:5 }

function Func(x,y,z,v,w) {}
Func(...newArray, 4, 5);

배열에서의 전개 구문

스프레드 연산자는 배열을 복사할 수도 있으며, concat, unshift 메소드를 대체할 수 있다.

배열 복사

const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...currArray, 6, 7];
newNumbers.push(8);

newNumbers[ 1, 2, 3, 4, 5, 6, 7, 8 ]이며, numbers에는 아무런 영향이 없고, 스프레드 연산자는 배열의 어느 위치에서든 사용될 수 있으며, 여러번 사용이 가능하다.

concat 메소드 대체

let numbers1 = [ 0, 1, 2 ];
let numbers2 = [ 3, 4, 5 ];
numbers1 = [...numbers1, ...numbers2]; // array1.concat(array2)

numbers1 배열은 [ 0, 1, 2, 3, 4, 5 ] 가 된다.

unshift 메소드 대체

let numbers1 = [ 0, 1, 2 ];
let numbers2 = [ 3, 4, 5 ];
numbers1 = [...numbers2, ...numbers1]; // array1.unshift(array2)

numbers1 배열은 [ 3, 4, 5, 0, 1, 2 ] 가 되며, 실제 unshift 메소드와는 달리 numbers1에 새로운 배열을 할당하는 것으로 기존 배열을 변형하지 않는다.


객체에서의 전개 구문

객체에서 전개 구문 사용 시, Object.assign() 메소드와 같이 스프레드 연산자가 사용된 객체의 자체 속성을 다른 객체에 붙여넣을 수 있습니다.

따라서 얕은 수준의 객체 복제 또는 객체의 병합은 전개 구문을 사용하여 더 짧은 문법으로 나타낼 수 있습니다.

그러나 Object.assign() 메소드를 완벽히 대체할 수는 없습니다.

const currObject = {
  prop1: true,
  prop2: false,
  prop3: null,
  prop4: undefined,
  prop5: "string",
};

const newObject = {
  ...currObject,
  newProp1: 0101010,
  newProp2: "새로운 속성",
};

속성값을 추가한 출력 결과

또한 스프레드 연산자가 사용된 객체의 key에 할당된 값을 변경할 수도 있습니다.

이것은 새로운 객체가 가지고 있는 자체 속성이 우선권을 가지기 때문입니다.

const currObject = {
  prop1: true,
  prop2: false,
  prop3: null,
  prop4: undefined,
  prop5: "string",
};

const newObject = {
  ...currObject,
  prop4: "덮어쓰기",
  prop5: "여기도 덮어쓰기",
};

속성값 덮어쓰기를 한 출력 결과


레스트 연산자

함수의 인수 목록을 배열로 합치는 데 사용되며, 이는 함수의 apply() 메소드와 유사한데, 레스트 연산자를 사용하여 apply() 메소드를 대체할 수 있습니다.

const filter = (...args) => {
	return args.filter(elem => elem === 1);
}

console.log(filter(1,2,3)); // [ 1 ]로 출력된다.

💡 Function.prototype.apply()
apply() 메소드는 주어진 this 값과 배열로 제공되는 값을 파라미터로 호출합니다.

// 구문
func.apply(thisArg, [argsArray])

MDN, Function.prototype.apply()

profile
chosey

0개의 댓글