배열함수 총정리 forEach(), Map(), filter() 등등

forEach()

function solution(arr) {
    var answer = 0;
    var hap = 0
    // for(let i = 0; i<arr.length; i++){
    //     hap += arr[i]
    // }
    arr.forEach(number=>{
        hap += number
    })
    answer = hap/arr.length
    return answer;
}

for문과 forEach()의 차이점

위의 함수는 평균값을 return하는 함수이다.

forEach는 배열안의 개별값들을 순환한다.

즉 for문의 arr[i]와 forEach의 number는 같은 의미이다.

 

참고로 forEach()는 element, index, array를 파라미터값으로 받기때문에 index를 추출할수있다.

객체를 forEach로 돌리려면 키값을 활용하면된다.

let arr = [1,3]
arr.forEach((number,i)=>{
	console.log(number, i)
})

//객체 예시
console.log(subTokenIds)//{0:[],1:[]..}
Object.keys(subTokenObj).forEach((index) => {//0,1,2..
    subTokenObj[index].forEach((e, i) => {
        const parent = document.querySelectorAll('#subImage')
        fetch(`...`,options)
        .then(e => e.json())
        .then(result => {
            ...
        })
        .catch(console.log)
    })
})

 

map()

map은 forEach와 비슷하지만 return 값이 배열로 반환된다. 마찬가지로 element, index, array를 파라미터값으로 받는다.

map()과 forEach() 의 차이점

array.forEach((n)=>squared.push(n*n))
array.map((n)=>n*n)

map은 반환값이 배열이기때문에 빈배열을 만들어서 push로 넣어주지않아도됨

 

 

 

filter()

조건이없을땐 map()과 비슷하고(return 배열) 하다. 마찬가지로 element, index, array를 파라미터값으로 받는다.

조건에 해당되는 결과만 배열에 담고싶을때 쓰는함수인듯하다.

궁금해서 해봄

map, filter 심화

const items = [ 
	{id:1, text:'hello'}, 
    {id:2, text:'bye'} 
]

id값들만 추출하여 배열에 담을수있다.

items.map((item)=>{return item.id}) //[1,2]

const result = items.map((item)=>item.id)
console.log(result) //[1,2]

const result2 = items.map((item)=>{
	item.id
 })
console.log(result2) //[undefined, undefined]

참고로 filter에서는 그대로 출력됨

text가 'bye'인 특정조건일때는 filter를쓴다.  id가 2보다 큰경우만추출할때도 유용할듯

map과 filter를 연결해서 쓸수도있음. 예를들어 양의정수만 골라서 2승한값을 출력한다면

arr=[-1,0,3,2.5,4,-31]
arr.filter(num => num > 0 && num % parseInt(num) === 0)
  .map(num => Math.pow(num,2))

reduce()

reduce는 모든 내장함수를 대체할수있다고할만큼 강력하고 코드량을 줄일수있다고한다.

 

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