[Javascript] 배열 다루기(map, filter, find, every, some, reduce, forEach)

Javascript에서 참 유용하게 사용할 수 있는 배열 함수들 입니다. 

처음 접했을 때는 뭔가 사용법도 어려워 보이고 복잡해보였지만... 

알고나면 이렇게 편할수가 없는..!!

 

[map]

map은 말 그대로 매핑 시켜준다고 생각하면 편합니다. 배열의 원소들을 입맛에 맞게 바꿔줄 수 있습니다. 

배열을 loop 돌면서 바꿔줍니다.

 

간단한 예로 1~10까지의 배열이 있고 1을 더해주는 코드 입니다.

하지만 저렇게 한다고 arr 변수가 바뀌는 것은 아니므로 주의해야 합니다.

let arr = [1,2,3,4,5,6,7,8,9,10];
arr.map(item => item + 1);

> 결과

조금 더 복잡한 경우를 본다면 각 원소와 함께 인덱스도 가져올 수 있습니다. 그리고 단순 연산이 아닌, 다른 형태로도 바꿀 수 있습니다. 아래에서는 json 형태로 바꿔보았습니다.

arr.map((item,index)=>{
    return {
        "number":item,
        "idx":index
    }
});

> 결과

 

[filter]

말 그대로 필터링 해주는 함수 입니다. 결과가 true라면 해당 원소는 살아남습니다.

arr.filter(item => item>5);

> 결과

조금 더 복잡(?)하게 해서 3으로 나눠지는 수만 찾는다 했을때, inline으로도 되지만 if문을 사용해 보겠습니다. 

arr.filter(item=>{
    if(item % 3 === 0)
        return true;
});

> 결과

 

[find]

찾고자 하는 값이 해당 배열에 있을 경우 그 값이 있는 원소를, 없을 경우는 undefined를 리턴합니다.

그렇기 때문에 주로 배열에 값이 있는지 없는지만 확인하는 용도로 많이 활용됩니다.

arr.find(item => item == 1);
arr.find(item => item == 0);

> 결과

 

[every]

배열의 모든 원소가 해당 조건에 맞는지를 확인합니다. 맞으면 true, 아니면 false 리턴.

arr.every(item => item > 1);
arr.every(item => item > 0);

> 결과

 

[some]

배열의 일부 원소가 해당 조건에 맞는지를 확인합니다. 맞으면 true, 아니면 false 리턴.

arr.some(item => item < 1);
arr.some(item => item < 2);

> 결과

[reduce]

배열을 하나의 값으로 변환 시켜줍니다.

첫번째 인자(acc)는 누적 값(앞 원소들로 부터 return된 값),

두번째 인자(item)는 각 원소들 입니다. 

여기에서 주의해야 할 점은, 첫 루프에는 acc = 0번째, item = 1번째 원소가 오고, 그다음부터는 말 그대로 acc에는 누적값만 오게 됩니다. 

그래서 2번째 예제를 보면 3의 배수(3, 6, 9)를 더해서 18이 나올 것 같지만

첫 acc는 0번째 원소인 1이기에 1 + 3 + 6 + 9  = 19가 나오게 됩니다.

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

arr.reduce((acc, item) => {
	if(item % 3 === 0)
    	acc += item;
    return acc;
});

 

[forEach]

for문과 매우 유사합니다. 원소들을 순차적으로 접근합니다. 

하지만 for문과 다른 점은 forEach 안에서 원소 값을 수정해도 forEach가 끝나면 수정된 것이 적용되지 않습니다.

arr.forEach(item => {
	item += 3;
});

arr;