[Java Script] 와! 전개 연산자 아시는구나! (Spread Operator)🖨 🙇‍♂

요즘 블로그에 글을 쓰지못할 정도로 공부에 치이며 정신없는 나날들을 보내는 중이다. 특히 최근 2주간은 리액트를 열심히 공부했는데, 공부하기전 느꼈던 두려움과는 달리 막상 사용해보니 Vue와 다른 매력이 느껴지기도하고, 더욱 알고 싶어지는 멋진 프레임워크라고 생각된다.

리액트를 공부하다보니 여태껏 어쩡쩡하게 사용하고 있던 ES6문법들과, 알지못했던 ES6문법들에 대해 많이 알게되는 점이 참좋다. 요즘 MERN스택으로 포폴을 준비하다보니 서버, db등등 알아야할것들이 점점 많아지지만, 그만큼 더욱 많은 것들을 해볼 수 있다는것이 참 행복하다. 그렇기에 당문간은 리액트나, ES6 위주의 글을 올려볼 예정이다. (서론이 길었다.)

전개 연산자 (Spread Operator) 🖨 

ES6의 전개 연산자 (Spread Operator) 는 독특하면서도 매우 유용한 문법입니다. 전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용합니다. 사용 방법은 배열이나 객체, 변수명 앞에 마침표 세개(...)를 입력합니다. 다만, 배열, 객체, 함수 인자 표현식 ([],{},()) 안에서만 사용해야합니다. - 도서 Do it! 리액트 프로그래밍 정석 -

ES6 이전 문법에서는 배열의 일부 요소만 잘라내거나 이어붙이려면 배열 인덱스와 함께 배열 내장함수들을 사용해야했다.

const arr1 = ["A", "B"];
const arr2 = ["C", "D"];

const combined = [arr1[0], arr1[1], arr2[0], arr2[1]]; 
// 배열 각 요소를 추출하여 새로운 배열 만들기
// ['A','B','C','D']

const combined2 = arr1.concat(arr2); 
// concat() 함수로 두 배열을 합침.
// ['A','B','C','D']

하지만 ES6 부터 추가된 전개 연산자 (Spread Operator)를 통해 더욱 간결하고 깔끔하게 코드를 작성할 수 있게되었다. 객체, 배열 모두 사용이 가능할 뿐 아니라, 함수의 인자로도 사용가능하다. 또한 원본 배열을 그대로 유지하면서 새로운 배열을 만들기 때문에 더욱 활용도가 높다.

const arr1 = ["A", "B"];
const arr2 = ["C", "D"];

const combined = [...arr1, ...arr2]; // Spread Operator
// ['A','B','C','D']

당연히 객체에서도 사용 가능하다

const obj1 = { one: 1, two: 2 };
const obj2 = { three: 3, four: 4 };

const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { one: 1, two: 2, three: 3, four: 4 }

이 얼마나 직관적이란 말인가...!

또한 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에도 안성맞춤이다. 보통 push(), splice(), concat() 등을 이용하겠지만, 전개 연산자를 이용해서 더욱 간결하게 코드를 작성할 수 있다.

const sideNumber = ["two", "three"];
const number = ["one", ...sideNumber, "four", "five"];
 // Spread Operator
//[ 'one', 'two', 'three', 'four', 'five' ]

전개 연산자는 배열, 객체의 연결, 복사뿐만 아니라 추출도 가능한데, 이는 리액트를 배우면서 구조분해 할당 문법과 함께 자주 볼 수 있었다. (덕분에 리엑트를 처음배웠을 당시에 "이건 무슨 문법이지..?" 하며 당황했었다.)

(만약 아직 리액트를 배우기 전이고, 구조 분해 할당, 전개 연산자에 대해 잘 모른다면 구조 분해 할당과 전개 연산자 만큼은 꼭! 확실히 배워두고 리액트에 입문하시는걸 추천드리고싶다.)

const number = ["one", "two", "three", "four"];

const [a, b, ...others] = number;
console.log(a, b, others); // one two [ 'three', 'four' ]

number 배열의 각 값을 앞에서부터 a,b에 할당 하였고 나머지 요소를 전개 연산자를 통해 배열로 추출했다. 만일 이 코드가 이해가 잘 안된다면 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment - mozilla 구조 분해 할당 - 을 보고 오길 바란다.