reduce와 concat 활용하기

쇼핑몰 프로젝트를 하는 중인데 테마별로 옷을 보여주는 서비스를 제공하고 있어요.

이때 이 데이터들을 1차원 배열로 저장해야 하는데 이때 reduce와 concat을 알게 되어서 글 작성하는 중 입니다!

 

📌reduce()란 무엇인가

• 자신이 호출한 배열의 모든 요소를 순회하면서 누적된 값을 배열로 반환합니다.
• 대체로 많은 예제에서는 덧셈으로 자주 활용돼서 나옵니다.

 

📌concat()란 무엇인가

• 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환합니다.
• 배열 말고도 문자열을 연결할 때도 자주 사용합니다.

 

 

📌2차원 배열을 1차원으로 만들기

• 아까 말한 reduce()와 concat()으로 2차원 배열을 1차원 배열로 만들 수 있습니다.

1. reduce(): 배열 요소를 순회하는 역할을 합니다.

2. concat(): reduce에 누적된 값에 새로운 값을 추가해서 1차원 배열로 만드는 역할을 합니다.

 

// 초기값
let list = [];

// 1차원 배열을 저장할 변수
let data;

// 쇼핑몰 옷 종류들
const kind = [dress, jacket, coat, shirt, jeans, trouser, jogger, pullover];

// id 값에 따라 알맞는 테마를 적용합니다.
switch(id) {
  case 'date' : id = '데이트룩'; break;
  case 'interview': id = '면접룩'; break;
  case 'home': id = '집순이룩'; break;
  case 'work': id = '출근룩'; break;
  case 'campus': id = '캠퍼스룩'; break;
  case 'guest': id = '하객룩'; break;
}

// 옷 종류들 중 조건에 맞는 값만 넣기.
kind.forEach(k => {
  list.push(k.filter(k => k.theme.indexOf(id) > -1));
});

// 2차원 배열로 저장된 값을 1차원으로 저장하기
data = list.reduce((acc, cur) => { return acc.concat(cur)});

kind.forEach()에서는 빈배열([])이 들어오기도 하고, 각 옷종류 데이터들이 배열로 저장되어서 list에는 2차원 배열로 저장됩니다.
data에는 빈배열도 없애고, 1차원 배열로 만들고 싶어서 reduce()를 활용했습니다.

---

 

📌결과

1. reduce를 사용하기 전

list에 저장된 2차원 배열

 

 

2. reduce를 사용하기 후

data에 저장된 1차원 배열