Javascript의 배열함수 forEach()와 filter()를 알아보자

안녕하세요 개발적금입니다.

오늘은 Javascript의 배열함수 중

forEach()와 filter에 대해 알아보겠습니다.

 

---

목차

 

1. 배열함수 forEach()

 

2. 배열함수 filter()

 

---

 

1. 배열함수 forEach()

 

대게 배열함수 forEach()에대해 찾아보면 "배열을 순회하기 위해 사용된다" 라고

설명을 하고있습니다. 조금더 쉽게 말하자면 배열에서 반복문을 사용하기위해

사용되는것입니다. 이러한 이유에서 우리가 알고있는 for() 반복문과 사용법이

조금 다릅니다.

 

forEach() 메서드는 ()안에 매개변수를 callback함수를 전달합니다.

그리고 또한 forEach()는 기존 for()처럼 index와 조건식 그리고 증감 감소값을

정의하지 않아도 callback함수를 통해 기능을 수행할수 있습니다.

 

---

=================기존for문============================
const arr = [2,7,5,4,5];

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

=================forEach()사용=======================

const arr = [2,7,5,4,5];
arr.forEach(function(value){
	console.log(value);
});

====================================================

-> 둘은 같은 값을 출력합니다.  어떻게 이런값이 나올까요?

 

let obj ={
	arr : [2,4,5,7,5].
    length : 5,
    forEach : function(callback){
    	for(let i = 0 ; i < obj.length ; i++){
			console.log(obj.arr[i],index)
		}//end for
    }// end forEach
}// end obj

-> forEach()가 실행되었을때는 이런모양일것입니다.

-> 객체형 배열에서 사용되는 forEach()는  매개변수로 받을수있는게 3가지가있습니다.

-> forEach(현재요소,index,호출한배열) 이렇게 되는데 3번째 매개변수는 잘 사용하지않습니다.

 

-> forEach() 통해 나온 return값은 없습니다.

-> 즉 callback함수에 의해서 어떤 결과물을 만들고 싶으면

-> 함수 밖의 변수를 선언 해놓아야 합니다.

 

-> 예시로 홀수배열을 만들어 보겠습니다.

 

const arr = [1,2,3,4,5,6,7,8,9];
const oddArr = [];

arr.forEach(function(value){
 if(value%2 === 1){
 	oddArr.push(value)
 }
})

console.log(oddArr)

 -> 함수밖의 홀수배열을 선언해놓고 , forEach()안에 조건문으로 홀수들을 찾아 , oddArr에 홀수를 담아주었습니다.

-> 결과값은 [1,3,5,7,9] 가 나오게됩니다.

 

---

 

2. 배열함수 filter()

 

배열함수중에서 많이쓰이는 filter()입니다.

filter는 말그대로 필터해준다 걸러준다 라고 생각하시면 됩니다.

forEach()와는 다르게 return값이 존재합니다.

ECMA(정보통신 시스템을 위한 국제적 표준화기구) 에서는

"주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다"

라고 정의합니다.

사용방법은

Array.filter(callback(element[,index[,array]])[,this.Arg]) 입니다.

난관에 봉착했습니다. this.Arg가 뭘까요..

 

찾아보니 callBack을 실행할때 this로 필요한 값이라고 하네요!

역시 구글은 대단합니다..

 

그럼 filter의 간단한 예시를 들겠습니다.

const arr = [1,2,3,4,5,6,7,8,9];
const result = arr.filter(arr => arr > 5);

console.log(result);

 

-> 예제코드는 5보다 큰 배열의 수를 걸러내는 방법입니다. 

-> 단순 for문으로 접근할수도 있지만 for문이 가진 순회하는 방식을

-> 별다른 코드없이 사용할수 있다는점이 메리트가 있습니다.

 

하나의 예시를 더 들겠습니다.

const guys = [
	{name : "HT" , money : 500000},
    {name : "IG" , money : 400000},
    {name : "KI" , money : 300000},
    {name : "KH" , money : 200000},
	{name : "SS" , money : 100000},
]

const rich = guys.filter(man => man.money > 300000);
console.log(rich)

 

배열안의 객체형 데이터들이 있습니다. filter() 메서드를 통해 300000이상 가진사람들을 필터하여

console.log()에 출력했습니다.

 

filter 메서드는 객체를 직접 사용하거나 변형시키지 않고 return값을 받아 다른변수에

담아둡니다.

사용활용도가 높다고 하니 저도 공부좀더하여

포스팅하겠습니다.

 

---

 

읽어주셔서 감사합니다.