javascript Spread 문법

# Spread 문법이란?

• Spread 는 우리말로 '펴다, 펼쳐지다' 의미를 가집니다.

• javascript Spread 문법도 배열이나 문자열과 같은 반복가능한(Iterable) 객체에 사용하여 객체 내부 데이터들을 펼쳐놓을 수 있습니다.

• Spread 문법은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다.

• 추가로 ES9(ECMAScript 2018) 부터는 object 리터럴 객체에도 Spread 문법을 사용할 수 있습니다.

 

# Spread 문법 활용

• 기존 배열에 새로운 원소를 추가하여 새로운 배열 리터럴을 생성하는 경우

const foo = ["a", "b", "c", "f"];
const bar = ["d", "e"];

const alphabet = [
  ...foo.slice(0, 3),
  ...bar,
  ...foo.slice(3, 4)
];

console.log(alphabet); // ["a", "b", "c", "d", "e", "f"]

 

• 두개 이상의 object 리터럴을 병합하여 새로운 object 리터럴을 생성하는 경우

const foo = {
  a: 1,
  b: 2,
};

const bar = {
  c: 3,
  d: 4,
};

const foobar = {
  ...foo, ...bar
};

console.log(foobar); // { a: 1, b: 2, c: 3, d: 4 }

 

• 기존 배열을 복사하여 새로운 배열 리터럴을 생성하는 경우

const foo = [1,2,3,4];
const copiedFoo = [...foo];

console.log(foo === copiedFoo); // false

 

 

 

# 참고문서 

• spread syntax - MDN web docs

전개 구문

 

 

# 잘못된 내용은 댓글 남겨주세요.

저작자표시비영리동일조건

'프론트엔드 > javascript' 카테고리의 다른 글

javascript Symbol 알아보기  (0)	2020.06.06
javascript 비구조화 할당(destructuring assignment)  (0)	2020.06.05
javascript Spread 문법  (0)	2020.06.05
javascript async & await 알아보기  (0)	2020.05.30
javascript Promise 알아보기  (0)	2020.05.29
ECMAScript2015(ES6) 알아보기  (0)	2020.05.23