JSON.stringify는 이전에 입력에 고립된 서러게이트가 포함되어 있으면 잘못된 유니코드 문자열을 반환하도록 지정되었습니다:
JSON.stringify('\uD800');
// → '"�"'
“잘 구성된 JSON.stringify” 제안은 JSON.stringify의 동작을 변경하여 고립된 서러게이트에 대해 이스케이프 시퀀스를 출력하도록 하고, 결과가 유효한 유니코드(및 UTF-8로 표현 가능)가 되도록 만듭니다:
자바스크립트 모듈은 이제 모든 주요 브라우저에서 지원됩니다!
이 글은 JS 모듈을 사용하는 방법, 이를 책임감 있게 배포하는 방법, 그리고 크롬 팀이 미래에 모듈을 더 나은 방향으로 개선하기 위해 노력하고 있는 방식을 설명합니다.
JS 모듈(“ES 모듈” 또는 “ECMAScript 모듈”이라고도 함)은 주요 새로운 기능 또는 새로운 기능들의 모음입니다. 과거에 사용자 정의 자바스크립트 모듈 시스템을 사용한 적이 있을 것입니다. 아마도 Node.js에서 사용하는 CommonJS를 사용했거나, AMD를 사용했을 수 있습니다. 아니면 다른 것을 사용했을 수도 있습니다. 이러한 모든 모듈 시스템의 공통점은 무엇인가를 가져오고 내보내는 기능을 제공한다는 점입니다.
BigInt는 JavaScript에서 임의 정밀도로 정수를 표현할 수 있는 새로운 숫자형 원시 자료형입니다. BigInt를 사용하면 Number의 안전한 정수 범위를 초과하는 큰 정수를 안전하게 저장하고 연산할 수 있습니다. 이 글은 몇 가지 사용 사례를 살펴보고 BigInt와 Number를 비교하여 Chrome 67에서 추가된 새로운 기능을 설명합니다.
try 문장의 catch 절은 바인딩을 필요로 했습니다:
try {
doSomethingThatMightThrow();
} catch (exception) {
// ^^^^^^^^^
// 우리는 바인딩 이름을 지정해야 하지만, 사용하지 않을 수도 있습니다!
handleException();
}
ES2019에서는 catch를 이제 바인딩 없이 사용할 수 있습니다. 이는 예외를 처리하는 코드에서 exception 객체가 필요하지 않은 경우 유용합니다.
try {
doSomethingThatMightThrow();
} catch { // → 바인딩 없음!
handleException();
}
catch 바인딩 지원ES2019에서는 String.prototype.trimStart() 및 String.prototype.trimEnd()을 소개합니다:
const string = ' hello world ';
string.trimStart();
// → 'hello world '
string.trimEnd();
// → ' hello world'
string.trim(); // ES5
// → 'hello world'
이 기능은 이전에 비표준 메서드인 trimLeft()와 trimRight()를 통해 제공되었습니다. 이러한 메서드는 새로운 메서드와의 호환성을 위해 여전히 별칭으로 남아 있습니다.
const string = ' hello world ';
string.trimStart();
// → 'hello world '
string.trimLeft();
// → 'hello world '
string.trimEnd();
// → ' hello world'
string.trimRight();
// → ' hello world'
string.trim(); // ES5
// → 'hello world'
Function.prototype.toString()이 이제 공백과 주석을 포함한 소스 코드 텍스트의 정확한 조각을 반환합니다. 이전 동작과 새로운 동작을 비교한 예제를 아래에서 확인하세요:
Dynamic import()는 정적 import와 비교하여 새로운 기능을 해제하는 함수 같은 형태의 import를 도입합니다. 이 기사에서는 두 가지를 비교하고 새로운 내용을 개괄적으로 소개합니다.
Promise.prototype.finally는 프로미스가 _정산_될 때(즉, 완료 또는 거부됨)에 호출될 콜백을 등록할 수 있도록 합니다.
페이지에 표시할 데이터를 가져오고 싶다고 상상해보세요. 그리고 요청이 시작될 때 로딩 스피너를 표시하고 요청이 완료되면 숨기고 싶습니다. 문제가 발생하면 대신 오류 메시지를 표시합니다.
const fetchAndDisplay = ({ url, element }) => {
showLoadingSpinner();
fetch(url)
.then((response) => response.text())
.then((text) => {
element.textContent = text;
hideLoadingSpinner();
})
.catch((error) => {
element.textContent = error.message;
hideLoadingSpinner();
});
};
_객체 나머지 및 펼침 속성_을 논의하기 전에, 기억을 되살리고 매우 유사한 기능을 상기해봅시다.
익숙한 ECMAScript 2015는 배열 구조 분해 할당을 위한 _나머지 요소_와 배열 리터럴을 위한 _펼침 요소_를 도입했습니다.
// 배열 구조 분해 할당을 위한 나머지 요소:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]
// 배열 리터럴을 위한 펼침 요소:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]
그렇다면 새로워진 점은 무엇일까요? 제안서에 따르면 객체 리터럴을 위한 나머지 및 펼침 속성도 사용할 수 있습니다.
// 객체 구조 분해 할당을 위한 나머지 속성:
const person = {
firstName: 'Sebastian',
lastName: 'Markbåge',
country: 'USA',
state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }