[JavaScript] 배열관련 메서드(sort, filter, every, some, find, findIndex, includes)

var array = [1,2,3,4,5];
// array.includes(찾을 값, 시작인덱스);
for(let i =0; i<10; i++){
    console.log(-1*i,array.includes(1, i));
}
// -0 true
// -1 false
// -2 false
// -3 false
// -4 false
// -5 false
// -6 false
// -7 false
// -8 false
// -9 false

전에 알고리즘에 필요한 내용을 다룰 때 필요한 메서드에 대해서 정리하는 글을 포스팅 했었습니다.

2021.05.07 - [개발/자바스크립트(JS)] - [JS 알고리즘 메서드] JS알고리즘 공부 이유 & 기초메서드 정리

 

이번에는 조금더 심도있게 다루기 위해서 배열 관련 메서드를 따로 정리하는 시간을 가져볼까 합니다.

 

1. 목차

 - sort

 - filter

 - every

 - some

 - find

 - findIndex

 - includes

 

1) sort

 sort의 사용법은 매우 간단합니다.

var arr = new Array(5,7,6,1,4,2,3);
console.log(arr);

arr.sort();
console.log(arr);

// [
//     5, 7, 6, 1, 4, 2, 3
//   ]
//   [
//     1, 2, 3, 4,  5, 6, 7
//   ]

기본적으로 오름차순을 지원합니다.

var arr = new Array([1,2],[5,3],[7,2],[4,5],[7,3],[3,2],[6,1],[3,7]);
console.log(arr);
arr.sort(function(a,b){ // 앞에 것 기준 정렬
    if(a[0]==b[0]) return a[1]-b[1];
    return a[0]-b[0];
});
console.log(arr);

arr.sort(function(a,b){ // 뒤에 것 기준 정렬
    if(a[1]==b[1]) return a[0]-b[0];
    return a[1]-b[1];
});
console.log(arr);
/*
[
  [ 1, 2 ], [ 5, 3 ],
  [ 7, 2 ], [ 4, 5 ],
  [ 7, 3 ], [ 3, 2 ],
  [ 6, 1 ], [ 3, 7 ]
]
[
  [ 1, 2 ], [ 3, 2 ],
  [ 3, 7 ], [ 4, 5 ],
  [ 5, 3 ], [ 6, 1 ],
  [ 7, 2 ], [ 7, 3 ]
]
[
  [ 6, 1 ], [ 1, 2 ],
  [ 3, 2 ], [ 7, 2 ],
  [ 5, 3 ], [ 7, 3 ],
  [ 4, 5 ], [ 3, 7 ]
]
*/

이런식으로 sort안에 함수로 정렬조건을 넣으면 됩니다. 함수값이 작은것을 리턴할 경우 a가 b보다 앞에 오게 정렬하고, 0보다 클 경우 b가 a보다 앞에 오도록 정렬합니다. 

 즉, 오름차순일 때 a는 원래 b보다 앞에있는 수이며 (a-b<=0)일 경우  순서를 변경하지 않으며 a-b>0 일 경우 변경하는 것입니다.

 이것을 a와 b만의 관계로만 표현한다면 return a-b; 로 나타내면 됩니다.( c++의 경우 a<b로 오름차순을 나타냈음)

 만일 내림차순을 표현하고 싶다면 return b-a;로 표현하면 되겠네요. 0일경우는 바뀌거나 안바뀌거나 상관없기 때문에 이것으로 충분합니다.

 

문자열은 유니코드 값을 통해 비교하는데요

let strArray = ['apple','banana', 'grape'];
strArray.sort(function(a,b){
  if(a>b) return -1;
  return 1;
})
console.log(strArray);

// [ 'grape', 'banana', 'apple' ]

위 코드는 내림차순으로 정렬한 코드입니다. a와 b를 부등식의 조건에 따라 -1과 1중 하나를 리턴하면 됩니다.

 

2) filter

