[Front end] JavaScript 당장 사용해야 할 5가지 배열 메서드(Array)

 

배열 메서드 둘 중에 평소에 잘 사용하지 않지만, 사용하면 생산성이 많이 올라가는 메서드들이다.

indexOf

배열에서 특정 값 찾을 시 for Loop를 돌려서 찾는다면 생산성이나 코드 가독성에 도움이 되지 않는다. indexOf 메서드는 주어진 요소를 배열에서 찾아 반환하며 값이 없다면 -1을 반환한다.

let found = false;
let arr = ['apple','orange','pear'];

for(let i = 0, len = arr.length; i < len; i++) {
	if('orange' === arr[i]){
		found = true;
	}
}

found = (arr.indexOf('orange') !== -1 );

 

filter

Json 오브젝트로 이루어진 배열중에 특정 값을 filter 할 때 유용하다.

let arr = [
    {'name':'apple', 'count': 2},
    {'name':'orange', 'count': 5},
    {'name':'pear', 'count': 3},
    {'name':'orange', 'count': 16},
];
    
let newArr = [];

for(let i = 0, len = arr.length; i < len; i++){
    if('orange' === arr[i].name){
		newArr.push(arr[i]);
	}
}

newArr = arr.filter( function(item){
    return 'orange' === item.name;
});

 

forEach

for와 forEach 개인적으로 봤을 때 성능상에 크게 다르지 않다고 생각한다. 단 for를 사용할 경우에는 length를 따로 변수에 담아 써야 성능에 차이가 없다.

let arr = [1,2,3,4,5,6,7,8];

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

arr.forEach( function(item, index){
    console.log(item);
});

 

map

map과 forEach는 용도가 다르다. map은 각 루프에서 return 할 수 있는 게 특징이다. 즉 map을 사용하면 리턴 값으로 같은 길이의 배열이 나온다.

let arr = [1,2,3,4,5];
let b = arr.forEach( function(v, i){
    console.log(v); return v+1;
});
let c = arr.map( function(v, i){
    console.log(v); return v+1;
});

b는 undefined가 리턴되며 c는 [2,3,4,5,6] 배열을 리턴한다. 즉, 배열을 가지고 연산을 하고 같은 길이의 배열을 리턴 받고 싶을 때는 map을 사용하면 유용하다.

 

reduce

배열을 순회하면서 각 요소에 대해 주어진 reduce 함수를 실행시키고 하나의 결과 값을 반환한다.

let arr = ['apple','orange','apple','orange','pear','orange'];

function getWordCnt(){
    let obj = {};
    
    for(let i = 0, len = arr.length; i < len; i++){
        let item = arr[i];
        obj[item] = (obj[item] +1 ) || 1;
    }
    
    return obj;
}

function getWordCnt(){
    return arr.reduce( function(prev, next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    },{});
}