ECMAScript ES2016~ES2020 ์ •๋ฆฌ

2020๋…„์„ ๋งž์•„ ์ด๋ฏธ ๋งŽ์ด ์•Œ๊ณ  ์žˆ๋Š” ES2015(ES6) ๋‹ค์Œ๋ถ€ํ„ฐ์ธ ES2016๋ถ€ํ„ฐ ES2020๊นŒ์ง€ ์ƒˆ๋กœ ๋‚˜์˜จ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋Šฅ๋“ค์„ ์‚ดํŽด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋‘ ์†Œ๊ฐœํ•˜๋Š” ๊ฑด ์•„๋‹ˆ๊ณ  ๋น„๊ต์  ๋„์›€์ด ๋˜๋Š”, ๋Œ€ํ‘œ์ ์ธ ๊ฒƒ๋“ค์„ ์ถ”๋ ค ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ ๊ธฐ์ดˆ์ ์ธ ์‚ฌ์ „ ์ง€์‹์˜ ์„ค๋ช…์€ ์ƒ๋žต๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ES2016

Array.prototype.includes

๋ฐฐ์—ด ๋‚ด์žฅ ํ•จ์ˆ˜ includes๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

['a', 'b', 'c'].includes('a') // true

์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์‰ฝ๊ฒŒ ์—ญํ• ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐฐ์—ด์— ์•„์ดํ…œ์ด ์กด์žฌํ•˜๋Š”์ง€ Boolean ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์ด ํ•จ์ˆ˜๋กœ ์ด์ œ ['a','b','c'].indexOf('a') > -1 ๋Œ€์‹  ์ข€ ๋” ๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Exponentiation operator

์ œ๊ณฑ ์—ฐ์‚ฐ์ž. ๊ธฐ์กด์— ์ œ๊ณฑ์€ Math์˜ pow ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ–ˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ œ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ** ์—ฐ์‚ฐ์ž๋กœ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

let num = 2;

Math.pow(num, 10); // 1024
2 ** 10; // 1024

num **= 10;
num; // 1024

ES2017

String padding

๋ฌธ์ž์—ด์— ์—ฌ๋ฐฑ์„ ์ฃผ๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์—ฌ๋ฐฑ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ทธ ์—ฌ๋ฐฑ์— ๋ณด์ถฉ ๋ฌธ์ž๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๋ฐฑ์„ ์•ž์— ๋’ค์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

๊ฐ„๋‹จํ•œ ์˜ˆ๋ฅผ ํ†ตํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. start์™€ end์˜ ์ฐจ์ด๋Š” ์•ž๋’ค์˜ ์ฐจ์ด๋ฐ–์— ์—†์œผ๋‹ˆ start๋งŒ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

1์›” ์„ 01์›” ๊ณผ ๊ฐ™์ด ๊ธธ์ด๋ฅผ ๋งž์ถฐ์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค ์ด๋Ÿด๋•Œ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

`1์›”`.padStart(1);        // "1์›”"
`1์›”`.padStart(3);        // " 1์›”"
`1์›”`.padStart(3, "0");   // "01์›”"
`1์›”`.padStart(7, "0AB"); // "0AB0A1์›”"

1๋ฒˆ์งธ ๋ผ์ธ์ฒ˜๋Ÿผ ๋ฌธ์ž์—ด๋ณด๋‹ค ์ž‘์€ ์ˆ˜๋ฅผ ์ง€์ •ํ•˜๋”๋ผ๋„ ๋ฌธ์ž์—ด์ด ์ž˜๋ฆฌ๊ฑฐ๋‚˜ ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค

2๋ฒˆ์งธ ๋ผ์ธ์€ ๋ฌธ์ž์—ด์˜ ๊ธธ์ด๋ณด๋‹ค ํ•˜๋‚˜ ๊ธด 3์„ ๋„ฃ์–ด ํ•˜๋‚˜์˜ ์—ฌ๋ฐฑ์ด ์ถ”๊ฐ€๋œ ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.

3๋ฒˆ์งธ ๋ผ์ธ์ด ์›ํ•˜๋Š” ์˜๋„์ธ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

4๋ฒˆ์งธ ๋ผ์ธ์ฒ˜๋Ÿผ ๋ณด์ถฉ ๋ฌธ์ž๋ฅผ ๋ฐฐ์—ด๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋ฐฐ์—ด์„ ์ˆœํšŒ ๋ฐ˜๋ณตํ•˜๋ฉฐ ์—ฌ๋ฐฑ์„ ์ฑ„์šฐ๋ฉฐ 0, A, B๋ฅผ ์ฑ„์šฐ๊ณ  ๋‹ค์Œ์œผ๋กœ 0, A๊นŒ์ง€ ์ฑ„์›Œ์ง„ ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Object.values()

