바닐라 JavaScript로 배열 안에서 특정 항목 하나를 찾고 싶다면, ES6에서 도입된 Array.find() 메서드를 사용하면 됩니다. 이 메서드는 조건을 만족하는 첫 번째 요소를 반환하며, 조건에 맞는 요소가 없으면 undefined를 반환합니다.
예를 들어 채소 이름으로 이루어진 배열이 있다고 가정해 보겠습니다. 이 목록에서 '당근(carrot)'을 찾아내려면 다음과 같이 작성할 수 있습니다.
const vegetables = ["broccoli", "carrot", "kale", "spinach"]
// 배열에서 carrot 찾기
let carrot = vegetables.find(function(vegetable) {
return vegetable === "carrot"
})
console.log(carrot)
// "carrot"코드가 동작하는 방식
- 먼저 결과를 담을 변수
carrot을 선언합니다. vegetables배열에Array.find()메서드를 연결하고, 콜백 함수가 정확히 문자열"carrot"과 일치하는 요소를 반환하도록 지정합니다.- 조건을 만족하는 첫 번째 요소가 변수에 할당되며, 마지막으로
console.log()로 결과를 출력해 확인합니다.
알아두면 좋은 두 가지 포인트
1. 삼중 등호(===)의 역할: === 연산자는 값(value)뿐만 아니라 자료형(type)까지 엄격하게 비교합니다. 예를 들어 문자열 "5"와 숫자 5는 다른 것으로 판단하므로, 의도치 않은 매칭을 방지할 수 있습니다.
2. JavaScript는 대소문자를 구분합니다: 배열 항목에 대문자가 포함되어 있다면(예: "Carrot"), Array.find()의 비교 문자열에도 동일하게 대문자를 사용해야 합니다. 대소문자 구분 없이 찾고 싶다면 toLowerCase()나 toUpperCase()로 양쪽을 변환한 뒤 비교하는 방법도 유용합니다.