본문 바로가기
[개발] Front-End

[Javascript] Array.prototype 함수 활용하기

by Devsong26 2021. 6. 3.

Array.prototype 메소드들은 Array를 핸들링할 때 매우 유용하다.

 

1. Array.prototype.filter(CALLBACK(ELEMENT, INDEX));

ELEMENT : Array 객체의 요소

INDEX : Array 객체의 인덱스

CALLBACK 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환한다.

const ARR = [1,2,'',3,4];  //필터 전 
console.log(ARR);  
const NUMBER_ARR = ARR.filter(function(E, I){ 	
	return typeof E === "number"; 
});  //필터 후 

console.log(NUMBER_ARR); 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

 

2. Array.prototype.findIndex(CALLBACK(E, I));

E : Array 객체의 요소

I : Array 객체의 인덱스

CALLBACK 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 그렇지 않으면 -1을 반환한다.

const ARR = [];  //값 셋팅 
ARR[0] = 'zero'; 
ARR[1] = 1; 
ARR[3] = 3;  
const UNDEFINED_INDEX = ARR.findIndex(function(E, I){ 	
	return E === undefined; 
});  //undefined인 요소의 인덱스를 출력 console.log(UNDEFINED_INDEX); 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

 

 

3. Array.prototype.forEach(CALLBACK(E, I));

E : Array 객체의 요소

I : Array 객체의 인덱스

CALLBACK 함수의 로직을 각 E, I를 가지고 수행한다.

const ARR = [1, 2, 5, 6];  
ARR.forEach(function(E, I){	 	
	if(E > 4){ 		
    		console.log("# E : " + E);     
	} 
}); 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

 

4. Array.prototype.map(CALLBACK(E, I));

E : Array 객체의 요소

I : Array 객체의 인덱스

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

forEach랑 비슷하지만 람다식을 쓸 수 있다.

const STRING_ARRAY = ["1","2","3","4","5"];  //E만 사용 
const NUMBER_ARRAY = STRING_ARRAY.map(E => Number(E)); 
console.log(NUMBER_ARRAY);  //E,I 사용 
STRING_ARRAY.map( 	
	(E, I) =>  console.log(E + " " + I)
); 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map