웹 개발/🌐 JavaScript

reduce()

2025. 4. 28. 12:19
목차
  1. reduce() 함수
  2. 기본문법
  3. 기본 사용 예제
  4.  
  5. 작동방식

reduce() 함수

reduce()는 JavaScript에서 배열을 하나의 값으로 축소하거나 누적하는 데 사용되는 메서드입니다. 배열의 각 요소를 순차적으로 처리하면서 누적된 값을 반환합니다. 배열의 항목을 반복하면서 각 항목을 결합하거나 변형할 수 있는 매우 유용한 메서드입니다.

 

reduce()는 배열을 단일 값으로 집계하거나 복합적인 작업을 할 때 강력하게 사용됩니다.

 

기본문법

array.reduce((accumulator, currentValue, currentIndex, array) => {
  // 반환할 값은 accumulator
}, initialValue);

 

accumulator : 누적된 값. 이전 반복에서 반환된 값이 여기에 들어옵니다.

currentValue : 현재 배열의 값

currentIndex : 현재 항목의 인덱스 (선택적)

array : reduce() 가 호출된 배열 (선택적)

initialValue : 첫번째 반복에서 사용되는 초기값. 이 값을 제공하지 않으면 배열의 첫 번째 요소가 기본값으로 사용됩니다.

 

기본 사용 예제

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);  // 10

 

 

작동방식

예제1) 배열의 합 구하기

reduce()는 배열을 한 번 순회하면서, 누적값을 반환합니다. 이때 초기값을 설정하면 첫 번째 항목부터 시작하고, 초기값을 설정하지 않으면 배열의 첫번째 항목을 초기값으로 사용합니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

배열을 순회하면서 각 항목을 acc 에 더하여 합을 계산합니다.

 

예제2) 배열을 객체로 변환하기

배열의 항목을 키-값 쌍으로 변환하려면 reduce()를 사용할 수 있습니다.

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const peopleObject = people.reduce((acc, person) => {
  acc[person.name] = person.age;  // name을 키로 하고, age를 값으로 저장
  return acc;
}, {});  // 초기값은 빈 객체 {}

console.log(peopleObject);
// { Alice: 25, Bob: 30, Charlie: 35 }

배열 내 객체의 속성 중 하나를 키로, 나머지 속성을 값으로 사용하는 방식입니다.

반응형

'웹 개발 > 🌐 JavaScript' 카테고리의 다른 글

JavaScript 디스트럭처링 + 변수 이름 바꾸기 한 방에 이해하기  (1) 2025.06.19
Three.js | nginx 사용시  (0) 2025.06.18
Nullish Coalescing Operator (??)  (0) 2025.04.28
Optional Chaining (?.) 문법  (0) 2025.04.28
flatMap()함수  (0) 2025.04.28
  1. reduce() 함수
  2. 기본문법
  3. 기본 사용 예제
  4.  
  5. 작동방식
'웹 개발/🌐 JavaScript' 카테고리의 다른 글
  • JavaScript 디스트럭처링 + 변수 이름 바꾸기 한 방에 이해하기
  • Three.js | nginx 사용시
  • Nullish Coalescing Operator (??)
  • Optional Chaining (?.) 문법
이재원
이재원
이재원
깃든블로그
이재원
유튜브
깃허브
전체
오늘
어제
글쓰기 관리
  • 분류 전체보기 (452)
    • WORK (11)
      • ✍🏻 기록 (8)
      • PLC (1)
    • DevOps (30)
      • 🛠️ CICD (9)
      • 🐳 Docker & Kubernetes (12)
      • 📡 AWS (3)
      • 🌌 Git (6)
    • 웹 개발 (197)
      • 🖥️ HTML&CSS (11)
      • 🌐 JavaScript (39)
      • 🍃 SpringBoot (51)
      • 🎆 JSP (15)
      • 🐍 Python (16)
      • ⚛️ React (15)
      • #️⃣ TypeScript (15)
      • 🧊 ThreeJS (13)
      • 🟩 Node.js (16)
      • 🚨 Error Log (6)
    • 서버&백엔드 (100)
      • 🔥 JAVA (51)
      • 🗃️ DataBase (21)
      • 🐧 Linux (21)
      • 🖥️ Windows (7)
    • AI (6)
      • 🤖 딥러닝 (6)
    • 앱 개발 (1)
      • 📱 Flutter (1)
      • ReactNative (0)
    • 컴퓨터 과학 (71)
      • 🀰 디자인패턴 (10)
      • 🔢 자료구조 (11)
      • 🛜 네트워크 (12)
      • 🖥️ 운영체제 (1)
      • 🔆 프로그래밍 (5)
      • 💯 코테 (32)
    • 개인프로젝트 (4)
      • 🤪 forfun (2)
      • 💼 포트폴리오 (1)
      • 🍎 MacBook (1)
    • 자격증 (1)
      • 💯 OPIC (0)
      • 자격증 (1)
    • 꿀팁 (9)
      • ✨ 유용한 사이트 (8)
      • 📙 티스토리 (1)
    • 여행 (1)
      • ✈️ 해외여행 (1)
      • 🗺️ 국내여행 (0)
    • 음식 (6)
      • 🏰 맛집 (5)
      • 🍰 요리 (1)
    • 일상 (4)
      • 🎨 만들기 (1)
      • 🛒 쇼핑 (2)
      • 👟 운동 (1)
    • 유튜브 (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 청담메종
  • 한식
  • springboot
  • thymleaf
  • 맛집
  • 코테
  • 러닝
  • 키오스크 공익
  • 오블완
  • 티스토리챌린지
  • 이천
  • 식권관리
  • 키오스크공익
  • 사케
  • 영등포구청
  • 존맛
  • 한강
  • 스프링부트
  • 안국역
  • java
  • nestjs
  • 양평역
  • 이자카야
  • 까르띠에
  • 코딩테스트
  • 역삼
  • 키오스크
  • 가성비
  • JPA
  • 인사동
반응형
이재원
reduce()
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.