map, filter 함수

🚀 map() && filter()

• 공통점: 기존 배열은 그대로 두고, 각 배열 요소를 순회한 후 새로운 배열을 return
• 차이점:
  map()은 콜백함수가 적용된 새 배열 return
  filter()은 조건문을 만족한 요소들을 새로운 배열로 return

🎃 map()

배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴

🎃 filter()

배열을 순회하며 요소마다 조건 확인 후 조건을 만족하는 원소들로 구성된 새로운 배열 리턴
❗ 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 새로운 배열을 반환

예제1


// (1) map
let numbers = [1, 2, 3, 4, 5]

let new_num = numbers.map(function(num) {
			      return num * 2
                          })
console.log(numbers)
// [1, 2, 3, 4, 5]

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



// (2) filter
let numbers = [1, 2, 3, 4, 5]

let new_num = numbers.filter(number => number % 2 === 0)

console.log(numbers)
// [1, 2, 3, 4, 5]

console.log(new_num)
// [ 2, 4 ]

❗ 기존 배열에서 filtering이 필요한 조건을 걸어준다

---

예제2


let users = [
  { id:1, name:'id', age:36 },
  { id:2, name:'ds', age:32 },
  { id:3, name:'dw', age:32 },
  { id:4, name:'xc', age:37 },
  { id:5, name:'we', age:25 },
  { id:6, name:'th', age:26 },
  { id:7, name:'gh', age:31 },
  { id:8, name:'jh', age:23 },
]


// 1) 30세 이상인 users를 거른다
let over_30 = users.filter( user => user.age >= 30 )

//console.log(over_30)
// [
//  { id: 1, name: 'id', age: 36 },
//  { id: 2, name: 'ds', age: 32 },
//  { id: 3, name: 'dw', age: 32 },
//  { id: 4, name: 'xc', age: 37 },
//  { id: 7, name: 'gh', age: 31 }
// ]


// 2) 30세 이상인 users의 name을 출력
let over_30 = user.filter( user => user.age >= 30 )

let mapping = over_30.map(function(el) {
  return el.name
})

// console.log(mapping)
// [ 'id', 'ds', 'dw', 'xc', 'gh' ]