[Javascript] 다양한 배열 메서드(순회, 반복)를 알아보자

1. forEach

forEach는 단순히 배열을 반복합니다.

const arr = [2, 4, 6, 8, 10];

arr.forEach((value, index) => {
    console.log(`${value} : ${index}`)
});

// 실행 결과
// 2 : 0
// 4 : 1
// 6 : 2
// 8 : 3
// 10 : 4

forEach문은 break 문이 없기때문에 중간에 return; 이나 break 코드가 있어도 멈추지 않고 계속 반복이 진행됩니다.

 

 

2. map

map은 현재 반복중인 배열에서 나온 결과를 새로운 배열를 만들어서 리턴 합니다.

var arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];

var newArr = arr.map(function(value, index){
	var data = value + 1;
	return data;
});

console.log(arr);
console.log(newArr);

// 실행결과
// arr : 2, 4, 6, 8, 10, 12, 14, 22, 99, 100
// newArr : 3, 5, 7, 9, 11, 13, 15, 23, 100, 101

현재 배열을 가공해서 새로운 배열을 만드는 경우가 자주 생깁니다. 그때 새로운 배열을 만드는 메서드중 자주 map이 사용 됩니다.

 

 

 

 

3. filter

현재 배열에서 어느 값만 남기고 싶을 때 사용하는 메소드입니다.

var arr = [2, 4, 6, 8, 10, 12];
var newArr = arr.filter(function(value, index){
	if(value % 3 === 0){
    		return value;
    	}
});

console.log(arr);
console.log(newArr);

// 실행결과
// arr : 2, 4, 6, 8, 10, 12
// newArr :  6, 12

map 처럼 현재 배열에서 3의 약수들만 모아서 새로운 배열로 리턴 합니다.

 

 

 

 

4. reduce

현재 배열을 반복하여 결과 값을 누적 합니다.

var arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
var result = arr.reduce((acc, value, index) => {
    console.log("acc : " + acc +", value : " + value + ", index : " + index);
    var val = acc + value;
    
    
    if (index === arr.length - 1) {
        val = val / arr.length;
    }
    return val; //다음 반복의 acc의 값으로 들어간다.
}, 0);

console.log(result);

더하기, 평균, 최빈값, 최대값 등을 구할 때도 아주 유용하다.

주의할 점은 reduce는 다음 반복할때 acc의 값으로 저장됩니다.

 

 

 

5. some

특정 배열을 순회하면서 값이 있는지를 찾고 싶을 때 자주 사용됩니다.

some은 다른 배열 메서드와 다르게 break 같은 효과가 있는 메서드 입니다.

var arr = [2, 4, 6, 8, 10, 12, 14];
var newArr = [];
var result = arr.some((value) => {
    if (value === 12) {
        return true;
    }
    
    newArr.push(value);
});

console.log(newArr);
console.log(result);

// 실행결과
// newArr : 2, 4, 6, 8, 10
// result : true

some은 return 값이 true이면 현재 배열을 멈추고 return 값으로 true를 리턴합니다. false이면 계속 배열을 순회 합니다.

 

 

6. every

every은 some의 반대개념으로 모든 원소가 해당조건을 만족해야 true, 하나라도 만족하지 않으면 false를 리턴 합니다.

var arr = [2, 4, 6, 7, 8, 10, 12];
var newArr = [];
var isCheck = arr.every((value) => {
    console.log(value);
    if (value % 2 === 0) {
        return true;
    }
    
    newArr.push(value);
});

console.log(newArr);
console.log(isCheck);

// 실행결과
// newArr : [7]
// isCheck : false

some처럼 조건에 만족하지 않는 경우 즉시 반복을 멈추고 false를 리턴합니다.