[JS] 스프레드 연산자(Spread Operator) 란?

리액트에서 코드를 짜다보면 똑같이 생긴 애들을 상태만 바꿔준다든지..

똑같은 객체를 또 써야 한다든지 이런 경우들이 있다.

이럴 때 스프레드 연산자를 사용하면 훨씬 깔끔한 코드를 완성시킬 수 있다. 

 

 

스프레드 연산자(Spread Operator) 란? 

 

• 기존 배열이나 객체의 전체나 일부를 다른 배열이나 객체로 빠르게 복사할 수 있다.
• 즉 스프레드 연산자는 객체나 배열을 복사하거나 여러개의 요소를 하나로 합칠 때 유용하게 사용할 수 있다. 

예시코드

const hilong = { name: 'hilonghilong', position: 'front-end', city:'suwon' };
const hilonghilong = {...hilong}

console.log (hilonghilong) 
//>> { name: 'hilonghilong', position: 'front-end', city:'suwon' };

 

점 세개만 붙였을 뿐인데 !!!! hilonghilong 변수가 hilong 이 가진 내 정보에 관한 것들을 다 복사해버렸다!

 

 

이번엔 스프레드 연산자를 사용해 필요한 객체들은 복사하되, 

바꾸고 싶은 특정 부분만 바꿔보자

const days = { mon: false, tue: false, wed: false };

function toggleDays(daysName) {
  const newDays = { ...days, [daysName]: !days[daysName] };
  return newDays;
}



// 'mon'의 상태를 반전

var updateMonday = toggleDays('mon');
console.log(updateMonday); // { mon: true, tue: false, wed: false }

 

 

이렇게 하면 스프레드 연산자를 사용하여 days  들은 그대로 복사가 되는데

내가 따로 지정해준 'mon' 요소만 상태가 바뀐걸 확인할 수 있담 ^^