자바스크립트에서 점세개가 가지는 의미 (... in js)

---

 

 

이번 글을 통해 배워갈 내용

1. ...으로 표시되는 스프레드 구문에 대해서 알아보곘습니다.

---

리액트(자바스크립트 기반 라이브러리)를 사용중에 

 

...으로 시작되는 스프레드 구문을 보셨다면

처음에는 놀랄 수 있습니다.

 

위에 ...this.props는 

 

상위 코드에서 span 태그로 감싼 좋아요 두개를 보여주며

 

웹에서 콘솔 찍어서 보게 되면 위와 같습니다.

 

눈치 빠른 분들은 벌써 아시겠지만

 

스프레드 구문(...)을 정의하자면 다음과 같습니다.

함수 호출등의 경우에서 0개 이상의 인자 또는 배열의 요소가 예상되는 위치 또는 문자열과 같은 

iterable을 확장하거나 0인 위치에 객체 표현식을 확장하는 경우 쓰입니다.

 

위에 예시를 들자면

props가 span 태그 없이 "like1" 과 "like2"로 나뉜다면 

{...this.props}는 아래와 같은의미를 가집니다.

like1={this.props.like1} like2={this.props.like2} 

 

위에 설명이 길어졌는데

간단하게 설명하자면

 

피넛 버터 스프레드가 땅콩 버터를 발라 먹는 느낌이라면

땅콩버터를 쫘악 펴줍니다(Spread)

 

여기서도 

 

밀집하게 놓여 있는 코드를 쫘악 Spread 해줍니다. 그게 제가 이해하는 스프레드 구문입니다.

 

ES6부터 사용되었고

 

스택오버플로우에 따르면 4가지 주요 기능들이 있습니다.

 

1. 배열을 합칠때 사용(Concatenation) 

let universityGroup1 = ['SNUST', 'SNU', 'MIT'];
let universityGroup2 = ['KAIST', 'HARVARD', 'CALTECH'];

let universityGroup = [...universityGroup1, ...universityGroup2];

console.log(universityGroup); // ['SNUST', 'SNU', 'MIT', 'KAIST', 'HARVARD', 'CALTECH'];

 

2. 배열을 분해할때 사용(Destruction)

let universityGroup1 = ['SNUST', 'SNU', 'MIT'];
let [first, ...remaining] = universityGroup1;
console.log(first); // SNUST
console.log(remaining); // (2) ["SNU", "MIT"]

3. 두 Object를 합칠때 (Combination)

 

 let topUniversitesOutSideKorea = {
   cambridge: 'Havard',
   oxford: 'Oxford',
   california: 'caltech'
 };

 let  seoul = 'SNUST';

 let topUniversites = {
   ...topUniversitesOutSideKorea,
   seoul
 }

 console.log(topUniversites);//{cambridge: "Havard", oxford: "Oxford", california: "caltech", seoul: "SNUST"}

 

4. 함수인자를 배열로 쓸때(위에 리액트 예시처럼)

  function fn1(...this.props) {

  }

 

이상으로 (...)을 사용하는 스프레드 구문에 대해서 알아봤습니다.

 

이해가 안가신다면 위에 예제를 직접 쳐보시면서 생각해보시면 도움이 될수 있습니다.

 

만약 추가로 공부를 해보고 싶으시다면 아래 MDN 이나 스택오버 플로우 링크를 참조하시면 좋습니다.

 

---

읽어주셔서 감사합니다.

 

오늘도 좋은 일만 가득하시길 바랍니다~

 

---

 

출처 및 인용

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Spread syntax (...) - JavaScript | MDN

 

 

https://stackoverflow.com/questions/31048953/what-does-the-three-dots-notation-do-in-javascript/41640566#41640566

What does the three dots notation do in Javascript?

 

 

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---