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

Question

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
    ...mapState({
    // ...
  })
}위에서 '...' 은 왜 쓰는 것인가요? 문서 내용을 봐도 잘 이해가 되지 않아서 질문 드립니다..

아임유얼파더 · Accepted Answer

안녕하세요? 지나가던 웹개발자입니다 :)... 은 ECMAScript 2015 에서 추가된 전개 연산자(Spread Operator)입니다.기본적으로 배열이나 순회가능한 Iterable Object 에만 사용할 수 있습니다. ES2015+ 이전의 JavaScript 보다 코드를 간결하게 만들어주는 강력한 연산자 중 하나입니다. 기본적인 기능은 Array 나 Iterable Object 내부 요소들을 말그대로 펼쳐주는 역할을 합니다.아래 예제들을 보시면 이해가 쉬우실 듯합니다!Array Spreadconst 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 Spreadconst 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 }모쪼록 도움이 되셨길 바랍니다 :)참고https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operatorhttps://seongbeom.github.io/2017/02/08/uses-of-spread-operator.html

생활꿀팁

생활꿀팁

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