JavaScript의 includes() 메서드는 배열에서 특정 항목을 검색합니다. 이 메서드는 해당 요소가 배열에 존재하면 true를 반환합니다. filter() 메서드 역시 목록에서 특정 항목을 찾을 수 있게 해주며, includes()와 달리 검색한 항목 자체를 반환한다는 차이점이 있습니다.
배열에 특정 값이 포함되어 있는지 확인해야 하는 경우가 종종 있습니다. 예를 들어, 상품 주문 목록이 있고 우리 가게에서 침대 협탁을 주문한 고객이 있는지 확인하고 싶다고 가정해 봅시다.
JavaScript 배열 포함 여부 확인
JavaScript 배열에 특정 항목이 포함되어 있는지 확인하는 방법은 두 가지입니다.
- includes()
- filter()
includes() 메서드는 배열에 항목이 존재하는지 확인하고 true 또는 false를 반환합니다. filter()는 배열에서 항목을 찾아 해당 항목을 반환합니다.
이 튜토리얼에서는 JavaScript의 배열 includes() 메서드를 사용하여 배열에 특정 요소가 포함되어 있는지 확인하는 방법을 알아봅니다. 또한 filter()를 사용하여 객체 배열에 특정 값이 포함되어 있는지 확인하는 방법도 함께 살펴보겠습니다.
JavaScript includes() 메서드란?
JavaScript의 includes() 메서드는 배열에 특정 값이 포함되어 있는지 판단합니다. 지정된 항목을 찾으면 true를, 찾지 못하면 false를 반환합니다.
array_name.includes(element, start_position);
includes() 메서드는 두 개의 인수를 받습니다.
- element: 검색하려는 값입니다. (필수)
- start_position: 검색을 시작할 배열의 인덱스 위치입니다. (선택)
includes() 메서드는 true와 false 두 값 중 하나를 반환합니다. 이러한 값을 JavaScript에서는 불리언(Boolean)이라고 부릅니다.
Array.includes()는 String.includes()와 같은 방식으로 작동하지만, Array.includes()는 객체 배열을 대상으로 검색을 수행한다는 점이 다릅니다.
includes() 예제
커피숍을 운영하고 있다고 가정해 보겠습니다. 오늘 에스프레소를 주문한 손님이 있는지 확인하고 싶습니다. 다음 코드로 오늘의 주문 목록에 에스프레소 주문이 있는지 확인할 수 있습니다.
var todays_orders = ['Latte', 'Americano', 'Latte', 'Latte', 'Mocha', 'Cortado'];
console.log(todays_orders.includes('Espresso'));
코드 실행 결과: false
배열 todays_orders에는 Espresso라는 값이 없습니다. 따라서 includes() 함수가 실행되면 false를 반환합니다. 만약 배열에 존재하는 요소를 검색했다면 includes()는 true를 반환했을 것입니다.
이번에는 최근 세 개의 주문 중에서 라떼를 주문한 손님이 있는지 확인해 보겠습니다. 이때는 start_position 인수와 함께 includes() 메서드를 사용하면 됩니다.
var todays_orders = ['Latte', 'Americano', 'Latte', 'Latte', 'Mocha', 'Cortado'];
console.log(todays_orders.includes('Latte', 3));
프로그램 실행 결과: true. 인덱스 3 이후의 위치에서 라떼가 주문되었기 때문에 includes() 함수는 true를 반환했습니다.
JavaScript filter() 메서드란?
앞선 예제에서는 includes()를 사용하여 문자열 배열에 특정 값이 포함되어 있는지 확인했습니다. 그렇다면 객체 배열에 특정 값이 포함되어 있는지 확인하려면 어떻게 해야 할까요? 이 경우 filter() 함수를 사용하면 됩니다.
filter() 함수는 객체 배열을 순회하며 특정 값을 검색합니다. filter()는 하나의 인수, 즉 값을 검색하는 데 사용되는 함수를 받습니다. JavaScript filter() 함수의 문법은 다음과 같습니다.
var filterArray = array_name.filter(function(item) {
return item;
});
filter() 예제
주문한 커피 이름과 고객 이름을 담고 있는 커피숍 주문 객체 배열이 있다고 가정해 보겠습니다.
오늘 John Appleseed라는 이름의 고객이 커피를 주문했는지 확인하고 싶습니다. John은 단골 고객으로, 다음 커피에 할인을 받기로 되어 있기 때문입니다.
다음 코드는 John Appleseed가 주문을 했는지 확인합니다.
var orders = [
{ drink: 'Cappuccino', name: 'John Appleseed' },
{ drink: 'Espresso', name: 'Mya Stuart' },
{ drink: 'Cappuccino', name: 'Emma Berry' }
];
var check_orders = orders.filter(order => (order.name === "John Appleseed"));
console.log(check_orders);
프로그램 실행 결과:
[{ drink: 'Cappuccino', name: 'John Appleseed' }]
먼저 orders라는 배열을 선언합니다. 이 배열에는 주문을 한 사람들의 이름과 각자 주문한 음료가 저장되어 있습니다. 그다음 check_orders라는 JavaScript 변수를 선언합니다. 이 변수는 filter() 함수를 사용하여 오늘 John Appleseed라는 이름의 고객이 커피를 주문했는지 확인합니다.
check_orders 변수의 값을 JavaScript 콘솔에 출력합니다. John Appleseed가 실제로 오늘 주문을 했기 때문에 함수는 그의 주문 기록을 반환합니다. 만약 주문하지 않았다면 프로그램은 아무것도 반환하지 않습니다.
filter() 메서드에 대해 더 깊이 알고 싶다면 JavaScript filter() 및 reduce() 메서드 관련 튜토리얼을 참고해 보세요.
마무리
includes() 메서드는 배열에 특정 값이 있는지 확인하며, 결과에 따라 true 또는 false를 반환합니다. filter() 메서드는 객체 배열에 특정 값이 포함되어 있는지 판단하며, 조건을 충족하는 객체가 배열에 존재하면 해당 객체를 반환합니다.
JavaScript를 더 배우고 싶으신가요? JavaScript 학습 가이드를 확인해 보세요. 전문가의 조언과 함께 도움이 될 만한 온라인 강좌, 도서, 학습 자료 목록을 만나볼 수 있습니다.