7장 : 객체

객체(인스턴스)

• 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
• 원시타입은 수동적인 값, 객체는 능동적인 값
• 객체는 0개 이상의 프로퍼티(property)로 구성된 집합
• JS 함수는 일급 객체로 값으로 취급

프로퍼티 & 메서드

var count = {
  num: 0, // 프로퍼티
  increase: function() { // 메서드
    this.num++;
  }
};

• num:0 : num은 프로퍼티 키, 0은 프로퍼티 값이다.
• increase : 객체안에 있는 함수

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

JS 객체 생성방법

• 객체 리터럴
  • 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 객체 값을 생성하기 위한 표기법
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

프로퍼티

• 객체의 상태를 나타내는 값(data)
• 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성
• 구조
  • 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값(식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 따옴표로 묶어서 사용)
  • 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값
• 특이사항
• 빈 문자열을 프로퍼티 키로 사용할 수 있지만 키로서 의미X --> 사용 권장 X
• 예약어 또한 프로퍼티 키로 가능하지만 예기치않은 에러가 발생할 수 있으므로 권장 X
• 문자열이나 심볼 값 이외의 값은 문자열로 암묵적 타입변환 (숫자 리터럴 -> 따옴표는 안 붙는데 내부적으로 문자열로 변환)
• 프로퍼티 중복 선언시 나중 선언한 프로퍼티가 덮어씀

프로퍼티 접근법

• 마침표 프로퍼티 접근 연산자를 사용하는 마침표 표기법(person.name)
• 대괄호 프로퍼티 접근 연산자를 사용하는 대괄호 표기법(person['name'])

프로퍼티 값 갱신

• 기존에 객체 안의 프로퍼티에 새로운 프로퍼티 값을 할당하면 새롭게 갱신 가능

프로퍼티 동적 생성 & 삭제

• 기존 객체에 없는 프로퍼티라도 새로 객체에 프로퍼티를 할당해주면 동적으로 생성되고 값이 할당됨.
• delete 연산자를 사용하여 객체의 프로퍼티를 삭제
  • 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시

var coins = {
  coin1 : 'Bitcoin',
};

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

console.log(coins); // {coin1: 'Bitcoin', coin2: 'Ethereum'}

delete coins.coin2; // coin2 프로퍼티 키 삭제

delete coins.coin4; // 에러가 발생X

console.log(coins) // {coin1: "Bitcoin"}

프로퍼티 축약 표현

• 변수 이름과 프로퍼티키가 동일한 이름일 때 프로퍼티키 생략 가능

let x = 1, y = 2;

const obj = { x, y };

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

계산된 프로퍼티 이름

프로퍼티 키를 동적으로 생성하는 것

var prefix = 'prop';
var i = 0;
var obj = {[`${prefix}-${++i}`]: i}; // 객체 리터럴

obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1}

메서드

• 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
• 객체에 묶여 있는 함수.
• 프로퍼티 값이 함수인 것(일반 함수와 구분하기 위해 메서드라는 이름을 가짐)

메서드 축약 표현

// es5

var obj = {
  sayHi: function() {
    console.log('Hi ');
  }
}

// es6

var obj = {
  sayHi() {
    console.log('Hi ');
  }