[Javascript]배열 내장 반복 함수(Prototype) 7개 정리(forEach,map,filter,some,every,find,findIndex)

 

코딩을 할 때 반복문은 빠질 수 없는 신텍스다 

대부분을 for 문법을 통해 하는게 가장 익숙한 방법이지만

javascript에서 친절(?) 하게 사용할 수 있는 다른 반복문들이 있다. 

for 조합되는 for in, for of 등도 있지만

배열 사용의 상황에서 사용할 수 있는 

반복문을 포스팅하겠다.

 

Array의 Prototype에 보면 이미 선언된 여러가지 유용한 Function들이 있지만 

그 중 반복 기능을 하는 7가지에 대해 알아보겠다.

 

책이나 교육강의 등에서는 일반적으로

let iamArray = [1,4,7,5,3,9];

for(let i = 0; i<iamArray.length; i++) {
	console.log(iamArray[i]);
}

<<< result >>>
1
4
7
5
3
9

이런 식으로 활용한다. 

 

매우 좋은 반복구문이지만 

여기서는 좀 더 깔끔하고 쉽고 유용하게 활용할 방법에 대해 소개하겠다.

위와 똑같은 것을 아래와 같이 만들 수 있다.

 

1.forEach

let iamArray = [1,4,7,5,3,9];

iamArray.forEach((value)=>{
	console.log(value);
})


<<< result >>>
1
4
7
5
3
9

배열의 값을 index순으로 순차적으로 돌려준다.

기능은 동일하지만 코드의 양이나 보기에도 더 깔끔하게 보인다.

(뭔가 좀 있어보인다.고수냄새나잖아) 

 

2. map

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.map((value)=>{
	return value+1;
})

console.log(returnVal);

<<< result >>>
[ 2, 5, 8, 6, 4, 10 ]

기능은 forEach랑 동일하나 

map에서는 항상 return이 있어야 한다.

그리고 map은 배열타입으로 return한다. 

일반적으로 API연동 시 특정 값을 뽑아내 사용하는데 유용하다.

 

3.filter 

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.filter((value)=>{
	return value>5;
})

console.log(returnVal);

<<< result >>>
[ 7, 9 ]

filter는 map처럼 return이 있어야하고 배열로 return한다.

filter는 map에서 조건에 해당되는 값만 리턴해줄 수 있다. 

말 그대로 조건에 부합되는 값만 "필터링" 해주는 것이다.

 

4.some

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.some((value)=>{
	return value>5;
})

console.log(returnVal);

<<< result >>>
true

some은 filter랑 기능이 동일하지만 return되는 타입만 다르다.

some은 해당 배열에 조건에 부합되는 값이 있는지 확인하여 boolean(true/false)타입으로 리턴해준다.

 

5.every

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.every((value)=>{
	return value>5;
})

console.log(returnVal);

<<< result >>>
false

every는 모든 some과 기능이 동일하지만 

some에서는 조건에 부합되는 것이 있으면 true였고

every에서는 "모두가" 조건에 부합되는지에 대해 boolean으로 리턴해준다.

 

6.find

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.find((value)=>{
	return value>5;
})

console.log(returnVal);

<<< result >>>
7

find는 말그대로 배열에서 조건에 부합되는 값을 찾아주는 함수다.

단 filter처럼 전체를 찾는 것이 아니라 처음에 걸리는(index순서로) 1개의 값만 찾아서 리턴해준다.

 

7.findIndex

let iamArray = [1,4,7,5,3,9];

const returnVal = iamArray.findIndex((value)=>{
	return value>5;
})

console.log(returnVal);

<<< result >>>
2

find랑 똑같다.

다만 리턴을 value로 하는 것이 아니라 조건에 부합되는 value의 Index 값을 리턴해준다.

즉 위 코드에서 7에 해당되는 index 인 2가 리턴된다.

 

 

이상 Javascript의 Array의 Prototype을 활용할 수 있는 7가지 반복 구문 방법에 대해 알아보았다.

적절하고 적합하게 잘 활용해서 깔끔한 코드를 만들어보자.