
์๋ก์ด ECMAScript ๋ฒ์ , ES15(ECMAScript 2024)๊ฐ ๋๋์ด ๋ฑ์ฅํ๋ค.
1. ํจํด ๋งค์นญ(Pattern Matching)
JavaScript๊ฐ ํ์ธต ๋๋ํด์ก๋ค. ์ด์ ํจํด ๋งค์นญ์ ํตํด ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ๊ฐ๋จํ๊ณ ์ง๊ด์ ๊ธ๋ก ํ์ธํ ์ ์๋ค. ๋ณต์กํ ์กฐ๊ฑด๋ฌธ์ ์์ฑํ๋ ๋์ , ์ํ๋ ํจํด์ ๋ง์ถฐ ๊ฐ๊ฒฐํ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค.
๊ธฐ์กด ๋ฐฉ์
function checkAnimal(animal) {
if (animal.type === "dog" && animal.sound === "woof") {
return "It's a dog! ๐ถ";
} else if (animal.type === "cat" && animal.sound === "meow") {
return "It's a cat! ๐ฑ";
} else {
return "Unknown animal ๐";
}
}์๋ก์ด ๋ฐฉ์
function checkAnimal(animal) {
return match (animal) {
{ type: "dog", sound: "woof" } => "It's a dog! ๐ถ",
{ type: "cat", sound: "meow" } => "It's a cat! ๐ฑ",
_=> "Unknown animal ๐"
};
}์ฝ๋๊ฐ ๊ฐ๊ฒฐํด์ง๊ณ ๊ฐ๋ ์ฑ์ด ์ข์์ ธ ์์ ์๋๊ฐ ๋นจ๋ผ์ง ์ ์๋ค.
ํ์ดํ๋ผ์ธ ์ฐ์ฐ์(Pipeline Operator)
ํ์ดํ๋ผ์ธ ์ฐ์ฐ์ (|>)๊ฐ ๋์
๋๋ฉด์ ์ฝ๋๊ฐ ํจ์ฌ ์ฝ๊ธฐ ์ฌ์์ก๋ค. ์ด์ ํจ์๋ฅผ ์ฒด์ธ์ฒ๋ผ ์ฐ๊ฒฐํ์ฌ ๋ฐ์ดํฐ ํ๋ฆ์ ๋ช
ํํ๊ฒ ํํํ ์ ์๋ค.
๊ธฐ์กด ๋ฐฉ์
const result = process(clean(parse(inputData)));์๋ก์ด ๋ฐฉ์
const result = inputData
|> parse
|> clean
|> process;๋ฐ์ดํฐ์ ํจ์๋ฅผ ๋ฆด๋ ์ดํฐ๋ผ ๋งค๋๋ฝ๊ฒ ์ ๋ฌํ ์ ์๋ค. ์ค์ฒฉ ๊ดํธ๋ก ๊ณจ์น ์ํํ ํ์๊ฐ ์๋ค.
Async Context
๋น๋๊ธฐ ์์ ์ด ๊ผฌ์ฌ์ ๋๋ฒ๊น ์ ์๊ฐ์ ๋บ๊ธด ์ ์ด ์๋๊ฐ? ์ด์ Async Context๋ก ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค. ๋น๋๊ธฐ ์์ ์ ์ปจํ ์คํธ๋ฅผ ์๋์ผ๋ก ์ถ์ ํ์ฌ, ์์ฒญ ์ํ๋ฅผ ๋ช ํํ๊ฒ ์ ์ ์๋ค.
๊ธฐ์กด ๋ฐฉ์
async function fetchData() {
const response = await apiCall();
// oops... where did my context go?!
}์๋ก์ด ๋ฐฉ์
async function fetchData() {
const context = getCurrentContext();
const response = await apiCall();
return response;
}๋ง์น ๋น๋๊ธฐ ์์ ์ ์ํ GPS์ ๊ฐ๋ค. ์ด์ ๋น๋๊ธฐ ์์ ์ด ์ด๋๋ก ํ๋ฌ๊ฐ๋์ง ๋ช ํํ ์ ์ ์๋ค.
Set ๋ฉ์๋
์ด์ JavaScript์ Set๋ ๊ฐ๋ ฅํด์ก๋ค. ์๋ก์ด ๋ฉ์๋ union, intersection, difference ์ถ๊ฐ๋์ด ๋ฐ์ดํฐ๋ฅผ ํจ์ฌ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค.
๊ธฐ์กด ๋ฐฉ์
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const union = new Set([...setA, ...setB]);์๋ก์ด ๋ฐฉ์
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const union = setA.union(setB);์๋ก์ด Array ๋ฉ์๋
๋ฐฐ์ด์ ๋ ๊ฐ๋ ฅํ๊ฒ ๊ด๋ฆฌํ ์ ์๋๋ก groupBy์ toSorted ๊ฐ์ ์๋ก์ด ๋ฉ์๋๊ฐ ์ถ๊ฐ๋์๋ค.
๊ธฐ์กด ๋ฐฉ์
const arr = [1, 4, 2, 3];
const sortedArr = [...arr].sort((a, b) => a - b);์๋ก์ด ๋ฐฉ์
const arr = [1, 4, 2, 3];
const sortedArr = arr.toSorted(); // ์๋ณธ ๋ฐฐ์ด์ ๊ฑด๋ค์ง ์์๋ฐ์ดํฐ ์ ๋ ฌ๊ณผ ๊ทธ๋ฃนํ์ด ํจ์ฌ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ผ๋ก ๋ฐ๋์๋ค.
Temporal API
JavaScript์์ ๋ ์ง์ ์๊ฐ์ ๋ค๋ฃจ๋ ๊ฑด ๋ ์ด๋ ต๊ณ ๋ฒ๊ฑฐ๋ก์ ๋ค. ํ์ง๋ง Temporal API๊ฐ ๋ฑ์ฅํ๋ฉด์ ์ด ๋ชจ๋ ๋ถํธํจ์ด ์ฌ๋ผ์ก๋ค.
๊ธฐ์กด ๋ฐฉ์
const date = new Date('2023-12-01');
const nextMonth = new Date(date.setMonth(date.getMonth() + 1));์๋ก์ด ๋ฐฉ์
const date = Temporal.PlainDate.from('2023-12-01');
const nextMonth = date.add({ months: 1 });๋ ์ง์ ์๊ฐ์ ๋ค๋ฃจ๋ ์์ ์ด ํจ์ฌ ๊ฐ๋จํ๊ณ ๋ ผ๋ฆฌ์ ์ผ๋ก ๋ฐ๋์๋ค.
๋ง์น๋ฉฐ
ES15 / ECMAScript 2024๋ JavaScript์ ๊ฐ๋ ฅํจ๊ณผ ์ฆ๊ฑฐ์์ ํ ๋จ๊ณ ๋ ๋์ด์ฌ๋ ธ๋ค. ์ด๋ฒ ์ ๋ฐ์ดํธ๋ก ํจํด ๋งค์นญ, ํ์ดํ๋ผ์ธ ์ฐ์ฐ์, Set๊ณผ ๋ฐฐ์ด ๋ฉ์๋, ๋ ์ง ๊ด๋ฆฌ ๋ฑ ๋ค์ํ ์์ ์ด ํจ์ฌ ๊ฐ๋จํด์ก๋ค.
์ด ๊ธ์ Bhuwan Chettri์ ES15 / ECMAScript 2025: Whatโs New in JavaScript? ๐โจ๋ฅผ ํ๊ธ๋ก ๋ฒ์ญํ ๊ธ์ ๋๋ค.