javascript 의 .includes() 함수와 .some() 알아보자

 

.includes() 를 활용한 비교함수

 

ES7에서 .includes() 메서드가 도입되었습니다. 이전 코드를 살펴본 다음, 함수에서 사용하도록 리팩터링해 보겠습니다:

 

리팩터링은 최종 동작을 변경하지 않고 코드의 구조를 변경하는 것을 말합니다.

 

.includes() 메서드는 요소가 배열 안에 존재하는 경우에만 true 을 반환합니다. 훨씬 간결하죠? 하지만 이 단순함은 개발자의 오류로 이어질 수 있습니다.

 

 

.includes() 를 활용한 array of objects (객체 배열)

 

.includes()를 사용하여 이전 검색 예제를 반복하되 이번에는 album을 나타내는 array of objects (객체 배열) 을 검색해 보겠습니다. 이전 예제에서 .includes() 함수가 잘 작동했지만 album 을 찾을 수 없어서 false 입니다. 왜 그럴가요?

 

 

 

유형 간 비교 (Comparisons between types)

 

내부적으로 .includes()는 === 를 통해 비교합니다. 그러나 === 또는== 와의 비교는 type 에 따라 (value(값) 비교) 예상대로 작동합니다

 

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ES2015)

 

객체 유형(type object) 을 참조(reference) 하는 변수를 비교할 때, 인터프리터는 변수가 메모리에서 동일한 객체를 가리키는지 테스트합니다. 이 간단한 예를 살펴보겠습니다:

 

 

하지만 아래와 같이 하면 결과는 true 입니다:

 

 

이 컨텍스트에서 .includes() 경우, 다음과 같이 true 을 반환할 수 있습니다:

 

이 solution 이 아무리 효과적이라고 해도, 이것이 존재하는지의 여부는 말할 것도 없고, 위치(position) 를 모르는 객체(object) 를 검색할 때 이 solution  을 사용하는 것은 넌센스입니다. 이 상황에서는 기존의 .some() ES5 메서드를 사용할 수 있습니다.

 

 

 

.some() 메서드 사용

 

.some() 함수는 비교 논리를 적용하여 배열의 모든 요소를 반복합니다. 비교 중에 참을 반환하는 첫 번째 항목을 찾으면 즉시 반복을 중단합니다. 로직을 만족하는 요소가 하나라도 있으면 반환값은 true 이 됩니다. (or 조건)

 

object 의 ID를 비교하는 데 사용되는 기준입니다. 프로퍼티는 숫자를 저장하므로 == 또는 === 로 비교하면 참조(reference) 가 아닌 값(value) 을 사용합니다.

 

 

 

 

다음 트릭을 사용하여 객체의 모든 속성을 전부 비교할 수 있습니다:

 

JSON.stringify() 를 통해 JavaScript 객체를 객체의 텍스트 표현에 불과한 문자열로 변환합니다. 하나의 문자열을 통한 표현이므로 === 또는 == 를 사용하여 비교에서 문자열 표현을 사용할 수 있습니다.

 

.some()의 가장 큰 장점 중 하나는 보다 정교한 비교 로직을 정의할 수 있다는 점입니다.

 

 

 

최신 기능이 개발자가 직면하는 일상적인 문제를 항상 해결해 주는 것은 아닙니다. 문제와 문제 해결에 사용되는 리소스를 파악하는 것이 중요하며, 이를 통해 위와 같은 돌발 상황이나 잘못된 동작이 발생하지 않도록 해야 합니다.

 

번역

 

https://d7k.medium.com/js-includes-vs-some-b3cd546a7bc3

JS .includes() vs .some()

 

 

활용해 보기

 

배열 arr 안의 문자열 중 "apple"이 포함되어 있는지 여부를 확인하는 경우, 다음과 같은 코드를 사용할 수 있습니다.

const arr = ["orange", "banana", "apple", "grape"];

const hasApple = arr.some(value => value.includes("apple"));

console.log(hasApple); // 출력 결과는 true입니다.

 

이 코드에서 arr은 확인하려는 배열이며, hasApple 변수는 배열 안의 문자열 중 "apple"이 포함되어 있는지 여부를 저장하는 변수입니다.

 

hasApple 변수의 값을 결정하는 방법은 다음과 같습니다.

1. some 함수를 사용하여 배열의 요소를 반복합니다.
2. 각 요소에 대해 해당 문자열이 포함되어 있는지 여부를 확인합니다. 이 예제에서는 value.includes("apple") 코드를 사용하여 각 요소가 "apple"을 포함하고 있는지 여부를 확인합니다.
3. 하나 이상의 요소가 "apple"을 포함하고 있는 경우 hasApple 변수에 true를 할당합니다. 그렇지 않은 경우 false를 할당합니다.

위의 코드를 실행하면 true가 출력됩니다. 만약 배열 안의 요소 중 "apple"을 포함하고 있는 요소가 하나도 없는 경우 false가 출력됩니다.