Dev/JS

[JS] Node.js v14의 새로운 JS Feature!

JieunJieun 2020. 5. 13. 01:09

 

들어가기 전에

New JS Features in Node.js v14.0에서 정보를 얻어 번역하였습니다.

오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다.

I got information from here and translated it.

 

 

두둥등장 Node.js v14.0

Node.js v14.0 버전이 이번주에 출시 되어서 Current 버전으로 릴리즈 되었습니다! 그말인 즉슨! 2020년 10월, 5개월 뒤면 LTS 버전으로 옮겨질 것이고 일반적으로 사용할 수 있을 것 입니다.

Node.js v14.0 버전은 최신 JS 기능을 지원하는 V8 8.1을 사용하도록 업데이트 되었습니다. 그래서 이 포스팅에서는 업데이트된 기능들을 살펴보도록 하겠습니다.

 

Optional Chaining

JS를 다루는 개발자라면 object의 프로퍼티가 null / undefined 인지 확인해야하는 코드를 작성해본적이 있을 것 입니다.

이 코드처럼요!

if (user && user.details) {
  const name = user.details.name
}

이러한 유형의 코드는 선언적이지 않으며, 에러가 날 가능성이 매우 높습니다.

또한 여러분들은 Cannot read property 'xxx' of undefined 이 에러에 대해 이미 잘 알고 있을 것 입니다.

 

그래서 V8 8.0은 Optional Chaining을 도입했고, 위 코드를 아래와 같이 작성할 수 있습니다.

const name = user?.details?.name

user 혹은 details가 undefined면?! Javascript는 name을 undefined로 초기화 시킵니다. 에러를 내뿜지 않고요!

Optional Chaining을 다른곳에 또 써봅시다.

// user.details는 user가 정의된 경우에만 삭제됩니다.
delete user?.details

// ?.() 연산자를 사용해서 optional하게 메소드를 호출 할 수 있습니다.
const adminOption = user?.prefs?.getPrefs?.().option

// ?.[] 연산자를 사용해서 property에 동적으로 접근이 가능합니다.
const rolesCount = user?.preferences?.['roles'].length

// usersArray가 null이나 undefined면, name도 undefined가 됩니다.
const userIndex = 5
const name = usersArray?.[userIndex].name

Nullish Coalescing

Javascript에서 || 연산자는 default 값을 정할때 자주 사용됩니다.

function convertUser(user) {
  const isActive = user.active || true
}

만약 user.active가 false 값을 가지게 되면 isActive는 true가 될 것이고, 이는 예상하지 못한 오류를 뿜을 가능성이 생기게 됩니다.

 

V8 8.0은 Nullish Coalescing을 ?? 연산자를 통해 지원합니다. || 대신에 사용할 수 있겠죠!

그러면 위 코드는 다음과 같이 바뀔 수 있습니다.

const isActive = user.active ?? true

만약 user.active가 null이나 undefined이면 isActive 는 true가 될 것이고,

그리고 user.active가 false 이면 isActive 는 우리가 기대한 false값이 될 겁니다.

 

Optional Chaining + Nullish Coalescing

Optional Chaining을 할 때 Nullish Coalescing을 사용하여 기본값을 설정할 수 있습니다.

const name = user?.details?.name ?? 'unknown'

위 예제에서는 만약 user 객체가 details안에 name 프로퍼티를 가지고 있지 않다면 name 은 unknown이 될 것입니다.

 

Intl.DisplayNames

잠깐, Intl이 뭐람

> Intl 객체는 ECMAScript Internationalization API로 문자열 비교, 숫자 형식, 날짜 및 시간 형식 등을 제공합니다.

 

Intl.DisplayNames API를 사용하면 언어, 통화, 지역 이름을 다른 언어로 번역할 수 있습니다.

예를 들어서, 우리가 스페인어로 지역 이름을 얻고 싶으면 하면 다음과 같이 사용할 수 있습니다.

const regionNames = new Intl.DisplayNames('[es]', { type: 'region' })

console.log(regionNames.of('FR')) // 'Francia'
console.log(regionNames.of('US')) // 'Estados Unidos'

혹은 언어 이름을 프랑스어로 뽑고 싶다면 이렇게 하면 됩니다.

const langNames = new Intl.DisplayNames(['fr'], { type: 'language' })

console.log(langNames.of('ES')) // 'espagnol'
console.log(langNames.of('EN')) // 'anglais'

 

그리고 마지막으로 지역 통화 이름을 중국어로 얻으려면 이렇게 하면 됩니다.

const currencyNames = new Intl.DisplayNames(['zh-Hans'], {type: 'currency'});

console.log(currencyNames.of('USD')) // '美元'
console.log(currencyNames.of('EUR')) // '欧元'

Intl.DateTimeFormat options

Intl.DateTimeFormat API는 언어별로 날짜 및 시간 format 작업을 하는데 사용됩니다.

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))

// 영국식 영어는 일-월-년도 순으로 사용합니다.
console.log(new Intl.DateTimeFormat('en-GB').format(date))
// "19/12/2012"

날짜 및 시간 포맷은 DateTimeFormat 생성자의 options 인자를 통해 커스텀하게 바꿀 수도 있습니다.

예를 들어 calendar와 numberingSystem 옵션 줘서 사용할 수 있습니다.

const options = { calendar: 'chinese', numberingSystem: 'arab' }
const dateFormat = new Intl.DateTimeFormat('default', options)

 

 

마무리

이번 포스팅에서 다뤄본 기능들은 Node.js v14.0에서 사용할 수 있습니다.

릴리즈 노트 에는 V8 이외의 다른 피쳐들이 있으니 한번 읽어보면 좋을 것 같습니다.