TIL) forEach, for of, for in, filter, reduce, map 정리, 자바스크립트

 

forEach 함수와 for of // 배열에서 쓴다. 

 

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

numbers.forEach(function(el) {
	console.log(el)
})

// forEach와 for of 역할은 같다

for (let el of numbers) {
	console.log(el);
}

//출력
1
2
3
4
5
6
7

 

요즘에는 forEach를 잘 사용하지 않는다고 한다.

더 쉽고 간편한 for of가 생겼으니까!!

 

 

---

for in // 객체에서 쓰인다. 객체 안의 모든 키를 출력한다. 

const hailie = {
	name: 'hailie',
    age:2,
    city:'hawaii'
}

for(key in hailie) {
	console.log(value);
}

// 출력값
name
age
city

---

 

화살표 함수

 

const square = (x) => {
	return x * x;
}

const square = x => {
	return x * x;
}
// 매개변수가 1개라면 괄호 굳이 안써도 된다. 일터의 환경에 따라 맞는 방법을 쓰면 된다. 



const sum = (x, y) => {
	return x + y;
}

const rollDie = () => {
	return Math.floor(Math.random() * 6) + 1
}
// 전달될 인수가 없다면 빈칸으로 둬도 된다!

 

---

 

filter // 새 배열을 만든다. // 기존 배열의 요소 중에서 정수기처럼 내가 원하는 조건에 부합하는 요소만 뽑아내서 새로운 배열로 만든다. 

const numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

numbers.filter(n => {
	return n < 10
})

// 출력값: [1, 2, 3, 4, 5, 6, 7, 8, 9]
// numbers는 [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] 

// 아하! filter는 새 배열을 만드는구나!

 

평점이 가장 높은 아이템, 오래된 아이템, 새로운 아이템 등을 필터링할 때 유용하다.

 

const goodMovies = movies.filter(m => m.score > 80)
const goodTitles = goodMovies.map(m => m.title)

// 아래 코드와 같은 결과를 출력한다. 

movies.filter(m => m.score > 80).map(m => m.year > 2000)

 

 

---

reduce() 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용한다. 

 

배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴한다. 

 

누적, 현재, 초기값이 중요하다!

acc: accumulation 응축된 값

cur: current 현재 배열 요소

 

let arr = [1,2,3,4,5]

arr.reduce((arr,cur) => {return acc + cur});

 

let arr = [1,2,3,4,5]

arr.reduce((acc,cur) => {

if(cur % 2 === 0) {

return acc + cur

} else {

return acc

}

},0)

 

1. 초기값이 없을때

 

acc는 배열의 첫번째 요소

cur는 배열의 두번째 요소

 

마지막에는 최종적인 acc값이 리턴되는거다. 

 

 

    2. 초기값이 있을때

 

초기값이 acc가 되는거고,

cur은 배열의 첫번째 요소가 되는거다. 

 

초기값 있으면 반복횟수가 없을때보다 한번 더 많다. 

 

const prices = [1000, 1500, 2000, 8000, 12000];

let total = 0;
for (let price of prices) {
	total += price
}
console.log(total);
// 결과값: 24500

// 👇아래 코드도 같은 결과값이 나온다. 

const total = prices.reduce((total, price) => {
	return total + price
})
console.log(total);
// 결과값: 24500

// 👇아래 코드도 같은 결과값이 나온다.

const total = prices.reduce((total, price) => total + price)

 

 

---

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 

 

// 배열 내의 모든 요소에 원하는 함수의 파라미터로 넘겨준다. 

 

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]