JavaScript - ECMAScript 2019: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 이 흥미로운 여정에 여러분을 안내하게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 벌써 몇 년이 지났지만, 이 언어의 마법을 여러분과 함께 나눌 수 있어 기대가 됩니다. 가상의 노트북을 집어들고, 함께 시작해보겠습니다!

ECMAScript 2019

ECMAScript 2019 소개

시작하기 전에 ECMAScript에 대해 간단히 이야기해보겠습니다. JavaScript를 맛있는 케이크라고 상상해보세요, 그리고 ECMAScript는 그 케이크의 레시피입니다. 매년 레시피가 조금씩 개선되고, 2019년도 예외는 아니었습니다. ECMAScript 2019는 우리의 JavaScript 케이크를 더욱 맛있게 만드는 새로운 기능들을 제공해주었습니다!

ECMAScript 2019에 추가된 새로운 기능

ECMAScript 2019는 우리의 코딩 생활을 더 쉽게 만드는 몇 가지 흥미로운 기능을 소개했습니다. 하나씩 살펴보도록 하겠습니다.

JavaScript Array flat() 메서드

messier room과 같이 배열 안에 배열이嵌套된 적이 있으신가요? flat() 메서드는 모든 상자를 열고 하나의 깨끗한 층으로 모든 것을 정리하는 마법의 청소 로봇입니다.

예제를 보겠습니다:

const messyRoom = [1, 2, [3, 4, [5, 6]]];
const tidyRoom = messyRoom.flat(2);
console.log(tidyRoom); // 출력: [1, 2, 3, 4, 5, 6]

이 예제에서 messyRoom은 우리의嵌套된 배열입니다. flat(2) 메서드는 2개의 레벨을 내려가 배열을 평坦하게 합니다. 결과는 모든 숫자가 같은 레벨에 있는 tidyRoom입니다. 멋지죠?

JavaScript Array flatMap()

이제 청소 로봇이 정리하는 동안 아이템을 변환할 수 있다고 상상해보세요. 그게 flatMap()입니다! map()과 flat()이 초능력을 가진 아이를 낳았습니다.

재미있는 예제를 보겠습니다:

const pets = ["dog", "cat", "fish"];
const petSounds = pets.flatMap(pet => {
if (pet === "dog") return ["woof", "bark"];
if (pet === "cat") return ["meow"];
return [];
});
console.log(petSounds); // 출력: ["woof", "bark", "meow"]

이 코드에서 우리는 pets 배열을 가져와서 그들의 소리를 만드는 새로운 배열을 생성합니다. 고양이는 한 개의 소리를 가지고 있지만, 모든 소리가 같은 평坦한 배열에 들어갑니다. 물고기는 조용하니까 목록에 들어가지 않습니다!

개정된 Array sort()

sort() 메서드는 ECMAScript 2019에서 약간의 변화를 받았습니다. 이제 배열이 안정적으로 정렬되는 것을 보장합니다. 무슨 뜻인가요? 두 아이템이 정렬 함수에 의해 동일하게 간주될 때, 그들은 상대적인 원래 순서를 유지합니다.

예제를 보겠습니다:

const students = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

students.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(students);
/* 출력:
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

이 예제에서 우리는 학생들을 그들의 성적에 따라 정렬합니다. Bob과 David(둘 다 A 학점)은 원래 순서를 유지하며, Alice와 Charlie(둘 다 B 학점)도 마찬가지입니다. 이 안정적인 정렬은 많은 애플리케이션에서 중요할 수 있습니다!

JavaScript Object fromEntries

키-값 쌍을 객체로 변환하고 싶은 적이 있으셨나요? 이제 Object.fromEntries()를 사용해볼 수 있습니다! 마법 같지만, JavaScript입니다.

예제를 보겠습니다:

const entries = [
['name', 'Alice'],
['age', 25],
['city', '원더랜드']
];

const person = Object.fromEntries(entries);
console.log(person);
// 출력: { name: 'Alice', age: 25, city: '원더랜드' }

이 예제에서 우리는 키-값 쌍의 배열을 가져와서 이를 객체로 변환합니다. 각 쌍이 객체의 속성이 됩니다. Object.entries()의 반대입니다.

Optional catch binding

에러 처리가 조금 더 원활해졌습니다. 이전에는 catch 절에서 에러 매개변수를 지정해야 했지만, 이제 필요하지 않을 때 생략할 수 있습니다.

다음과 같이 보입니다:

// ECMAScript 2019 이전
try {
// 일부 코드가 에러를 발생시킬 수 있습니다
} catch (error) {
console.log("에러가 발생했습니다");
}

// ECMAScript 2019와 함께
try {
// 일부 코드가 에러를 발생시킬 수 있습니다
} catch {
console.log("에러가 발생했습니다");
}

두 번째 예제에서 우리는 (error) 부분을 제거했습니다. 이게 optional catch binding입니다. 코드가 깨끗해집니다.

개정된 JSON.stringify()

JSON.stringify()는 이제 일부 유니코드 문자를 더 잘 처리하여 JSON이 유효하게 유지됩니다.

예제를 보겠습니다:

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// 출력: {"name":"Pikachu�"}

이 경우 \uD800은 쌍의 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다른 서로 다

Credits: Image by storyset