본문 바로가기

language/javascript40

🎨 async generator, Promise.allSettled 등 비동기 처리 트렌드 정리 🎨 async generator, Promise.allSettled 등 비동기 처리 트렌드 정리자바스크립트는 비동기 처리를 위한 다양한 문법을 지속적으로 개선하고 있습니다.ES2018 이후 async generator, Promise.allSettled, top-level await 등은 실무에서 안정적이고 예측 가능한 비동기 로직을 작성하는 데 큰 도움을 줍니다.이번 글에서는 이러한 트렌드를 기능 중심으로 정리합니다.1. async generator – 비동기 반복 (ES2018)async function*과 for await...of를 사용하면 비동기 데이터 스트림을 순차 처리할 수 있습니다.async function* fetchItems() { yield await fetch("/item/1").. 2025. 5. 11.
🎨 템플릿 리터럴, Symbol, BigInt – 자바스크립트 특수 타입 완전 정리 🎨 템플릿 리터럴, Symbol, BigInt – 자바스크립트 특수 타입 완전 정리ES6 이후 자바스크립트에는 보다 정밀하고 안전한 코드를 위한 특수 타입이 도입되었습니다.이 글에서는 실무에서 잘 알려지지 않았지만 중요한 세 가지 특수 타입인 템플릿 리터럴, Symbol, BigInt를 정리합니다.1. 템플릿 리터럴 (Template Literal)백틱(``)을 사용하여 문자열 보간, 다중 줄 문자열, HTML 생성 등에 활용합니다.const name = "Alice";const greeting = `Hello, ${name}!`; // 👉 Hello, Alice!const html = ` Welcome `;✅ 특징: 줄바꿈 유지 가능 표현식 보간 가능 (${ }) 태그드 템플릿 함수.. 2025. 5. 11.
🎨 전개 연산자(...), 나머지 매개변수, 구조 분해 할당 – 고급 활용 정리 🎨 전개 연산자(...), 나머지 매개변수, 구조 분해 할당 – 고급 활용 정리ES6에서 도입된 ... 연산자는 문맥에 따라 전개(spread) 또는 나머지(rest)로 동작합니다.이 글에서는 구조 분해와 결합된 고급 활용, 배열/객체 처리 패턴, 함수 인자 처리 등 실무에서 자주 사용하는 방식으로 정리합니다.1. 전개 연산자 (Spread Operator)배열이나 객체를 펼쳐서 복사하거나 병합할 때 사용합니다.// 배열 복사 및 결합const arr = [1, 2, 3];const copy = [...arr]; // 복사const merged = [...arr, 4, 5]; // 결합// 객체 병합const base = { a: 1 };const extended = { ... 2025. 5. 11.
🎨 ES6~ES2023까지의 핵심 문법 정리 – 꼭 알아야 할 최신 자바스크립트 기능 🎨 ES6~ES2023까지의 핵심 문법 정리 – 꼭 알아야 할 최신 자바스크립트 기능ES6 이후 자바스크립트는 매년 새로운 기능을 추가하며 개발 생산성, 가독성, 안전성을 빠르게 향상시켜왔습니다.이번 글에서는 ES6부터 ES2023까지 등장한 실무 중심의 핵심 문법을 정리합니다.초보자라면 처음 정리용으로, 중급자라면 복습 및 체크리스트 용도로 활용할 수 있습니다. 버전주요 키워드ES6 (2015)클래스, let/const, 템플릿, 화살표 함수ES7 (2016)includes(), 지수 연산자 **ES8 (2017)async/await, Object.entriesES9 (2018)rest/spread in object, async iteratorES10 (2019)flat, trimStart, opti.. 2025. 5. 11.
🪄 순수 함수(Pure Function), 불변성(Immutability), 사이드 이펙트(Side Effect) 정리 🪄 순수 함수(Pure Function), 불변성(Immutability), 사이드 이펙트(Side Effect) 정리함수형 프로그래밍을 이해하려면 반드시 알아야 할 세 가지 개념이 있습니다:순수 함수, 불변성, 사이드 이펙트입니다.이번 글에서는 이 세 개념을 각각 설명하고, 왜 중요한지, 어떻게 코드에 적용하는지를 실전 중심으로 정리합니다.1. 순수 함수(Pure Function)란?같은 입력에 대해 항상 같은 결과를 반환하고, 함수 외부 상태를 변경하지 않는 함수를 순수 함수라고 합니다.// 순수 함수function add(a, b) { return a + b;}// 비순수 함수 (외부 상태 변경)let total = 0;function addToTotal(n) { total += n; // ❌.. 2025. 5. 11.
🪄 함수 합성(Compose, Pipe)과 Lodash 실전 예제 🪄 함수 합성(Compose, Pipe)과 Lodash 실전 예제함수형 프로그래밍에서 핵심 개념 중 하나는 함수 합성(Function Composition)입니다.여러 개의 함수를 조합하여 작고 단순한 함수 → 더 큰 동작을 만들어내는 방식입니다.이번 글에서는 compose와 pipe의 개념 차이와 함께 Lodash를 활용한 실전 예제를 정리합니다.1. 함수 합성이란?함수 f, g를 합성한다고 하면: f(g(x)) 형태로 동작합니다.즉, g의 결과가 f의 입력으로 전달됩니다.const toUpper = str => str.toUpperCase();const exclaim = str => str + "!";const shout = str => exclaim(toUpper(str));console.log(.. 2025. 5. 11.