본문 바로가기
IT/Javascript

[Javascript] - 자바스크립트 Array.prototype.indexOf, Array.prototype.includes 사용법

by 차이나는 개발자 2021. 7. 31.
728x90
반응형

#자바스크립트 Array.prototype.indexOf, Array.prototype.includes 사용법

 

 

-indexOf 메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

 

#원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환하고

인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.

 

-예시

const arr = [1, 2, 3, 3, 4, 5];

// arr에서 3을 검색하여 첫 번째로 검색된 요소의 인덱스를 반환
console.log(arr.indexOf(3));

// 배열에 7이 없으므로 -1
console.log(arr.indexOf(7));

// 두번째 인수는 검색을 시작 할 인덱스
// 4
console.log(arr.indexOf(4,4));

 

 

#indexOf 메서드는 배열에 특정 요소가 존재하는지 확인할 때 유용하다.

 

-예시

const foods = ['apple', 'lemon', 'banana'];

// foods 배열에 'orange' 요소가 존재하는지 확인
if (foods.indexOf('orange') === -1 ){
// 존재하지 않으면 'orange' 요소를 추가
    foods.push('orange');
}

console.log(foods); // ["apple", "lemon", "banana", "orange"]

 

 

#indexOf 메서드 대신 ES7에서 추가된 Array.prototype.includes 메서드를 사용하면 가독성이 더 좋다.

 

-예시

const foods2 = ['apple', 'lemon', 'banana'];

// foods 배열에 'orange' 요소가 존재하는지 확인
if (!foods2.includes('orange')){
// 존재하지 않으면 'orange' 요소를 추가
    foods2.push('orange');
}

console.log(foods2); // ["apple", "lemon", "banana", "orange"]

 

 

 

728x90
반응형

댓글