10장. 객체 리터럴

객체란?

--> 자바스크립트는 객체 기반의 프로그래밍 언어이다.
--> 원시 값을 제외한 자바스크립트를 구성하는 거의 모든 것은 객체이다.

원시 값 vs 객체 값

원시 값: 변경 불가능한 값, 단 하나의 값만 나타냄
객체 값: 변경 가능한 값, 다양한 타입의 값을 하나의 단위로 구성

객체의 구성요소

프로퍼티: 객체의 상태를 나타내는 키, 값
메서드: 프로퍼티를 참조하고 조작할 수 있는 동작
--> 객체는 상태와 동작을 하나의 단위로 구조화할 수 있어서 유용

객체 리터럴에 의한 객체 생성

인스턴스

클래스에 의해 생성되어 메모리에 저장된 실체

객체 생성 방법

1) 객체 리터럴: 편리, 클래스를 생성할 필요가 없고, new 연산자도 필요 없음.

var person = {
    name = 'Lee',
    sayHello: function () {
        console.log(`Hello! My name is ${this.name}.`};
    };

* 객체 리터럴은 값으로 평가되는 표현식이다. --> 객체 리터럴을 닫는 중괄호 뒤에는 반드시 세미콜론을 붙인다.

---

2) Object 생성자 함수
3) 생성자 함수
4) Object.create 메서드
5) 클래스 (ES6)

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구분된다.

var person = {
    name: 'Lee', //키는 name, 값은 'Lee', 쉼표로 프로퍼티 구분
    age: 20 // 키는 age, 값은 20
}

프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (식별자 역할)
프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키 동적 생성

--> 프로퍼티 키로 사용할 표현식을 대괄호로 묶는다.

var obj = {};
var key = 'hello'; // 프로퍼티 키의 이름
obj[key] = 'world'; // 프로퍼티 키 동적 생성
// {hello: 'world'}

메서드

--> 자바스크립트의 함수는 일급 객체이다.
--> 따라서, 함수는 값으로 취급할 수 있다.
--> 함수는 객체의 프로퍼티 값으로 사용할 수 있다.

var circle = {
   radius: 5, // 프로퍼티
   getDiameter: function () { // 메서드
       return 2 * this.radius;
   }
};

프로퍼티 접근

프로퍼티 접근 방법

var person = {
   name: 'Lee'
};

1) 마침표 프로퍼티 접근 연산자를 사용 (마침표 표기법)

console.log(person.name);

2) 대괄호 프로퍼티 접근 연산자를 사용 (대괄호 표기법)

console.log(person['name']); // 프로퍼티 키를 반드시 따옴표로 감싼다!!

프로퍼티 값 갱신

--> 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person = {
   name: 'Lee'
};
person.name = 'Kim'; // 프로퍼티 값 갱신

프로퍼티 동적 생성

--> 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가

var person = {
   name: 'Lee'
};
person.age = 20; // age 프로퍼티 추가, 프로퍼티 값으로 20 할당
console.log(person); // {name: 'Lee', age: 20}

프로퍼티 삭제

--> delete 연산자로 객체의 프로퍼티 삭제

delete person.age;

ES6에서 추가된 객체 리터럴의 확장 기능

프로퍼티 축약 표현

let x = 1, y = 2;
const obj = {x,y};
console.log(obj); // {x:1, y:2}

메서드 축약 표현

const obj = {
  name: 'Lee',
  sayHi() { // 메서드 축약 표현
      console.log('Hi! ' + this.name);
  }
};