ES 2017과 ES 2018
ES7(ECMA SCRIPT 2016)
Array.prototype.includes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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) | cs |
ECMAScript 2016 or ES7 — Array.prototype.includes()
includes는 indexOf와 달리 NaN도 표시할 수 있다. 이것으로 error 대신에 또 javascript의 확장성을 한번 더 표현 하는 좋은 계기가 되지않을까 하는 생각이다.
Exponentiation infix operator
1 2 3 4 5 | //Instead of... Math.pow(7, 2) // 49 //Use 7**2 //49 | cs |
ECMAScript 2016 or ES7 — ** Exponent infix operator
infix로 **를 사용해서 간단히 제곱을 표현할 수 있다.
그 다음으로 ES8 (ECMA script 2017)을 살펴보자.
ES8(ECMA SCRIPT 2017)
Object.values()
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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] 왜냐하면 전체로 가져오니까. | cs |
ECMAScript 2017 (ES8)— Object.values()
Object.entires()
위와 비슷한 entires()는 위와 같이 역시 Object.keys와 관련이 있지만 키만 반환하는 대신 배열 방식으로 키와 값을 반환한다.
배열 방식으로 키와 값을 반환하기 때문에 키만 반환하는 위의 상황과 또 다르다.
루프에서 객체를 사용하거나 객체를 map으로 변환하는 작업을 매우 간단하게 수행할 수 있다.
Example 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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}'); } | cs |
ECMAScript 2017 (ES8) — Using Object.entries() in loops
위의 예제는 key와 value를 일일이 생성하여 looping으로 뽑아내는 것과
es8에서 entire로 key와 value를 of 선언 하여 바로 뽑아내는 모습을 비교하고 있다.
Example 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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} | cs |
ECMAScript 2017 (ES8) — Using Object.entries() to convert Object to Map
String padding
String.prototype.padStart와 String.prototype.padEnd를 통해서 String에 각각의 인스턴스를 추가하는 것으로 앞 뒤에 문자열을 추가 할 수 있다.
1 2 3 4 5 | 'someString'.padStart(numberOfCharcters [,stringForPadding]); '5'.padStart(10) // ' 5' '5'.padStart(10, '=*') //'=*=*=*=*=5' '5'.padEnd(10) // '5 ' '5'.padEnd(10, '=*') //'5=*=*=*=*=' | cs |
아래의 예제에서 우리는 다양한 길이의 숫자 목록을 가지고서 모든 항목이 10자리 길이가 같도록 0을 붙여서 표시할 수 있다.
padStart example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //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을 붙였습니다. | cs |
ECMAScript 2017 — padStart example
padEnd example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 | cs |
ECMAScript 2017 — padEnd, padStart and Object.Entries example
위와 같이 표현할 수 있지만, 그림과 같이 여러 유니코드를 사용하여 표현되는 emoji(그림 이모티콘) 같은 경우는 제대로 표현되지 않을 수 있다.
1 2 | //Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd! 'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart' | cs |
위와 같은 결과가 나오는 이유는 ❤️ 를 유니코드로 표현하면 ('\u2764\uFE0F') 이기 때문이다.
즉, ❤️ 하나당 2바이트를 나타낸다.
❤️의 단어 자체가 5자이므로 총 5개의 문자만 남게 된다. 그래서 js는 마지막 하나의 하트는 제대로 표현될 수 없는 것입니다. 단지 \u2764\ 만을 해석 한다
테스트는 이곳에서 할 수 있다
꽤나 긴 포스팅을 한 것 같다.
다음 시간에 이어서 포스팅을 할 수 있도록 하겠습니다.
출처 :
https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e
'Javascript' 카테고리의 다른 글
[JS] GITHUB이 Jquery를 삭제하다 (0) | 2019.01.26 |
---|---|
[JS] Map vs ForEach (2) | 2018.08.25 |
[JS] 8번째 데이터 타입 BigInt (0) | 2018.06.07 |
[jQuery] $.grep 과 $.map (0) | 2018.05.29 |
함수 선언식 && 표현식 && 호이스팅 (0) | 2018.04.17 |
댓글