template literals, spread와 rest

spread perators
객체나 배열을 복사할 때 많이 쓰임
배열이나 객체를 합칠 때 많이 쓰임

const originalUser = {
name = "조희진"
age = 26,
};
복사해야 할 경우
const updatedUser = originalUser; 

복사 X

참조하는 위치를 변경 O

불변성과도 관련

그래서 Spread Operators가 나옴

originalUser에 조희진과 26이라는 value를 가지고 있음

updatedUser.name = "조은진";
console.log("원본 =>" updatedUser); 

// name: '조은진', age: 26
console.log("원본 =>" originalUser); 

// name: '조은진', age: 26

UpdatedUser는 OriginalUser의

주소값을 복사했기 때문에
OriginalUser와 UpdatedUser의 주소값은 같음
우리는 UpdatedUser를 수정했지만

얘가 같이 바라보고 있었던 것을 수정했기 때문에

OriginalUser까지 변경되는 것처럼 보이는 것

자바스크립트에서 객체나 배열을 복사할 때

불변성을 지켜야된다면 

const updatedUser = originalUser; 로 복사하는 것이 아니라 
const updatedUser = {...originalUser;}

이런식으로 복사해야 함
name: "조희진", age: 26만 남게되고

이게 Spread Operated이며
const updatedUser = { name: "조희진", age: 26 }; 

얘는 직접 값을 입력함
UpdatedUser가 참조하는 값이

원래있었던 originalUser와 완전히 다르다는 것
 OriginalUser를 이용해 새로운 UpdatedUser라는 객체를 생성함
즉, 수정해야 할 파일를 수정하려고 한거지만 원본 파일까지 삭제된 것임

const first = [1, 2, 3];
const second = [4, 5, 6];
const combinedArray = [...first, ...second];

rest operators
... 변수명
spread operators와 비슷
함수의 매개변수

객체 분해 할당 시, 여러 값을 그룹핑

배열로 들어오지 않는 인풋들을 모으는 방

function sum (numbers) {
return numbers.reduce((acc, cur) => acc + cur);
const result = sum([1, 2, 3, 4, 5]);
console.log(result); // 15

 

const result의 값에 배열을 쓰고싶지 않으면

 

function sum(1, 2, 3, 4, 5) {

      return numbers.reduce((acc, cur) => acc + cur);

}

 

numbers에는

numbers(first, second, third, forth, fifth)

가 들어감

→ 귀찮음 + return문도 못 사용

그래서 나온게 rest operator

 

사용법:

...변수명

 

function sum(...numbers) {

   return numbers.reduce((acc, cur) => acc + cur);

}

 

const result = sum(1, 2, 3, 4, 5);

console.log(result);

// sum(1, 2, 3, 4, 5)가 numbers로 들어감

 

 

spread perators

const {occupation, name, age, country} = person;

const {occupation, ...rest} = person;