Q. Vuex 공식문서에서 잘 이해가 가지 않는 내용이 있습니다. 함수 앞의 '...'은 무엇인가요?

기본 아바타 doctorwoo3 2019. 01. 10. 조회수 483


computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
    ...mapState({
    // ...
  })
}

위에서 '...' 은 왜 쓰는 것인가요? 문서 내용을 봐도 잘 이해가 되지 않아서 질문 드립니다..

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
다스베이더 답변자인증
더콥 개발팀 2019. 01. 10 100%의 채택

안녕하세요? 지나가던 웹개발자입니다 :)

...ECMAScript 2015 에서 추가된 전개 연산자(Spread Operator)입니다.

기본적으로 배열이나 순회가능한 Iterable Object 에만 사용할 수 있습니다. ES2015+ 이전의 JavaScript 보다 코드를 간결하게 만들어주는 강력한 연산자 중 하나입니다. 기본적인 기능은 Array 나 Iterable Object 내부 요소들을 말그대로 펼쳐주는 역할을 합니다.

아래 예제들을 보시면 이해가 쉬우실 듯합니다!

Array Spread

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
console.log(arr2); // Array의 중간에 arr2 요소 추가 ['one', "two", "three", "four", "five"]

arr1.push(...arr2) // Array의 끝에 arr2 추가
arr1.unshift(...arr2) //Array의 시작에 arr2 추가

Object Spread

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };

const summary = {...person, ...tools};
console.log(summary); // { computer: "Mac", editor: "Atom", gender: "Male", name: "David Walsh" }


Spread 연산자비구조화 할당(Destructing)을 같이 사용하면 더 간결한 코드를 사용할 수 있습니다.

const [a, b, ...c] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(c); // [ 3, 4, 5 ]

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

모쪼록 도움이 되셨길 바랍니다 :)

참고

댓글 0