filter메서드는 array의 원소들 중 조건에 맞는 원소들만 걸러내는 메서드입니다.

// filter
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result1 = words.filter(word => word.length > 6);
const result2 = words.filter(function(word){ return word.length>6;});
console.log(result1);
console.log(result2);

// [ 'exuberant', 'destruction', 'present' ]
// [ 'exuberant', 'destruction', 'present' ]

다음과 같이 길이가 6을 초과하는 항목들만 result에 담긴것을 볼 수 있죠.

 

조금 더 복잡한 과정의 filter의 예제를 본다면

function filterItem(query){
  return fruits.filter(function(element){
    return element.toLowerCase().indexOf(query.toLowerCase())>-1;
  });
}
console.log(filterItem('ap'));
console.log(filterItem('an'));
// [ 'apple', 'grapes' ]
// [ 'banana', 'mango', 'orange' ]

// ===
// var result = fruits.filter(function(element){
//    return element.toLowerCase().indexOf(query.toLowerCase())>-1;
//  });
// console.log(result);

각 ap와 an이 들어간 문자열 배열을 return 하는 과정입니다.

 

3) every & some

  every는 배열내의 모든 원소가 조건을 만족하는지를 return하는 메서드, some은 배열 내의 원소중 조건을 만족하는 원소가 1개라도 있는지를 return 하는 메서드입니다.

즉, 모든 원소에 대해 어떤 조건을  every는 &&로 some은 ||로 충족하는지 확인하는 메서드입니다.

 

let data=[
    {name:'jack', age:20},
    {name:'kevin', age:16},
    {name:'rick', age:27},
    {name:'marry', age:21},
    {name:'rilly', age:19}
]

let result = data.every(x=>{
    return x.age>=20;
});

console.log(result);



result = data.some(x=>{
    return x.age>=20;
});
console.log(result);


// false
// true

 

4) find, findIndex

find는 조건을 만족하는 첫번째 원소, findIndex는 그 원소의 인덱스를 반환하는 메서드 입니다.

하지만 해당 조건을 만족하는 원소가 없을 경우 find는 undefined, findIndex는 -1을 반환합니다.

 

// find => 배열안에 조건에 따른 첫번째 요소를 반환
// 조건을 충족하지 않으면 undefined반환
const arr1 = [5,12,8,302,20];
const found = arr1.find(element=> element>=300);
console.log(found);
// 302

// findIndex => 배열안에 조건에 따른 첫번째 인덱스를 반환
// 충족하지 않으면 -1 반환
const found2 = arr1.findIndex(element=> element>=400);
console.log(found2);
// -1

 

5) includes

 includes는 원소안에 해당하는 값이 있는지 없는지를 판단하여 return하는 메서드 입니다.

있으면 true 없으면 false를 리턴합니다.

includes에는 원소가 1개 또는 2개 들어갈 수 있는데요

첫번째 원소는 찾을 값! valueToFind 라고 하고, 두번째 원소는 어디부터 찾을지 인덱스를 지정하는 것입니다. fromIndex라고 합니다. 인덱스는 0부터 시작합니다.

 여기서 특별한 것은 fromIndex가 0보다 작은 것에서는 배열길이를 더하고  -(배열길이) 보다 같거나 작으면 배열 전체에서 검색될 것입니다.

예를 보시죠

var array = [1,2,3,4,5];
// array.includes(찾을 값, 시작인덱스);
for(let i =0; i<20; i++){
    console.log(-1*i,array.includes(4, -1*i));
}
// -0 true
// -1 false
// -2 true
// -3 true
// -4 true
// -5 true
// -6 true
// -7 true
// -8 true
// -9 true
// -10 true
// -11 true
// -12 true
// -13 true
// -14 true
// -15 true
// -16 true
// -17 true
// -18 true
// -19 true

우선 -1은 배열길이인 5를 더했을 때인 4로 판단되어 인덱스 4부터 검색하기 때문에 false를 리턴합니다.

