Map(), Filter()

강다현·2022년 1월 18일
0

2주차

목록 보기
2/5

Map()

  • 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과로 새로운 배열을 반환

const classmates = ["철수", "영희", "훈이"]

classmates.map((el) => (el + "어린이"))

**결과값
const classmates = ["철수어린이", "영희어린이", "훈이어린이"]

const classmates = [
	{ name: "철수" },
	{ name: "영희" },
	{ name: "훈이" },
]

classmates.map((el) => ({name: el.name + "어린이"}))
또는
classmates.map((el) => ({name: `${el.name}어린이`}))

**결과값
[
  { name: '철수어린이' },
  { name: '영희어린이' },
  { name: '훈이어린이' }
]

const classmates = [
	{ name: "철수", age: 13 },
	{ name: "영희", age: 10 },
	{ name: "훈이", age: 11 }
]

classmates.map((el) => ({ name: el.name, age: el.age, school:"토끼초등학교" }))

**결과값
[
  { name: '철수', age: 13, school: '토끼초등학교' },
  { name: '영희', age: 10, school: '토끼초등학교' },
  { name: '훈이', age: 11, school: '토끼초등학교' }
]

괄호 생략 가능(화살표 함수)
const classmates = ["철수", "영희", "훈이"]

classmates.map((el) => (el + "어린이"))
↓ ()괄호 생략 가능
classmates.map(el => el + '어린이')

** 여기서의 {}는 객체의 {}가 아니라 함수의 {}이다
const classmates = [
	{ name: "철수" },
	{ name: "영희" },
	{ name: "훈이" },
]

classmates.map((el) => ({name: el.name + "어린이"}))

↓ ()괄호 생략 불가능

classmates.map((el) => {name: el.name + "어린이"})

Filter()

  • 조건이 참인 경우의 조건들만 배열로 반환시킴.

const ages = [10, 13, 11]

ages.filter((el) => (el >= 11))

// 11 이상의 수만 걸러 값을 반환시킴

const classmates = [
	{ name: "철수", age: 13 },
	{ name: "영희", age: 10 },
	{ name: "훈이", age: 11 }
]

classmates.filter((el) => (el.age >= 11))

**결과값
[
  { name: '철수', age: 13 },
  { name: '훈이', age: 11 }
]

// 배열 안 age에서 11이상의 값을 반환

fillter와 map을 같이 사용

const classmates = [
	{ name: "철수", age: 13 },
	{ name: "영희", age: 10 },
	{ name: "훈이", age: 11 }
]
classmates
  .filter((el) => (el.age >= 11))
  .map((el) => ({ name: el.name, age: el.age, school: "다람쥐초등학교"}))

// fillter와 map을 같이 사용

**결과값
[
  { name: '철수', age: 13, school: '다람쥐초등학교' },
  { name: '훈이', age: 11, school: '다람쥐초등학교' }
]

// fillter에서 'age가 11이상의 값을 반환'하고
// map에서 filltering된 값에서 school을 값을 삽입
profile
Hello🖐

0개의 댓글