<개발공부, 개공> 전개 연산자

 

 

풀스택 개발자로 취업한 나 

 

오늘부턴 프론트 엔지니어 파트도 공부해서 올리려고한다 

 

다들 기대해주시길

 

오늘 공부해볼 키워드는 전개 연산자이다.

 

 

전개 연산자란 (Or 전개구문), 

 

 

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.

 

출처 : MDN (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

 

 

이게 뭔 말일까? 

 

좀 더 자세히 알아보자.

 

아래는 설탕 구문이다.

function sum(x, y, z) { //1 line
  return x + y + z; //2 line
} //3 line

const numbers = [1, 2, 3]; //4 line

console.log(sum(...numbers)); //5 line
// expected output: 6   //6 line

console.log(sum.apply(null, numbers)); //7 line
// expected output: 6 //8 line

 

코드를 어느정도 짜본 사람이라면 코드를 보고도 바로 이해가 가겠다. 설명을 하자면,

전개연산자란 간단히 설명하면 '...' 을 활용한 연산자라고 이해하면 좋겠다.

numbers 변수 앞에 ...을 붙이니 배열 안에 들어가있던 변수가 풀려나오고, 5 line에 sum()으로 각 값들이 더해졌다.

 

 

두번째 예시다.

 

var arr1 = [0, 1, 2]; // line 1
var arr2 = [3, 4, 5]; //line 2
arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5] //line 3

 

arr1과 arr2의 값 앞에 '...'(전개연산자)를 붙이고 배열로 씌우니 값이 [0,1,2,3,4,5]로 연결되었다.