ES 2017 및 ES 2018에 대한 새로운 기능 (1)

ES 2017과 ES 2018

ES6가 나왔다고 다들 화살표 함수에 탄성을 자아내던 때도 금방 뒤로하고 자바스크립트는 기다릴줄 모르고 빠르게 달리고 있다.  ES7과  ES8은 이제 또 한번 새로운 기능을 지니고 JS 개발자들에게 리뷰를 요구하고 있다.

점점, 공부하기도 빠듯하고, 새로운 기능에 대한 예제도 잘 찾아볼 수 없는 상황이다.

그러던 중 하단 출처에서 발견한 18가지 새로운 기능에 대한 가이드는 매우 좋은 자료라고 할 수 있다. 

ES6을 물론 바탕으로 하여 새로운 기능을 확장시키는 개념이기 때문에 ES6까지의 선행학습은 필수라고 생각한다.

필자도 그렇게 ES3 이후에 자기계발에 LAZY한 상태로 지내왔기 때문에 더더욱 지금 빠르게 변화하는 ES에 상당히 거부감을 느끼고 있다. ㅎㅎ 

우선 ES7

ES7(ECMA SCRIPT 2016)

Array.prototype.includes

const arr = [1,2,3,4, NaN];
 
//Instead of
if(arr.indexOf(3) >= 0){
    console.log(true)
}
 
//Use
if(arr.includes(3)){
    console.log(true)
}
 
//PS : Note the indexOf doesn't work for searching NaN
arr.includes(NaN) // true
arr.indexOf(NaN) //-1(doesn't work for NaN)

ECMAScript 2016 or ES7 — Array.prototype.includes()

includes는 indexOf와 달리 NaN도 표시할 수 있다. 이것으로 error 대신에 또 javascript의 확장성을 한번 더 표현 하는 좋은 계기가 되지않을까 하는 생각이다.

Exponentiation infix operator

//Instead of...
Math.pow(7, 2) // 49
 
//Use
7**2 //49

ECMAScript 2016 or ES7 — ** Exponent infix operator

infix로 **를 사용해서 간단히 제곱을 표현할 수 있다.

그 다음으로 ES8 (ECMA script 2017)을 살펴보자.

ES8(ECMA SCRIPT 2017)

Object.values()

Object.values() 는 object.keys() 와 비슷하지만 keys와 달리 모든 값을 반환하는 특징을 가지고 있다.

const cars = {BMW : 3, Tesla : 2, Toyota : 1};
 
//ES2015
//Instead of...
const vals = Object.keys(cars).map(key => cars[key]);
console.log(vals); // [3, 2, 1]
 
//ES2017 and onwards
//Use
const values = Object.values(cars); // 따로 map으로 루핑하지 않아도 된다.
console.log(values); // [3, 2, 1] 왜냐하면 전체로 가져오니까.
 
    

ECMAScript 2017 (ES8)— Object.values()

Object.entires()

위와 비슷한 entires()는 위와 같이 역시 Object.keys와 관련이 있지만 키만 반환하는 대신 배열 방식으로 키와 값을 반환한다.

배열 방식으로 키와 값을 반환하기 때문에 키만 반환하는 위의 상황과 또 다르다.

루프에서 객체를 사용하거나 객체를 map으로 변환하는 작업을 매우 간단하게 수행할 수 있다.

Example 1

const animals = {LION : 3, TIGER : 2, Elephant : 1};
 
//ES 5.1
//Instead of extracting keys and then again looping.
Object.keys(animals).forEach(function(key){
    console.log('key: ' + key + ' value: ' + animals[key]);
});
 
 
//ECMAScript 2017 (ES8)
//Use Object.entires
for (let [key, value] of Object.entires(animals)){
    console.log('key: ${key} value: ${value}');
}

ECMAScript 2017 (ES8) — Using Object.entries() in loops

위의 예제는 key와 value를 일일이 생성하여 looping으로 뽑아내는 것과

es8에서 entire로 key와 value를 of 선언 하여 바로 뽑아내는 모습을 비교하고 있다.

Example 2

const animals = {LION : 3, TIGER : 2, Elephant : 1};
 
//ES2015
//Instead of..
//Get object keys and then and each item to Map in a loop
const map1 = new Map();
Object.keys(animals).forEach(key => {
    map1.set(key, animals[key]);
});
 
 
console.log(map1) // Map{'LION' => 3, 'TIGER' => 2, 'Elephant => 1}
 
 
//ES2017 and onwards
//Use..
const map = new Map(Object.entires(animals));
 
console.log(map); // Map{'LION' => 3, 'TIGER' => 2, 'Elephant => 1}

ECMAScript 2017 (ES8) — Using Object.entries() to convert Object to Map

일일이 map에 set으로 key와 value를 정의하여 looping 하는 대신에

es8에서는 map 생성을 entires로 한번에 해올 수 있어서 더 편리한듯 하다.

String padding

String.prototype.padStart와 String.prototype.padEnd를 통해서 String에 각각의 인스턴스를 추가하는 것으로 앞 뒤에 문자열을 추가 할 수 있다.

'someString'.padStart(numberOfCharcters [,stringForPadding]); 
'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='

아래의 예제에서 우리는 다양한 길이의 숫자 목록을 가지고서 모든 항목이 10자리 길이가 같도록 0을 붙여서 표시할 수 있다.

padStart example

//ECMAScript 2017(ES8)
//If you have a list of items of varying lengths and want to
//format them for display purposes, you can use padStart
 
const formatted = [0, 1, 12, 123, 1234, 12345].map(num => 
    num.toString().padStart(10, '0') //adds '0' until len is 10
);
 
console.log(formatted);
//prints..
//[
//    '0000000000',
//    '0000000001',
//    '0000000012',
//    '0000000123',
//    '0000001234',
//    '0000012345',
//];
 
// 길이가 10개가 될 때까지 0을 붙였습니다.

ECMAScript 2017 — padStart example

padEnd example

const animals = {
    'LION' : '10',
    'TIGER' : '5',
    'Elephant' : '0'
}
 
Object.entires(animals).map(([name, count]) =>{
    //padEnd appends ' -' until name becomes 20 characters
    //padStart prepends '0' until count becomes 3 characters.
    console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
}); 
 
//Prints..
// LION - - - - - - -  Count : 010
// TIGER - - - - - -   Count : 005
// Elephant - - - - -  Count : 000

ECMAScript 2017 — padEnd, padStart and Object.Entries example

위와 같이 표현할 수 있지만, 그림과 같이 여러 유니코드를 사용하여 표현되는 emoji(그림 이모티콘) 같은 경우는 제대로 표현되지 않을 수 있다.

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

위와 같은 결과가 나오는 이유는 ❤️ 를 유니코드로 표현하면 ('\u2764\uFE0F') 이기 때문이다.

즉, ❤️ 하나당 2바이트를 나타낸다.

❤️의 단어 자체가 5자이므로 총 5개의 문자만 남게 된다. 그래서 js는 마지막 하나의 하트는 제대로 표현될 수 없는 것입니다. 단지 \u2764\ 만을 해석 한다 

테스트는 이곳에서 할 수 있다 

https://www.lettercount.com/

꽤나 긴 포스팅을 한 것 같다.

다음 시간에 이어서 포스팅을 할 수 있도록 하겠습니다.

출처 : 

https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e