본문 바로가기

ECMA6

web/javascript by 낼스 2019. 7. 27.
# ECMA6 ##### [source : https://jsfiddle.net/softm/vcrfj2tu/ ](https://jsfiddle.net/softm/vcrfj2tu/)

※ 참고 : https://www.sitepoint.com/javascript-versioning-es6-es2015

# ECMAScript 2015 Releases
   - Classes
   - Promises
   - Arrow functions
   - ES Modules
   - Generators and Iterators

# ES2016
   - Array.prototype.includes
        // pre-ES2016:
        const hasBob = names.indexOf('bob') > -1;

        // ES2016:
        const hasBob = names.includes('bob');

   - Exponent Operator
        // pre-ES2016
        Math.pow(5, 3); // => 125

        // ES2016
        5 ** 3; // => 125

# ES2017
    - Asynchronous Functions
        // promises
        const getProfile = name => {
          return fetch(`https://some-api/people/${name}`)
            .then(res => res.json())
            .then(({ profile }) => profile); // destructuring `profile` from parsed object
        };

        // async/await
        const getProfile = async name => {
          const res = await fetch(`https://some-api/people/${name}`);
          const { profile } = await res.json();
          return profile;
        };

   - String Padding Methods
     String.prototype.padStart(length, padder) and padEnd(length, padder) will

    'foo'.padStart(6);          // => '   foo';
    'foo'.padEnd(6);            // => 'foo   ';
    'foo'.padStart(10, 'bar');  // => 'barbarbfoo';
    'foo'.padEnd(10, 'bar');    // => 'foobarbarb';

# ES2018
   - Asynchronous Iterators
    While Promise.all() allows you to await the resolution of multiple promises,
    there are cases in which you may need to sequentially iterate over asynchronously-retrieved values.
    It’s now possible to await async iterators along with arrays of promises:

    (async () => {
      const personRequests = ['bob', 'sarah', 'laura'].map(
        n => fetch(`https://api/people/${n}`)
      );

      for await (const response of personRequests) {
        console.log(await response.json());
      }
    })();

   - Object Spread and Rest Properties
     함수 호출 용            : myFunction(...iterableObj);
     배열 리터럴 용          : [...iterableObj, 4, 5, 6]
     비구조화destructuring 용:[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

# 참고
    :: [JavaScript] ES6 문법 정리
        ※ 원본 : https://github.com/lukehoban/es6features
        ※ 출처 : http://itstory.tk/entry/JavaScript-ES6-문법-정리#arrows [덕's IT Story]

※ 참고 : https://www.sitepoint.com/javascript-versioning-es6-es2015

# ECMAScript 2015 Releases
   - Classes
   - Promises
   - Arrow functions
   - ES Modules
   - Generators and Iterators

# ES2016
   - Array.prototype.includes
        // pre-ES2016:
        const hasBob = names.indexOf('bob') > -1;

        // ES2016:
        const hasBob = names.includes('bob');

   - Exponent Operator
        // pre-ES2016
        Math.pow(5, 3); // => 125

        // ES2016
        5 ** 3; // => 125

# ES2017
    - Asynchronous Functions
        // promises
        const getProfile = name => {
          return fetch(`https://some-api/people/${name}`)
            .then(res => res.json())
            .then(({ profile }) => profile); // destructuring `profile` from parsed object
        };

        // async/await
        const getProfile = async name => {
          const res = await fetch(`https://some-api/people/${name}`);
          const { profile } = await res.json();
          return profile;
        };

   - String Padding Methods
     String.prototype.padStart(length, padder) and padEnd(length, padder) will

    'foo'.padStart(6);          // => '   foo';
    'foo'.padEnd(6);            // => 'foo   ';
    'foo'.padStart(10, 'bar');  // => 'barbarbfoo';
    'foo'.padEnd(10, 'bar');    // => 'foobarbarb';

# ES2018
   - Asynchronous Iterators
    While Promise.all() allows you to await the resolution of multiple promises,
    there are cases in which you may need to sequentially iterate over asynchronously-retrieved values.
    It’s now possible to await async iterators along with arrays of promises:

    (async () => {
      const personRequests = ['bob', 'sarah', 'laura'].map(
        n => fetch(`https://api/people/${n}`)
      );

      for await (const response of personRequests) {
        console.log(await response.json());
      }
    })();

   - Object Spread and Rest Properties
     함수 호출 용            : myFunction(...iterableObj);
     배열 리터럴 용          : [...iterableObj, 4, 5, 6]
     비구조화destructuring 용:[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

# 참고
    :: [JavaScript] ES6 문법 정리
        ※ 원본 : https://github.com/lukehoban/es6features
        ※ 출처 : http://itstory.tk/entry/JavaScript-ES6-문법-정리#arrows [덕's IT Story]

'web > javascript' 카테고리의 다른 글

show loading progress image  (0) 2019.08.05
레이어 중앙 위치  (0) 2019.08.01
date time random  (0) 2019.07.26
Node.js - Http Module  (0) 2019.07.24
Node.js - events Module & EventEmitter Class  (0) 2019.07.23

댓글