하지만 -2일 경우 4의 인덱스인 3부터 시작하므로 true를 반환하는 것을 볼 수 있습니다.

 이때 -5부터는 모두 true를 리턴하는 것을 볼 수 있는데 이는 배열길이의 음수값보다 작은경우는 모든 범위를 검색하기 때문입니다.

 

만일 fromIndex가 배열길이와 같거나 더 큰경우에는 배열의 범위를 벗어남으로 false를 리턴합니다.

 

6) map

map은 각 원소들에 따라 특정 처리를 진행한 후 생성되는 새로운 배열을 return 하는 메서드입니다. return된 배열의 크기는 원래의 배열과 같겠죠?

console.log();
var arr = [1,2,3,4,5];
var arr2 = arr.map(function(a){ return a%2==0?'짝수':'홀수'});
console.log(arr);
console.log(arr2);
// [ 1, 2, 3, 4, 5 ]
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

7) reduce

reduce는 map보다 훨씬 더 강력한 기능을 제공합니다. 자기가 원하는 것은 모든 다 할 수 있으며 return하는 Objcet도 제각각 이에요.

기본 사용법은

array,reduce(function(이전 값, array[i], index){

     return 리턴 값;

}, 이전값의 초기값);

인데요. 이를 잘 사용하면 아래와 같이 사용할 수 있습니다.

console.log();
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(acc, cur, i){ return acc*cur;}, 1);
console.log(arr);
console.log(arr2);
// [ 1, 2, 3, 4, 5 ]
// 120

// 홀수만 넣기
result = arr.reduce((acc, cur) => {
    acc.push(cur % 2 ? '홀수' : '짝수');
    return acc;
  }, []);
  console.log(result); 
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

// 홀수만 넣기
  result = arr.reduce((acc, cur) => {
    if (cur % 2) acc.push(cur);
    return acc;
  }, []);
  console.log(result); 
// [1, 3, 5]

이를 이용하면 map, include, find...등등 모든 기능을 구현할 수 있습니다.

8) push, pop, shift, unshift

이는 배열에 원소를 넣고 빼는 메서드 들인데요.

 - push : 배열의 맨 마지막에 원소 추가

 - pop :  배열의 맨 마지막에서 원소 하나 제거하면서 그 값을 return

 - unshift : 맨 앞에 원소를 하나 추가

 - shift : 맨 앞에서 원소를 하나 제거하면서 그 값을 return

let ppsu=[1,2,3];

console.log("ppsu : \t\t\t" + ppsu);
ppsu.push(10);
console.log("after push ppsu : \t" + ppsu);
ppsu.unshift(20);
console.log("after unshift ppsu : \t" + ppsu);
console.log("ppsu.pop() : \t\t"+ ppsu.pop());
console.log("ppsu : \t\t\t" + ppsu);
console.log("ppsu.shift() : \t\t"+ ppsu.shift());
console.log("ppsu : \t\t\t" + ppsu);

// ppsu :                  1,2,3
// after push ppsu :       1,2,3,10
// after unshift ppsu :    20,1,2,3,10
// ppsu.pop() :            10
// ppsu :                  20,1,2,3
// ppsu.shift() :          20
// ppsu :                  1,2,3

9) slice

slice는 startIndex~endIndex-1 까지 새로운 배열로 반환하는 메서드 입니다.

var arr = [0, 1, 2, 3, 4, 5, 6 ];
console.log(arr.slice( 2, 4 ));
// [ 2, 3 ]

매개변수로는 2, 4를 넣어 2~4를 반환할 것 같지만 2~(4-1) 까지를 반환하는 것을 잘 고려해야합니다.

 

10) concat

concat 는 배열을 뒤에 붙이는 메서드 입니다.

let array1 = [1,2,3];
let array2 = [4,5,6];
console.log(array2.concat(array1));
// [ 4, 5, 6, 1, 2, 3 ]