1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

ES6 - Rest/Spread 연산자

코드를 더 간결하게

featured image thumbnail for post ES6 - Rest/Spread 연산자

Extended Parameter Handling | PoiemaWeb

default parameter


function sum(x, y) {
  return x + y;
}

console.log(sum(1)); // NaN
console.log(sum(1, 2)); // 3

function sum(x = 0, y = 0) {
  return x + y;
}

console.log(sum(1)); // 1
console.log(sum(1, 2)); // 3
function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(Array.isArray(arguments)); // false
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

function baz(x, y, ...rest) {}
console.log(baz.length); // 2

Spread 문법의 피연산자는 이터러블한 객체만 가능하다.

Symbol.iterator in []  // true
[][Symbol.iterator]()
// ...[1, 2, 3][1, 2, 3]을 개별 요소로 분리한다(1, 2, 3)
console.log(...[1, 2, 3]); // 1, 2, 3

// 문자열은 이터러블이다.
console.log(..."Hello"); // H e l l o

// Map과 Set은 이터러블이다.
console.log(
  ...new Map([
    ["a", "1"],
    ["b", "2"],
  ])
); // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3])); // 1 2 3
console.log([..."Hello"]); // ["H", "e", "l", "l", "o"]
console.log(Array.from("Hello")); //["H", "e", "l", "l", "o"]

Array.from(String)[...String] 의 차이점은 무엇일까?

Array.from({ 0: "a", 1: "1", length: 2 });
[...{ 0: "a", 1: "1", length: 2 }];

Array.fromiterablearray-like도 커버한다.

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

{...{a: 12, b: 'bsdfsfa'}} 이건 되는데

이건 위에서 말한 Spread와 또 다른 Rest/Spread 프로퍼티라고 하고 현재 stage4 단계인 프로포절이다.

tc39/proposal-object-rest-spread

var user = {
  name: "tamm",
  birth: 2000,
};

const { name, birth } = user;

var getAge = ({ birth }) => new Date().getFullYear() - birth + 1;
getAge(user); // 21

참조


Spread syntax

Rest parameters and spread syntax