DBILITY

javascript map reduce 본문

front-end & ui/javascript

javascript map reduce

DBILITY 2022. 1. 5. 11:38
반응형

hadoop에 mapper,reducer를 생각하면 된다.java stream의 map,reduce도 있다.

입력요소를 x,출력요소를 y라 할때 x,y집합의 일대일대응 함수관계가 map

y요소가 하나일때를 reduce로 보면 된다.

map은 글자 그래도 요소마다 각각 적용할 수 있다.

reduce는 결과가 요소집합에 대해 하나다. summary를 상상하자. 끝.

이거 보고 광고 한번 안 누른 이는 삼대가 재수가 없을지어다!ㅋㅋ

다음과 같은 기본 배열 데이터가 있다.

var data = [
  {
    id: 0,
    title: '해운대LCT - 가운데 라인 로얄층으로 위아래 우연히 공인중개사가 소개함',
    price: 30.5
  },
  {
    id: 1,
    title: '대장동 헐값 분양아파트 - 퇴직금도 못받고 아빠가 미안해',
    price: 15.2
  },
  {
    id: 2,
    title: '내곡동1334평. 기억에 겸손하고 팔에감어를 신는 분만! 애완동물 불가능 🐶',
    price: 34.8
  }
]

동일데이터를 저장하면서 object내의 id값은 원본 데이터의 최대값 이후부터 부여하려고 한다. 다음과 같은 결과를 원한다.

var copyData = [
  {
    id: 0,
    title: '해운대LCT - 가운데 라인 로얄층으로 위아래 우연히 공인중개사가 소개함',
    price: 30.5
  },
  {
    id: 1,
    title: '대장동 헐값 분양아파트 - 퇴직금도 못받고 아빠가 미안해',
    price: 15.2
  },
  {
    id: 2,
    title: '내곡동1334평. 기억에 겸손하고 팔에감어를 신는 분만! 애완동물 불가능 🐶',
    price: 34.8
  },
  {
    id: 3,
    title: '해운대LCT - 가운데 라인 로얄층으로 위아래 우연히 공인중개사가 소개함',
    price: 30.5
  },
  {
    id: 4,
    title: '대장동 헐값 분양아파트 - 퇴직금도 못받고 아빠가 미안해',
    price: 15.2
  },
  {
    id: 5,
    title: '내곡동1334평. 기억에 겸손하고 팔에감어를 신는 분만! 애완동물 불가능 🐶',
    price: 34.8
  }
]

reduce를 이용해 원본데이터에서 id의 최대값을 구하고(accumulator에 currentValue를 누산[임시저장]), map을 이용해 id값을 각각 증가시켜 주면 된다.

let copyData = [...data]

let maxId = data.reduce((accumulator,currentValue)=>{
	return Math.max(accumulator,(currentValue.id));
},0);

let rsData = copyData.map((v)=>{
	v.id=++maxId;
	return v;
});

console.log(rsData);

copyData = [...data,...copyData];

console.log(copyData);

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

 

Array.prototype.map() - JavaScript | MDN

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

developer.mozilla.org

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

 

Array.prototype.reduce() - JavaScript | MDN

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

developer.mozilla.org

 

반응형
Comments