모든 개발자가 알아야 할 새로운 JavaScript 기능

JavaScript는 항상 진화하고 있으며 새 버전이 나올 때마다 개발자로서의 삶을 좀 더 쉽게 만들어주는 기능을 도입합니다. 이러한 기능 중 일부는 게임 체인저로서 코드 작성 및 관리 방법을 개선합니다. 매일 코딩하는 사람이라면 이러한 새로운 기능에 대한 최신 소식을 받는 것이 중요합니다. 이 게시물에서는 매우 유용하고 툴킷에 포함되어야 하는 최신 JavaScript 기능 중 일부를 안내해 드리겠습니다.

1. 선택적 체이닝(?.)

최신 버전의 JavaScript에 추가된 가장 유용한 기능 중 하나는 선택적 체이닝입니다. 이를 통해 중간 속성이 null인지 정의되지 않았는지 걱정하지 않고 객체에 깊게 중첩된 속성에 안전하게 액세스할 수 있습니다.

예:

프로필이 있을 수도 있고 없을 수도 있는 사용자 개체가 있다고 상상해 보세요.

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

선택적 체이닝이 없으면 각 속성을 수동으로 확인해야 하므로 코드가 지저분해질 수 있습니다. 이 작은 연산자는 이러한 검사를 피하고 코드를 더 깔끔하고 읽기 쉽게 만드는 데 도움이 됩니다.

2. 무효 병합 연산자(??)

nullish 병합 연산자(??)는 0이나 false와 같은 다른 거짓 값에 영향을 주지 않고 null 또는 정의되지 않은 값을 처리하는 데 도움이 되도록 도입된 또 다른 깔끔한 기능입니다.

예

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

빈 문자열("")이나 0을 거짓 값으로 처리하는 논리 OR(||)와 달리 ?? 왼쪽이 null이거나 정의되지 않은 경우 오른쪽 피연산자만 반환합니다.

3. Promise.allSettled()

JavaScript에서 Promise를 사용하는 경우 Promise.all()을 사용해 본 적이 있을 것입니다. 하지만 Promise.allSettled()라는 더 강력한 버전이 있다는 것을 알고 계셨나요? 이 방법은 약속이 이행되었는지 거부되었는지에 관계없이 모든 약속이 확정될 때까지 기다립니다. 일부 약속이 실패하더라도 모든 약속의 결과를 알아야 할 때 매우 편리합니다.

예:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

이것은 한 번의 실패로 인해 전체 프로세스가 중단되는 것을 원하지 않을 때 여러 비동기 작업을 처리하는 좋은 방법입니다.

4. 큰 숫자를 위한 BigInt

우리 모두는 JavaScript의 숫자 유형 제한을 초과하는 문제에 직면해 있습니다. JavaScript 숫자는 -(2^53 - 1)과 (2^53 - 1) 사이의 값으로 제한됩니다. 그보다 큰 숫자로 작업해야 한다면 BigInt가 당신의 친구입니다.

예:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

이렇게 하면 정밀도 오류에 대한 걱정 없이 임의의 큰 정수로 작업할 수 있습니다.

5. 문자열.프로토타입.replaceAll()

문자열에서 모든 하위 문자열을 바꾸려고 시도한 적이 있다면 아마도 정규식을 교체() 메서드와 함께 사용했을 것입니다. replacementAll()을 사용하면 훨씬 간단해집니다. 이 방법은 하위 문자열의 모든 항목을 대체하므로 전역 정규식 플래그에 대해 걱정할 필요가 없습니다.

예:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

간단하고 깔끔하며 정규 표현식이 필요하지 않습니다.

6. 논리 할당 연산자(&&=, ||=, ??=)

이 새로운 연산자는 논리 연산자를 할당과 결합하는 지름길을 제공합니다. 이는 더욱 간결한 코드를 작성하는 좋은 방법입니다.

• &&=: 왼쪽 값이 참인 경우에만 값을 할당합니다.
• ||=: 왼쪽 값이 거짓인 경우에만 값을 할당합니다.
• ??=: 왼쪽 값이 null이거나 정의되지 않은 경우에만 값을 할당합니다.

예:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

이러한 단축키는 코드의 장황함을 줄이는 데 도움이 됩니다.

7. 객체.fromEntries()

키-값 쌍 목록을 객체로 변환해야 하는 경우 Object.fromEntries()를 사용하면 쉽게 할 수 있습니다. 이는 지도 객체나 튜플 배열로 작업할 때 특히 유용합니다.

예:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

이 방법은 수동으로 객체를 구성하는 것보다 더 깔끔하고 읽기 쉬운 대안입니다.

8. 배열.프로토타입.플랫맵()

이 메소드는 map()과 flat()의 조합입니다. 이를 통해 단일 단계로 결과를 매핑하고 평면화할 수 있으므로 배열의 배열로 작업할 때 매우 유용할 수 있습니다.

예:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

이것은 map()과 flat()을 별도로 수행하는 것보다 더 깔끔합니다.

9. 배열.프로토타입.at()

이 새로운 방법을 사용하면 음수 인덱스를 사용하여 배열 끝의 요소에 쉽게 액세스할 수 있습니다. 마지막 항목에 대한 지수를 수동으로 계산하는 것보다 훨씬 직관적입니다.

예:

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

배열의 마지막 항목 작업을 단순화합니다.

10. 최상위 수준 대기

JavaScript에서는 항상 비동기 함수 내에서 Wait를 사용해야 했습니다. 그러나 최상위 수준 Wait를 사용하면 이제 최상위 모듈에서 직접 Wait를 사용할 수 있으므로 비동기 코드가 더욱 간단해집니다.

예:

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

이렇게 하면 최신 JavaScript에서 비동기 코드 작업이 훨씬 간단해집니다.

11. 프라이빗 클래스 필드

JavaScript 클래스에서 변수를 비공개로 설정하고 싶다면 이제 비공개 클래스 필드를 사용할 수 있습니다. 이제 # 기호를 사용하여 클래스 외부에서 액세스할 수 없는 변수를 정의할 수 있습니다.

예:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

12. 안정 정렬(Array.prototype.sort())

이전에는 JavaScript의 sort() 메서드가 안정적이지 않았기 때문에 동일한 항목이 예측할 수 없는 방식으로 섞일 수 있었습니다. 이제 JavaScript는 동일한 값을 가진 요소가 배열에서 원래 순서를 유지하도록 보장합니다.

예:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

이를 통해 더욱 예측 가능하고 일관된 동작이 보장됩니다.

결론

JavaScript는 계속 발전하고 있으며 이러한 기능은 개발자에게 편의성과 성능을 모두 제공합니다. 비동기 코드로 작업하든, 큰 숫자를 처리하든, 객체와 배열 조작을 정리하든, 이러한 새로운 기능을 사용하면 더욱 깔끔하고 효율적인 코드를 작성할 수 있습니다. 아직 경험하지 않았다면 프로젝트에서 실험을 시작하고 작업 흐름을 어떻게 더 원활하게 만들 수 있는지 알아보세요.

즐거운 코딩하세요! ?

더 귀중한 컨텐츠를 얻으시려면 팔로우 부탁드립니다

위 내용은 모든 개발자가 알아야 할 새로운 JavaScript 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!