[javascript] Array.reduce() + 예제

2023. 12. 13. 04:29· Frontend/javascript

 

배열 내 요소의 합을 구하는 문제를 풀다가 reduce의 자세한 문법을 몰라서 반복문을 이용했다.

풀이는 해결은 했지만, 그래도 이번 기회에 array의 reduce 메소드를 공부하며 알게 된 내용을 기록해본다.

 


 

Array.reduce()

각 요소에 대해 주어진 콜백(callback) 함수를 실행하여 배열을 단일 값으로 축소하는 배열 메서드.

즉, 배열을 반복하면서 원하는 로직을 적용하는 부분에서 이용할 수 있다.

 


 

 

기본 사용법

 

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

 


매개변수 종류

 

1. callback : 각 요소에 대해 실행할 함수로, 다음 네 개의 매개변수를 받는다.

- accumulator 누적된 값. 각 요소를 통과하며 값이 누적됨

- currentValue 현재 처리 중인 요소의 값

- index (옵션) 현재 처리 중인 요소의 인덱스

- arrray (옵션) reduce를 호출한 배열

 

2. initialValue (옵션) : callback 함수의 첫 번째 호출에서 사용할 초기값. (미지정 시 배열의 첫 번째 요소 사용)

 


 

 

Array.reduce() 예제 문제

 

1. 배열의 합 구하기

// 배열의 합 구하기

function sumArray(arr) {
  // 이곳에 코드를 작성
}

const arr = [1, 2, 3, 4, 5];
const result = sumArray(arr);
console.log(result); // 출력: 15

 

정답

 

function sumArray(arr) {
  return arr.reduce((acc, curr) => acc + curr, 0);
}

 

 

2. 배열의 최대값 찾기

// 배열의 최대값 찾기

function findMaxValue(arr) {
  // 이곳에 코드를 작성
}

const arr = [3, 7, 1, 9, 4];
const result = findMaxValue(arr);
console.log(result); // 출력: 9

 

정답

 

function findMaxValue(arr) {
  return arr.reduce((acc, curr) => Math.max(acc, curr), arr[0]);
}

 

 

3. 배열의 요소 문자열로 결합하기

// 배열의 요소 문자열로 결합하기

function mergeStringArray(arr) {
  // 이곳에 코드를 작성
}

const arr = ['Hello', ' ', 'World', '!'];
const result = mergeStringArray(arr);
console.log(result); // 출력: 'Hello World!'

 

정답

 

function mergeStringArray(arr) {
  return arr.reduce((acc, curr) => acc + curr, '');
}

 


 

 

더 자세한 설명은 mdn에 잘 나와 있다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

 

Array.prototype.reduce() - JavaScript | MDN

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

developer.mozilla.org

 

 

728x90
저작자표시 (새창열림)

'Frontend > javascript' 카테고리의 다른 글

자바스크립트 매개변수 기본값 처리에 대해서  (2) 2024.10.17
jQuery 선택자를 이용해서 DOM 요소를 선택할 때 주의점  (0) 2024.03.29
[javascript] 클립보드 제어하기 + 예제  (0) 2023.12.14
[JavaScript] Ajax와 오픈 API를 이용한 영화 목록 불러오기  (0) 2020.02.19
[JavaScript] Ajax  (0) 2020.02.19
'Frontend/javascript' 카테고리의 다른 글
  • jQuery 선택자를 이용해서 DOM 요소를 선택할 때 주의점
  • [javascript] 클립보드 제어하기 + 예제
  • [JavaScript] Ajax와 오픈 API를 이용한 영화 목록 불러오기
  • [JavaScript] Ajax
민57
민57
IT 개발 및 노션 관련 이것저것
youngdevIT 개발 및 노션 관련 이것저것
민57
youngdev
민57
전체
오늘
어제
  • 분류 전체보기 (105)
    • Dev logs (6)
    • Frontend (4)
      • javascript (19)
      • typescript (0)
      • html & css (4)
      • vuejs & reactjs (3)
      • programmers (1)
      • jsp (1)
    • Backend (38)
      • express (1)
      • php (27)
      • git & linux (7)
      • unity (3)
    • 개발 지식 (22)
      • computer science (3)
      • errors (4)
      • tool (8)
      • util (7)
    • Notion (3)
      • template (1)
      • widget (2)
    • 취미 (2)
      • github (1)
      • game (1)
    • 일상 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • IntelliJ
  • 토이프로젝트
  • 리렌더링
  • notion
  • 오블완
  • 자바스크립트
  • javascript
  • react
  • sql문제
  • vue 토이프로젝트
  • php기초
  • PHP함수
  • 노션
  • 자바스크립트모듈
  • 자바스크립트콘솔
  • javascript-archive
  • 리액트기본
  • 맥북필수프로그램
  • 웹사이트모음
  • 맥북포맷
  • 동적선택기
  • 티스토리챌린지
  • PHP
  • vue
  • JS
  • vuejs
  • miny위젯
  • 리액트
  • 리액트입문
  • 노션위젯

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
민57
[javascript] Array.reduce() + 예제
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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