map(), filter()

array.map()

배열을 순서대로 돌면서 인자로 전달된 함수를 실행하여 나온 결과를 새 배열로 반환

인자로는 함수가 들어가는 듯

let students = [
  {id:1, name: 'Mike'},
  {id:2, name: 'Lisa'},
  {id:3, name: 'Tim'},
];

let names = students.map(student => student.name);

console.log(names);
// ['Mike', 'Lisa', 'Tim']

 

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

let newNumbers = numbers.map(number => number * 2);

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

 

이렇게도 사용 가능

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

let newNumbers = numbers.map(array => array.map(number => number * 2));

console.log(newNumbers);
// [Array(3), Array(2), Array(3)]
// 0: (3) [2, 4, 6]
// 1: (2) [8, 10]
// 2: (3) [12, 14, 16]

+

map은 배열을 반복해 새로운 배열을 return 해줌

forEach는 return없이 배열을 단순 반복 작업을 할 때 사용

> 반복횟수는 배열의 길이만큼이라서 배열에 추가하는 메소드는 첫 배열의 길이만큼 추가함

하지만 배열에 제거하는 메소드는 줄어든만큼 반복도 줄어듦

---

habits라는 배열에서 받아온 habit이라는 인자와 id가 같으면 count를 내려주는 로직을 짜고 싶은데

handleDecrement = (habit) => {
    const habits = this.state.habits.map((item) => {
      if (item.id === habit.id) {
        const count = habit.count - 1;
        return { ...habit, count: count < 0 ? 0 : count };
      }
    });
    this.setState({ habits });
  };

이렇게 쓰면 에러가 남

Array.prototype.map() expects a value to be returned at the end of arrow function

map()은 화살표 함수의 끝에 리턴되는 값을 받는다

 

handleDecrement = (habit) => {
    const habits = this.state.habits.map((item) => {
      if (item.id === habit.id) {
        const count = habit.count - 1;
        return { ...habit, count: count < 0 ? 0 : count };
      }
      return item; // 조건문이 실행되지 않았을 때를 위한 return도 적어줄 것
    });
    this.setState({ habits });
  };

if 조건문 안에만 생각하고 return을 적어주지 않아서 그랬음!!!!

map()을 사용할 때는 잊지 말고 return을 적어주기

---

array.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

true를 반환하면 값을 가져오고 false를 반환하면 값을 버림

어떤 테스트도 통과하지 못하면 빈 배열을 반환

let flowers = ['튤립','해바라기','히아신스','장미','수선화','은방울꽃'];

let result = flowers.filter(flower => flower.length > 3);

console.log(result);
// ['해바라기', '히아신스', '은방울꽃']

 

function aboveTen(number) {
  return number > 10;
}

let numbers = [2,45,6,23,7,10].filter(aboveTen);

console.log(numbers);
// [45, 23]

 

function isEven(number) {
  return number % 2 == 0;
}

let filtered_numbers = [1,2,4,5,6,7,8].filter(isEven);

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

let snack = ['감자깡','고구마깡','양파링','새우깡','오잉'];

let filterItems = (query) => {
  return snack.filter(snack => snack.indexOf(query) > -1);
  // indexOf(인자) : 인자를 찾을 수 있는 인덱스를 반환
}

console.log(filterItems('깡'));
// ['감자깡', '고구마깡', '새우깡']

 

이렇게도 사용 가능

let students = [
  {id:1, name:'철수', age:12},
  {id:2, name:'맹구', age:36},
  {id:3, name:'짱구', age:12},
  {id:4, name:'훈이', age:44},
  {id:5, name:'유리', age:20},
];

const adult = students.filter(student => student.age > 19);

const names = adult.map(student => student.name);

console.log(names);

 

+

filter는 찾으려는 내용을 반복실행해 모두 찾아냄

find는 찾으려는 내용의 첫번째를 발견하면 종료됨 > 찾을 내용이 없으면 undefined을 반환