Object์— ์ถ”๊ฐ€๋œ values ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ key:value ์—์„œ value ๊ฐ’๋“ค์„ ๋ฐฐ์—ด์œผ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

const obj1 = {name: "Jhon", age: 24};
Object.values(obj1); // ["Jhon", 24]

Object.entries()

๊ฐ์ฒด ์•ˆ์˜ ๋ชจ๋“  ์†์„ฑ์„ ๊ฐ๊ฐ key, value๊ฐ€ ๋‹ด๊ธด ๋ฐฐ์—ด๋กœ ํ•˜๋‚˜์˜ ๋ฐฐ์—ด์— ๋‹ด์Šต๋‹ˆ๋‹ค. [[key, value], [key, value], [key, value] ...]

const obj1 = {name: "Jhon", age: 24};

Object.keys(obj1);    // ["name", "age"]
Object.values(obj1);  // ["Jhon", 24]

Object.entries(obj1); // [["name", "Jhone"], ["age", 24]]

Object.getOwnPropertyDescriptors()

Object์— ๊ธฐ์กด์— ์žˆ๋˜ getOwnPropertyDescriptor์— ์ด์–ด ๋ณต์ˆ˜ํ˜• s๊ฐ€ ๋ถ™์€ getOwnPropertyDescriptors ๋ฉ”์†Œ๋“œ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ๋ฉ”์†Œ๋“œ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์„ ํ–‰ ์ง€์‹์œผ๋กœ getOwnPropertyDescriptor๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„์•ผํ•˜๋ฉฐ ์†์„ฑ ์„ค๋ช…์ž์˜ ๋„ค๊ฐ€์ง€ ์†์„ฑ์„ ์•Œ์•„์•ผํ•ฉ๋‹ˆ๋‹ค. (๋งํฌ ์ฐธ์กฐ)

๋˜ํ•œ Object.defineProperties() ๊ฐ™์€ ๋ฉ”์†Œ๋“œ๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ์œ ์šฉํ•˜๊ฒŒ ํ™œ์šฉํ•  ๋ฐฉ๋ฒ•์ด ์ƒ๊น๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ์ž์„ธํ•œ ์„ค๋ช…์—†์ด ํ•ด๋‹น ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด์„œ๋งŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

Object.getOwnPropertyDescriptor(obj, prop)

๊ธฐ์กด์˜ getOwnPropertyDescriptor๋Š” ์ธ์ž๋กœ ๊ฐ์ฒด์™€ ์†์„ฑ๋ช…์„ ์ „๋‹ฌํ•ด ํ•ด๋‹น ์†์„ฑ์˜ ์†์„ฑ ์„ค๋ช…์ž๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค.

์ด์ œ ์—ฌ๊ธฐ์„œ ์„ค๋ช…ํ•˜๋Š” getOwnPropertyDescriptors๋Š” ์†์„ฑ๋ช…์„ ์ „๋‹ฌํ•˜์ง€ ์•Š๊ณ  ๊ฐ์ฒด๋งŒ ์ „๋‹ฌํ•จ์œผ๋กœ ๊ฐ์ฒด๋‚ด์˜ ๋ชจ๋“  ์†์„ฑ์— ๋Œ€ํ•œ ์†์„ฑ ์„ค๋ช…์ž๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

Object.getOwnPropertyDescriptor(obj)

๋‘๊ฐœ์˜ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

console.log(Object.getOwnPropertyDescriptor(obj1, "name"));
// Object {value: "Jhon", writable: true, enumerable: true, configurable: true}

console.log(Object.getOwnPropertyDescriptors(obj1));
// Object {
//   name: {value: "Jhon", writable: true, enumerable: true, configurable: true}, 
//   age: {value: 24, writable: true, enumerable: true, configurable: true}
// }

Trailing commas

ํ•จ์ˆ˜์˜ ๋งˆ์ง€๋ง‰ ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ธ์ž์—๋„ ์ฝค๋งˆ๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด ๋ง์ด์ฃ . ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ์™œ ์ถ”๊ฐ€๋˜์—ˆ๋Š”์ง€๋Š” ๋‹ค์–‘ํ•œ ์˜๊ฒฌ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํฅ๋ฏธ๊ฐ€ ์žˆ๋Š” ๋ถ„๋“ค์€ ํ•œ๋ฒˆ ๊ฒ€์ƒ‰ํ•ด๋ณด์„ธ์š”.

