[JS Deep Dive] 10. 객체 리터럴

자바스크립트

• 객체 기반의 프로그래밍 언어

• 구성 요소 대부분이 객체

• 원시 값 제외한 나머지 값 = 모두 객체
  • 함수, 배열, 정규 표현식

 

---

원시 타입 vs 객체 타입

• 원시 타입
  • 단 하나의 값만 나타냄

• 객체 타입 (object/reference type)
  • 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
    • 원시 값 또는 다른 객체

• 원시 값 (원시 타입의 값)
  • 변경 불가능한 값

• 객체 타입의 값 (객체)
  • 변경 가능한 값

 

---

객체

• 0개 이상의 프로퍼티로 구성된 집합

• 프로퍼티 구성 요소
  1. 키(key)
  2. 값(value)
     • 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음
       • 함수는 일급 객체이므로 가능
         • 프로퍼티 값이 함수일 경우 메서드라 부름

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

• 객체는 상태와 동작을 하나의 단위로 구조화할 수 있어 유용함

 

---

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

C++ / 자바

• 클래스 기반 객체지향 언어

• 클래스 사전 정의 후 필요시 new 연산자와 함께 생성자 호출하여 인스턴스 생성
  • 클래스: 인스턴스를 생성하기 위한 템플릿의 역할
  • 인스턴스
    • 클래스에 의해 생성되어 메모리에 저장된 실체
    • 객체가 메모리에 저장되어 실제로 존재하는 것

자바스크립트

• 프로토타입 기반 객체지향 언어

• 다양한 객체 생성 방법 지원
  • 객체 리터럴 : 가장 일반적이고 간단한 방법
    • 객체를 생성하기 위한 표기법
    • 중괄호 내에 0개 이상의 프로퍼티를 정의 { … }
    • 변수에 할당되는 시점에 JS엔진은 객체 리터럴을 해석하여 객체 생성
    • 중괄호 내에 프로퍼티 정의 X → 빈 객체 생성
    • JS의 유연함과 강력함을 대표하는 객체 생성 방식
    • 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용하여 객체 생성
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스 (ES6)

 

---

 

프로퍼티

💡

객체 = 프로퍼티의 집합

프로퍼티 = 키와 값으로 구성

• 프로퍼티 키
  • 프로퍼티 값에 접근할 수 있는 이름 ⇒ 식별자 역할
  • 프로퍼티 키 동적 생성
    • 프로퍼티 키로 사용할 표현식을 대괄호로 묶으면 됨

    var obj = {};
    var key = 'hello';
    
    obj[key] = 'world';
    
    console.log(obj); // {hello: "world"}

---

 

메서드

• 객체에 묶여 있는 함수

• this 키워드

  var circle = {
  	radiu: 5,
  	getDiameter: function() {
  		return 2 * this.radius;
  	}
  };
  
  console.log(circle.getDiameter());

  • 메서드 내부에서 사용한 this 키워드
    • 객체 자신을 가리키는 참조 변수

 

---

프로퍼티 접근

1. 마침표 표기법 .

2. 대괄호 표기법 [ … ]
   • 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함 ⇒ person[’name’]

• 객체에 존재하지 않는 프로퍼티 접근 → undefined 반환

 

---

프로퍼티 삭제

delete 연산자 통하 객체의 프로퍼티 삭제 ⇒ delete person.age;

 

---

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

프로퍼티 축약 표현

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

계산된 프로퍼티 이름

const prefix = 'prop';
let i = 0;

const obj = {
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i,
}

console.log(obj) // {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

const obj = {
	name: 'Lee',

	// 기존
	sayBye: function(){
		console.log('Bye ' + this.name;
	}

	// 축약
	sayHi() {
		console.log('Hi ' + this.name);
	}
}

obj.sayHi(); // Hi Lee