본문 바로가기

Front-end/JavaScript

[Javascript] 객체란 무엇인가?

1. 객체란?

자바스크립트엔 여덟가지 자료형이 있다. 이 중 일곱개는 오직 하나의 데이터(문자열,숫자 등)만 담을 수 있는 '원시형(primitive type)'이다.

이와 달리 key로 구분된 데이터 집합이나 복잡한 객체(entity)를 저장하는 객체는 다양한 데이터를 담을 수 있다.

객체를 만드는 방법은 '객체 생성자'문법과 '객체 리터럴'문법 두가지가 있다.

 

2. 리터럴과 프로퍼티

중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다. 객체를 선언할 땐 주로 이 방밥을 사용한다.

const user = {
    name: "john",
    age: 30,
};

이런식으로 '콜론(:)'을 기준으로 왼쪽에는 key가 오른쪽엔 value가 위치한다. 프로퍼티 key는 프로퍼티 '이름' 혹은 '식별자' 라고도 부른다.  프로퍼티를 이용한 다양한 동작은 다음과 같다.

//프로퍼티 값 얻기
console.log(user.name);

//프로퍼티 값 삭제하기
delete user.age;

//프로퍼티 값 추가하기
user.address = "seoul"

더보기

 ** const 로 선언된 객체는 수정될 수 있다.

 위의 객체 user에서 user.name = "pete" 라고 객체 value를 수정하면 객체의 내용이 수정된다.

오류를 일으킬 것 같지만, const는 user의 값을 고정하고, 그 내용을 고정하진 않기 때문에 value값이 수정되는 것이다.

즉, const는 user = ..를 전체적으로 설정하려고 할 때만 오류가 발생한다.

 


더보기

** 여러 단어를 조함해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.

user에 'like birds':true 라는 프로퍼티를 추가할 때, 점 표기법을 이용해서

user.like birds = true

라고 프로퍼티를 추가하면 문법 에러가 난다.

'점' 은 키가 '유효한 번수 식별자' 인 경우에만 사용할 수 있는데, 식별자에 공백이나$ 혹은 _와같은 특수문자가 있는 경우에는 유효하지 않기 때문이다.

 

이때는 user["like birds"] = true 와 같은 대괄호 표기법을 사용해주어야 한다.

● 계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 key가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property)라고 한다.

let fruit = prompt("which fruit?", "apple"

let bag = {
	[fruit]:5,
};

console.log(bag.apple); // 5가 출력된다.

위 코드에서 [fruit]는 프로퍼티 이름을 변수 fruit 에서 가져오겠다는 것을 의미한다.

 

3. 객체와 'for...in'반복문

for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.

let user = {
	name: 'john',
	age: 30,
	isAdmin: true;
};

for (let key in user) {
	console.log(key); // name, age, isAdmin
	console.log(user[key]); // john, 30m true
};

for...in 반복문에서는 반복변수(loopint variable)를 선언한다.

 

4. 객체 정렬 방식

깨체는 '특별한 방식으로 정렬'된다. 

정수 property는 자동으로 정렬되고, 그 외의 property는 객쳉 추가한 순서 그대로 정렬된다.

let codes = {
	'49':'독일',
    '41':'스위스',
    ...
    '1':'한국'
}

for (let code in codes) {
	console.log(code);
}
// 1,...,41,49

이런식으로, 정수property는 순서가 달라도, for 문을 이요해서 출력될 때에는 자동으로 정렬되어 출력된다. 한편, 그 외 프로퍼티는 추가한 순서 그대로 정렬되어 출력된다.

 

5. 이외의 자바스크립트 내 객체들..

위에 정리한 객체는 '순수 객체(plain object)'라 불리는 일반객체들이지만,  자바스크립트 내에는 여러 종류의 객체가 존재한다.

  • Array - 정렬된 데이터 컬렉션을 저장할 때 쓰임
  • Date - 날짜와 시간 정보를 저장할 때 쓰임
  • Error - 에러 정보를 저장할 때 쓰임