모던 JavaScript 튜토리얼 Chapter4) 객체
객체란
자바스크립트에는 총 8개의 자료형이 있다. 그중에서 객체(Object)는 특수한 자료형이다. 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(Primitive) 자료형이라고 부른다. 반면 객체는 데이터 컬렉션이나, 키로 구분된 데이터 집합이나, 복잡한 개체(entity)를 표현할 수 있다.
객체는 중괄호 {...}를 이용해 만들 수 있다. 중괄호 안에는 '키(key) : 값(value)'쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데, key에는 문자형, value에는 모든 자료형이 허용된다. 프로퍼티 키는 '프로퍼티 이름'이라고도 불린다.
- 서랍장 : 객체
- 서랍장 안 파일 : 프로퍼티
- 각 파일에 붙어있는 이름표 : 객체의 키
- 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에서는 키를 이용해서 프로퍼티를 쉽게 찾을 수 있다. 추가나 삭제도 마찬가지이다.
빈 객체 만들기
2가지 방법이 있다.
//1. 객체 생성자 문법
let user = new Object();
//2. 객체 리터럴 문법
let user = {};리터럴과 프로퍼티
프로퍼티 생성
중괄호 {...}안에는 '키:값' 쌍으로 구성된 프로퍼티가 들어간다.
let user = { //객체
name : "John", //키:'name', 값:'John'
age : 30, //키:'age', 값:30
};현재 user 객체에 2개의 프로퍼티가 담겨져 있으며 각각의 이름표에 name과 age가 있다.
- 프로퍼티 키 = 프로퍼티 이름, 식별자
여러 단어를 조합해 프로퍼티 이름을 만드는 경우엔 프로퍼티 이름을 따옴표로 묶어주어야 한다.
let user = {
name : "John",
age : 30,
"like birds" : true,
}기타 : 맨 끝에 부는 쉼표를 trailing 또는 hanging 쉼표라고 부른다. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는 게 쉬워진다.
프로퍼티 값 읽기
점 표기법을 이용하여 프로퍼티의 값을 읽을 수 있다.
alert(user.name); //John
alert(user.age); //30프로퍼티 추가
프로퍼티 값에는 모든 자료형이 올 수 있다. Boolean형 프로퍼티를 추가해보자.
user.isAdmin = true;프로퍼티 삭제
delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.
delete user.age;const로 선언된 객체
const로 선언된 객체를 수정될 수 있다.
const user = {
name : "John"
};
user.name = "pete" //(*)(*)로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다. const는 user의 값을 고정하지만 그 내용은 고정하지 않는다. const는 user = ...을 전체적으로 설정하려고 할 때만 오류가 발생한다.
대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
// 문법 에러가 발생
user.likes birds = true점은 '유효한 변수 식별자'인 경우에만 사용할 수 있다. 유효한 변수 식별자는 공백이 없으며, 숫자로 시작하지 않아야하고, $와 _를 제외한 특수문자가 없어야 한다 따라서 키가 유효한 변수 식별자가 아닌 경우에는 대괄호 표기법을 사용한다.
let user = {};
//set
user["likes birds"] = true;
//get
alert(user["likes birds"]); //true
//delete
delete user["likes birds"];대괄호 표기법에서는 문자열뿐만 아니라 모든 표현식을 프로퍼티 키로 사용할 수 있다. 이를 응용하면 코드를 유연하게 작성할 수 있다.
예시 1)
let key = 'likes birds';
//user['likes birds'] = true;와 동일
user[key] = true;예시2)
let user = {
name : 'John',
age : 30,
};
let key = prompt("어떤 정보가 궁금하신가요?", "name");
//변수로 접근
alert(user[key]); //Johnn (prompt창에 'name'을 입력한 경우)
//점 표기법은 오류
alert(user.key) //undefined