자바스크립트 05 배열 메서드 .includes() 와 .indexOf() 비교

1. 현재의 무드: 차분! 붙캠에서 오늘은 객체 배우고, 코플릿 페어로 풀기 전에 시간이 남아서 어제 배운 것 복습하고 블로그에 정리하는 중입니당

2. 오늘 학습한 내용 중 키워드: 배열 메서드 .includes(), .indexOf()

3. 오늘 학습한 내용 요약

 

두 메서드 모두 배열에 해당 search value가 포함되어 있는지를 판단할 때 써줄 수 있다. 

 

MDN에 따르면,

 

Array.prototype.includes() // 배열이 특정 요소를 포함하고 있는지 판별

const array1 = [1, 2, 3];
console.log(array1.includes(2) // true
console.log(array1.includes(4) // false 

arr.includes(valueToFind[, fromIndex])

 

includes()는 반환값을 불리언 타입으로 갖는다. 즉, 해당 valueToFind가 배열 내에 존재 하는지 아닌지만 알려줌! 

또한, 매개변수에 찾으려는 요소 값을 넣어주어 사용한다. fromIndex는 기본값이 0이라 따로 지정하지 않으면 처음부터 탐색해줌. 

fromIndex가 배열의 길이보다 같거나 큰 경우에는 false를 반환한다. 배열이 검색되지 않기 때문이다. 

 

Array.prototype.indexOf() // 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스 반환, 존재하지 않으면 -1 반환

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']

console.log(beasts.indexOf('bison') // 1
console.log(beasts.indeOf('bison',2) // 4
console.log(beasts.indexOf('giraffe') // -1


arr.indexOf(searchElement[, fromIndex])

 

indexOf()는 해당 searchElement가 존재한다면 그 인덱스 번호를, 존재하지 않는다면 -1을 반환한다. 

fromIndex값이 음수라면 배열의 뒤에서부터 세어서 판단해준다. 

이는 배열에 해당 값이 존재 하는지의 여부와 어느 몇번째에 존재하는지까지 알려주기때문에, includes()와 비교하여 더 범용성이 있다고 한다...! 

 

또한, 브라우저 호환에 관련해서도 이야기가 있는데, 

 

스택 오버플로우에 includes()가 IE 호환 안되는 것에 있어서 비꼬는? 댓글이 웃겨서 가져와봄 ㅋㅋㅋㅋ

해당 글은 자그마치 6년 6개월 전 글... 

 

"이 코드 IE에서 안먹힌다. 대안 있음?" 에 대한 댓글로...

 

2018년: "2년 후. 여전히 안됨."

 - 2019년: "너 3년 후 얘기한거 맞지?" 

2019년: "IE가 개선되기를 바라는건 마치... IE가 개선되기를 바라는것과 같지" 

2020년: "2년이 더 지난 지금... 여전히 IE에서 안먹힘" 

 

푸핫..ㅎ 근데 지금은 MDN 보니까 edge로 대체되서 includes()와 indexOf() 둘 다 호환 가능으로 뜨긴 함

여튼... 이 둘의 차이에 대해 알아보았다! 

 

참고로 indexOf()는

리턴 값이 -1 일때 -> false (배열 내에 존재하지 않음) 

리턴 값이 -1이 아닐때 -> true (배열 내에 존재함) 

 

이렇게 조건을 분기해서 최종 리턴을 불리언으로 만들어서 사용할 수 있다.