ES6(ES2015) 이후 JavaScript는 매년 새로운 기능을 추가하며 빠르게 발전하고 있다. ES2020부터 ES2024까지 5년간 추가된 기능들은 개발 경험을 크게 개선했으며, 더 안전하고 표현력 있는 코드를 작성할 수 있게 해주었다. 이 글은 최신 JavaScript 기능들을 실전 예제와 함께 체계적으로 정리한다.
\n중첩된 객체 속성에 안전하게 접근할 수 있는 연산자다. null이나 undefined일 때 에러 대신 undefined를 반환한다.
기존 방식의 문제점
\n// ❌ 에러 발생 가능\nconst user = {\n profile: {\n name: 'John',\n address: {\n city: 'Seoul'\n }\n }\n};\n\n// address가 없으면 에러 발생\nconst city = user.profile.address.city; // TypeError: Cannot read property 'city' of undefined\n\n// 기존 해결 방법\nconst city = user.profile && user.profile.address && user.profile.address.city;Optional Chaining 사용
\n// ✅ 안전한 접근\nconst city = user.profile?.address?.city; // undefined (에러 없음)\n\n// 함수 호출에도 사용 가능\nconst result = user.profile?.getName?.(); // 함수가 없으면 undefined\n\n// 배열에도 사용 가능\nconst firstItem = arr?.[0]; // arr이 null/undefined면 undefined\n\n// 옵셔널 체이닝과 기본값 결합\nconst city = user.profile?.address?.city ?? 'Unknown';실전 활용
\n// API 응답 처리\nasync function fetchUserData(userId) {\n const response = await fetch(`/api/users/${userId}`);\n const data = await response.json();\n \n // 안전하게 중첩 데이터 접근\n return {\n name: data?.user?.profile?.name ?? 'Anonymous',\n email: data?.user?.contact?.email,\n avatar: data?.user?.profile?.images?.[0]?.url\n };\n}\n\n// DOM 조작\nconst title = document.querySelector('.article')?.querySelector('.title')?.textContent;왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 값을 반환한다. || 연산자와 달리 falsy 값(0, '', false)을 유지한다.
기존 방식의 문제점
\n// ❌ 0이나 빈 문자열도 기본값으로 대체됨\nconst count = user.count || 10; // count가 0이면 10이 됨 (의도하지 않은 동작)\nconst name = user.name || 'Anonymous'; // name이 ''이면 'Anonymous'가 됨Nullish Coalescing 사용
\n// ✅ null/undefined만 기본값으로 대체\nconst count = user.count ?? 10; // count가 0이면 0 유지\nconst name = user.name ?? 'Anonymous'; // name이 ''이면 '' 유지\n\n// 옵셔널 체이닝과 함께 사용\nconst city = user?.address?.city ?? 'Unknown';\nconst age = user?.profile?.age ?? 0;실전 활용
\n// 설정값 처리\nconst config = {\n timeout: options.timeout ?? 5000,\n retries: options.retries ?? 3,\n debug: options.debug ?? false\n};\n\n// 함수 매개변수 기본값\nfunction createUser(name, age = null) {\n return {\n name: name ?? 'Anonymous',\n age: age ?? 0,\n active: true\n };\n}\n\n// API 응답 처리\nconst response = await fetch('/api/data');\nconst data = await response.json() ?? {};임의 정밀도 정수를 표현하는 새로운 원시 타입이다. Number.MAX_SAFE_INTEGER (2^53 - 1)를 초과하는 정수를 안전하게 다룰 수 있다.
// BigInt 생성\nconst bigNumber = 9007199254740991n; // 리터럴에 n 추가\nconst bigNumber2 = BigInt(9007199254740991);\nconst bigNumber3 = BigInt('9007199254740991');\n\n// 연산\nconst a = 10n;\nconst b = 20n;\nconsole.log(a + b); // 30n\nconsole.log(a * b); // 200n\nconsole.log(a / b); // 0n (정수 나눗셈)\n\n// Number와 비교 (타입 변환 필요)\nconsole.log(10n === 10); // false (타입이 다름)\nconsole.log(10n == 10); // true (값 비교)\nconsole.log(10n + 10); // TypeError: Cannot mix BigInt and number\n\n// 실전 활용: ID, 타임스탬프 등\nconst userId = BigInt('9223372036854775807');\nconst timestamp = BigInt(Date.now());런타임에 모듈을 동적으로 불러올 수 있다. 코드 스플리팅과 조건부 로딩에 유용하다.
\n// 정적 import (기존)\nimport { utils } from './utils.js';\n\n// 동적 import\nconst loadModule = async () => {\n if (condition) {\n const { utils } = await import('./utils.js');\n utils.doSomething();\n }\n};\n\n// 실전 활용: 라우트 기반 코드 스플리팅\nasync function loadRoute(route) {\n switch (route) {\n case '/dashboard':\n const { Dashboard } = await import('./components/Dashboard.js');\n return Dashboard;\n case '/settings':\n const { Settings } = await import('./components/Settings.js');\n return Settings;\n default:\n const { Home } = await import('./components/Home.js');\n return Home;\n }\n}\n\n// 조건부 기능 로딩\nif (user.isPremium) {\n const { PremiumFeatures } = await import('./premium.js');\n PremiumFeatures.enable();\n}모든 Promise가 완료될 때까지 기다린다. Promise.all()과 달리 일부가 실패해도 모든 결과를 반환한다.
// Promise.all() - 하나라도 실패하면 전체 실패\nconst promises = [\n fetch('/api/user'),\n fetch('/api/posts'),\n fetch('/api/comments')\n];\n\ntry {\n const results = await Promise.all(promises);\n} catch (error) {\n // 하나라도 실패하면 여기로\n}\n\n// Promise.allSettled() - 모든 결과 반환\nconst results = await Promise.allSettled(promises);\nresults.forEach((result, index) => {\n if (result.status === 'fulfilled') {\n console.log(`Promise ${index} succeeded:`, result.value);\n } else {\n console.log(`Promise ${index} failed:`, result.reason);\n }\n});\n\n// 실전 활용: 여러 API 호출\nasync function loadUserData(userId) {\n const [user, posts, comments, likes] = await Promise.allSettled([\n fetch(`/api/users/${userId}`).then(r => r.json()),\n fetch(`/api/users/${userId}/posts`).then(r => r.json()),\n fetch(`/api/users/${userId}/comments`).then(r => r.json()),\n fetch(`/api/users/${userId}/likes`).then(r => r.json())\n ]);\n\n return {\n user: user.status === 'fulfilled' ? user.value : null,\n posts: posts.status === 'fulfilled' ? posts.value : [],\n comments: comments.status === 'fulfilled' ? comments.value : [],\n likes: likes.status === 'fulfilled' ? likes.value : []\n };\n}모든 JavaScript 환경에서 전역 객체를 참조하는 표준 방법이다.
\n// 환경별 전역 객체\n// 브라우저: window\n// Node.js: global\n// Web Worker: self\n\n// 기존 방식 (환경 체크 필요)\nconst global = (function() {\n if (typeof window !== 'undefined') return window;\n if (typeof global !== 'undefined') return global;\n if (typeof self !== 'undefined') return self;\n throw new Error('Unable to locate global object');\n})();\n\n// ES2020: globalThis 사용\nconsole.log(globalThis); // 모든 환경에서 작동\n\n// 실전 활용\nglobalThis.myGlobalVar = 'Hello';\nconsole.log(globalThis.myGlobalVar);문자열의 모든 일치 항목을 한 번에 교체한다.
\n// 기존 방식\nconst text = 'Hello World World';\nconst replaced = text.replace(/World/g, 'Universe'); // 정규식 필요\n// 또는\nconst replaced2 = text.split('World').join('Universe'); // 복잡함\n\n// ES2021: replaceAll()\nconst replaced3 = text.replaceAll('World', 'Universe'); // 'Hello Universe Universe'\n\n// 실전 활용\nfunction sanitizeInput(input) {\n return input\n .replaceAll('<', '<')\n .replaceAll('>', '>')\n .replaceAll('\"', '"')\n .replaceAll(\"'\", ''');\n}여러 Promise 중 하나라도 성공하면 그 결과를 반환한다. 모두 실패하면 AggregateError를 던진다.
\n// 여러 서버에서 데이터 가져오기\nconst servers = [\n 'https://api1.example.com/data',\n 'https://api2.example.com/data',\n 'https://api3.example.com/data'\n];\n\n// 첫 번째로 성공한 응답 사용\ntry {\n const fastest = await Promise.any(\n servers.map(url => fetch(url).then(r => r.json()))\n );\n console.log('Fastest response:', fastest);\n} catch (error) {\n // 모든 요청 실패\n console.error('All requests failed:', error.errors);\n}\n\n// 실전 활용: 폴백 전략\nasync function fetchWithFallback(urls) {\n try {\n const data = await Promise.any(\n urls.map(url => fetch(url).then(r => {\n if (!r.ok) throw new Error(`HTTP ${r.status}`);\n return r.json();\n }))\n );\n return data;\n } catch (error) {\n throw new Error('All fallback URLs failed');\n }\n}논리 연산자와 할당을 결합한 축약 문법이다.
\n// &&= (Logical AND assignment)\nlet user = { name: 'John' };\nuser.name &&= user.name.toUpperCase(); // user.name이 truthy면 할당\n// 동일: user.name = user.name && user.name.toUpperCase();\n\n// ||= (Logical OR assignment)\nlet config = {};\nconfig.timeout ||= 5000; // config.timeout이 falsy면 5000 할당\n// 동일: config.timeout = config.timeout || 5000;\n\n// ??= (Nullish coalescing assignment)\nlet options = {};\noptions.retries ??= 3; // options.retries가 null/undefined면 3 할당\n// 동일: options.retries = options.retries ?? 3;\n\n// 실전 활용\nfunction initConfig(userConfig) {\n const config = {};\n config.apiUrl ||= 'https://api.example.com';\n config.timeout ??= 5000;\n config.retries ??= 3;\n config.debug &&= process.env.NODE_ENV === 'development';\n return { ...config, ...userConfig };\n}큰 숫자를 읽기 쉽게 만들기 위한 구분자다.
\n// 기존 방식\nconst billion = 1000000000; // 읽기 어려움\nconst hex = 0xDEADBEEF;\n\n// ES2021: 숫자 구분자\nconst billion = 1_000_000_000; // 읽기 쉬움\nconst hex = 0xDEAD_BEEF;\nconst binary = 0b1010_0001_1000_0101;\nconst pi = 3.14159_26535_89793;\n\n// 실전 활용\nconst MAX_SAFE_INTEGER = 9_007_199_254_740_991;\nconst creditCard = 1234_5678_9012_3456;\nconst fileSize = 1_048_576; // 1MB객체에 대한 약한 참조를 생성한다. 가비지 컬렉션을 방해하지 않으면서 객체를 참조할 수 있다.
\n// WeakRef 생성\nlet obj = { data: 'important' };\nconst weakRef = new WeakRef(obj);\n\n// 참조된 객체 접근\nlet target = weakRef.deref();\nif (target) {\n console.log(target.data); // 'important'\n}\n\n// 원본 객체 삭제\nobj = null;\n\n// 가비지 컬렉션 후\ntarget = weakRef.deref();\nconsole.log(target); // undefined (가비지 컬렉션됨)\n\n// 실전 활용: 캐시 구현\nclass Cache {\n constructor() {\n this.cache = new Map();\n }\n\n set(key, value) {\n this.cache.set(key, new WeakRef(value));\n }\n\n get(key) {\n const ref = this.cache.get(key);\n if (!ref) return undefined;\n \n const value = ref.deref();\n if (!value) {\n // 가비지 컬렉션됨 - 캐시에서 제거\n this.cache.delete(key);\n return undefined;\n }\n return value;\n }\n}객체가 가비지 컬렉션될 때 콜백을 실행할 수 있게 해준다.
\n// FinalizationRegistry 생성\nconst registry = new FinalizationRegistry((heldValue) => {\n console.log(`Object with value ${heldValue} was garbage collected`);\n});\n\n// 객체 등록\nlet obj = { data: 'test' };\nregistry.register(obj, 'some-value');\n\n// 객체 삭제\nobj = null;\n\n// 가비지 컬렉션 후 콜백 실행\n\n// 실전 활용: 리소스 정리\nclass ResourceManager {\n constructor() {\n this.registry = new FinalizationRegistry((resourceId) => {\n this.cleanup(resourceId);\n });\n this.resources = new Map();\n }\n\n register(resource) {\n const id = this.generateId();\n this.resources.set(id, resource);\n this.registry.register(resource, id);\n return id;\n }\n\n cleanup(id) {\n console.log(`Cleaning up resource ${id}`);\n // 리소스 정리 로직\n }\n}모듈의 최상위 레벨에서 await를 사용할 수 있다.
// 기존 방식: async 함수 필요\n(async () => {\n const data = await fetch('/api/data');\n const json = await data.json();\n // ...\n})();\n\n// ES2022: Top-level await\nconst data = await fetch('/api/data');\nconst json = await data.json();\n\n// 실전 활용: 모듈 초기화\n// config.js\nconst config = await fetch('/api/config').then(r => r.json());\nexport default config;\n\n// main.js\nimport config from './config.js';\nconsole.log(config); // 이미 로드된 설정 사용 가능클래스의 private 필드와 메서드를 선언할 수 있다.
\n// 기존 방식: 네이밍 컨벤션 (실제로는 private 아님)\nclass User {\n constructor(name) {\n this._name = name; // _ 접두사 (컨벤션일 뿐)\n }\n \n getName() {\n return this._name; // 외부에서 접근 가능\n }\n}\n\n// ES2022: 진짜 private 필드\nclass User {\n #name; // private 필드\n #age; // private 필드\n \n constructor(name, age) {\n this.#name = name;\n this.#age = age;\n }\n \n getName() {\n return this.#name; // 클래스 내부에서만 접근 가능\n }\n \n #validateAge(age) { // private 메서드\n return age >= 0 && age <= 150;\n }\n \n setAge(age) {\n if (this.#validateAge(age)) {\n this.#age = age;\n }\n }\n}\n\nconst user = new User('John', 30);\nconsole.log(user.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class\nconsole.log(user.getName()); // 'John'\n\n// 실전 활용: 캡슐화\nclass BankAccount {\n #balance = 0;\n #transactionHistory = [];\n \n deposit(amount) {\n if (amount > 0) {\n this.#balance += amount;\n this.#transactionHistory.push({ type: 'deposit', amount });\n }\n }\n \n withdraw(amount) {\n if (amount > 0 && amount <= this.#balance) {\n this.#balance -= amount;\n this.#transactionHistory.push({ type: 'withdraw', amount });\n return amount;\n }\n return 0;\n }\n \n getBalance() {\n return this.#balance;\n }\n \n getHistory() {\n return [...this.#transactionHistory]; // 복사본 반환\n }\n}클래스의 static 필드와 메서드를 더 명확하게 선언할 수 있다.
\n// 기존 방식\nclass MathUtils {\n static PI = 3.14159; // 일부 환경에서만 지원\n static add(a, b) {\n return a + b;\n }\n}\n\n// ES2022: 명시적 static 필드\nclass MathUtils {\n static PI = 3.14159;\n static E = 2.71828;\n \n static add(a, b) {\n return a + b;\n }\n \n static #privateStaticMethod() { // private static 메서드\n return 'secret';\n }\n}\n\n// 실전 활용: 싱글톤 패턴\nclass DatabaseConnection {\n static #instance = null;\n \n static getInstance() {\n if (!this.#instance) {\n this.#instance = new DatabaseConnection();\n }\n return this.#instance;\n }\n \n constructor() {\n if (DatabaseConnection.#instance) {\n throw new Error('Use getInstance() instead');\n }\n }\n}클래스 필드를 생성자 밖에서 선언할 수 있다.
\n// 기존 방식\nclass User {\n constructor(name, email) {\n this.name = name;\n this.email = email;\n this.createdAt = new Date();\n }\n}\n\n// ES2022: 클래스 필드\nclass User {\n name;\n email;\n createdAt = new Date(); // 기본값 설정 가능\n \n constructor(name, email) {\n this.name = name;\n this.email = email;\n }\n}\n\n// 실전 활용\nclass Counter {\n count = 0; // 인스턴스 필드\n static total = 0; // static 필드\n \n increment() {\n this.count++;\n Counter.total++;\n }\n}에러 체인을 만들 수 있게 해준다.
\n// 기존 방식\ntry {\n await fetchData();\n} catch (error) {\n throw new Error('Failed to fetch data'); // 원본 에러 정보 손실\n}\n\n// ES2022: Error.cause\ntry {\n await fetchData();\n} catch (error) {\n throw new Error('Failed to fetch data', { cause: error });\n // 원본 에러 정보 보존\n}\n\n// 실전 활용: 에러 체이닝\nasync function processUserData(userId) {\n try {\n const user = await fetchUser(userId);\n return await processUser(user);\n } catch (error) {\n throw new Error('Failed to process user data', {\n cause: error,\n userId\n });\n }\n}\n\n// 에러 처리\ntry {\n await processUserData(123);\n} catch (error) {\n console.error(error.message); // 'Failed to process user data'\n console.error(error.cause); // 원본 에러\n}배열의 인덱스로 양수와 음수를 모두 사용할 수 있다.
\nconst arr = [1, 2, 3, 4, 5];\n\n// 기존 방식\nconst last = arr[arr.length - 1]; // 마지막 요소\nconst secondLast = arr[arr.length - 2]; // 뒤에서 두 번째\n\n// ES2022: Array.at()\nconst last = arr.at(-1); // 5\nconst secondLast = arr.at(-2); // 4\nconst first = arr.at(0); // 1\n\n// 실전 활용\nfunction getLastItem(array) {\n return array.at(-1) ?? null;\n}\n\nfunction getNthFromEnd(array, n) {\n return array.at(-n);\n}Object.prototype.hasOwnProperty()의 안전한 대안이다.
// 기존 방식의 문제\nconst obj = Object.create(null);\nobj.hasOwnProperty('prop'); // TypeError: obj.hasOwnProperty is not a function\n\n// 해결 방법\nObject.prototype.hasOwnProperty.call(obj, 'prop');\n\n// ES2022: Object.hasOwn()\nObject.hasOwn(obj, 'prop'); // 안전하게 사용 가능\n\n// 실전 활용\nfunction hasProperty(obj, prop) {\n return Object.hasOwn(obj, prop);\n}\n\n// 객체 순회\nfor (const key in obj) {\n if (Object.hasOwn(obj, key)) {\n console.log(key, obj[key]);\n }\n}배열을 뒤에서부터 검색한다.
\nconst numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];\n\n// 기존 방식\nconst lastEven = numbers.slice().reverse().find(n => n % 2 === 0);\n\n// ES2023: findLast()\nconst lastEven = numbers.findLast(n => n % 2 === 0); // 2\nconst lastIndex = numbers.findLastIndex(n => n % 2 === 0); // 7\n\n// 실전 활용\nfunction findLastError(logs) {\n return logs.findLast(log => log.level === 'error');\n}\n\nfunction findLastValidItem(items) {\n return items.findLast(item => item.isValid);\n}배열을 변경하지 않고 새 배열을 반환한다.
\nconst numbers = [3, 1, 4, 1, 5];\n\n// 기존 방식: 원본 변경\nconst sorted = [...numbers].sort(); // 복사본 생성 필요\nconst reversed = [...numbers].reverse(); // 복사본 생성 필요\n\n// ES2023: 불변 메서드\nconst sorted = numbers.toSorted(); // [1, 1, 3, 4, 5]\nconst reversed = numbers.toReversed(); // [5, 1, 4, 1, 3]\nconst spliced = numbers.toSpliced(1, 2, 9, 9); // [3, 9, 9, 1, 5]\n\n// 원본은 변경되지 않음\nconsole.log(numbers); // [3, 1, 4, 1, 5]\n\n// 실전 활용: 함수형 프로그래밍\nfunction processData(data) {\n return data\n .toSorted((a, b) => a.value - b.value)\n .toReversed()\n .filter(item => item.active);\n}특정 인덱스의 값을 변경한 새 배열을 반환한다.
\nconst arr = [1, 2, 3, 4, 5];\n\n// 기존 방식\nconst newArr = [...arr];\nnewArr[2] = 99;\n\n// ES2023: Array.with()\nconst newArr = arr.with(2, 99); // [1, 2, 99, 4, 5]\n\n// 원본은 변경되지 않음\nconsole.log(arr); // [1, 2, 3, 4, 5]\n\n// 실전 활용: 불변 업데이트\nfunction updateItem(items, index, updates) {\n return items.with(index, { ...items[index], ...updates });\n}\n\n// React 상태 업데이트\nconst [items, setItems] = useState([1, 2, 3]);\nsetItems(items => items.with(1, 99));Promise의 resolve와 reject를 외부에서 제어할 수 있게 해준다.
\n// 기존 방식\nfunction createPromise() {\n let resolve, reject;\n const promise = new Promise((res, rej) => {\n resolve = res;\n reject = rej;\n });\n return { promise, resolve, reject };\n}\n\n// ES2024: Promise.withResolvers()\nconst { promise, resolve, reject } = Promise.withResolvers();\n\n// 실전 활용: 이벤트 기반 Promise\nclass EventEmitter {\n constructor() {\n this.pending = new Map();\n }\n \n waitFor(event) {\n const { promise, resolve } = Promise.withResolvers();\n if (!this.pending.has(event)) {\n this.pending.set(event, []);\n }\n this.pending.get(event).push(resolve);\n return promise;\n }\n \n emit(event, data) {\n const resolvers = this.pending.get(event);\n if (resolvers) {\n resolvers.forEach(resolve => resolve(data));\n this.pending.delete(event);\n }\n }\n}배열을 그룹화한다.
\nconst users = [\n { name: 'John', role: 'admin' },\n { name: 'Jane', role: 'user' },\n { name: 'Bob', role: 'admin' },\n { name: 'Alice', role: 'user' }\n];\n\n// ES2024: Array.groupBy()\nconst grouped = users.groupBy(user => user.role);\n// {\n// admin: [{ name: 'John', role: 'admin' }, { name: 'Bob', role: 'admin' }],\n// user: [{ name: 'Jane', role: 'user' }, { name: 'Alice', role: 'user' }]\n// }\n\n// Array.groupByToMap()\nconst groupedMap = users.groupByToMap(user => user.role);\n// Map {\n// 'admin' => [...],\n// 'user' => [...]\n// }\n\n// 실전 활용\nconst orders = [\n { id: 1, status: 'pending', amount: 100 },\n { id: 2, status: 'completed', amount: 200 },\n { id: 3, status: 'pending', amount: 150 }\n];\n\nconst byStatus = orders.groupBy(order => order.status);\nconst totalByStatus = Object.entries(byStatus).map(([status, orders]) => ({\n status,\n total: orders.reduce((sum, o) => sum + o.amount, 0)\n}));// API 응답 처리\nasync function fetchUserProfile(userId) {\n try {\n const response = await fetch(`/api/users/${userId}`);\n const data = await response.json();\n \n return {\n name: data?.user?.profile?.name ?? 'Anonymous',\n email: data?.user?.contact?.email ?? '',\n avatar: data?.user?.profile?.images?.[0]?.url,\n settings: {\n theme: data?.user?.preferences?.theme ?? 'light',\n notifications: data?.user?.preferences?.notifications ?? true\n }\n };\n } catch (error) {\n console.error('Failed to fetch user profile:', error);\n throw new Error('User profile fetch failed', { cause: error });\n }\n}class ApiClient {\n static #defaultConfig = {\n timeout: 5000,\n retries: 3\n };\n \n #baseUrl;\n #config;\n \n constructor(baseUrl, config = {}) {\n this.#baseUrl = baseUrl;\n this.#config = { ...ApiClient.#defaultConfig, ...config };\n }\n \n async #request(endpoint, options = {}) {\n const url = `${this.#baseUrl}${endpoint}`;\n const config = {\n ...options,\n signal: AbortSignal.timeout(this.#config.timeout)\n };\n \n for (let i = 0; i < this.#config.retries; i++) {\n try {\n const response = await fetch(url, config);\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}`, { cause: response });\n }\n return await response.json();\n } catch (error) {\n if (i === this.#config.retries - 1) throw error;\n await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));\n }\n }\n }\n \n async get(endpoint) {\n return this.#request(endpoint, { method: 'GET' });\n }\n \n async post(endpoint, data) {\n return this.#request(endpoint, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data)\n });\n }\n}// 불변 데이터 처리\nfunction processUsers(users) {\n return users\n .toSorted((a, b) => a.name.localeCompare(b.name))\n .filter(user => user.active)\n .map(user => ({\n ...user,\n displayName: user.name.toUpperCase(),\n initials: user.name\n .split(' ')\n .map(n => n.at(0))\n .join('')\n }))\n .groupBy(user => user.role);\n}\n\n// 에러 처리 체이닝\nasync function processData(data) {\n try {\n const validated = await validateData(data);\n const processed = await processValidated(validated);\n return await saveProcessed(processed);\n } catch (error) {\n throw new Error('Data processing failed', { cause: error });\n }\n}// core-js 사용 예시\nimport 'core-js/stable';\nimport 'regenerator-runtime/runtime';\n\n// 또는 특정 기능만\nimport 'core-js/features/promise/all-settled';\nimport 'core-js/features/array/at';{\n \"presets\": [\n [\"@babel/preset-env\", {\n \"targets\": {\n \"browsers\": [\"> 1%\", \"last 2 versions\"]\n }\n }]\n ]\n}ES2020부터 ES2024까지 추가된 기능들은 JavaScript 개발을 더 안전하고 표현력 있게 만들어주었다. Optional Chaining과 Nullish Coalescing은 null/undefined 처리를 간소화했고, Top-level await는 모듈 시스템을 강화했으며, Private fields는 진정한 캡슐화를 가능하게 했다.
\n이러한 기능들을 적절히 활용하면:
\n모던 JavaScript 개발자라면 이러한 기능들을 숙지하고 적절히 활용하여 더 나은 코드를 작성해야 한다. 하지만 브라우저 호환성을 고려하여 필요한 경우 폴리필이나 트랜스파일러를 사용하는 것도 잊지 말자.
\nJavaScript는 계속 발전하고 있다. 최신 기능을 따라가며 더 나은 개발 경험을 만들어가자.
\n이 글은 공개된 ECMAScript 표준 사양, 공식 문서, 그리고 공개된 기술 자료를 바탕으로 작성되었습니다.
\n면책 조항: 이 글에 포함된 내용은 교육 및 정보 제공 목적으로 작성되었습니다. 코드 예제는 표준적인 패턴과 공개된 문서를 기반으로 작성되었으며, 교육 목적으로 제공됩니다. 실제 프로덕션 환경에서 사용 시에는 적절한 테스트와 검증이 필요합니다.
\n참고 자료:
\n최신 JavaScript - ES2020부터 ES2024까지, 모던 개발자를 위한 완벽 가이드
\n