자바스크립트 배열 사용 4가지 방법

IOT의 발전으로 결국 쌓이는 건 데이터다. 

지금 이 순간에도 각종 센서에서 수많은 데이터가 쌓여가고, 머신러닝은 뭔가 유의미한 데이터를 뽑아내기 위해서 쌩쌩 돌아가고 있을 것이다. 새로운 '원유'라고 불리는 데이터 시대, 자바스크립트 유저들은 원유 가공법을 확실하게 알고 있어야 한다.

자바스크립트는 ES6+ 이후부터 데이터에 관한 대규모 업데이트가 진행됐다. 이번 포스팅에서는 이 중에서 반드시 알아야하는 4가지 배열처리 방법에 대해서 알아보자.

1 includes()

데이터를 요리하려면 먼저 식재료가 필요하다. includes()는 요리할 데이터를 찾는 데에 아주 적합한 명령어다. 배열에 includes()메서드를 실행하면, boolean값(true or false)을 얻을 수 있다.

const Liverpool = [ 'Firmino', 'origi', 'van Dijk', 'Salah', 'Mane', 'Robertson', 'keita', fabinho];

let result = Liverpool.includes('origi');   //return true

let result = Liverpool.includes('coutinu'); //return false

위의 예시에서 리버풀 배열에서 '오리기'가 있냐고 물으면 true를 반환한다. 하지만 쿠티뉴는 리버풀 배열에 없으므로 includes()결과값은 false다. 

arr.includes(valueTofind, [fromIndex])

includes()의 정확한 문법은 위와 같이 찾고자 하는 값과 index숫자를 넣어줘야한다. 하지만 리버풀 예제처럼 index값을 넣지 않으면, 자동으로 index:0부터 검색을 시작한다. 

2 find()

find메서드는 includes()와 비슷하지만 반환값이 다르다. includes()는 boolean값을 반환하지만 find()는 조건에 해당되는 배열값을 반환한다. 예시를 보자.

const array1 = [5, 12, 8, 130, 44]

const found = array1.find(el => el >10 );

console.log(found) //return 12

출처 - MDN mozila 'find()'

find()메서드에는 반드시 조건을 제시한 함수가 포함되어야 한다. forEach()구문에서 함수가 인자값으로 갖는 것과 같은 원리다. includes()의 반환값은 boolean, find()의 반환값은 '배열의 데이터값'이라는 점을 알아두자.

3 indexOf()    

indexOf()메서드는 ES6이전의 자바스크립트에서 배열 검색의 단골 메뉴였다. indexOf()는 배열의 index값을 반환한다.

const Liverpool = [ 'Firmino', 'origi', 'van Dijk', 'Salah', 'Mane', 'Robertson', 'origi', fabinho];

let idx = Liverpool.indexOf('van Dijk');

let idx2 = Liverpool.lastIndexOf('origi');

let idx3 = Liverpool.indexOf('origi', 2);

console.log(idx); //return 2

console.log(idx2); //return 6

console.log(idx3); //return 6

indexOf('이름', index)메서드는 index값을 검색의 시작점으로 사용한다. 또한 lastIndexOf()메서드를 사용하면 뒤에서부터 검색이 가능하다. indexOf()의 경우, index값, 숫자를 반환한다는 것을 확실하게 기억하자.

4 filter()

filter()는 배열검색 메서드 중에서 가장 사용량이 빈번한 메서드가 아닐까한다. 보통 검색결과의 값은 하나일 때보다 다수일 때가 많다. 따라서 indexOf()와 splice()의 경우 범위가 좁은 데 반해, filter()를 사용하면 반환값이 배열이다보니 좀더 큰 범위에서 사용할 수 있다. 

const Liverpool = [ 'Firmino', 'origi', 'van Dijk', 'Salah', 'Mane', 'Robertson', 'keita', fabinho];

let result = Liverpool.filter( el => el.length < 7);

console.log(result) //return ['origi', 'Salah', 'Mane', 'keita'];

filter()는 배열을 반환하기 때문에 반환된 배열을 다시 편집하기에 유리하다. 반환된 배열을 객체로 변환해서 저장한다거나 새로운 조건에 맞춰 다시 검색할 수 있기 때문이다. 

includes(), find(), indexOf(), filter() 모두 기능은 같지만 반환값이 다르다는 점에서 각자 사용법과 환경이 다르다. 4가지 검색 메서드는 필요한 상황에 따라 사용하도록 하자.

배열 메서드	반환값
includes()	Boolean
find()	배열에 저장된 데이터값
indexOf()	숫자
filter()	배열