ECMAScript 2020 - ES11

목차

• ECMAScript는 무엇인가요?

• BigInt

• import()

• Promise.allSettled()

• globalThis

• Nullish 통합 연산자 ??

• 선택적 체이닝 연산자 ?.

---

1. ECMAScript는 무엇인가요? - What is ECMAScript

자바스크립트는 ECMAScript 사양에 기반한 프로그래밍 언어입니다. ActionScript나 Javascript, JSccript, TypeScript는 모두 ECMAScript를 핵심으로 사용합니다. 비교하자면, AS/JS/JScript/TS는 4개의 다른 자동차지만 각각의 외형도 다르고 특징을 가지기 위해 수정되더라도, 같은 엔진을 사용하는 것입니다. 

ECMAScript 의 역사 - History of ECMAScript

Brendan Eich는 Mocha를 개발해냈습니다. 이것은 추후에 LiveScript가 되고, 후에 Javascript가 되었습니다. Netscape(넷스케이프)는 Javascript를 Ecma International 에 Javascript를 발표하였고, ECMA-262 (ECMAScript) 로 명명되었습니다.

Brendan Eich의 "Javascript"는 핵심 언어(ECMAScript라고 하는)를 개발했습니다. 해당 언어는 현재 브라우저 공급업체가 구현하는 Javascript와는 다릅니다.

더많은 역사를 보고싶으시다면 여기를 클릭하세요! here

ECMAScript - Wikipedia

1. BigInt

BigInt 는 2⁵³ — 1JS에서 가장 큰 숫자 인보다 큰 정수를 표현하는 방법을 제공하는 내장 객체입니다 . Javascript는 이제 Number9007199254740992에서 최대 값이 아닌 기본 요소를 넘어서 안정적으로 나타낼 수 있습니다 .

BigInt 는 n정수 (예 :) 에 더하거나 를 5n호출 하여 생성됩니다.

const theBiggestInt = 9007199254740991n
const hugeOne = BigInt(9007199254740991) // 9007199254740991n
const hugeString = BigInt("9007199254740991") // 9007199254740991n

BigInt  만들기

BigInt 는 Number 와 유사하지만 몇 가지 차이점이 있습니다.

• 기본 제공 Math 객체의 메서드와 함께 사용할 수 없습니다 .

• BigInt 는  Number 의 instance 와 함께 사용할 수 없습니다.
  BigInt 는 변경하지 않을 경우 다른 BigInt 변수와 사용할 수 있습니다.

BigInt  유형 검사

typeof BigInt 를 이용해 다음과 같이 확인 할 수 있습니다.

typeof 1n === 'bigint'          // true
typeof BigInt('1') === 'bigint' // true
typeof Object(1n)               // object

... 서용법은 생략

---

3. import()

동적인  import() 는 요청된 모듈의 객체의 모듈 네임스페이스(module namespace)를 promise 형식으로 반환합니다. 그러므로 imports는 async/await를 사용하여 변수에 할당 될 수 있습니다.

// option 1
const helperModule = './helpers.js'
import(helperModule).then((module) => {
  module.doStuff1()  // Method 1
  module.doStuff2()  // Method 2
})

// option 2
(
  async function importCheck () {
    const helperModue = './helpers.js'
    const module = await import(helperModule)
    module.doStuff1()  // Method 1
    module.doStuff2()  // Method 2
  }
)()

---

4. Promise.allSettled()

이 메서드는 모든 promise가 생성되었는지 아닌지를 체크하는 promise를 위한 또 다른 방법입니다.

 Promise.all()과  Promise.allSettled() 의 차이는

 Promise.all() 모든 promise가 오류없이 성공적으로 해결 된 경우에만 해결됩니다. 약속이 rejected되면 .all 이 resolved되지 않습니다. 반면에  Promise.allSettled() Promise가 이 resolved되거나 rejected 되어도 해결됩니다.

예제를 확인하면, 3개의 timer과 resolve / reject 상태와 함께 Promise가 생성되고, Promise.allSettled() 를 생성하고 마지막 promise가 완료되면, wait 될것입니다.

https://youtu.be/BMHNQt_ppis

예제

---

5.  globalThis

브라우저에 이미 존재하는 window 객체가 있는데 globalThis는 왜 필요할까요?

console.log (window)
console.log (self)
console.log (frames)
console.log (this)

이들은 모두 같은  window  객체를 반환합니다.

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

그러나 웹 워커(webworker)를 사용하는 경우에만 self가 작동하며,  Node.js를 사용하는 경우에는 별도의 global 객체가 호출 되며   window 에 접근할 수 없습니다.

이러한 플랫폼 별 특정 전역객체를 피하기 위해 JavaScript는 모든 플랫폼에서 작동 하는 globalThis을 추가하기로 결정했습니다 .

console.log(globalThis);

---

 

6. Nullish Coalescinig Operator ::  null 통합 연산자 - ??

JavaScript에서는 아래와 같은 객체를 사용합니다.

const user = {
  profile: {
    name: 'JJD',
    age: 22
  }
}

console.log (user.profile.name) // 'JJD'

그러나 속성 이름이 존재하지 않는 경우에는 undefined 를 출력합니다.
속성이 존재하지 않는 경우는 값을 제공하여 이 경우를 처리 할 수 있습니다.

const user = {
  profile: {
    age: 22
  }
}

console.log (user.profile.name) // undefined
console.log (user.profile.name || 'kumar')

그러나 아래 예제와 같이 name 속성이 비어 있으면 어떻게 될까요?

const user = {
  profile: {
    name: '',
    age: 22
  }
}

console.log (user.profile.name || 'kumar')

빈 문자열이더라도 JavaScript는 값이 없는 것(falsy)으로 간주하여 'kumar' 데이터를 반환합니다.

이를 방지하기 위해 다음과 같이 nullish 병합 연산자를 사용할 수 있습니다.

console.log (user.profile.name ?? 'kumar')  // ''

이제 결과를 빈 문자열로 반환합니다. nullish 연산자는 값이 undefined 또는 null 인지를 확인합니다.

---

7. Optional Chaining :: 선택적 연결 연산자 - ?.

위에서 만든 것과 동일한 예제를 사용합니다.

const user = {}

console.log (user.profile.name) // Error!

이 예제는 정의되지 않은 오브젝트에서 에러가 발생합니다.
기존에 Javascript는 이런식으로 예외를 처리했습니다.

console.log(user && user.profile && user.profile.name)

여기서는 해당 property가 정의되어있는지 아닌지, 사용 가능한지를 확인합니다.
그러나 이제 우리는 optional chaining operator를 사용하여 깔끔하게 코드를 작성할 수 있습니다.

console.log (user?.profile?.name)

이 예제는 profile 이나 name  프로퍼티가 존재하지 않으면 undefined를 반환하게 됩니다.

 

출처 : medium.com/codingtown/ecmascript-2020-aka-es-11-9c547f69d96f