자바스크립트에는 여덟 가지 자료형이 있다. 이 중 일곱개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부른다.
객체형은 이러한 원시형과 달리 다양한 데이터를 담을 수 있다.
객체는 중괄호 {...}를 이용해 만들 수 있다. 중괄호 안에는 '키:값'쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용된다. 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있다.
let user = new Object(); // 객체 생성자 문법
let user= {}; // 객체 리터럴 문법중괄호를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라 부른다. 객체를 선언할 땐 주로 이 방법을 사용한다.
리터럴과 프로퍼티
중괄호 {...}안에는 '키:값'쌍으로 구성된 프로퍼티가 들어간다.
프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자'라고도 부른다.
개발자는 프로퍼티를 추가, 삭제할 수 있다. 점 표기법을 이용하면
프로퍼티 값을 읽는 것도 가능하다.
alert(user.name);
alert(user.age);delete 연산자를 사용하면 프로퍼티를 삭제할 수 도 있따.
delete user.age;여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다.
let user = {
name:'John',
age:30,
"like birds": true,// 복수의 단어는 따옴표로 묶어야 한다.
}마지막 프로퍼티 끝은 위와 같이 쉼표로 끝날 수 있다. 이런 쉼표를 trailing 혹은 hanging 쉼표라고 부른다. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는게 쉬워진다.
상수 객체는 수정될 수 있다.
const 로 선언된 객체는 수정될 수 있다.
const user = {
name:"John"
}
user.name = "Pete";//(*)(*)로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다. const는 user의 값을 고정하지만 그 내용은 고정하지 않는다. const는 user = ... 를 전체적으로 설정하려고 할 때만 오류가 발생한다.
대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
user.like birdes = true // 에러발생
'점'은 키가 유효한 변수 식별자인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 한다. 또한 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수문자가 없어야 한다.
키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 대괄호표기법이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.
대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의해야 한다.
대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열 뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.
let key = "likes birds";
user[key] = true;변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이를 응용하면 코드를 유연하게 작성할 수 있다.
let user = {
name:"John",
age:30,
};
let key = prompt("사용자의 어떤 정보를 얻고 싶나요?", "name");
//변수로 접근
alert(user[key])그런데 점 표기법은 이런 방식이 불가능하다.
계산된 프로퍼티
객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 이를 계산된 프로퍼티라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]:5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
}
alert(bag.apple);// fruit에 "apple"이 할당되었다면, 5가 출력된다.위 예시에서 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.
