ES6(ES2015)큰 변화 이후에도 업데이트가 꾸준히 되고 있는데, ES2016부터 ES2023의 업데이트된 내용들을 정리해보려한다.
ES2016
Array.prototype.includes()
1
arr.includes(valueToFind[,fromIndex])
includes() 메서드를 사용하여 배열에 특정 원소가 포함되어 있는지 확인할 수 있다. valueToFind자리에 찾은 원소값을 입력하면된다. 포함되어 있으면 true, 그렇지않으면 false를 반환한다.
includes()는 문자나 문자열을 비교할때 대소문자를 구분한다.
또한 두번째 값으로 fromIndex자리에 인덱스를 넣으면 검색을 시작할 위치를 지정할 수 있다. 0이 기본값이며 음수도 전달가능하다.
fromIndex값이 배열의 길이보다 같거나 크면 false를 반환하고 배열은 검색되지 않는다.
음수값이 들어갈경우, 계산된 인덱스가 -1*array.length보다 작거나 같으면 전체 배열이 검색된다.
지수연산자 **
ES2016 이전에는 제곱계산을 하기 위해 Math.pow()함수를 사용했어야 하지만, 지금은 지수연산자(**)를 사용하여 간단하게 제곱값을 계산할 수 있다.
1
2
3
Math.pow(2,2); //4
2**2; //4
ES2017
async & await
async와 await을 사용하여 promise를 좀 더 편리하게 사용할 수 있다.
async는 function앞에 위치하여야 한다.
function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환하고, 프로미스가 아닌것은 프로미스로 감싸 반환한다.
await은 async 함수 안에서만 동작하는데 await코드를 만나면 프로미스가 처리될 때까지 기다리게된다.
1
2
3
4
5
6
7
8
9
10
11
12
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise; // 프라미스가 이행될 때까지 기다렸다가 promise가 처리되면 실행됨
alert(result); // "완료!"
}
f();
await은 프로미스가 처리될 때까지 함수 실행을 기다리게 만든다. 프로미스가 처리되면 그 결과와 함께 실행된다.
프로미스가 처리되길 기다리는 동안 엔진이 다른 스크립트를 실행하거나 이벤트 처리등의 일처리를 할 수 있기 때문에 CPU리소스가 절약된다.
문자열 패딩
문자열의 시작과 끝부분에 원하는 길이만큼 다른 문자열을 채울 수 있게 되었다.
String.prototype.padStart()와 String.prototype.padEnd()를 사용하면된다.
1
2
3
4
"hi".padStart(2); // " hi"
"hi".padEnd(3); // "hi "
"hi".padEnd(10,"~"); //hi~~~~~~~
Trailing Commas
Trailing comma는 final comma라고도 불리며 새로운 엘리먼트나 매개변수, 속성을 코드에 추가할 때 유용하다.
새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄은 수정하지 않아도 다음줄에 이어서 작성할 수 있다.
이로인해 버전관리 이력이 간단해지고 코드 편집이 더 편해진다.
원래 배열와 객체 리터럴에 허용이 됐지만, ES2017부터 함수의 매개변수에도 허용되기 시작하였다.
1
2
3
4
5
function func(a, ){
};
(a, )=>{};
ES2018
Object rest & spread
ES6에서 배열의 rest와 spread 사용이 가능해졌고, ES2018에서는 객체에서도 사용이 가능해졌다.
rest와 spread를 활용하여 더 쉽게 얕은 복사를 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
const obj={
n1:1,
n2:2,
n3:3,
n4:4,
n5:5
};
const {n1,n2, ...n} = obj;
console.log(n);//{"n3":3, "n4":4, "n5":5 }
Async iteration
제너레이터 함수와 for of 문에서 async를 사용할 수 있게 되었다. async 이터레이터와 제너레이터
for …of문은 반복가능한 객체(array, map, set, string)에 대해 반복하고 각 개별 속성값에 대해 실행되는 구문이 있는 사용자정의 반복 루프를 생성한다.
1
2
3
4
5
6
7
8
9
const arr=['a','b','c'];
for(const element of arr){
console.log(element);
}
//"a"
//"b"
//"c"
정규식 새기능
- s 플래그
- 명명된 캡쳐 그룹
- 룩비하인드 어서션
- 유니코드 속성 이스케이프
정규식 부분은 추후에 공부하면서 총정리 글을 작성하고, 링크를 걸 예정이다.
ES2019
String.prototype.trimStart() & trimEnd()
trimStart()는 문자열 시작 부분의 공백을 제거하고, trimEnd()는 문자열의 끝부분 공백을 제거한다.
원래 있던 trim()을 더 섬세하게 사용할 수 있게 되었다.
Function.prototype.toString()
Function.prototype.toString()메서드는 함수의 소스코드를 나타내는 문자열을 반환한다.
ES2016까지는 소스 코드의 주석과 공백문자를 제거했었지만, ES2019부터는 문자열에 주석과 공백도 포함된다.
1
2
3
4
5
function age(n){
return n+"살 입니다"; //나이 출력
}
console.log(n.toString()); //'function age(n){return n+"살 입니다"; //나이 출력 }'
ES2020
BigInt
정수의 최대값은 2^53-1이었는데 이보다 더 큰 정수를 표현하기 위해 BigInt를 사용할 수 있다.
BigInt는 정수 리터럴의 뒤에 n을 붙이거나 함수 BigInt()를 호출해 생성할 수 있다.
1
2
3
4
5
6
7
8
9
10
const theBiggestInt = 9007199254740991n;
const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n
BigInt는 Number와 달리 Math객체의 메서드와 함께 사용할 수 없고, 연산에서 Number와 혼합해 사용할 수 없다.
Dynamic import
ES2020부터 필요할 때 동적으로 모듈을 가져올 수 있다.
1
2
3
if(a){
const mod = await import('./js/module.js');
}
Optional Chaining(?.)
옵셔널 체이닝 연산자(?.)는 참조값이 null또는 undefined일 경우 에러대신 undefined를 리턴한다.
따라서 참조가 누락될 가능성이 있을 경우 옵셔널 체이닝 연산자를 사용하면 더 짧고 간단한 표현식으로 사용할 수 있다.
1
2
3
4
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
null 병합 연산자 (??)
널 병합 연산자(??)는 왼쪽 피연산자가 null이나 undefined일 경우 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
1
2
3
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
| 비슷한 | 이 논리 연산자를 사용하면 boolean으로 강제 변환될 수 있으므로 예기치 않는 결과를 초래할 수 있다. |
globalThis
ES2020부터 globalThis를 사용하여 전역 객체를 참조할 수 있게 되었다.
ES2021
논리 할당 연산자
논리 연산자와 할당 표현식을 결합할 수 있게 되었다.
1
2
3
4
5
6
7
8
9
10
//원래 작성 방식
a = a || b;
a = a && b;
a = a ?? b;
//논리 할당 연산자
a ||= b;
a &&= b;
a ??= b;
숫자 구분 기호
큰 자릿수를 구분할 때 언더바(_)를 사용해 큰숫자를 구분하기 쉽게 표시할 수 있다.
1
2
const n = 100_000_000;
console.log(x);// 100000000;
ES2022
클래스 속성
속성을 constructor안에 쓰지 않아도 되며, 클래스 내부에서만 쓸 수 있는 private 속성이 추가되었다. 앞에 #만 붙이면된다.
static 속성은 앞에 static을 붙이면 되고, 앞에 #을 붙여 private로 만들 수 있다.
computed속성도 새로 생겼다. computed 속성은 []안에 식을 적어주면 된다.
at 메서드
at()메서드는 정수값을 받아 배열에서 해당값에 해당하는 인덱스의 요소를 반환한다.
양수와 음수를 모두 지정할 수 있고, 음수값의 경우 배열의 뒤에서부터 인덱스를 센다.
이제는 배열의 마지막 요소를 가져오고 싶을 때 array[array.length-1] 대신에 간단히 array.at(-1)을 사용할 수 있다.
hasOwn
object에는 hasOwn 메서드가 추가되었다. 객체에 속성이 포함되어 있는지 체크하며 반환값은 boolean값이다.
1
2
Object.hasOwn({a:1},'x'); //false
Object.hasOwn({a:1},'a'); //true
Error cause속성
에러 객체에 구체적인 원인을 작성할 수 있는 cause 속성이 추가되었다.
1
2
const a = new Error('error',{cause:'오타'});
a.cause; //오타
ES2023
findLast, findLastIndex
find 메서드는 배열에서 조건을 만족하는 첫번째 요소를 찾는 메서드이다.
그런 find 메서드에 기능들이 확장되었다.
findLast는 배열에서 조건을 만족하는 마지막 요소를 찾고, findLastIndelx는 요소가 아닌 인덱스를 찾게된다.