const foo = (a, b, c,) => {}

async/await

์‚ฌ์‹ค์ƒ ES2017์˜ ํ•ต์‹ฌ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ํ•จ์ˆ˜๋กœ ๊ธฐ์กด์˜ Promise ๋ณด๋‹ค ๊ฐ€๋…์„ฑ์ด ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์„ ํ–‰์ ์œผ๋กœ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์— ๋Œ€ํ•œ ์ง€์‹๊ณผ Promise์˜ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

ํ•ด๋‹น ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์„œ ๊ฐ„๋‹จํžˆ ๋‹ค๋ฃจ๊ธฐ์—๋Š” ์ค‘์š”ํ•˜๊ณ  ๋‚ด์šฉ์ด ๊ธธ์–ด ๋”ฐ๋กœ ํฌ์ŠคํŒ…์„ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์•„๋ž˜ ๋งํฌ๋Š” async/await๋ฅผ ์„ค๋ช…ํ•œ ์บกํ‹ดํŒ๊ต๋‹˜์˜ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

CAPTAIN PANGYO - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ async์™€ await


ES2018

Rest/Spread Properties

๊ธฐ์กด์˜ ๋ฐฐ์—ด์—์„œ ์‚ฌ์šฉํ•˜๋˜ rest/spread๋ฅผ ๊ฐ์ฒด์—์„œ๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

// Rest
const { one, two, ...others } = { one: 1, two: 2, three: 3, four: 4, five: 5 }
console.log(one, two, others); // 1 2 {three: 3, four: 4, five: 5}

// Spread
const obj1 = {one, two, ... others};
console.log(obj); // {one: 1, two: 2, three: 3, four: 4, five: 5}

const obj2 = { one: 100, five: 500 };
const obj3 = { five: 5000 };
const obj = { ...obj1, ...obj2, ...obj3};
console.log(obj); // {one: 100, two: 2, three: 3, four: 4, five: 5000}

๋งˆ์ง€๋ง‰ ๋ผ์ธ์˜ obj์˜ ์ถœ๋ ฅ์„ ๋ณด๋ฉด ๊ฐ™์€ ์†์„ฑ ์ด๋ฆ„์— ๋Œ€ํ•ด์„œ๋Š” ์•ž์˜ ๊ฒƒ์„ ๋’ค์˜ ๊ฒƒ์ด ๋ฎ์–ด์“ด๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

Promise.prototype.finally()

then, catch, finally์—์„œ Promise๋Š” ๊ธฐ์กด์— then๊ณผ catch๋งŒ ๊ฐ€๋Šฅํ–ˆ์œผ๋‚˜ ์ด์ œ finally๋„ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Promise.resolve('reslove')
.then((res) => console.log('success'))
.catch((err) => console.log('fail'))
.finally(() => console.log('finally'))

Asynchronous iteration

๋น„๋™๊ธฐ ์ดํ„ฐ๋Ÿฌ๋ธ” ๊ฐ์ฒด๋ฅผ ์ˆœํšŒํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ด์กŒ์Šต๋‹ˆ๋‹ค.

์ดํ•ด๋ฅผ ์œ„ํ•ด์„œ๋Š” Promise, async/await์˜ ์ดํ•ด๊ฐ€ ์„ ํ–‰๋ฉ๋‹ˆ๋‹ค.

for await (const req of requests) {
console.log(req)
}

ES2019

String.trimStart() & trimEnd()

๋ฌธ์ž์—ด์˜ ์•ž์ด๋‚˜ ๋’ค์˜ ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•œ๋‹ค.

์•ž์„ ์ œ๊ฑฐํ•˜๋Š” trimStart์™€ ๋’ค๋ฅผ ์ œ๊ฑฐํ•˜๋Š” trimEnd๊ฐ€ ์žˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

const s = "     hello world";
const e = "!     ";

console.log(s + e + ';');
// "     hello world!     ;"

console.log(s.trimStart() + e.trimEnd() + ';');
// "hello world!;"

Optional Catch Binding

catch ๋งค๊ฐœ๋ณ€์ˆ˜ ์—†์ด๋„ catch ๋ธ”๋ก์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

try {
// some code
}
catch (err) {
// error handling code
}

์œ„์™€ ๊ฐ™์ด catch(err){} ๋˜๋Š” catch(){} ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋˜ ๊ฒƒ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

try {
// some code
}
catch {
// error handling code
}

Object.fromEntries()

์œ„์—์„œ ์„ค๋ช…ํ•œ Object.entries() ์˜ ์ •๋ฐ˜๋Œ€์ž…๋‹ˆ๋‹ค.

