Published on

ES2023 추가된 자바스크립트 기능들

Authors
  • avatar
    Name
    piano cat
    Twitter

ES2023에 추가된 기능들을 살펴보겠습니다.

추가된 기능

  • findLast, findLastIndex
  • Hashbang
  • toReversed, toSorted, toSpliced, with

findLast, findLastIndex

기존에 find 메서드가 있었고 이는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하는 메서드입니다.

하지만 가끔 마지막 값을 찾고 싶을때가 있는데요. 이럴땐 reverse().find() 를 통해 마지막값을 찾곤 했었는데, 한번에 찾을수 있는 메서드가 생겼습니다.

findLast 메서드를 사용하면 배열의 마지막에 주어진 판별함수를 만족하는 첫번째 요소의 값을 반환합니다.

findLastIndex는 마찬가지로 마지막 index를 반환합니다.

Hashbang

js 파일의 맨 처음이 #! 로 시작할 경우 해당 라인을 무시하도록 수정되었습니다.

#! 로 시작되는 라인은 유닉스 계열 운영체제에게 실행 가능한 파일이라는 것을 시스템에 알리고 어떤 인터프리터로 실행해야 하는지 명시하는 역할을 합니다.

#!/usr/bin/env node
console.log(1)

toReversed, toSorted, toSpliced, with

배열의 메서드중 복사하여 생성하는 메서드가 추가되었습니다.

기존에 reverse, sort, splice 등의 메서드는 원본 배열을 변형 시킵니다.

예를들면

const a = [1, 2, 3]
const b = a.reverse()

console.log(a)
console.log(b)
// [3,2,1]
// [3,2,1]

위 예시처럼 a를 reverse 해서 a의 배열이 변형되었습니다.

만약에 a를 reverse 한 값을 b에만 저장하고 싶을경우 toReversed 메서드를 사용하면 적절합니다.

const a = [1, 2, 3]
const b = a.toReversed()

console.log(a)
console.log(b)
// [1,2,3]
// [3,2,1]

나머지 toSorted, toSpliced 메서드도 동일합니다.

with 라는 메서드는 생소해보여서 예시를 추가로 적어보겠습니다.

const a = [1, 2, 3]

const b = a.with(1, 0)

console.log(a)
console.log(b)
// [1,2,3]
// [1,0,3]

위와 같이 with는 (index, value) 를 인자값으로 받고 index 위치에 value 값을 교체하는 메서드입니다. with 도 마찬가지로 mutation 하지 않고 값이 복사되어 생성됩니다.

이상 ES2023 추가된 기능들을 살펴보았고, 생각보다 많은기능들이 추가된 것 같지는 않아보이나 새로추가된 배열 메서드들은 유용하게 잘 쓰게 될 것 같습니다.