[Javascript] 목록에서 원하는 값을 찾는 방법

일하면서 다양한 방법으로 array 에서 원하는 값을 찾게 되어 여러가지 방법에 대해 정리해보았다.

1. 단순한 array 의 경우

number, string 등 단순한 데이터로 이루어진 array를 단순한 array 라고 지칭했다.

원시타입의 데이터를 가진 array 라고 생각하면 된다.

const oddNumList = [1, 3, 5, 7];
const cityList = ['seoul', 'suwon', 'pusan'];

1-1. includes

includes() 는 파라미터로 전달한 특정 값이 배열 안에 있는지 boolean 으로 return 한다.

const specialNumber = 2;
console.log(oddNumList.includes(specialNumber)); // false

 

두 번째 파라미터로 fromIndex 를 넘겨 몇 번째 index 부터 검색을 시작할지 설정할 수 있다.

console.log(oddNumList.includes(3)); // true
console.log(oddNumList.includes(3, 3)); // false

 

1-2. indexOf

indexOf() 는 파라미터로 전달한 특정 값이 위치한 첫 번째 index를 return 한다. 값이 존재하지 않으면 -1 을 return한다.

const myCity = 'suwon';
console.log(cityList.indexOf('suwon'); // 1

 

두 번째 파라미터로 fromIndex 를 넘겨 몇 번째 index 부터 검색을 시작할 지 설정할 수 있다.

console.log(cityList.indexOf('seoul'); // 0
console.log(cityList.indexOf('seoul', 1); // -1

 

fromIndex

fromIndex 가 0보다 같거나 클 때는 해당 index부터 찾기 시작한다.

음수일 때는 값에 따라 다르다.

fromIndex > 0	n 번째 index부터 찾음
-array.length < fromIndex < 0	array.length - fromIndex 부터 찾음
fromIndex < -array.length	0 번째 부터 찾음

 

const numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numList.indexOf(5, 3)); // 4
console.log(numList.indexOf(5, 6)); // -1
console.log(numList.indexOf(5, -3)); // numList.indexOf(5, 7)과 같다 -> -1
console.log(numList.indexOf(5, -20)); // numList.indexOf(5, 0)과 같다 -> 4

 

2. 복잡한 array 의 경우

array, object 로 이루어진 array 를 복잡한 array라고 지칭했다.

참조타입의 데이터를 가진 array 라고 생각하면 된다.

const userList = [
    { name: 'alpha', birthday: '01-01', age: 11 },
    { name: 'beta', birthday: '02-02', age: 12 },
    { name: 'gamma', birthday: '03-03', age: 13 },
];

 

아래의 메소드에는 파라미터로 찾는 값이 아니라, 함수를 넘겨줘야 한다.

참조타입의 데이터는 단순하게 === 으로 동일한지 확인할 수 없다.

const num1 = 1;
const num2 = 1;
console.log(num1 === num2); // true
 
const obj1 = { name: 'alpha', birthday: '01-01', age: 11 };
const obj2 = { name: 'alpha', birthday: '01-01', age: 11 };
console.log(obj1 === obj2); // false

 

2-1.some

판별함수를 적어도 하나라도 통과하는 만족하는 요소가 있는지 확인한다.

console.log(userList.some((user) => user.age > 14); // false

 

2-2.findIndex

전달한 함수에 맞는 조건의 첫 번째 index를 return한다.

console.log(userList.findIndex((user) => user.name === 'beta')); // 1
console.log(userList.findIndex((user) => user.birthday === '04-04')); // -1

 

2-3.find

전달한 함수에 맞는 조건의 첫 번째 요소를 return한다.

값이 없으면 undefined를 return 한다.

console.log(userList.find((user) => user.name === 'beta'));
// {name: 'beta', birthday: '02-02', age: 12}
console.log(userList.find((user) => user.age === 15));
// undefined

 

2-4.filter

전달한 함수에 맞는 조건의 모든 요소를 return한다.

조건에 맞는 값이 없으면 빈 배열을 return한다.

userList.push({name: 'beta', birthday: '02-22', age: 22 });
const betaList = userList.filter((user) => user.name === 'beta'));
console.log(betaList);
// [
//   { "name": "beta", "birthday": "02-02", "age": 12 },
//   { "name": "beta", "birthday": "02-22", "age": 22 },
// ]
 
const youngUserList = userList.filter((user) => user.age === 11);
console.log(youngUserList[0]);
// {name: 'alpha', birthday: '01-01', age: 11}
 
const deltaList = userList.filter((user) => user.name === 'delta');
console.log(deltaList);
// []

 

 

간단한 정리

	메소드	return	찾는 요소가 없는 경우
값을 찾는 경우	includes	boolean	false
	indexOf	조건에 맞는 첫 번째 index	-1
요소를 찾는 경우	some	boolean	false
	findIndex	조건에 맞는 첫 번째 index	-1
	find	조건에 맞는 첫 번째 요소	undefined
	filter	조건에 맞는 요소들로 이루어진 array	[]

 

 

참고 문서

Array - JavaScript | MDN