JavaScript Array.prototype.map 완전 가이드: 동작 원리, 주의점, 실전 패턴

개요 Array.prototype.map은 배열의 각 요소에 대해 지정한 콜백을 호출하고 그 반환값으로 새 배열을 만드는 메서드임 원본 배열은 변경하지 않으며 콜백의 부수효과로만 변형이 일어날 수 있음 희소 배열의 빈 슬롯은 유지되며 콜백은 값이 존재하는 인덱스에만 호출됨 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback 현재 요소를 변환해 새 요소를 생성하는 함수 currentValue 현재 요소 값 index 선택 현재 요소의 인덱스 array 선택 map을 호출한 원본 배열 thisArg 선택 콜백 실행 시 this로 사용할 값 반환값 각 요소에 대해 callback을 실행한 결과로 구성된 새 배열 반환 원본 배열과 길이는 동일하고 희소성도 보존됨 ...

February 12, 2026

JavaScript Array.prototype.reduce 개념과 안전한 활용 가이드

개요 Array.prototype.reduce는 배열을 하나의 값으로 축약하는 표준 API 배열의 각 요소에 대해 리듀서 함수를 순차 실행하고 누산기 값을 반환 집계, 변환, 그룹핑, 파이프라인 구성 등 다양한 패턴에 사용 구문 arr.reduce(callback[, initialValue]) callback에 누산 로직 정의 initialValue가 있으면 누산기의 시작값으로 사용, 없으면 배열의 첫 요소가 시작값 매개변수 callback(accumulator, currentValue, currentIndex, array) accumulator: 누산된 값 currentValue: 현재 요소 값 currentIndex: 현재 인덱스 array: 원본 배열 initialValue (옵션) 누산기의 초기값 제공하지 않으면 배열 첫 요소가 초기값이 되어 콜백은 두 번째 요소부터 시작 반환값 축약 결과로 얻은 최종 누산값 동작 방식 왼쪽에서 오른쪽으로 순회하며 callback을 한 번씩 호출 initialValue 미제공 빈 배열이면 TypeError 발생 요소가 하나뿐이면 그 요소를 그대로 반환하며 callback은 호출되지 않음 initialValue 제공 배열이 비어 있어도 initialValue를 그대로 반환하며 callback은 호출되지 않음 희소 배열의 빈 슬롯은 건너뜀 누산기는 어떤 타입도 가능하며 객체, 맵, 프라미스 등으로 확장 가능 주의 사항과 베스트 프랙티스 가능한 항상 initialValue 지정 권장 빈 배열 입력 시 예외 방지, 타입 안정성 확보 누산기 불변성 유지 권장 객체 누산 시 얕은 복사 또는 구조 분해 사용 고려 콜백은 순수 함수 지향 외부 상태 변경 최소화, 테스트 용이성 확보 읽기 어려운 과도한 축약 로직은 map, filter, for…of 등으로 분리 고려 희소 배열에서 빈 슬롯은 콜백이 호출되지 않음에 유의 오른쪽에서 왼쪽으로 처리해야 하면 reduceRight 사용 간단 예시 합계 계산 ...

February 8, 2026

Ramda 핵심 개념 정리와 R.prop 안전한 속성 접근, 커링·조합·주의사항

개요 Ramda는 JavaScript와 TypeScript에서 함수형 프로그래밍을 실용적으로 적용하기 위한 유틸리티 모음집임 순수 함수, 불변성, 커링, 함수 조합을 일관된 인터페이스로 제공하며, 매개변수 순서를 함수 → 데이터로 통일해 조합과 부분 적용을 자연스럽게 만듦 이 글은 R.prop을 중심으로 Ramda 핵심 함수의 개념과 사용법, 타입 고려사항, 흔한 함정과 우회 전략을 정리함 R.prop 개념과 문법 목적과 동작 원리 객체의 특정 속성 값을 안전하게 조회하는 읽기 전용 도구 속성이 없거나 undefined일 수 있는 상황에서 런타임 예외 없이 undefined 반환 커링 지원으로 속성 이름을 고정해 재사용 가능한 픽커 함수 구성에 유리함 시그니처 ...

February 4, 2026

JavaScript Array.prototype.map 개념과 사용법 정리

개념/배경 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] 객체 배열에서 특정 속성 추출 ...

November 15, 2025

커링과 부분 적용 이해하기: 함수형 자바스크립트 핵심 패턴

개요 커링 Currying은 여러 개의 인자를 받는 함수를 단일 인자 함수들의 연속으로 변환하는 기법 n개의 인자를 받는 함수 → n번에 걸쳐 한 개 인자씩 받는 함수 체인으로 분해 함수형 프로그래밍 맥락에서 재사용성과 조합성 향상 목적 핵심 개념 커링 currying: f(a, b, c) 형태를 f(a)(b)(c)로 바꾸는 변환 부분 적용 partial application: 전체 인자 중 일부를 고정해 새로운 함수를 만드는 기법 관계: 커링된 함수는 부분 적용을 자연스럽게 지원함 동작 원리와 간단 예시 일반 함수 ...

November 13, 2025

JavaScript 함수는 왜 일급 객체인가 — 의미와 활용

개요 JavaScript에서 함수는 일급 객체로 취급됨 이는 함수가 값처럼 변수에 담기고, 인수로 전달되고, 반환값으로 나오며, 객체의 프로퍼티로 저장될 수 있음을 의미함 이 특성 덕분에 고차 함수, 콜백, 클로저, 함수 합성 같은 패턴이 자연스럽게 구현됨 핵심 개념 변수에 할당 가능 다른 함수의 인수로 전달 가능 다른 함수의 반환값으로 사용 가능 객체의 프로퍼티로 저장 가능 간단 예시 변수에 할당 const greet = (name) => `Hello, ${name}`;인수로 전달 const run = (fn, v) => fn(v); run(greet, "Bob");반환값으로 사용 및 클로저 const mul = (m) => (v) => v * m; mul(2)(5);객체 프로퍼티로 저장해 메서드 구성 ...

October 27, 2025