개요 Node.js에서 CommonJS(CJS)와 ESM(ES Modules)은 공존 상태이며, 신규 프로젝트는 ESM으로 전환되는 추세임. 두 시스템의 차이를 이해하면 번들 크기, 로딩 성능, 정적 분석, 생태계 호환에서 불필요한 시행착오 감소 가능 배경 2009년 Node.js는 표준 모듈 시스템이 없던 시기라 CommonJS 채택 2015년 ES6에서 ESM이 언어 차원의 공식 표준으로 확정 2020년대 들어 Node.js가 ESM을 정식 지원, 브라우저와 규약 수렴 진행 CommonJS 요약 // export module.exports = { foo: 1 } exports.bar = 2 // import const { foo, bar } = require('./utils')특성 ...
개념 flatMap은 각 요소를 매핑한 결과를 한 단계만 평탄화하는 배열 메서드 arr.map(fn).flat(1)과 동등 동작 콜백 시그니처 (value, index, array) 콜백이 배열을 반환하면 concat 후 depth 1 평탄화 더 깊은 중첩은 유지됨 희소 배열의 빈 슬롯은 평탄화 과정에서 제거됨 ES2019 이후 표준 지원 범위 넓음 예시 const arr = [1, 2, 3, 4] arr.flatMap(x => [x * 2]) // => [2, 4, 6, 8] arr.flatMap(x => [[x * 2]]) // => [[2], [4], [6], [8]] const s = ["it's Sunny in", "", "California"] s.flatMap(x => x.split(" ")) // => ["it's","Sunny","in","","California"] 주의와 팁 깊이 2 이상 평탄화 필요 시 flat(depth) 사용 또는 map + flat 조합 고려 콜백은 배열을 반환하는 패턴 권장, 스칼라를 섞으면 의도치 않은 구조 발생 가능 희소 배열 처리 시 구멍이 사라지는 특성 주의 성능상 불필요한 중첩 생성은 피하고 필요한 경우에만 flatMap 사용 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
개요 리터럴 선언 시 조건에 따라 요소나 속성을 넣었다 뺄 수 있는 패턴 정리 분기문 없이 스프레드 연산자만으로 가독성 유지 사용법/예시 배열은 피연산자가 이터러블이어야 하므로 삼항 연산자 사용 const arr = [ ...(cond ? [1, 2, 3] : []), 4, 5, 6, ] // cond === true => [1, 2, 3, 4, 5, 6] // cond === false => [4, 5, 6] 객체는 원시값을 스프레드해도 자체 속성이 없어 무시됨 불리언화로 안전성 확보 const obj = { ...(!!cond && { a: 1, b: 2 }), c: 3, d: 4, } // cond === true => { a: 1, b: 2, c: 3, d: 4 } // cond === false => { c: 3, d: 4 } 주의 사항 배열에서 …(cond && [1,2,3]) 사용 금지, cond가 false면 이터러블 아님 오류 발생 객체에서 null이나 undefined를 그대로 스프레드하면 오류 가능, !!cond로 불리언화하거나 cond ? {..} : {} 형태 권장 타입스크립트에서는 && 패턴이 타입 좁히기 미흡할 수 있음, 삼항으로 빈 객체 반환 또는 적절한 타입 주석 권장 ...
개념/배경 JavaScript에서 조건식은 내부적으로 ToBoolean 연산을 거쳐 참거짓을 판정함 이때 객체 타입은 모두 truthy로 간주되며 배열도 객체에 해당함 따라서 빈 배열 []과 빈 객체 {} 역시 조건문에서 true로 평가됨 반대로 falsy는 정해진 값만 해당됨 false, 0, -0, 0n, “”, null, undefined, NaN 예시 다음은 빈 배열이 조건문에서 어떻게 평가되는지 확인하는 간단한 코드 if ([]) { console.log("빈 배열은 truthy입니다!") } else { console.log("빈 배열은 falsy입니다!") } // 출력: "빈 배열은 truthy입니다!" 배열이 비어 있는지를 논리적으로 구분하려면 길이를 확인해야 함 ...
개요 여러 비동기 작업을 한 번에 묶어 처리하거나 결과를 모아야 하는 경우가 잦음 키-값 기반으로 데이터를 구조화해 저장하고 순회해야 하는 요구도 흔함 이 글은 Promise.all의 동작과 주의점, Map의 핵심 사용법을 개발자 관점에서 요약 정리함 Promise.all 개념과 정의 여러 Promise를 단일 Promise로 집계하는 유틸리티 모든 입력이 이행되면 결과를 같은 순서의 배열로 반환 하나라도 거부되면 즉시 거부로 끝나는 fail fast 특성 보유 입력은 Promise와 값 혼합 가능하며 값은 내부적으로 Promise.resolve로 이행 처리됨 ...
개념/배경 Array.prototype.map은 배열의 각 요소에 대해 콜백을 호출해 변환된 결과로 새 배열을 만드는 메서드임 원본 배열 불변 유지, 동일 길이의 새 배열 생성이 핵심 특징임 기본 문법 const newArray = array.map((element, index, array) => { return element; }); element 현재 요소 index 현재 인덱스 array 원본 배열 참조 콜백은 요소 수만큼 호출되고, 콜백의 반환값이 새 배열의 같은 위치에 배치됨 사용 예시 숫자 배열 변환 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10] 객체 배열에서 특정 속성 추출 ...
개요 JavaScript에서 함수는 일급 객체로 취급됨 이는 함수가 값처럼 변수에 담기고, 인수로 전달되고, 반환값으로 나오며, 객체의 프로퍼티로 저장될 수 있음을 의미함 이 특성 덕분에 고차 함수, 콜백, 클로저, 함수 합성 같은 패턴이 자연스럽게 구현됨 핵심 개념 변수에 할당 가능 다른 함수의 인수로 전달 가능 다른 함수의 반환값으로 사용 가능 객체의 프로퍼티로 저장 가능 간단 예시 변수에 할당 const greet = (name) => `Hello, ${name}`;인수로 전달 const run = (fn, v) => fn(v); run(greet, "Bob");반환값으로 사용 및 클로저 const mul = (m) => (v) => v * m; mul(2)(5);객체 프로퍼티로 저장해 메서드 구성 ...