Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- javascript arrow function
- react class method bind
- parcel
- client side rendering
- 순차리스트
- 자료구조
- es6 module
- Browser API
- web server vs was
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- js arrow function
- javascript destructuring
- server side rendering
- javascript eventloop
- es6 destructuring
- JavaScript
- react
- 선형리스트
- 크롬 익스텐션 개발
- DOM API
- chrome extension development
- react lifecycle
- javascript spread
- js promise
- react event bind
- task queue
- es6 promise
- javascript class method bind
- es7 async await
- es6 symbol
- Today
- 31
- Total
- 400,412
비실이의 개발 성장기
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
# 참고문서
전개 구문
전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시
developer.mozilla.org
# 잘못된 내용은 댓글 남겨주세요.
'프론트엔드 > 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 |
0 Comments