JavaScript) spread(전개 연산자)와 rest

spread 문법

ES6에서 도입된 문법
펼치다, 퍼뜨리다라는 뜻으로 객체나 배열, 함수에서 사용 - 기존 객체의 깊은 복사를 사용
때문에 객체나 배열의 주소를 참조하는 얕은 복사가 아닌 값을 복사하는 깊은 복사에 이용할 수 있음

spread를 깊은 복사에 이용

const animals = ['강아지', '고양이', '사람'];
const animals2 = animals; 
	// 얕은 복사 - 기존 animals 배열의 주소 값을 참조
const anotherAnimals = [...animals]; 
	// 깊은 복사 - 값 자체를 복사하여 새로운 배열 생성

console.log(animals, animals2, anotherAnimals);
	// [ '강아지', '고양이', '사람' ] [ '강아지', '고양이', '사람' ] [ '강아지', '고양이', '사람' ]

console.log(animals === animals2); 
	// true - 얕은 복사를 하였기 때문에 근본적으로 두 배열은 같은 배열
console.log(animals === anotherAnimals); 
	// false - 깊은 복사를 하였기 때문에 두 배열은 전혀 다른 배열

배열에서의 spread

배열 내의 내용만을 사용하여 새로운 배열에 뿌려줄 수 있다

const animals = ['강아지', '고양이', '사람'];
var anotherAnimals = [...animals, '공룡']; 

console.log(anotherAnimals); 
	// [ '강아지', '고양이', '사람', '공룡' ]
	// ...animals 로 사용하는 spread 문법은 기존 객체 내의 값을 복사하여 사용

console.log(...animals); 
	// '강아지', '고양이', '사람'
    
    
var anotherAnimals = [...animals, '공룡', ...animals];
console.log(anotherAnimals); 
	// ['강아지', '고양이', '사람', '공룡', '강아지', '고양이', '사람']

객체에서의 spread

배열과 마찬가지로 기존 객체를 복사하여 새로운 곳에 뿌려준다

const man = {
  name: 'lumpen'
};

const soloMan = {
  ...man,
  attribute: 'solo'
};

const poorSoloMan= {
  ...soloMan,
  assets: 'poor'
};

console.log(man);    
	// { name: 'lumpen' }
console.log(soloMan);    
	// { name: 'lumpen', attribute: 'solo' }
console.log(poorSoloMan);    
	// { name: 'lumpen', attribute: 'solo', assets: 'poor' }

rest 문법

나머지를 가져오는 연산자, 나머지 혹은 전체를 가져올 수 있다

객체, 배열, 함수의 파라미터에서 사용 가능
rest는 spread와 반대로 원하는 값 만을 추출하여 복사해온다

객체와 배열에서 사용 시에는 비구조 할당 문과 함께 사용

배열에서의 rest

const nums = [0, 1, 2, 3];

var [first, ...rest] = nums;

var [...rest, last] = nums; // 사용 불가 - 나머지를 가져오는 것이므로

console.log(first); 
	// 0
console.log(rest); 
	// [1, 2, 3]


var [first, second, ...rest] = nums;

console.log(first); 
	// 0
console.log(second); 
	// 1
console.log(rest); 
	//[2, 3]

객체에서의 rest

const man = {
  name: 'lumpen'
};

const soloMan = {
  ...man,
  attribute: 'solo'
};

const poorSoloMan= {
  ...soloMan,
  assets: 'poor'
};


var { assets, ...soloMan } = poorSoloMan;
console.log(assets);
	// poor 
console.log(soloMan);
	// { name: 'lumpen', attribute: 'solo' }
    
var { assets, attribute, ...man } = poorSoloMan;
console.log(assets);
	// poor
console.log(attribute);
	// solo
console.log(man);
	// { name: 'lumpen' }

함수에서의 rest

인자의 길이를 알 수 없을 때, 혹은 너무 길 때 사용하면 좋다

function sum(...rest) { // 입력되는 모든 인자들을 rest에 담아서 사용 가능
  return rest.reduce((acc, cur) => acc + cur, 0);
}

const result = sum(1, 2, 3, 4);
console.log(result); // 10

함수에서의 spread

function sum(...rest) { // 입력되는 모든 인자들을 rest에 담아서 사용 가능
  return rest.reduce((acc, cur) => acc + cur, 0);
}

const numbers = [1, 2, 3, 4];
const result = sum(...numbers); // spread를 이용하여 배열의 모든 값만 추출하여 사용
console.log(result); // 10

 

참조: https://learnjs.vlpt.us/useful/07-spread-and-rest.html