[Javascript] 배열 ... 사용하기 ( 전개 구문 )

 

 

ES6의 전개연산자로, 인자로 배열을 사용하고 싶을 때나 배열을 정의하는 리터럴 내에서 사용할 수 있습니다.

표현식은 아래와 같습니다.

 

1. 함수를 호출하는 인자로 배열을 사용할 때

myFunction(...iterableObj);

기존 자바스크립트 문법으로 add 함수를 정의하고, arr 배열도 정의 했습니다.

add 함수를 호출할 때 인자값으로 arr 배열의 원소들을 사용하려면 함수에 기본 메서드인 apply를 활용해야 했습니다.

 

function add(a,b,c){
	return a+b+c;
}

let arr = [2,4,5];
add.apply(null, arr); //11

 

이것을 전개연산자를 이용하면 다음과 같이 표현됩니다.

 

function add(a,b,c){
	return a+b+c;
}

let arr = [2,4,5];
add(...arr); //11

arr 배열을 정의한 후, add 함수를 호출 할 때 전개 연산자를 통해 함수의 인자값으로 배열의 원소를 사용했습니다.

 

2. 배열 리터럴

[...iterableObj, 4, 5, 6 ];

 

배열 리터럴에서 전개연산자를 사용하는 방법입니다.

전개연산자를 사용하지 않았더라면, push, splice, concat 메소드 등을 이용해 작업해야 했을 것 입니다.

 

let arr1 = [3,4,5];
let arr2 = [1,2,...arr,6,7];

console.log(arr2);
// [1,2,3,4,5,6,7]

만약, arr1.push(arr1)를 한다면 어떻게 될까요?

 

[3, 4, 5, [3, 4, 5] ]; 

 

로 원하는 결과가 나오지 않을 것 입니다.

하나로 이어붙이고 싶다면 array.push.apply를 사용해야 할 것 입니다.

 

이것은 복잡하므로, 전개연산자를 가용하면 쉽게 구현이 가능합니다.

 

* 객체에서도 전개구문 (spread operator)를 사용할 수 있습니다.

 

2-1) 배열 리터럴 비구조화 (iterableObj를 선언하지 않고 할당)

[a, b, ...iterableObj] = [1,2,3,4,5];

 

---

Object를 ...사용하는 방법은 아래 글에서 참고하길 바랍니다.

https://sewonzzang.tistory.com/22

[Javascript] 구조 분해 할당 (배열, 객체 분해하기)

 

발표할 때 이중배열을 전개구문을 사용하면 어떻게 되냐는 질문을 받았는데...

아직 설명을 잘 못하겠다

콘솔창에 해 보니 이중배열은 합쳐지지 않는 것으로 확인했다...

---

 

참고

https://pro-self-studier.tistory.com/13

3. 배열을 좀 더 직관적으로 활용, 전개연산자 (spread operator)

MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN