JavaScript는 항상 진화하고 있으며 새 버전이 나올 때마다 개발자로서의 삶을 좀 더 쉽게 만들어주는 기능을 도입합니다. 이러한 기능 중 일부는 게임 체인저로서 코드 작성 및 관리 방법을 개선합니다. 매일 코딩하는 사람이라면 이러한 새로운 기능에 대한 최신 소식을 받는 것이 중요합니다. 이 게시물에서는 매우 유용하고 툴킷에 포함되어야 하는 최신 JavaScript 기능 중 일부를 안내해 드리겠습니다.
최신 버전의 JavaScript에 추가된 가장 유용한 기능 중 하나는 선택적 체이닝입니다. 이를 통해 중간 속성이 null인지 정의되지 않았는지 걱정하지 않고 객체에 깊게 중첩된 속성에 안전하게 액세스할 수 있습니다.
프로필이 있을 수도 있고 없을 수도 있는 사용자 개체가 있다고 상상해 보세요.
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
선택적 체이닝이 없으면 각 속성을 수동으로 확인해야 하므로 코드가 지저분해질 수 있습니다. 이 작은 연산자는 이러한 검사를 피하고 코드를 더 깔끔하고 읽기 쉽게 만드는 데 도움이 됩니다.
nullish 병합 연산자(??)는 0이나 false와 같은 다른 거짓 값에 영향을 주지 않고 null 또는 정의되지 않은 값을 처리하는 데 도움이 되도록 도입된 또 다른 깔끔한 기능입니다.
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
빈 문자열("")이나 0을 거짓 값으로 처리하는 논리 OR(||)와 달리 ?? 왼쪽이 null이거나 정의되지 않은 경우 오른쪽 피연산자만 반환합니다.
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 }
]
이것은 한 번의 실패로 인해 전체 프로세스가 중단되는 것을 원하지 않을 때 여러 비동기 작업을 처리하는 좋은 방법입니다.
우리 모두는 JavaScript의 숫자 유형 제한을 초과하는 문제에 직면해 있습니다. JavaScript 숫자는 -(2^53 - 1)과 (2^53 - 1) 사이의 값으로 제한됩니다. 그보다 큰 숫자로 작업해야 한다면 BigInt가 당신의 친구입니다.
const largeNumber = BigInt(1234567890123456789012345678901234567890); console.log(largeNumber);
이렇게 하면 정밀도 오류에 대한 걱정 없이 임의의 큰 정수로 작업할 수 있습니다.
문자열에서 모든 하위 문자열을 바꾸려고 시도한 적이 있다면 아마도 정규식을 교체() 메서드와 함께 사용했을 것입니다. replacementAll()을 사용하면 훨씬 간단해집니다. 이 방법은 하위 문자열의 모든 항목을 대체하므로 전역 정규식 플래그에 대해 걱정할 필요가 없습니다.
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
간단하고 깔끔하며 정규 표현식이 필요하지 않습니다.
이 새로운 연산자는 논리 연산자를 할당과 결합하는 지름길을 제공합니다. 이는 더욱 간결한 코드를 작성하는 좋은 방법입니다.
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
이러한 단축키는 코드의 장황함을 줄이는 데 도움이 됩니다.
키-값 쌍 목록을 객체로 변환해야 하는 경우 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 }
]
이 방법은 수동으로 객체를 구성하는 것보다 더 깔끔하고 읽기 쉬운 대안입니다.
이 메소드는 map()과 flat()의 조합입니다. 이를 통해 단일 단계로 결과를 매핑하고 평면화할 수 있으므로 배열의 배열로 작업할 때 매우 유용할 수 있습니다.
const largeNumber = BigInt(1234567890123456789012345678901234567890); console.log(largeNumber);
이것은 map()과 flat()을 별도로 수행하는 것보다 더 깔끔합니다.
이 새로운 방법을 사용하면 음수 인덱스를 사용하여 배열 끝의 요소에 쉽게 액세스할 수 있습니다. 마지막 항목에 대한 지수를 수동으로 계산하는 것보다 훨씬 직관적입니다.
let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage); // Hello Universe, Welcome to the Universe!
배열의 마지막 항목 작업을 단순화합니다.
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에서 비동기 코드 작업이 훨씬 간단해집니다.
JavaScript 클래스에서 변수를 비공개로 설정하고 싶다면 이제 비공개 클래스 필드를 사용할 수 있습니다. 이제 # 기호를 사용하여 클래스 외부에서 액세스할 수 없는 변수를 정의할 수 있습니다.
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
이전에는 JavaScript의 sort() 메서드가 안정적이지 않았기 때문에 동일한 항목이 예측할 수 없는 방식으로 섞일 수 있었습니다. 이제 JavaScript는 동일한 값을 가진 요소가 배열에서 원래 순서를 유지하도록 보장합니다.
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
이를 통해 더욱 예측 가능하고 일관된 동작이 보장됩니다.
JavaScript는 계속 발전하고 있으며 이러한 기능은 개발자에게 편의성과 성능을 모두 제공합니다. 비동기 코드로 작업하든, 큰 숫자를 처리하든, 객체와 배열 조작을 정리하든, 이러한 새로운 기능을 사용하면 더욱 깔끔하고 효율적인 코드를 작성할 수 있습니다. 아직 경험하지 않았다면 프로젝트에서 실험을 시작하고 작업 흐름을 어떻게 더 원활하게 만들 수 있는지 알아보세요.
즐거운 코딩하세요! ?
더 귀중한 컨텐츠를 얻으시려면 팔로우 부탁드립니다
위 내용은 모든 개발자가 알아야 할 새로운 JavaScript 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
