011. 전개 연산자 사용하기

PART 1(입문) React.js 시작하기

011. 전개 연산자 사용하기

  • 전개 연산자 :  배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법. 변수 앞에 ... 를 입력해 사용한다.
  • 배열 합치기
    • 기존 ES5 : 배열 각각에 인덱스로 접근 혹은 concat 함수 이용하여 새로운 배열에 넣음
    • ES6 : ...(전개연산자)배열명으로 새로운 배열에 넣음
    • ...remain → 나머지 배열값은 마지막 전개 연산자 처리된 remain 변수에 넣어짐
const [sum1, sum2, ...remain] = sumLetArr;
  • 객체 합치기
    • 기존 ES5 : Object.assign 함수 이용
    • ES6 : ...(전개연산자)객체명으로 새로운 객체에 넣음
//1️⃣ Spread (펼치기) 👉 “값을 꺼내서 넣기”
//(위치: 배열/객체 안)
const 배열1 = [1,2,3];
const 배열2 = [...배열1];  // arr1을 펼쳐서 넣음

//2️⃣ Rest (모으기) 👉 “나머지를 묶기”
//(위치: 구조분해 할당)
const [a, b, ...rest] = [1, 2, 3, 4]; // rest 에 해당하는 배열: [3, 4]
// a = 1
// b = 2
// rest = [3, 4] //👉 배열 형태로 들어감