비실이의 개발 성장기

javascript Spread 문법 본문

프론트엔드/javascript

javascript Spread 문법

DubbingLee 2020. 6. 5. 14:53

# 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

 

 

 

# 참고문서 

 

전개 구문

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시

developer.mozilla.org

 

 

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

0 Comments
댓글쓰기 폼