자바스크립트 배열 검색

배열이란?

배열은 순서를 가진 객체입니다. 간단히 말하자면 여러가지 데이터들을 인덱스라는 순서로 저장해두는 것이 배열입니다. 

const arr = [1, "name", 5, "age", 17.2];
arr[0]; // 1
arr[1]; // "name"

대괄호 안에 인덱스를 넣으면 저장된 데이터를 알 수 있었습니다. 오늘은 배열 내에서 필요한 데이터를 찾는 방법을 알아보겠습니다.

indexOf / lastIndexOf

indexOf는 찾고자 하는 값과 정확히 일치하는 첫 번째 요소의 인덱스를 반환합니다. 코드를 통해 알아보겠습니다.

arr.indexOf(1) // 0이 나옴
arr.indexOf("age") // 3이 나옴

첫 번째 요소의 인덱스라고 적었듯이 만약 똑같은 값이 여러개 들어있다면 맨 처음의 값의 인덱스를 반환합니다. lastIndexOf는 배열의 끝에서부터 검색합니다.

일치하는 값을 찾지 못하면 indexOf / lastIndexOf는 -1을 반환합니다. 

find / findIndex 

find는 값을 넣지 않고, 콜백함수를 넣습니다. 함수를 넣어서 검색 조건을 지정할 수 있다는 장점이 있습니다.

const findArr = [{name:"lemon", age:17}, {name:"candy", age:27}];
findArr.find(c => c.name==="candy"); // {name:"candy", age:27}

배열의 각 요소를 첫 번째 매개변수로 받습니다. 즉 c에는 각 객체가 들어간다는 것입니다. 그리고 반환하는 조건에 맞는 값을 찾는 것입니다. 조건에 맞는 값을 나타내는게 보이시나요? 

콜백함수는 배열의 현재 요소, 현재 요소의 인덱스, 배열 자체를 매개변수로 받습니다. 

const num = [1, 2, 3, 4, 5, 6, 7];
num.find((currentValue, index) => index>3 && currentValue%2 === 1); // 5가 나옵니다.

매개변수에 index까지 받아서 조건을 추가해보았습니다. 인덱스가 3 이상인 홀수를 반환하라는 조건입니다. 5가 나오는 것을 확인할 수 있습니다. 

find는 조건에 맞는 요소가 없으면 undefined를 반환합니다.

findIndex는 find와 똑같이 콜백함수를 이용하고, 매개변수로 현재 요소, 현재 요소의 인덱스, 배열 자체를 받습니다만 조건에 맞는 요소가 아니라 요소의 인덱스를 알려주고, 맞는 값이 없으면 -1을 리턴합니다.

some / every

some과 every는 언제 사용할까요? 인덱스나 요소를 찾을 필요없이 조건을 만족하는 요소가 있는지 없는지만 알면 충분할 때에 some과 every를 쓰면 true나 false를 반환합니다.

num.some(x => x>6); //true (7은 6보다 큽니다.)

some은 조건이 맞는 요소가 하나라도 있으면 true, 하나도 없으면 false를 반환합니다. 그렇다면 every는 어떻게 될까요? 이름을 보고 예상하시겠지만 배열의 모든 요소가 조건에 맞으면 true, 아니면 false를 반환합니다.

num.every(x => x>1); //false

배열에는 1이 있기때문에 위의 조건은 false를 반환합니다.

es6에는 배열에 관한 메서드가 여러개 추가되었습니다. 위에서 배운 것들처럼 말이죠. 다음 시간에도 새로 추가된 것들을 알아보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.