객체
객체란?
자바스크립트는 객체 기반의 언어다.
자바스크립트를 구성하는 거의 "모든 것"이 객체다. 자바스크립트는 8가지 자료형이 있는데
객체를 제외한 7개의 자료형이 모두 원시값이다.
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.
원시 값 = 단 하나의 값 , 변경 불가능한 값이다.
그러나 객체는 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다.
그리고 객체는 변경가능한 값이다.
객체 안에는 키와 값으로 구성된 데이터 값을 넣을 수 있는데 이것을 프로퍼티라고 한다.
키에는 문자형, 값에는 모든 자료형이 허용된다.
서랍장을 상상해보자.
서랍장 안 파일은 프로퍼티, 파일 각각에 붙어 있는 이름표는 객체의 키라고 생각하면 된다.
복잡한 서랍장에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있다.
빈 객체를 만드는 방법
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부른다. 객체를 선언할 때 주로 이 방법을 사용한다.
리터럴과 프로퍼티
중괄호 {...} 안에는 '키: 값' 쌍으로 구성된 프로퍼티가 들어간다.
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age" , 값: 30
}
'콜론(:)을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 '이름' 혹은
'식별자'라고도 부른다.
객체 user에는 프로퍼티가 두 개 있다.
- 첫 번째 프로퍼티 - "name" (이름)과 "John" (값)
- 두 번째 프로퍼티 - "age" (이름)과 30(값)
서랍장(객체 user)안에 파일 두 개(프로퍼티 두 개)가 담겨있는데, 각 파일에 "name", "age"라는 이름표가 붙어있다고 생각하면 쉽다.
서랍장에 파일을 추가하고 뺄 수 있듯이 개발자는 프로퍼티를 추가, 삭제할 수 있다.
점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽는 것도 가능하다.
// 프로퍼티 값 읽기
alert(user.name); // John
alert(user.age); // 30프로퍼티 값엔 모든 자료형이 올 수 있다. 불린형 프로퍼티를 추가해보자.
user.isAdmin = true;
delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.
delete user.age;
여러 단어를 조합해 프로퍼티를 만든 경우 프로퍼티 이름을 따옴표로 묶어줘야 한다.
let user = {
name: "John",
age: 30,
"likes birds": true // 복수의 단어는 따옴표로 묶어야 한다.
};
마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.
let user = {
name: "John",
age: 30,이런 쉼표를 'trailing(길게 늘어지는)' 혹은 'hanging(매달리는)' 쉼표라고 부른다.
이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는 것이 쉬워진다.
대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
// 문법 에러가 발생.
user.likes birds = true자바스크립트는 위와 같은 코드를 이해하지 못한다. user.likes까지는 이해하다가 예상치 못한 birds를 만나면 문법 에러를 뱉어낸다.
'점'은 키가 '유효한 변수 식별자'인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 한다. 또한 숫자로 시작하지 않아야 하며, $와 _를 제외한 특수 문자가 없어야 한다.
키가 유효한 변수 식별자가 아닌 경우에 점 표기법 대신에 '대괄호 표기법'이라 불리는 방법을 사용할 수 있다.
let user = {};
// set
user["likes birds"] = true;
// get
alert(user["likes birds"]); // true
// delete
delete user["likes birds"];대괄호 표기법을 사용할 때는 키에 어떤 문자열이 있던지 상관없이 동작한다.
대괄호 표기법을 사용하면 변수를 키로 사용한 것과 같이 문자열 뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)