[JavaScript] Array와 Object 사용법과 차이
변수에는 임의의 값을 넣을 수 있는데 만약 변수에 여러개의 값을 넣고 싶다면 Array나 Object를 사용하면 된다. Array나 Object는 변수 하나에 여러가지 자료형 저장 가능하다. Array와 Object의 사용방법에 따라 조금의 차이가 있는데 개발방식에 따라 편한것을 선택하여 사용하면 된다.
- Array 변수 선언
Array는 대괄호[] 안에 값을 수정하며 각각의 변수의 위치는 인덱스를 이용하여 0번째 부터 N번째까지 값을 가져올 수 있다.
<body>
<h1>Hello JAVASCRIPT</h1>
<script>
var user1 = ['사용자1', 20, 'user1@naver.com'];
var user2 = ['사용자2', 25, 'user2@naver.com'];
console.log('user1 Array의 0번째 값 ' + user1[0] + ', 1번째 값 : ' + user1[1] +', 2번째 값 : ' + user1[2]);
console.log('user2 Array의 0번째 값 ' + user2[0] + ', 1번째 값 : ' + user2[1] +', 2번째 값 : ' + user2[2]);
</script>
</body>
- Array 변수 값 수정
user1의 Array 첫번째 값을 수정한다.
user1[1] = 30;
console.log("");
console.log('user1 Array의 0번째 값 ' + user1[0] + ', 1번째 값 : ' + user1[1] + ', 2번째 값 : ' + user1[2]);
- Array 반복문
Array 반복문은 for문과 forEach문 두가지 종류를 사용할 수 있다. for문은 상대적으로 조금 더 빠르나 체감할 수 없을 정도이다. forEach가 더 직관적이다.
var user1 = ['사용자1', 20, 'user1@naver.com'];for(var i=0; i < user1.length; i++){
console.log(user1[i] + ", " + i);
}user1.forEach(function(data, index) {
console.log(data + ", " + index);
});
- Object 변수 선언
Object 변수의 선언 방식이다 중괄호{} 안에 key 값과 value값을 넣어 선언한다. Object변수의 사용은 변수['key'] 또는 변수.key 방식으로 사용한다.
<body>
<h1>Hello JAVASCRIPT</h1>
<script>
var user1 = { name : '사용자1', age : 20, email : 'user1@naver.com' }
console.log(user1['name']);
console.log(user1.age);
</script>
</body>
- Object 변수 값 수정
user1의 name과 age를 수정한다.
user1['name'] = '사용자2';
user1.age = 30;
console.log("");
console.log(user1['name']);
console.log(user1.age);
- Object 반복문
Object는 for in 반복문으로 key 값과 value 값을 꺼내어 사용할 수 있다.
var user1 = { name: '사용자1', age: 20, email: 'user1@naver.com' }
for (var key in user1) {
console.log("key : " + key + ", value : " + user1[key]);
}
- 무엇을 사용해야 하나?
Array와 Object 변수 두가지 다 여러개의 데이터를 넣을 수 있다. 무엇을 사용해야 할까? 위 선언방식에서 알 수 있듯이 Array는 순서에 종속적이고 Object는 순서와 상관이 없다. '이름, 나이, 이메일' 세가지의 데이터만 저장하였지만 저장 할 데이터가 100개가 있다고 생각해보자. Array를 이용하여 선언한다면 우리는 100개 데이터의 위치를 모두 기억하고 있어야 사용할 수 있지만 Object의 경우 Key값만 기억하면 되므로 순서보다는 훨씬 사용하기 쉬울 것이다. 반대로 데이터의 수가 적다면 변수 선언시 Key값을 써야하는 Object 보다는 Array가 사용하기 쉬울 것이므로 상황에 맞게 골라 사용하면 된다.
참고로 Array 안에는 Object도 들어갈 수 있으며 Object안에 Array를 넣을 수도 있다.
- Array 내장함수 목록
Array - JavaScript | MDN
JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
developer.mozilla.org
- Object 내장함수 목록
Object - JavaScript | MDN
Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생
developer.mozilla.org
'Programming > Javascript' 카테고리의 다른 글
| [JavaScript] 계층 구조 데이터에서 특정 노드 찾기 (0) | 2023.06.09 |
|---|---|
| [JavaScript] 변수 선언 var 대신 let, const를 사용해보자 (1) | 2022.10.31 |
| [JavaScript] 일반 함수(Normal Function) VS 화살표 함수(Arrow Function) (0) | 2022.10.25 |
| [JavaScript] Array의 sort(), filter(), map() 사용하기 (0) | 2022.09.26 |
댓글