Javascript Array 타입 Methods

Javascript Array 의 유용한 Method

자바스크립트를 이용하여 개발을 하다보면 여러 데이터 타입에 대해서 다룰 일이 많다. 그중에 특히나 Array 타입의 메소드를 이용하여 데이터를 원하는 형태로 가공하는 경우가 많다. 필요에 따라 Underscore.js 혹은 Lodash 등과 같은 써드 파티 라이브러리를 사용해야하는 경우도 있지만 거의 대부분의 경우에는 자바스크립트에서 제공해주는 API만 잘 활용하더라도 많은 부분을 해결할 수 있다. 그렇다면 주로 이용하는 배열의 메소드들을 무엇이 있는지, 어떠한 역할을 하는지 등을 인터페이스를 통해 살펴보도록 하자.

findIndex

해당하는 요소의 값의 INDEX 값 혹은 존재 여부를 파악할때 사용하는 메소드이다. 하지만 존재 유무를 파악할 때 includes 메소드를 주로 사용하기 때문에 주로 해당 요소의 INDEX 값을 파악할 때 주로 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// interface
type callback<T> = (value: T, index: number, obj: T[]) => unknown;
interface Array<T> {
  // ...
  findIndex(predicate: callback<T>, thisArg?: any): number;
  // ...
}

// usage
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]
})

callback 함수에서 true 값을 반환하면 그에 해당하는 혹은 처리 중인 배열의 index 값을 반환한다. 기본 사용 방법은 아래와 같으며, callback 함수의 3가지의 인자를 받으며, 그 해당하는 각각의 인자는 순서대로 현재의 값, 현재값의 INDEX, 마지막으로 현재 배열의 전체 값을 받는다. return 값으로는 callback 함수의 조건에 부합할 경우는 해당하는 index 값을 반환하며 findIndex 함수를 그 즉시 종료하며, 부합하지 않을 경우는 -1를 반환한다. 예를 들어 아래와 같이 현재의 값이 30과 일치하거나 이상일 경우에 대한 조건을 경우의 참을 반환하는 함수가 있다.

1
2
3
4

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

const existed = arr.findIndex(value => value >= 30); // 2
const notExisted = arr.findIndex(value => value >= 60); // -1

첫번째 변수 existed 의 경우 30이상일 경우에 해당하는 INDEX는 2이므로 2를 반환하며 함수가 종료된다. 반대로 notExisted 변수의 경우 모든 값이 일치하지 않음으로 -1를 반환한다.

includes

findIndex 함수에서 언급했듯, 배열 안에 값의 존재 유무를 판별할 수 있는 메소드이다. 먼저 아래의 인터페이스를 살펴보도록 하자.findIndex 함수에서 언급했듯, 배열 안에 값의 존재 유무를 판별할 수 있는 메소드이다.

1
2
3
4
5
6
7
8
9

// interface
interface Array<T> {
    includes(searchElement: T, fromIndex?: number): boolean;
}

// usage
const array = [10, 20, 30, 40, 50];
const existed = array.includes(10);
const notExisted = array.includes(60);

만약 해당 인자가 있을 경우 true 를 그렇지 않다면 false 값을 반환한다.만약 해당 인자가 있을 경우 true 를 그렇지 않다면 false 값을 반환한다.

filter

filter 메소드는 첫번째 인자로 받는 CallBack 함수에서 주어진 조건에 대해 true를 반환하는 요소를 유지하고, false를 반환하는 요소들을 제외해주는 메소드이다. filter 메소드는 제네릭 타입 T를 받아 T를 반환해준다. 다만 인터페이스 안에서 filter의 타입을 오버라이딩 하는 왜 하는지 이유는 모르겠다… 혹시나 아시는 분 있으시면 댓글로 남겨주세요.다만 인터페이스 안에서 filter의 타입을 오버라이딩 하는 왜 하는지 이유는 모르겠다… 혹시나 아시는 분 있으시면 댓글로 남겨주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// interface
interface Array<T> {
    filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
    filter(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
}

// usage
const 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]
})
const foo1 = arr.filter( (value, index, allData)=> value >= 30);
const foo2 = arr.filter( (value, index, allData)=> value >= 60);

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

1
2
3
4
5
6
7
8
9

const arr = [10,20,30,40,50];
const 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가 들어갈 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// interface
interface Array<T> {
  every(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
}

// usage
const 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]
});
arr.every(value => typeof value === "number");

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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 순으로 대입된다.

1
2
3
4
5
6
7
8
9
10
11

// interface
interface Array<T> {
  some(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
}

const 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 값을 반환한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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: true

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

reduce

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

1
2
3
4
5
6
7

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가 나올 것 이다. 그러한 이유는 콜백함수에서 실행되는 로직이 아무것도 없어서 이다. 위의 코드를 아래와 같이 살짝 바꾼다면 아마 이해가 될 것이다.

1
2
3
4
5
6
7
8

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 시켜주는 결과 같이 계속해서 찍히는 것을 볼 수 있다.