[JavaScript] 배열(array)과 객체(object)

배열과 객체는 헷갈린다.

둘 다 어떻게 보면 배열이기 때문이다.

배열(array)

원하는 요소들을 순서대로 배열 안에 넣은 모양.

let arr = ['asian', 'lion', 'rose'];

배열 내 요소를 찾기 위해선

인덱스(index)가 필요하다.

우리가 중고등학교때 각자의 번호가 있던 것 처럼, 배열 내 요소는 고유 번호가 존재한다.

간과하지 말아야 할 점은

첫번째 요소가 1이 아닌 0이라는 것.

 

그렇기에, lion을 찾아야 한다면 아래와 같이 적는다.

let arr = ['asian', 'lion', 'rose'];
console.log('arr[1]', arr[1]);	//arr[1] lion
console.log(arr[1])	//animal

 

 

두번째 줄의 console.log('arr[1]', arr[1]); 에서 앞의 'arr[1]'은 

인자가 무엇인지에 대한 설명을 덧붙이기 위한 것이다. 굳이 없어도 된다.

 

객체

배열이 그저 요소들을 단순히 나열 한 모습이라면, 객체는 요소들에 이름을 붙인 형태이다.

그저 번호로만 줄을 세웠던 사람들에게 특징을 부여하는 것이다.

1반 아이들이 있는 반에 반장은 누구, 청소당번은 누구, 1반 선생님은 누구 이런 식으로 말이다.

 

let obj = {
	human: 'asian',
	animal: 'lion',
	flower: 'rose'
};	//가독성을 위해 줄바꿈을 한 것이다.

obj라는 객체 안에는 human이라는 분류에 'asian'이 들어가있는 형식이다.

 

그렇다면 객체의 요소인 asian을 찾으려면 어떻게 해야 할까?

 

let obj = {
	human: 'asian',
	animal: 'lion',
	flower: 'rose'
};
console.log('obj.animal', obj.animal);	//obj.animal lion
console.log('obj.animal', obj['animal']);	//obj.animal lion

 

 

 

객체는 두 가지 방법으로 요소를 찾을 수 있다.

첫 번째 방법이 더 자주 쓰이는데 객체의 이름.key의 이름 형태이다.

두 번째 방법은 객체의 이름[key의 이름] 형태이다.

 

key는 뭘까?

 

배열은 오직 상수인 index로 요소를 찾는다고 말했다.

하지만 객체는 key와 value로 이루어져 있다. 

human 이 key, asian이 value이다.

보통 key 자체를 찾는 시도는 일어나지 않으며 key는 value를 찾기 위한 도구 일 뿐이다.

 

객체 값 수정하기

만약에 animal 키 값에 lion이 아닌 tiger을 넣고 싶다면?

obj.animal = 'tiger';
console.log('obj.animal', obj.animal);	//obj.animal tiger

이런 식으로 적는다.

 

객체 값 삭제하기

객체 내 animal의 tiger을 삭제하고 싶다면?

delete obj.animal = 'tiger';
console.log('after delete obj.animal', obj.animal);	//after delete obj.animal undefined

배열과 객체의 차이

자. 헷갈리는 부분만 모아 적어보았다.

 

배열은 [ ](대괄호), 객체는 { }(중괄호) 를 이용.

배열의 값은 배열 인덱스로 불러온다.

객체의 값은 key값으로 불러온다.

 

예)

arr[1] = lion;	//배열
obj['animal'] = lion;	//객체

배열에서의 인덱스는 객체에서 key의 역할을 한다.

배열 내 1은 상수이기 때문에 따옴표를 붙이지 않지만,

객체 내 animal은 변수같은 스트링이기 때문에 따옴표를 붙인다.

 

배열은 객체처럼 .을 통해서 값을 불러오지 못한다.

 

예)

배열: 배열에서 두번째 인덱스 값을 찾는다고 객체처럼 arr.1라고 하면 안된다.

배열은 오직 arr[1]처럼 대괄호만!!

 

하지만 객체는 두 방법 다 가능하다.