🤓알고 나면 개이득인 내장 함수를 알아보자
국비 학원에선 짧은 일정상 자바스크립트를 사실상 거의 배우지 않고 Jquery를 바로 배운다.
그렇기에 크게 자바스크립트 문법에 대해서 대부분이 알지 못한다.
프론트엔드에 관해서 공부하다가 자주 만나는 문법이 있었다.
바로 배열을 컨트롤 할 때 필수적인 filter(), map(), reduce()등이 있다.
알고 나면 매우 편한 이 배열 내장 함수에 대해서 알아보자.
forEach()
forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다.
- MDN -
기본 문법
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])forEach의 내부 모습 (예상)
function forEach(func, thiArg) {
for (let i = 0; i < a.length; i++) {
func(a[i], i)
}
}
예제
const arr = [10, 11, 12, 13, 14, 15]
arr.forEach((v, i) => {
console.log(v, i)
})
결과 :
10 (배열 요소의 값) 0 (인덱스 번호)
11 1
12 2
13 3
14 4
15 5
설명
위의 코드에서 인자에 있는 v는 배열 요소의 값이고, i는 인덱스의 번호이다.
forEach는 for대신에 사용할 수 있다. forEach는 요소들을 하나씩 돌면서 반복 호출하는 것이 특징이다.
map()
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
- MDN -
기본 문법
arr.map(callback(currentValue[, index[, array]])[, thisArg])map의 내부 모습 (예상)
function map(func, thisArg) {
const list = []
for (let i = 0; i < a.length; i++) {
list.push(func(a[i], i))
}
return list
}
예제
예제 1
const arr = [10, 11, 12, 13, 14, 15]
const answer = arr.map((v, i) => {
return v * v
})
console.log(answer)
// 결과 : [ 100, 121, 144, 169, 196, 225 ]
예제 2
const arr = [10, 11, 12, 13, 14, 15]
const answer = arr.map((v, i) => {
if (v % 2 === 0) {
return v
}
})
console.log(answer)
// 결과 : [ 10, undefined, 12, undefined, 14, undefined ]
// 이렇게 호출하면 우리는 짝수만 나올 것이라 예상하지만 map은 항상 똑같은 크기의 배열을 반환한다. 그래서 홀수는 undefined가 나오게 된다.
설명
map의 제일 핵심적인 특징은 값으로 새로운 배열을 반환한다는 것이다. 배열 안의 반복되는 데이터를 뽑아내야 할 때 주로 이용한다.
예제 2와 같은 경우에도 똑같은 크기의 배열을 반환한다.
filter()
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
- MDN -
기본 문법
arr.filter(callback(element[, index[, array]])[, thisArg])filter의 내부 모습 (예상)
const filter = ((func, thisArg) => {
const list = []
for(let i = 0; i<arr.length; i++){
if(function(a[i], i)) {
list.push(a[i])
}
return list
}
})
예제
예제 1
const arr = [10, 11, 12, 13, 14, 15]
let answer
answer = arr.filter((v, i) => {
return v % 2 == 0
})
console.log(answer)
// 결과: [10, 12, 14]
// 위에서 본 map과는 다르게 원본 배열의 사이즈가 그대로 나오지 않는다. 원본 배열에서 조건에 따라 추출하는 게 filter이다.
설명
먼저 봤던 map()과는 다르게 filter은 새로운 배열을 반환하지만, 똑같은 크기의 배열이 아닌 원본 배열에서 조건을 통과한 것만 반환되는 것이 특징이다.
reduce()
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
- MDN -
기본 문법
arr.reduce(callback[, initialValue])filter의 내부 모습 (예상)
const reduce = ((func, value) =>{
const result = value
for (let i = 0; i < arr.length; i++) {
result = func(result, a[i])
}
})
예제
예제 1
const arr = [10, 11, 12, 13, 14, 15]
let answer
answer = arr.reduce((acc, v) => {
return acc + v
}, 0)
console.log(answer)
// 결과 : 75 (배열 인덱스 값의 총합)
설명
reduce()는 배열이 아닌 요소의 값을 반환한다. 주로 누산기라는 개념을 통해서 소개한다.
배열 요소 안의 값을 돌면서 누적시킨다.
💬마무리
처음에는 살짝 낯선 개념이지만 React를 공부하면서 배열 데이터를 다룰 일이 많아지는데,
몇 개의 예제를 활용해서 사용해본다면 빠르게 적응할 수 있을 것이다.
매일 새로운 개념과 문법들이 등장하지만 즐거운 마음으로 받아들인다면 개발의 편의성을 더 높여줄 것이다.
