티스토리 뷰
기본적인 배열은 일반 변수들이 나열된 모양이다.
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를 사용하여 해당 배열에 접근할수있겠지?
질문이나 오타는 댓글로 남겨주길.
'HTML, CSS, JS' 카테고리의 다른 글
| JavaScript 클로저(Closure)의 원리 (0) | 2026.06.12 |
|---|---|
| 토글 버튼 만들기 예제 (0) | 2026.05.06 |
| webview) ios와 android의 scroll 차이 (0) | 2019.06.05 |
| javascript date format 변경 방법 (0) | 2019.05.09 |
| 자바스크립트 SyntaxError: missing 오류 해결 방법 (1) | 2019.04.10 |
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
- Total
- Today
- Yesterday
- 아두이노
- 자바
- 안드로이드
- Android
- c#
- 클래스
- 파일처리
- 문자열
- Class
- C++ 클래스
- C++
- html
- C언어
- DB연동
- String
- 알고리즘
- OpenCV
- 상속
- 데이터베이스
- MySQL
- 문제풀이
- 파이썬
- Java
- C
- 자료구조
- 리스트
- 벡터
- 정보처리기사
- 배열
- 블루투스
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |