Javascript ECMAScript 2016, 2017 추가된 기능

Javscript의 표준안은 ECMAScript 2015 (ES6) 이후로도 계속 이어져 왔다. 이번 포스팅에서는 ECMAScript 2016, 2017 어떠한 기능이 추가되었는지를 알기쉽게 정리하여 보았으니, 몰라서 못쓰는 기능이 없도록 한번씩 훑어보고 머릿속에 담아두었다가 필요할때 꺼내쓰자.

 

참고로 ECMAScript2015 까지는 ES6 라고 불렀는데, ECMAScript 2016부터는 줄여서 ES7, ES8 이 아닌  ES2016, ES2017 와 같이 연도를 붙여서 표기한다. 가끔 연도와 버전이 혼동되었는데, 차라리 연도로 통일하는게 더 보기 좋은거 같다.

ECMAScript 2016 (ES2016)

 

지수연산자 (**)

// 거득제곱 
let x = 2 ** 4;  // 2 * 2 * 2 * 2 = 16

 

자수 할당 연산자 (**=)

let a = 2
a **= 5  // a = a * a * a * a * a  = 32

 

Array.includes()

배열에 특정 요소가 포함되어 있는지를 체크

const a = [20, 30, 40, 50]

a.includes(10)  // false
a.includes(30)  // true

 

ECMAScript 2017 (ES2017)

 

String.padStart() / padEnd()

문자열의 앞부분 / 뒷부분에 패딩을 넣는다.

padStart(targetLength, padString)  // 문자열의 앞부분 패딩
padEnd(targetLength, padString)    // 문자열의 뒷부분 패딩

- targetLength : 패딩된 결과 문자열의 길이
- padString: 패딩 문자열

let a = "hello"
a.padStart(10, '.')  // .....hello
a.padEnd(10, '.')    // hello.....

 

Object.entries()

객체의 속성을 [key, value] 쌍의 배열로 반환한다. 

const obj = {
  city: 'Seoul',
  name: 'John',
  year: 2023
}

console.log(Object.entries(obj))

// output
[ [ 'city', 'Seoul' ], [ 'name', 'John' ], [ 'year', 2023 ] ]

 

Object.values()

객체의 속성의 값들로 이루어진 배열을 반환한다.

const obj = {
  city: 'Seoul',
  name: 'John',
  year: 2023
}

console.log(Object.values(obj))

// output
[ 'Seoul', 'John', 2023 ]

Object.entries() 나 Object.values() 는 기억해두면 언젠가 유용하게 사용할 일이 있다.

 

 Async / Await  ⭐⭐⭐

자바스크립트의 비동기처리에 대한 가장 핵심적인 변화이다.

그동안 비동기 처리는 콜백 방식과 Promise를 거쳐왔다. 그 다음이 바로 async / await 이다.

비동기 처리 발전 과정

비동기 처리 발전 과정

async / await 에 한번 적응하면 다시는 Promise, 콜백방식으로는 못돌아간다.

 

function asyncFunc() {
  return new Promise(resolve => {
    setTimeout(() => { resolve('ok')}, 1000)
  })
}

// await 가 있는 함수에서는 async 추가
async function main() {
  const res = await asyncFunc()  // 비동기 함수 호출에 await
  console.log(res)
}

main()

간단히 보면 비동기로 함수 호출에 await 키워드를 붙여준다. 그리고 await가 들어있는 함수 선언시에는 async를 붙여준다.

핵심은 비동기로 작동하는 코드가 동기식 코드랑 생김새가 같아진다.

예전의 콜백헬로 인해 계속 깊어지는 코드, Promise chain 으로 길게 엮이는 코드를 짤 필요가 없다는 것이다.

 

나는 주로 NodeJS로 백엔드 서버를 만드는데 async / await 하나로 코딩의 효율성이 몇배는 더 좋아졌다.

역대 자바스크립트의 기능 중에 가장 유용한 기능이라고 생각한다.

async / await는 꼭 자세히 공부하고 넘어가야 하는 필수 코스이다.

 

 

 

다른 버전

ECMAScript 2015 (ES6) 는 이전 포스팅에서 설명하였다.

2023.03.20 - [개발] - Javascript ES6 (ECMAScript 2015) 에서 추가된 기능 정확히 알자

 

 

ECMAScript 2018 부터 다음 포스팅에 계속 될 예정이다.