아하
생활

생활꿀팁

놀라운수염고래256
놀라운수염고래256

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

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

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

    55글자 더 채워주세요.
    1개의 답변이 있어요!
    • 아임유얼파더
      아임유얼파더

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

      ... 은 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 }

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

      참고