JS : Array.map(), Array.filter(), Array.reduce()

Array.map()

🔗 참고자료
MDN map
ZEROCHO map, reduce 활용하기

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

⚙️ 적용 예시

• 배열의 숫자를 받아 새로운 배열 생성

// 1번
let arr = [1,2,3,4,5];
let maps = arr.map((x) => x*2);

console.log(maps); // [ 2, 4, 6, 8, 10 ]


// 2번
let arr = [1,2,3,4,5];
let maps = arr.map((x,i) => {
  return x*i;
});

console.log(maps); // [ 0, 2, 6, 12, 20 ]

• 원본 배열과 매핑 배열 차이점

let arr = [1,2,3,4,5];
let maps = arr.map((x) => {
  return x;
});

console.log(maps);

// 원본 배열 != 매핑된 배열
console.log(maps===arr); // false

• map과 if문 활용

let lst = [11, 22, 33, 44, 55]

let maps = lst.map((x) => {
  if(x % 2 === 0) {
    // 짝수
    return "Even";
  } else {
    // 홀수
    return "Odd";
  }
});

console.log(maps); // [ 'Odd', 'Even', 'Odd', 'Even', 'Odd' ]

Array.filter()

🔗 참고자료
MDN filter
컴퓨터 공부하는 블로그 자바스크립트 고차함수 - filter()
프로그래머YD Javascript - Array filter 사용법

filter() 메소드는 주어진 함수의 테스트 조건과 일치하는 모든 요소를 모아 새로운 배열을 생성하여 반환한다.

⚙️ 적용 예시

• 배열에서 만족하는 요소 찾기

let email = [
  "qwerty11@naver.com",
  "dkssud984@gmail.com",
  "popo88po@naver.com",
  "cocoa12@naver.com",
  "happytime1@gmail.com",
];

// includes("@gmail") : "@gmail"을 포함하는 요소를 찾는다.
let gmails = email.filter(item => item.includes("@gmail"));

console.log(gmails);  // [ 'dkssud984@gmail.com', 'happytime1@gmail.com' ]

• 배열 안에 있는 딕셔너리에서 만족하는 요소 찾기

let person = [
  { 'name': 'Holy', 'age': 34 },
  { 'name': 'Smith', 'age': 16 },
  { 'name': 'Kate', 'age': 23 },
  { 'name': 'Shasha', 'age': 19 },
  { 'name': 'Lily', 'age': 27 },
  { 'name': 'Momo', 'age': 20 },
];

// 20살 이상
let value = person.filter(e => e.age >= 20);

console.log(value);
//[
//   { name: 'Holy', age: 34 },
//   { name: 'Kate', age: 23 },
//   { name: 'Lily', age: 27 },
//   { name: 'Momo', age: 20 }
// ]

• 다중 조건에서 만족하는 요소 찾기

let lst = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let value = lst.filter(num => {
  if(num>=4 && num<=7){
    return true;
  }
  return false;
});

console.log(value); // [ 4, 5, 6, 7 ]

• 중복제거

let lst = [1, 1, 2, 5, 7, 8, 9, 4, 6, 5, 3, 5];

// (값, 인덱스, 배열)
// num : 배열 lst의 원소들
// idx : 원소들 인덱스
// target : 호출한 배열 lst
let value = lst.filter((num, idx, target) => {
  if(target.indexOf(num)===idx){
    return true;
  }
});

console.log(value); // [ 1, 2, 5, 7, 8, 9, 4, 6, 3 ]

Array.reduce()

🔗 참고자료
MDN reduce
ZEROCHO map, reduce 활용하기

reduce() 메소드는 배열의 각 요소에 대해 reduce 함수를 실행하고, 하나의 결과값을 반환한다. 즉, 누적값을 반환한다.

⚙️ 적용 예시

• 1부터 5까지의 누적값

let lst = [1, 2, 3, 4, 5];

// acc : 누적값
// cur : 현재값
// i : 인덱스
// 0 : 초깃값 설정
let value = lst.reduce((acc, cur, i) => {
  console.log('누적값: ' + acc + ' 현재값: ' + cur + ' 인덱스: ' + i);
  return acc + cur;
}, 0);

console.log(value);
// 누적값: 1 현재값: 2 인덱스: 1
// 누적값: 3 현재값: 3 인덱스: 2
// 누적값: 6 현재값: 4 인덱스: 3
// 누적값: 10 현재값: 5 인덱스: 4
// 15

• 현재값과 누적값을 이용하여 배열에서 홀수 찾기

let lst = [1, 2, 3, 4, 5];

// acc : 누적값
// cur : 현재값
// [] : 배열 설정
let value = lst.reduce((acc, cur) => {
  // 홀수 찾기
  if (cur % 2) {
    acc.push(cur);
  }
  return acc
}, []);

console.log(value);  // [ 1, 3, 5 ]

• 현재값과 누적값을 이용하여 배열에서 홀/짝 찾기

let lst = [1, 2, 3, 4, 5];

// acc : 누적값
// cur : 현재값
// [] : 배열 설정
let value = lst.reduce((acc, cur) => {
  acc.push(cur % 2 ? '홀수' : '짝수');
  return acc;
}, []);

console.log(value);

---

🗓️ 수정 및 추가

• 2022.02.24
  1. 썸네일 변경
• 2022.03.09
  1. 제목 및 본문 제목 수정