JavaScript [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법

2023.01.26 22:20

졸리운_곰 조회 수:485

[JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법

기본적인 배열은 일반 변수들이 나열된 모양이다.

var arr = [ "사과", "딸기", "복숭아 ];

var arr2 = [ 5, 3, 0.5, 7, 2, 9];

이런 일반적인 배열에서 인덱스를 통해 배열의 값을 구할수있다.

console.log(arr[0]); // "사과" 출력

console.log(arr2[2]); // 0.5 출력

반대로 배열의 값을 아는경우에 해당 배열의 몇번째 인덱스인지 indexOf함수를 사용하여 다음처럼 구할수있다.

console.log(arr.indexOf("복숭아")); // 2 출력

console.log(arr2.indexOf(5)); // 0 출력

하지만 자바스크립트에서 배열의 원소들이 객체(object)라면 어떻게 될까?

아래의 예를 살펴보자.

var arr3 = [

{ num : 0, name : "홍길동" },

{ num : 1, name : "박보검" },

{ num : 2, name : "강호동" }

];

위와 같은 객체배열이 존재한다고 가정하자.

객체 배열에서 객체안의 변수를 구하려면 다음과 같이 사용한다.

console.log(arr3[1].name); // "박보검" 출력

console.log(arr3[2].num); // 2 출력

그렇다면 반대로 "강호동"이라는 문자열을 가지고 2라는 인덱스를 구하려면 어떻게해야할까?

(실제로 프로그래밍도중 해당 지식이 필요하여 찾아서 정리한것이다..)

답은 findIndex() 함수를 사용하면 된다. 예를 통해 살펴보자.

var index = arr3.findIndex(i => i.name == "강호동");

여기서 index의 값으로 2를 반환받는다.

i라는 변수명은 아무거나 적어도 작동하는것을 보였다. 하지만 다른 변수이름과 중복되면 왠지모를 찝찝함이 생기므로

obj나 안쓰는 다른 변수명을 사용하자.

그럼이제 저 index를 사용하여 해당 배열에 접근할수있겠지?

[출처] https://yeolco.tistory.com/157

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

번호	제목	글쓴이	날짜	조회 수
13	[Next.js 개발] pm2 로 Next.js 실행하기	졸리운_곰	2025.07.01	500
12	[Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현	졸리운_곰	2024.03.09	576
11	[Next.js 개발] Using Next.js Version 13	졸리운_곰	2024.03.09	415
10	[Next.js 개발] Common Errors in Next.js and How to Resolve Them	졸리운_곰	2024.03.09	488
9	[Next.js 개발] [Javascript] 현재 날짜, 시간 구하기	졸리운_곰	2024.03.09	455
8	[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용	졸리운_곰	2024.03.07	511
7	[Next.js 개발] [React] useEffect에서 async/await	졸리운_곰	2024.03.06	363
6	[next.js 개발] How to use fetch API in Next.js?	졸리운_곰	2024.03.05	370
5	[next.js 개발] Next.js14에 Mysql연결하기	졸리운_곰	2024.03.05	471
4	[next.js 개발] How To Connect MySQL And Auth To A Next.js App	졸리운_곰	2024.03.05	338
3	[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리	졸리운_곰	2024.03.05	545
2	[next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것	졸리운_곰	2024.03.05	569
1	[next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)	졸리운_곰	2024.03.05	468

쓰기