์ƒˆ๋กœ์šด 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๊ณผ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ, ๋‚ ์งœ ๊ด€๋ฆฌ ๋“ฑ ๋‹ค์–‘ํ•œ ์ž‘์—…์ด ํ›จ์”ฌ ๊ฐ„๋‹จํ•ด์กŒ๋‹ค.

๐Ÿ“ Note

์ด ๊ธ€์€ Bhuwan Chettri์˜ ES15 / ECMAScript 2025: Whatโ€™s New in JavaScript? ๐ŸŽ‰โœจ๋ฅผ ํ•œ๊ธ€๋กœ ๋ฒˆ์—ญํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.