๊ฐ์ฒด๋ฅผ entries๋กœ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์—ˆ๋‹ค๋ฉด fromEntries๋กœ ๋‹ค์‹œ ๊ฐ์ฒด๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์•ผ๊ธฐ์ž…๋‹ˆ๋‹ค. entires๋ฅผ ์ดํ•ดํ–ˆ๋‹ค๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const obj1 = {name: "Jhon", age: 24};

const entries = Object.entries(obj1); 
console.log(entries); // [["name", "Jhone"], ["age", 24]]

const fromEntries = Object.fromEntries(entries);
console.log(fromEntries); // {name: "Jhon", age: 24}

Array.flat() & flatMap()

flat ๋ฉ”์†Œ๋“œ๋Š” ๋ฐฐ์—ด์•ˆ์˜ ๋ฐฐ์—ด์„ ์‰ฝ๊ฒŒ ํ•ฉ์น  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const arr = [1, , 2, [3, 4, [5, 6]]];

console.log(arr.flat());  // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(1)); // [1, 2, 3, 4, [5, 6]]

console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

flat์˜ ์ธ์ž๋กœ๋Š” ๋ฐฐ์—ด์˜ ๊นŠ์ด๋ฅผ ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ „๋‹ฌ๋œ ์ธ์ž๊ฐ€ ์—†์„ ๊ฒฝ์šฐ default๋Š” 1์ด๋‹ค. ๋˜ํ•œ ๋นˆ ๋ฐฐ์—ด์€ ๋ฌด์‹œ๋œ๋‹ค.

flatMap ๋ฉ”์†Œ๋“œ๋Š” map()๊ณผ flat()์ด ํ•ฉ์ณ์ง„ ๊ฒƒ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์šฐ์„  map์„ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋งŒ๋“ค๊ณ  flat์„ ํ†ตํ•ด ๋ฐฐ์—ด์ด ํ•ฉ์ณ์ง„๋‹ค. (flatMap์˜ ๊นŠ์ด๋Š” 1์ž…๋‹ˆ๋‹ค)

const arr = [1,2,3];

const map = arr.map(v => [v]);
const flatMap = arr.flatMap(v=> [v]);

console.log(map);         // [[1], [2], [3]]
console.log(map.flat());  // [1, 2, 3]

console.log(flatMap);     // [1, 2, 3]

ES2020

Dynamic Import

ํŒŒ์ผ import๋ฅผ ๋™์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋Š” if๋ฌธ์— ๋”ฐ๋ผ importํ•œ ํŒŒ์ผ์˜ ์‚ฌ์šฉ ์œ ๋ฌด๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ ์กฐ๊ฑด์— ๋งž์ง€ ์•Š๋”๋ผ๋„ ์ผ๋‹จ์€ ์ตœ์ƒ๋‹จ์˜ import๋ฅผ ํ†ตํ•ด ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์ œ๋Š” ๋‘๋ฒˆ์งธ ์ฝ”๋“œ ์˜ˆ์ œ์™€ ๊ฐ™์ด Dynamic Import๋กœ ์ธํ•ด ๋ถˆํ•„์š”ํ•œ ๋™์ž‘์„ ์ค„์ผ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

import config from './config.js';

if(response) {
age = config.age;
}

