[JavaScript] 스프레드(spread) 문법

스프레드(spread)

 

객체 혹은 배열을 펼칠 수가 있다

 

문법: 배열을 빠져나온다.

const fruit = {
    name: '과일'
  };
  
  const greenfruit = {
    name: '과일',
    color: 'green'
  };
  
  const greenmelonfruit = {
    name: '과일',
    color: 'green',
    attribute: 'melon'
  };
  
  console.log(fruit);
  console.log(greenfruit);
  console.log(greenmelonfruit);

먼저, fruit 라는 객체를 선언한다음, greenfruit 객체를 만들었습니다.

이때 greenfruit는 name: '과일' 을 그대로 두고, 새로운 객체를 만들어서 사용하였습니다.

그 이후, greenmelonfruit도 마찬가지로 객체가 가지고 있는 값을 그대로 사용하였다. 

 

위의 예시처럼, 기존의 것을 건들이지 않고 새로운 객체를 만들 때 유용하게 사용할 수 있는 문법이 스프레드 문법입니다.

 

const fruit = {
    name: '과일'
  };
  
  const greenfruit = {
   ...fruit,
    color: 'green'
  };
  
  const greenmelonfruit = {
    ...greenfruit,
    attribute: 'melon'
  };
  
  console.log(fruit);
  console.log(greenfruit);
  console.log(greenmelonfruit);

추가되는 값만 추가하고 변화하지 않는 것은 ...[객체] 형태를 통해 펼치는 형태를 가질 수 있습니다. 

 

또 다른 예로

 

...[1,2,3] // -> 1,2,3 배열에서 빠져나온다

[...Array(숫자).keys()] -> [0, 1, 2, 3, ... , 숫자 -1] 과 같은 의미이다. 

func(...[1,2,3]){


}

func(1,2,3){

}

var arr = [] 

for ( var i =0 i< 100; i++){
	arr.push(i);
}

/////

[...Array(숫자).keys().map((v)) => v+1))]

 

위의 for문은 스프레드 문법 한줄로 대체가 가능합니다.

 

만약 짝수를 만들고 싶다면, 아래와 같이 코드를 만들 수 있습니다. 

[...Array(숫자).keys().map((v)) => v*2))]

 

 

참고

 

• 인프런 - 제로초 강의