[Javascript] 유용한 배열 Method

Javascript의 배열 유용한 Method

Javascript 에서 배열 관련 Method를 알면 데이터를 제어함에 있어 보다 편하게 할 수 있다고 생각한다.

findIndex

callback 함수에서 true 값을 반환하면 그에 해당하는 혹은 처리 중인 배열의 index 값을 반환한다.

기본 사용 방법은 아래와 같으며, callback 함수의 3가지의 parameters를 받으며, 그 해당하는 각각의 parameter는 value, index, allData 이 나온다.

var arr = [10,20,30,40,50];
arr.findIndex( (value, index, allData)=> {
	//console.log(value); 배열의 각 value를 받아옴 => 10, 20, 30, 40, 50
	//console.log(index); 배열의 index 값을 받아옴 => 0, 1, 2, 3, 4
	//console.log(allData);	배열 자체를 받아옴 => (5) [10, 20, 30, 40, 50]
})

return 값으로는 callback 함수의 조건에 부합할 경우는 해당하는 index 값을 반환하며 findIndex 함수를 종료하며, 부합하지 않을 경우는 -1를 반환한다.

var arr = [10,20,30,40,50];
var foo1 = arr.findIndex( (value, index, allData)=> {
		return value >= 30;
});
var foo2 = arr.findIndex( (value, index, allData)=> {
		return value >= 60;
});
console.log(foo1);	//result: 2, 조건에 부합하는 값의 index 값을 반환
console.log(foo2);	//result: -1, 조건에 부합하는 값이 없을 경우 -1을 반환

filter

filter 메소드는 findIndex 와는 다르게 callback 함수의 조건에 부합하는 모든 값들을 반환한다. 기본 사용법은 아래와 같으며, findIndex와 동일하게 callback 함수의 parameter에는 value, index, allData 가 들어갈 수 있다.

var arr = [10,20,30,40,50];
arr.filter( (value, index, allData)=> {
	//console.log(value); 배열의 각 value를 받아옴 => 10, 20, 30, 40, 50
	//console.log(index); 배열의 index 값을 받아옴 => 0, 1, 2, 3, 4
	//console.log(allData);	배열 자체를 받아옴 => (5) [10, 20, 30, 40, 50]
})

다만 findIndex와는 다른 점은 filter 는 value 값을 반환한다.

 var arr = [10,20,30,40,50];

var foo1 = arr.filter( (value, index, allData)=> value >= 30);
var foo2 = arr.filter( (value, index, allData)=> value >= 60);

console.log(foo1);	//result: [30, 40, 50],  조건에 부합하는 모든 값의 value 값을 반환
console.log(foo2);	//result: [], 조건에 부합하지 않을 경우에는 빈 배열을 반환

여기에서 중요한 것은 filter를 이용해 새로 생성된 배열은 얕은 복사가 아닌 깊은 복사 가 일어난다.

var arr = [10,20,30,40,50];
var foo = arr.filter( (value, index, allData) => true );

console.log(foo); //result: [10,20,30,40,50], 깊은 복사가 일어난 상태

//깊은 복사가 일어나 만들어진 배열이기에, 중간에 값을 바꿔도 원본에는 영향을 미치지 못한다.
foo[0] = 100;
console.log(foo); //result: [100,20,30,40,50]
console.log(arr); //result: [10,20,30,40,50]

every

every는 callback 함수의 조건을 부합 여부 결과를 boolean 값으로 반환한다. 기본 사용법은 아래와 같으며 callback 함수의 parameters 역시 동일하게 value, index, allData가 들어갈 수 있다.

var arr = [10,20,30,40,50];
arr.every( (value, index, allData)=> {
		//console.log(value); //배열의 첫번째 value를 받아옴 => 10
		//console.log(index); //배열의 첫번째 index 값을 받아옴 => 0
		//console.log(allData);	//배열 자체를 받아옴 => (5) [10, 20, 30, 40, 50]
});

every method와 비슷한 결과값을 받는 method 중에는 some method가 있다. 물론 둘의 사용법은 전혀 다르다. every와 some의 가장 큰 차이점은 every는 모든 배열의 조건에 부합해야 true를 반환하며, some의 경우는 하나라도 만족하면 true를 return 한다.

var arr = [10,20,30,40,50];
var foo1 = arr.every( (value, index, allData) =>{

  //arr의 모든 value가 0보다 크면 true를 반환
  return value > 0;
});
var foo2 = arr.every( (value, index, allData) =>{

  //arr의 모든 value가 25보다 크거나 같으면 true를 반환
  return value >= 25;
})

console.log(foo1); //result: true
console.log(foo2); //result: false

위와 같이 foo1의 경우 모든 배열의 ‘value 값이 0 보다 크다’ 라는 조건이 true이기에 true 값을 반환하지만, foo2 같은 경우는 arr의 값 중 30, 40, 50의 값만 해당 조건을 만족시켜 false 값을 반환한다.

some

some method의 return 값은 boolean 값을 반환하며, 사용법은 아래와 같다. 마찬가지로 다른 array 관련 메소드 들과 동일하게 parameters은 value, index, allData 순으로 대입된다.

var arr = [10,20,30,40,50];
arr.some( (value, index, allData)=> {
    //console.log(value); //배열의 모든 value를 받아옴 => 10, 20, 30, 40, 50
    //console.log(index); //배열의 모든 index 값을 받아옴 => 0, 1, 2, 3, 4
    //console.log(allData);	//배열 자체를 받아옴 => (5) [10, 20, 30, 40, 50]
});

위에서 명시했듯, some method의 경우 every method와 달리 해당 배열 중 하나라도 만족하면 true 값을 반환한다.

var arr = [10,20,30,40,50];
var foo1 = arr.some( (value, index, allData) =>{

  //arr의 모든 value가 0보다 크면 true를 반환
  return value > 0;
});
var foo2 = arr.some( (value, index, allData) =>{

  //arr의 모든 value가 50보다 크거나 같으면 true를 반환
  return value >= 50;
})

console.log(foo1); //result: true
console.log(foo2); //result: false

위와 같이 every의 예제와 동일하게 쓰였지만 foo2의 값은 서로 상반된다.

map

map method의 경우

forEach

forEach method의 경우

reduce

reduce method의 경우 callback 함수에서의 처리되는 누적 계산값을 가지고 계산하여 하나의 return 값을 주는 method이다. 사실 reduce의 경우 글로 설명하는 것보다는 개인적으로는 코드를 보고 이해하는 것이 훨씬 빠르다.

var arr = [10,15,30,35,50];
arr.reduce( function(total, currentValue, currentIndex, arr) {
    console.log('total =>', total);
    console.log('currentValue =>', currentValue);
    console.log('currentIndex =>', currentIndex);
    console.log('arr =>', arr);
});

일단 기본 사용법은 위와 같다. 하지만 위의 식을 돌려서 보면 아마 중간 중간 total에서 undefined가 나올 것 이다. 그러한 이유는 콜백함수에서 실행되는 로직이 아무것도 없어서 이다. 위의 코드를 아래와 같이 살짝 바꾼다면 아마 이해가 될 것이다.

var arr = [10,15,30,35,50];
arr.reduce( function(total, currentValue, currentIndex, arr) {
    console.log('total =>', total);
    console.log('currentValue =>', currentValue);
    console.log('currentIndex =>', currentIndex);
    console.log('arr =>', arr);
    return total + currentValue;
});

위와 같이 console을 실행시켜보면 total은 콜백함수에서 return 시켜주는 결과 같이 계속해서 찍히는 것을 볼 수 있다.

Comments