javascript - 전개연산자 spread operator(...)

들어가기

아 프론트엔드 진짜 너무 어렵다. 누군가 만들어논 Vue bootstrap 템플릿을 분석중인데, 진짜 뇌에 마비가 올것 같다.

Vue 소스중에 다음과 같은 소스를 찾았다.

위 코드의 실행결과

저 ... 라는 자바스크립트 표현은 전개연산자(spread operator)라 불린다.

전개연산자(spread operator)를 후려쳐서 말하자면, 배열 x에 전개연산자를 적용하면 배열 x를 복사한 뒤 배열 껍대기를 지워 버린다.

아래 소스를 보면 이해가 될 것이다.

1
2
3
4
5
6

function test(a, b, c){};

var x = [1, 2, 'd'];

test(...x);

test 함수는 인자로 a, b, c 3개의 값을 받는다. x라는 변수는 배열로 인덱스를 3개 같는다. 전개연산자를 배열 앞에 붙일 경우 그 배열을 복사한 뒤 배열 대 괄호를 지워버린다.

전개연산자를 대충 그림으로 표현하자면...

배열을 함수등에 파라미터로 넘길때 유용하게 사용되는 듯하다.

자세한 사용법은 아래 MDN을 참고!


Related Posts

자바스크립트 전개연산자 MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator

분석중인 VUE bootstrap 템플릿 https://github.com/epicmaxco/vuestic-admin