if(response) {
import('./config.js')
.then(config => {
  age = config.age;
  console.log(config);
}
}

์ฐธ๊ณ ๋กœ Dynamic import ์˜ˆ์ œ์ธ ๋‘๋ฒˆ์งธ ์ฝ”๋“œ์—์„œ console.log์˜ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋Š” {age: 24, skills: ["react", "webpack"], default: "Jhon"} ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด config ํŒŒ์ผ์˜ ๋‚ด์šฉ์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

export const age = 24;

export const skills = ["react", "webpack"];

export default "Jhon";

default๋กœ export๋ฅผ ํ•œ ๊ฒƒ์€ default๋ผ๋Š” ์†์„ฑ ์ด๋ฆ„์„ ๊ฐ€์ง€๋Š” ๊ฒƒ์„ ์•Œ์•„๋‘์„ธ์š”.

BigInt

BigInt๋Š” 2^53 ๋ณด๋‹ค ํฐ ์ •์ˆ˜๋ฅผ ์ทจ๊ธ‰ํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

์ˆซ์ž ๋’ค์— n์ด ๋ถ™๋Š” ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋กœ 10n ์€ ์ˆซ์ž 10์„ ๋œปํ•œ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

์ž์„ธํ•œ ์˜ˆ์™€ ์„ค๋ช…์€ ์•„๋ž˜ ์˜ˆ์ œ๋กœ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

const int1 = Number.MAX_SAFE_INTEGER + 1; 
// 9007199254740992

const int2 = Number.MAX_SAFE_INTEGER + 2; 
// 9007199254740992  <= ~993์ด ์•„๋‹ˆ๋‹ค.

const bigInt2 = BigInt(Number.MAX_SAFE_INTEGER) + 2n; 
// 9007199254740993n <= ~993์ด ๋˜์—ˆ๋‹ค.

console.log(typeof int1, typeof int2, typeof bigInt2); 
// number number bigint

console.log(typeof 9007199254740993n); // bigint
console.log(9007199254740993n === bigInt2); // true
// ์ผ๋ฐ˜์ ์ธ ์ˆซ์ž ๋’ค์— n์„ ๋ถ™์ด๋Š” ๊ฒƒ์œผ๋กœ bitint ํƒ€์ž…์„ ๊ฐ€์ง„๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

console.log(BigInt(10), BigInt(10n));
// 10n 10n <= BitInt์˜ ์ธ์ž๋กœ๋Š” n์˜ ์—ฌ๋ถ€๊ฐ€ ์ค‘์š”ํ•˜์ง€ ์•Š๋‹ค.

console.log(10 === BigInt(10)); // false
console.log(10 == BigInt(10)); // true

// console.log(9007199254740993n + 1);
// ์œ„ ์ฝ”๋“œ๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. bigint๋ฅผ ์—ฐ์‚ฐํ• ๋•Œ๋Š” number ํƒ€์ž…๊ณผ ์„ž์–ด์“ฐ๋Š” ๊ฒƒ์ด ์•ˆ๋œ๋‹ค.

Promise.allSettled

Promise.all()์€ ๋ชจ๋“  ์ž‘์—…์ด ์„ฑ๊ณต(reslove)ํ•ด์•ผ ์‹คํ–‰๋˜๋Š” ํŠน์ง•๊ณผ ๋‹ฌ๋ฆฌ Promise.allSettled()์€ ๋„์ค‘์— ์‹คํŒจ(reject)๋˜๋”๋ผ๋„ ๋ชจ๋“  ์‹คํ–‰์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ์™€ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ์‚ดํŽด๋ด…์‹œ๋‹ค.

const p1 = new Promise((resolve, reject) => resolve("p1, resolved"));
const p2 = new Promise((resolve, reject) => resolve("p2, resolved"));
const p3 = new Promise((resolve, reject) => reject("p3, rejected"));

Promise.all([p1, p2, p3])
.then(response => console.log(response))
.catch(err => {
console.log(err);
});
/*
console.log(response)
{status: "fulfilled", value: "p1, resolved"}
{status: "fulfilled", value: "p2, resolved"}
{status: "rejected", reason: "p3, rejected"}
*/

Promise.allSettled([p1, p2, p3])
.then(response => console.log(response))
.catch(err => {
console.log(err);
});
/*
console.log(err);
p3, rejected
*/

Nullish Coalescing Operator

a ?? b ๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค. null์ด๋‚˜ undefined์ผ ๋•Œ๋งŒ b๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

0์€ false๋ฅผ ์˜๋ฏธํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ 0 || 'A' ๋Š” A ๊ฐ€ ๋ ๊ฒ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ 0์ด ์˜๋ฏธ์žˆ๋Š” ๊ฐ’์ด๋ฉด 0 ๋˜ํ•œ ์‚ฌ์šฉํ•ด์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋ฅผ ๋‹จ์ถ•์‹œ์ผœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‚ดํŽด๋ด…์‹œ๋‹ค.

0 || 'A'    // A
0 ?? 'A'    // 0

0 ? 0 : 'A' // A
0 ?? 'A'    // 0

Optional Chaining

foo.a.b ์— ์ ‘๊ทผํ•œ๋‹ค๊ณ  ํ–ˆ์„ ๋•Œ, a๊ฐ€ ์—†๋‹ค๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด if(foo.a && foo.a.b) ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๊ณค ํ•ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ Optional Chaining์„ ์ด์šฉํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๊ณ  undefined๋ฅผ ๋ฐ˜ํ™˜๋ฐ›์Šต๋‹ˆ๋‹ค.

Optional Chaining์€ foo.a?.b ์™€ ๊ฐ™์ด ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.

const foo = {
a: {
b: true
}
};

console.log(foo.a.b); // true
console.log(foo.b?.b); // undefined

console.log(foo.b.aa); // TypeError: Cannot read property 'aa' of undefined