[Deep dive] 10. 객체

객체란?

자바스크립트는 객체 기반 언어이며 원시값을 제외한 나머지 모든값은 객체이다. 원시 타입은 하나만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조가 될 수 있다. 따라서 변경가능한 값이자 키와 값으로 구성된 프로퍼티를 가지고 있다.

자바스크립트에서 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다.

❖ 일급 객체

1. 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

따라서, 객체는 프로퍼티와 메서드로 구성된 집합체이다.

프로퍼티: 객체의 상태를 나타내는 값
메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

---

자바스크립트는 프로토타입 기반 객체지향언어로서 방법이 여러가지 존재한다.

• 객체 리터럴
• Object. todtjdwk gkatn
• 생성자 함수
• Object.create 메서드
• 클래스

이중, 가장 일반적으로 사용하는 것이 객체 리터럴이다.

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

console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: ƒ}

---

프로퍼티

프로퍼티는 키 와 값으로 구성된다.

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

프로퍼티 키를 중복선언하면 나중에 선언한 프로퍼티가 덮어쓰게 된다.

var foo = {
  name: 'Lee',
  name: 'Kim'
};

console.log(foo); // {name: "Kim"}

---

프로퍼티 접근

마침표 표기법(dot notation), 대괄호 표기법(bracket notation)

var person = {
  name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

대괄호 표기법을 사용할때는 반드시 따옴표로 감싸진 문자열 이여야한다.

프로퍼티 동적 생성

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

var person = {
  name: 'Lee'
};

// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;

console.log(person); // {name: "Lee", age: 20}

메서드 축약 표현

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

다음과같이 축약하여 표현할 수 있다.

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

obj.sayHi(); // Hi! Lee