몸과 마음이 건전한 SW 개발자

[JavaScript] ECMAScript 2023 -- ES2023 본문

프론트엔드/JavaScript

[JavaScript] ECMAScript 2023 -- ES2023

스위태니 2024. 11. 10. 17:03

▶▷ 서론◁◀

  • ES2024부터 역순으로 올라가면서 특징을 살펴보고 정리하는 중이다.

▶▷ 목차 ◁◀

  1. (Array) findLast, findLastIndex
  2. (Array) toReversed, toSorted, toSpliced
  3. (Array) with
  4. #! (Shebang)

1. ( Array)  findLast, findLastIndex ◁◀

Array.prototype.findLast() 메서드

  • findLast() 메서드는 배열의 끝에서부터 시작하여 조건을 만족하는 첫 번째 요소의 값을 반환한다. 조건을 만족하는 요소가 없으면 undefined를 반환한다. 이 메서드는 ES2023에 추가되었다.

예제:

const temp = [27, 28, 30, 40, 42, 35, 30];
let high = temp.findLast(x => x > 40);
console.log(high); // 출력: 42

 

Array.prototype.findLastIndex() 메서드

  • findLastIndex() 메서드는 배열의 끝에서부터 시작하여 조건을 만족하는 마지막 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없으면 -1을 반환한다.

예제:

const temp = [27, 28, 30, 40, 42, 35, 30];
let pos = temp.findLastIndex(x => x > 40);
console.log(pos); // 출력: 4

2. ( Array)  toReversed, toSorted, toSpliced ◁◀

Array.prototype.toReversed() 메서드

  • toReversed() 메서드는 배열을 뒤집은 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 이는 기존의 reverse() 메서드와 달리 안전하게 원본 배열을 유지하면서 새로운 배열을 생성하는 방식이다.

예제

const months = ["Jan", "Feb", "Mar", "Apr"];
const reversed = months.toReversed();
console.log(reversed); // 출력: ["Apr", "Mar", "Feb", "Jan"]
console.log(months);   // 출력: ["Jan", "Feb", "Mar", "Apr"] (변경되지 않음)

 

Array.prototype.toSorted() 메서드

  • toSorted() 메서드는 배열을 정렬하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 이는 기존의 sort() 메서드와 달리 원본 배열을 그대로 유지하면서 정렬된 배열을 생성한다.

예제:

const months = ["Jan", "Feb", "Mar", "Apr"];
const sorted = months.toSorted();
console.log(sorted); // 출력: ["Apr", "Feb", "Jan", "Mar"]
console.log(months); // 출력: ["Jan", "Feb", "Mar", "Apr"] (변경되지 않음)

 

Array.prototype.toSpliced() 메서드

  • toSpliced() 메서드는 기존 splice() 메서드처럼 배열을 잘라내고 새로운 요소를 추가하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

예제

const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1); // 인덱스 0에서 1개 요소 제거
console.log(spliced); // 출력: ["Feb", "Mar", "Apr"]
console.log(months);  // 출력: ["Jan", "Feb", "Mar", "Apr"] (변경되지 않음)

 

요약

 

특징 toReversed() toSorted() toSpliced()
새로운 배열을 반환 방법 배열을 뒤집음 배열을 정렬함 배열을 잘라내고 수정함
원본 배열 변경 없음 변경 없음 변경 없음

 


 3. ( Array)  with ◁◀

Array.prototype.with() 메서드

  • with() 메서드는 배열의 특정 인덱스에 있는 요소를 새 값으로 업데이트하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 이는 Array.prototype.splice()나 직접적인 인덱스 접근과는 달리 원본 배열을 안전하게 유지하면서 새 배열을 반환한다.

예제

const months = ["Januar", "Februar", "Mar", "April"];
const updatedMonths = months.with(2, "March");

console.log(updatedMonths); // 출력: ["Januar", "Februar", "March", "April"]
console.log(months);        // 출력: ["Januar", "Februar", "Mar", "April"] (변경되지 않음)

 4. #! (Shebang) ◁◀

JavaScript Shebang (#!)

  • Shebang은 스크립트 파일의 첫 줄에 등장하는 #!으로 시작하는 구문이다. 숫자 기호와 느낌표로 구성되며, 스크립트가 어떤 인터프리터로 실행되어야 하는지를 운영 체제에 알려준다.

예제

#!/usr/bin/env node
console.log("Hello, world!");

설명

  • 이 예제의 #!/usr/bin/env node는 운영 체제에 이 스크립트를 Node.js 프로그램으로 실행하도록 지시한다.
  • 이를 통해 터미널에서 ./fileName.js와 같이 파일을 바로 실행할 수 있다. (파일에 실행 권한이 필요)

장점

  • 편리한 실행: node fileName.js 대신 ./fileName.js로 직접 실행할 수 있어 편리하다.
  • 호환성: #!/usr/bin/env node는 시스템 환경 변수 PATH를 사용해 Node.js의 경로를 찾아 실행하므로 다양한 환경에서 호환성이 좋다.

용어

  • #!는 Sharp-exclamation, Hashbang, Pound-bang, Hash-pling으로도 불린다.
  • 유닉스 및 리눅스 환경에서 많이 사용되며, Python, Bash 스크립트 등 다양한 스크립트 언어에서도 비슷하게 사용된다.