ECMAScript 2015, ES6는 이미 많은 곳에서 사용되고 있는 만큼, 그 이후 버전인 ES7부터 올해 발표될 버전인 ES11까지 어떤 기능이 추가되었고, 변화해 왔는지 살펴보도록 하겠습니다.
tc39/proposals/finished-proposals에 따른 Proposals와 출시 연도를 살펴보면 아래와 같습니다.
모든 기능을 다룰 수는 없고 붉게 표시된 행만 아래에서 다루도록 하겠습니다. 또한 ES11은 위에서 다루었으므로 생략하겠습니다.
1) ES7 (2016)
- Array.prototype.includes() : Array 내에 값이 포함되어 있는지 여부를 확인할 수 있는 includes 메서드가 추가되었습니다.
[1,2,3].includes(1) // true
- Exponentiation Operator (제곱 연산자) : ** 산술연산자를 이용하여 제곱 연산을 수행하기 쉬워졌습니다.
2 ** 10 //1024
//위 아래 코드는 동일한 동작을 수행합니다.
Math.pow(2, 10) //1024
2) ES8 (2017)
- Object.values / Obejct.entries : values 메서드는 객체 내 모든 value 값들을 배열의 형태로 반환하며, entries 메서드는 key와 value가 담긴 배열을 하나의 배열에 담아 반환합니다.
const user = {
name: 'jay',
age: 22
}
Object.values(user) // ["jay",22]
Object.entries(user) // [["name","jay"],["age",22]]
'abc'.padStart(5) // " abc"
'abc'.padStart(1) // "abc"
'abc'.padEnd(5) // "abc "
'abc'.padEnd(1) // "abc"
'abc'.padStart(10, "123456") // "1234561abc"
'abc'.padStart(6, "123456") // "123abc"
'abc'.padEnd(10, "123456") // "abc1234561"
'abc'.padEnd(6, "123456") // "abc123"2라인과 4라인과 같이 문자열의 길이보다 작은 수를 지정할 경우 현재 문자열이 모두 출력됩니다.
1라인과 3라인처럼 별도의 보충문자를 지정하지 않고 길이를 지정할 경우 공백이 추가됩니다.
6-9라인처럼 보충문자가 지정되면 해당 문자를 공백 대신 기입하며, 길이가 길 경우에 보충 문자는 반복되어 들어갈 수 있습니다. 또한 보충 문자가 모두 기입되지 않을 정도의 문자열 길이를 지정할 경우 해당 크기만큼만 보충 문자가 추가됩니다.
- Object.getOwnPropertyDescriptors : 기존에 존재하던 getOwnPropertyDescriptor에 복수형 s가 붙은 getOwnPropertyDescriptors 메서드가 추가되었습니다.
Object.getOwnPropertyDescriptor ?
객체 자신의 속성, 즉 객체 프로토타입 체인을 따라 존재하는 것이 아닌 객체에 직접 제공하는 속성에 대한 속성 설명자(descriptor)를 반환하는 메서드. 객체와 속성명을 인자로 받아 해당 속성의 속성 설명자를 반환.
객체와 속성명을 함께 파라미터로 넘겨주던 getOwnPropertyDescriptor 메서드와 달리 getOwnPropertyDescriptors는 객체만 인자로 받고, 해당 객체 내 자신의 모든 속성 설명자를 반환합니다.
const user = {
name: 'jay',
age: 22
}
Object.getOwnPropertyDescriptor(user, "name")
// Object {value: "jay", writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptors(user)
// Object {
// name: {value: "jay", writable: true, enumerable: true, configurable: true},
// age: {value: 22, writable: true, enumerable: true, configurable: true}
// }
- Trailing commas in function parameter lists and calls : final commas라고도 불리며, 메서드의 매개변수와 인자에 콤마(,)를 사용할 수 있습니다. 새로운 속성 추가 시 편리하고, 버전 관리 이력이 간단해 코드 편집이 더 편해진다는 장점을 취하기 위해 추가된 것으로 보입니다.
//매개변수 정의
const foo = (a,b,c,) => {...}
//함수 호출
foo("a","b","c",)이 외에도 배열, 객체 등의 리터럴에서도 동일하게 trailing comma를 사용할 수 있으나, 단 JSON에서는 허용되지 않습니다.
- Async Functions : ES8에서 추가된 내용 중 가장 핵심으로 꼽을 수 있습니다. 이전의 비동기 함수는 콜백 함수 또는 Promise를 사용하였습니다. 콜백함수 지옥을 벗어나기 위해서 Promise를 ES6에서 도입하였지만, Promise를 사용해도 여전히 코드가 복잡해 ES8에서는 async function을 도입하였습니다. async function인 async/await을 사용하게 되면 비동기 코드가 마치 동기 코드인 것처럼 보이게 작성할 수 있습니다. 말하자면 Promise를 좀 더 쉽게 사용할 수 있도록 도와주는 문법이라고 볼 수 있습니다. (이에 대한 내용은 간략하게 다루기 어려우므로 추후 별도의 콘텐츠로 작성하겠습니다)
3) ES9 (2018)
- Rest/Spread Properties : rest 파라미터는 매개변수 이름 앞에 ...을 붙여 정의한 매개변수를 의미하며, 개수가 정해지지 않은 인수를 배열로 나타낼 수 있게 합니다. spread(전개) 구문은 iterable을 개별 요소로 분리시켜주는 문법으로 마찬가지로 ...을 사용합니다. 기존에는 iterable에만 사용 가능했는데 ES9에서 객체에서도 사용 가능하게 되었습니다.
//rest
const {a, b, ...others} = {a: 1,b: 2, c: 3, d:4}
console.log(a,b,others) // 1 2 {c:3, d:4}
//spread
const spread = {a,b, ... others}
console.log(spread) // {a: 1,b: 2, c: 3, d:4} 단, 같은 속성 이름에 대해서는 덮어씌워지므로 유의해야 합니다.
- Promise.prototype.finally() : then과 catch만 가능하던 promise에 finally가 추가되었습니다. Promise가 처리된 후 성공 여부에 관계없이 실행되며 Promise 객체를 반환합니다.
Promise.resolve('reslove')
.then((res) => console.log('success'))
.catch((err) => console.log('fail'))
.finally(() => console.log('finally'))
4) ES10 (2019)
- Optional Catch Binding : catch에 매개변수가 없어도 catch 블록을 사용할 수 있습니다. error 매개변수를 쓰지 않는다면 생략할 수 있습니다.
try {
// some code
}
catch {
// error handling code
}
- Object.fromEntries() : ES8에서 도입된 Obejct.entries와 호환되는 메서드입니다. entries를 통해 만들어진 배열을 인자로 받아 다시 객체로 만들어주는 역할을 수행합니다.
const user = {
name: 'jay',
age: 22
}
const entries = Object.entries(user) // [["name","jay"],["age",22]]
const fromEntries = Object.fromEntries(entries) //{name: "jay", age: 22}
- String.trimStart() / String.trimEnd() : 문자열의 앞, 뒤 공백을 제거합니다. trimStart는 trimLeft로, trimEnd는 trimRight로 alias 할 수 있습니다.
const greeting = ' Hello world! ';
greeting.trimStart() // "Hello world! "
greeting.trimEnd() // " Hello world!"
- Array.flat() : lodash 모듈에서 파생된 메서드로, 다중배열을 펼치는 기능을 수행합니다.
const arr = [1,2,[3,4,[5,6]]]
arr.flat() // [1,2,3,4,[5,6]]
arr.flat(2) // [1,2,3,4,5,6]
arr.flat(Infinity) // [1,2,3,4,5,6]flat은 depth를 인자로 받으며 default 값은 1입니다. Infinity를 사용할 경우 내부의 모든 배열이 합쳐집니다.
- Array.flatMap() : flatMap은 각 엘리먼트에 대해 map을 수행하고 결과로 만들어진 새로운 배열을 flat 하는 것이라고 볼 수 있습니다. 단 flatMap의 경우 1 depth만 펼쳐질 수 있습니다.
const arr = [1,2,3,4,5,6]
arr.map(x => [x*2]) // [[2],[4],[6],[8],[10],[12]]
arr.flatMap(x => [x*2]) // [2,4,6,8,10,12]
//1 depth 이상은 flat되지 않음
arr.flatMap(x => [[x*2]]) // [[2],[4],[6],[8],[10],[12]]
'Javascript' 카테고리의 다른 글
| ECMAScript 2020 aka ES11 (0) | 2020.11.15 |
|---|---|
| Prototype Chain (0) | 2020.11.15 |
| Prototype (0) | 2020.11.15 |
| [Javascript] Debounce & Throttle (0) | 2020.10.21 |
| [Javascript] 자바스크립트에서 메모리 누수의 4가지 형태 (0) | 2020.10.21 |
댓글