map함수란? reduce함수란? (코드쉽게 보는법 인자이름 한국어로 잡기)

내용출처: https://youtu.be/Q8g0tULRWn0

설명 굿!

 

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

반복문 돌면서 배열안의 요소들을 짝지어서 실행시켜주는 것.

기존객체를 건들지 않고 새 배열을 만든다. 

 

 

map함수는 배열에서 사용가능하다  //for문이랑 비슷

//map 함수 배열에서 사용가능
const arr = [1, 2, 3];
console.log(arr);
//배열안에 있는 값을 2씩 더해보려고 함
//for문쓰는 법
// const res = [];
// for (let i = 0; i < arr.length; i++) {
//   res.push(arr[i] * 2);
// }

// console.log(res);
//map함수 쓰기
//map함수 안에 callback함수 들어감
const res1 = arr.map((값) => {
  return 값 * 2;
});
console.log(res1);

 

(안에 들어가는 인자 내마음대로 '값'이라고 지정해서 씀)

 

 

 

화살표 간단하게 짧게 줄여서 쓸 수도 있다. 

//화살표 간단하게 짧게 줄여서 쓸 수 도 있음
const res2 = arr.map((값) => 값 * 3);
console.log(res2);

 

만약에 인덱스에도 접근하고 싶으면 다음에 적으면 됨 

(값, 인덱스) 두번째에 들어가는게  인덱스자리야

//만약에 인덱스에도 접근하고 싶으면
const res3 = arr.map((값, 인덱스) => 인덱스);
console.log(res3);

지금은 배열안에 있는 게 숫자인데

객체여도 가능하다

/지금은 배열안에 있는게 숫자인데 객체여도 가능하다!
const items = [
  { id: 1, name: "kaka" },
  { id: 2, name: "coco" },
];
const result = items.map((아이템) => {
  id: 아이템.id;
});

console.log(result);

 

 

객체를 return할 때는 중괄호를 해주고 리턴해야한다!!

//객체를 return할때는 중괄호를 해주고 리턴해야되지요
const result1 = items.map((아이템) => {
  return { id: 아이템.id };
});

console.log(result1);

 

 

 

추가 설명 여기 보기 ▼

map 사용법

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것이다.

const numbers = [1];

numbers.map((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number * number;
});

map을 사용하는 경우 주로 number에 해당하는 요소 값을 많이 활용하지만 index와 array도 함께 사용할 수 있다.

출처: https://7942yongdae.tistory.com/48 [프로그래머 YD]

 

Javascript - Array map 사용법

 

 

 

reduce함수 

반복되는 모든 것에 쓸 수 있음. 초기값활용해서 쓸 수 있다. 

reduce메서드 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

누적값을 쓴다는 것에 명심!!!

출처: https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍

(코드따라치면 이해할 수 있음요.)

 

//reduce 함수/////////////////////////////////////////////////
//배열.reduce((누적값, 현잿값, 인덱스, 요소)
//=> { return 결과 }, 초깃값);
const abc = [1, 2, 3];
const result2 = abc.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 0);

console.log(result2);

//a가 초기값인 0부터시작해서 return하는 대로 누적되는거임
//0,1,0
//1,2,1
//3,3,2

//초기값이 없을경우!
//abc=1,2,3
const resultNoInit = abc.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
});

console.log("초기값없는경우", resultNoInit);
//0,1,0
//1,2,1
//3,3,2
//6

const abc2 = [0, 2, 4];
const result3 = abc2.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 0);

console.log(result3);
//0,0,0
//0,2,1
//2,4,2
//6

const result4 = abc2.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 5);

console.log(result4);
//5,0,0
//5,2,1
//7,4,2
//11

실제 결과

 

 

그래서 map함수예시도 reduce써서 가능하다

 

//map함수 예제를 reduce로 만들어보겠다
const 원투쓰 = [1, 2, 3];
결과 = 원투쓰.reduce((누적값, 현재값) => {
  누적값.push(현재값 % 2 ? "홀수" : "짝수");
  return 누적값;
}, []);

//초기값 빈배열......
//홀수, 짝수,홀수