[JavaScript] 자바스크립트 배열 요소 하나로 정리하기(합치기)

057_자바스크립트 배열 요소 하나로 정리하기(합치기)

[적용]

• 배열의 요소를 계산하여 하나의 값으로 만들고 싶을 때

---

[문법]

메소드	의미	반환
배열.reduce(콜백함수, [초기화*])	요소(좌->우)를 처리하여 하나의 값 생성	임의 지정값
배열.reduceRight(콜백함수, [초기화*])	요소(우->좌)를 처리하여 하나의 값 생성	임의 지정값

* 생략 가능

[문법] - 콜백 함수

구문	의미
((이전요소, 현재요소, 인덱스, 기존배열) => { /* 처리내용 */}	임의의 처리

---

[내용]

reduce()는 배열 요소를 하나의 값으로 반환한다. 배열에 3개의 값을 넣고 합계를 구하는 샘플을 확인해 보자.

// 3개의 값을 가지는 배열
const priceList = [100, 500, 900]

// 합계를 저장하는 변수
const sum = priceList.reduce((previous, current) => {
    return previous + current;
});

// 다음과 같이 생략 가능
// priceList.reduce((previous, current) => previous + current);

console.log(sum);  // 결과: 1500

 

다음과 같이 for문을 사용해도 reduce()와 같은 방식으로 처리가 가능하지만, 조금 더 복잡해진다.

// 3개의 값을 가지는 배열
const priceList = [100, 500, 900];

// 합계를 저장하는 변수
let sum = 0;

// 루프 처리를 사용한 계산
for (const price of priceList) {
    sum += price;
}

console.log(sum);  // 결과: 1500

 

2차 배열을 1차 배열로 만드는 플래트닝(Flattening)에도 사용할 수 있다.

const array = [['바나나', '사과', '딸기'], ['귤', '포도']];

const flattenedArray = array.reduce((previousValue, currentValue) => {
    return previousValue.concat(currentValue);
}):

console.log(flattenedArray);  // 결과: ["바나나", "사과", "딸기", "귤", "포도"]

 

reduce()는 요소의 처리 작업이 좌에서 우로 이루어지며, reduceRight()는 우에서 좌의 순서다.

const array = ['사자', '여우', '호랑이'];

const members1 = array.reduce((previous, current) => {
    return `${prvious}와 ${surrnet}`;
});
console.log(members1);  // 결과: "사자와 여우와 호랑이

const members2 = array.reduceRight((previous, current) => {
return `${previous}와 ${current}`;
});
console.log(members2);  // 결과: "호랑이와 여우와 사자

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김