JavaScript forEach, Map, Filter

1. Array.prototype.forEach

for문을 대체할 수 있는 고차함수

[4, 5, 6].forEach((item, index, arr) => 
console.log(`요소값 : ${item}, 인덱스값 : ${index}, this : ${arr}`))

// '요소값 : 4, 인덱스값 : 0, this : 4,5,6'
// '요소값 : 5, 인덱스값 : 1, this : 4,5,6'
// '요소값 : 6, 인덱스값 : 2, this : 4,5,6'

forEach 메서드를 호출한 배열의 요소값, 인덱스값, 배열을 순차적으로 전달함.
그로인하여 for문과 달리 break나 continue문을 사용할 수 없다.

//희소 배열
[4, , 6].forEach((item, index, arr) => 
console.log(`요소값 : ${item}, 인덱스값 : ${index}, this : ${arr}`))

//'요소값 : 4, 인덱스값 : 0, this : 4,,6'
//'요소값 : 6, 인덱스값 : 2, this : 4,,6'
// 인덱스 값이 1인 공란은 건너뛰고 순회함.

//희소 배열의 존재하지 않는 요소를 순회 대상에서 제외한다.

=> for문에 비해 성능은 좋지 않지만 가독성은 좋기에 복잡한 코드 혹은 높은 성능을 요하는 경우가 아니라면 forEach 메서드를 활용하는 것이 좋다.

2. Array.prototype.map

요소값을 다른 값으로 매핑(Mapping)한 새로운 배열을 생성하기 위한 고차함수
Map메서드가 생성하여 반환하는 새로운 배열의 Length 프로퍼티값은 Map 메서드를 호출한 배열의 Length 프로퍼티값과 반드시 일치한다. -> Map를 호출한 배열과 Map으로 생성하여 반환한 배열은 1:1로 매핑된다.

[4, 5, 6].map((item, index, arr) => {
console.log(`요소값 : ${item}, 인덱스값 : ${index}, this : ${arr}`);
return index;
})

// [ 0, 1, 2 ]
// '요소값 : 4, 인덱스값 : 0, this : 4,5,6'
// '요소값 : 5, 인덱스값 : 1, this : 4,5,6'
// '요소값 : 6, 인덱스값 : 2, this : 4,5,6'

Practice

const formatDate = (dates) => {
  let str = dates.map((x) => {
    let test = x.split("-");
    //각 배열을 돌면서 "-"를 기준으로 문자를 배열로 만듬
    return `${test[0]}년 ${test[1]}월 ${test[2]}일`;
  });
  return str;
};

console.log(formatDate(["2019-03-21", "2019-04-21", "2019-05-21"]));

//['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

3. Array.prototype.filter

콜백 함수의 반환값이 true인 요소만 반환 한다.

[1, 2, 3].filter((item, index, arr) => {
console.log(`요소값 : ${item}, 인덱스값 : ${index}, this : ${arr}`);
return item % 2; //홀수인 요소만 반환함.
})

Practice

class User {
  constructor() {
    this.user = [
      { id: 1, name: "lee" },
      { id: 2, name: "kim" },
    ];
  }

  findID(id) {
    return this.user.filter((user) => user.id === id);
    //아이디가 같은 값을 가진 배열을 반환함.
  }

  remove(id) {
    return this.user.filter((user) => user.id !== id);
    //아이디가 같지않은 값을 가진 배열을 반환함.
  }
}

const users = new User();

let user = users.findID(1);

console.log(user);

let user2 = users.remove(2);

console.log(user2);

React로 넘어가기전 부족했던 개념 다시 정리