[프로그래밍] 2024년에 새롭게 추가되는 자바스크립트 신규 기능

프로그래밍 언어의 최신 기능을 탐색하는 것은 휴일이나 생일을 간절히 기대하는 것과 비슷합니다.

이는 새로운 선물을 탐구하는 설렘과 스릴로 가득 찬 시간입니다.

ES2024®에 포함될 예정인 향상된 기능을 통해 개발자는 JavaScript 코딩을 간소화하고 이를 더욱 효율적이고 이해하기 쉽고 복원력 있게 만드는 수많은 개선 사항을 해결하는 정점에 서 있습니다.

 

Top-level await (최상위 레벨 await)

 

기존의 await은 async 함수 이내에서만 사용가능했습니다.

"Just Do It"이라는 이름이 붙은 이 획기적인 기능은 await 키워드를 비동기 범위를 넘어 자유롭게 작성할 수 있습니다.

예를 들어, 모듈의 최상위 수준에서 Promise를 직접 기다리는 것을 가능하게 만들어 비동기적으로 데이터를 가져오는 프로세스를 더욱 간소시킬 수 있습니다.

// 최상위 레벨에서 await
const data = await fetchData();
console.log(data);

 

Pipeline Operator (파이프라인 연산자)

파이프라인 연산자(|>)는 특히 여러 함수의 연쇄적인 호출에서 코드 가독성을 크게 향상시킵니다.

함수형 구문으로 한 표현식의 결과를 후속 함수의 인수로 전달합니다.

개발자는 중첩된 함수 호출을 명확한 작업 순서로 리팩토링하여 코드 구조의 명시성과 단순성을 높일 수 있습니다.

 

// 기존 작성방식
const calculatedValue = Math.ceil(Math.pow(Math.max(0, -100), 1/5));

// 파이프라인 연산자 방식
const calculatedValue = -100
  |> (n => Math.max(0, n))
  |> (n => Math.pow(n, 1/5))
  |> Math.ceil;

 

파이프라인 연산자는 아직 TC39의 2단계 "초안"에 있습니다. 이는 반영되지 않을수도 있음을 의미합니다.

Array with()

with()는새로운 배열 메서드입니다. 이를 사용하면 배열 내 특정 위치의 요소를 변경하지 않고도 쉽게 교체할 수 있습니다.

const arr = [1, 2, 3]

// 기존 방식
arr.splice(1, 1, 10) // [1, 10, 3]

// 새로운 with 메소드 방식
arr.with(1, 10) // [1, 10, 3]

 

arr[1] = 10 을 하는것과 유사하지만 arr.with()는 기존 배열을 변경하지 않습니다.

변경사항이 반영된 새로운 배열을 반환합니다.

Records and Tuples

객체 및 배열과 유사한 이러한 불변 데이터 구조는 일단 생성되면 변경할 수 없다는 근본적인 차이점을 가지고 있습니다.

변경 가능한 대응 항목과 달리 레코드나 튜플을 수정하려고 시도하면 원본 데이터의 무결성이 유지되는 새로운 인스턴스가 생성됩니다.

// 불변 객체 생성
const userProfile = #{
  username: "Aierse",
  age: 39,
};

// 불변 튜플 생성
const numberSequence = #[10, 20, 30];

// 객체 수정 시 새롭게 생성됨
const updatedProfile = userProfile.with({ age: 40});
console.log(updatedProfile); // #{ username: "Aierse", age: 40 }
console.log(userProfile); // #{ username: "Aierse", age: 39 }

const newNumberSequence = numberSequence.with(1, 25);
console.log(newNumberSequence); // #[10, 25, 30]
console.log(numberSequence); // #[10, 20, 30]

Decorators (데코레이터)

TypeScript에서 역수출된 기능입니다. 오랫동안 기다려온 기능을 드디어 사용 가능합니다!

이를 통해 클래스, 메소드, 속성 또는 매개변수의 동작을 수정하거나 강화할 수 있습니다.

선언적 방식으로 메타데이터를 추가하거나, 로깅하거나, 동작을 수정하는 데 특히 유용합니다.

class Sample {
  @decorator
  action(parameter1, parameter2) {
    // 코드
  }
}

추천 포스트

[프로그래밍] 깃허브 위키를 아시나요??

[NodeJS] 자바스크립트도 between을 쓸 수 있다!