자바스크립트 객체(Object)

 

객체란?

• 현실의 사물을 프로그래밍에 반영한 것 입니다.
• 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있습니다.
• 원시형과 다르게 다양한 데이터를 담을 수 있습니다.

* 여덞가지 자료형 중 7개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어'원시형(primitive type)'이라 부릅니다.

 

 

객체는 자바스크립트 거의 모든 면에 녹아있는 개념입니다.

자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.

 

 

 

객체 만드는 법

 

중괄호 {...} 를 이용해서 만듭니다.

중괄호 안에는  ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있습니다.

* 키엔 문자형, 값엔 모든 자료형이 허용합니다.

 

 

 

빈 객체를 만드는 2가지 예시

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

* 객체 리터럴이란? (링크 참조)

 

 

 

리터럴과 프로퍼티

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

'콜론(:)'을 기준으로 왼쪽엔 키(key)가, 오른쪽엔 값(value)이 위치합니다.

* 프로퍼티 키는 프로퍼티 ‘이름’ 혹은 '식별자’라고도 부릅니다.

 

프로퍼티 값엔 모든 자료형이 올 수 있습니다.

 

 

 

프로퍼티 읽기

점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽는 것도 가능합니다.

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

 

 

프로퍼티 삭제

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.

delete user.age;

 

 

단어 조합해 만든 프로퍼티 이름

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 합니다.

 

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

 

 

 

 

상수(const)로 선언된 객체는 수정이 가능

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

(*)로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않습니다. 

const는 user의 값을 고정하지만, 그 내용은 고정하지 않습니다.

 

 

 

대괄호 표기법

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

 

대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다.

 

 

 

* 위 글은 모던 자바스크립트 튜토리얼 사이트의 내용을 요약한 글입니다.

자세한 정보는 모던 자바스크립트 튜토리얼 채널을 참고하시기 바랍니다.

---

참고자료

 

제로초(객체와 배열)

 

모던 자바스크립트(JavaScript) 튜토리얼