[Javascript] ES6 문법

* filter, map, reduce, forEach, every, some, find 등이 있다(ES5이상부터 사용가능)

 

1. filter

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

let list = [
  { fruit: '사과', snack: '꼬북칩', food: '피자' },
  { fruit: '오렌지', snack: '새우깡', food: '햄버거' },
  { fruit: '사과', snack: '아우터', food: '쌀국수' }
]

// ※fruit가 '사과'인 data 출력

// 1. 기존 for문
let filteredArray = []
for (let i = 0; i < list.length; i++) {
  if (list[i].fruit === '사과') {
    filteredArray.push(list[i])
  }
}
// 2. filter 사용
let filteredArray = list.filter(function (value, index, arr) {
	return list.fruit === '사과'
})
// 3. filter와 화살표함수
let filteredArray = list.filter((data) => {
	return data.fruit === '사과'
})

 

2. map

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

let list = [
  { fruit: '사과', snack: '꼬북칩', food: '피자' },
  { fruit: '오렌지', snack: '새우깡', food: '햄버거' },
  { fruit: '사과', snack: '아우터', food: '쌀국수' }
]

// fruit은 모두 품절로,
// snack의 꼬북칩은 '꼬북칩(인절미)'로,
// food는 문장 끝에 '맛있다' 추가하기
// customer 추가하기

// 1. 기존 for문
let map = []
for (let i = 0; i < list.length; i++) {
  list[i].fruit = '품절'
  if (list[i].snack === '꼬북칩') {
    list[i].snack = '꼬북칩(인절미)'
  }
  list[i].food = list[i].food + '맛있다'
	list[i].customer = ''
  map.push(list[i])
}
// 2. map
let map = result.map(function(index) {
	index['fruit'] = '품절'
	index['snack'] = index['snack'] === '꼬북칩' ? '꼬북칩(인절미)' : index['snack']
	index['food'] = index['food'] + '맛있다'
	index['customer'] = ''
	return index
})
// 3. map과 화살표함수
let map = result.map(index => {
	index['fruit'] = '품절'
	index['snack'] = index['snack'] === '꼬북칩' ? '꼬북칩(인절미)' : index['snack']
	index['food'] = index['food'] + '맛있다'
	index['customer'] = ''
	return index
})

 

3. reduce

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

let list = [
  { fruit: '사과', snack: '꼬북칩', food: '피자', salesRate: 350 },
  { fruit: '오렌지', snack: '새우깡', food: '햄버거', salesRate: 189 },
  { fruit: '사과', snack: '아우터', food: '쌀국수', salesRate: 756 }
]
// salesRate 최대값 가진 데이터 출력

// 1. for문
let reduce = []
let max = list[0].salesRate
for (let i=0; i < list.length; i++) {
	if (list[i].salesRate > max) {
    	max = list[i]
        reduce = list[i]
    }
}
// 2. reduce
var reduce = list.reduce(function (pre, value) {
    return pre.salesRate > value.salesRate ? pre : value
})

// 2. reduce와 화살표함수
let reduce = list.reduce((a, b) => {
	return a.salesRate > b.salesRate ? a : b
})

 

4. forEach

배열의 반복문으로 처음부터 마지막 요소까지 반복하여 실행

let list = [
  { fruit: '사과', snack: '꼬북칩', food: '피자', salesRate: 350 },
  { fruit: '오렌지', snack: '새우깡', food: '햄버거', salesRate: 189 },
  { fruit: '사과', snack: '아우터', food: '쌀국수', salesRate: 756 }
]
// 똑같은 list 만들기

// 1. for문
let forEach = []
for (let i=0; i<list.length; i++) {
	forEach.push(list[i])
}

// 2. forEach
let forEach = []
list.forEach(function(ele,index) {
	forEach.push(ele)
})

// 3. forEach와 화살표함수
let forEach = []
list.forEach((ele, index) => {
	forEach.push(ele)
})

 

5. every

성능을 위해 조건을 만족하지 않는 값이 발견되면 return false와 함께 순회가 중단

6. some

성능을 위해 조건을 만족하는 값이 발견되면 return true와 함께 순회가 중단

let list = [
  { fruit: '사과', snack: '꼬북칩', food: '피자', count: 2 },
  { fruit: '오렌지', snack: '새우깡', food: '햄버거', count: 3 },
  { fruit: '사과', snack: '아우터', food: '쌀국수', count: 15 }
]

/*
every
1. 모든 요소가 조건 충족시 return true
2. 불충족 발견시 남은요소 체크하지 않고 return false
*/
// 짝수가 아닌값이 있는지 검증...
let every = list.every((ele, index) => {
	return ele.count%2 === 0
})
// => 오렌지의 count:3이 홀수이므로 return false

/*
some
1. 1개의 요소만 충족해도 return true
2. 충족 요소 발견시 남은요소 체크하지 않고 return true
*/
// 짝수인 값이 있는지 검증...
let some = list.some(ele => {
	return ele.count%2 === 0
})
// => 사과의 count:2가 짝수이므로 return true

 

7. find

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환(else : undefined 반환)

let list = [
  { fruit: '사과', count: 2 },
  { fruit: '오렌지', count: 3 },
  { fruit: '사과', count: 0 },
  { fruit: '귤', count: 0 }
]

// 다팔린 fruit찾기
let find = list.find(element => {
	return element.count === 0
})
// { fruit: '사과', count: 0 } => 조건 충족하는 첫번째 요소만 반환