[JavaScript] 딥다이브 / 10장 객체 리터럴

ungnam·2023년 6월 14일
0
post-thumbnail

객체란?

단 하나의 값만 나타내는 원시 타입과는 다르게 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다.

변경 불가능한 원시 타입의 값과는 다르게 객체는 변경이 가능하다는 특징이 있다.(11장에서 자세히 설명)

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

클래스 기반 객체지향 언어(c++, Java)는 클래스를 사전에 정의하고 new 연산자를 통해 객체를 인스턴스(클래스에 의해 생성되어 메모리에 저장된 실체)화한다.

JS프로토타입 기반 객체지향 언어로서 클래스 이외에도 다양한 객체 생성 방법을 지원한다.

객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)

이 중 객체 리터럴 방식은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식으로, 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에 JS 엔진이 객체 리터럴을 해석하여 객체를 생성한다.

프로퍼티

객체의 상태를 나타내는 값(data)
객체는 0개 이상의 프로퍼티로 구성되어 있으며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

key -> 빈 문자열을 포함하는 모든 문자열 및 심벌 값 사용 가능

  1. 문자열의 경우 따옴표 생략이 가능하나 식별자 네이밍 규칙을 따르지 않는 경우 생략이 불가능하다.
  2. 프로퍼티 키를 동적으로 생성하는 경우 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 한다. (계산된 프로퍼티 이름)
  3. 문자열이나 심벌 값 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. (숫자의 경우 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.)
  4. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

value -> JS에서 사용 가능한 모든 값을 사용할 수 있다.

메서드

프로퍼티를 참조하고 조작할 수 있는 동작(behavior)
JS에서의 함수는 일급 객체이므로 값으로 사용할 수 있다. (함수로 객체를 만들 수 있고, 함수 자체가 객체이기도 함)
이 때 프로퍼티 값이 함수인 경우, 일반 함수와 구분짓기 위해 메서드라 부른다.

프로퍼티 접근

마침표 표기법(dot notation)

프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름인 경우에만 사용 가능

대괄호 표기법(bracket notation)

프로퍼티 키는 숫자를 제외하고 반드시 따옴표로 감싼 문자열이어야 한다. 숫자인 경우 문자열로 암묵적 타입 변환된다.

프로퍼티 삭제

delete 연산자를 통해 프로퍼티 삭제가 가능하다.

객체 리터럴의 확장 기능(ES6)

프로퍼티 축약 표현

변수 이름과 프로퍼티 키가 동일하면 프로퍼티 키를 생략할 수 있음 (이 때 프로퍼티 키는 변수 이름으로 자동 생성됨)

let x = 1, y = 2;

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

계산된 프로퍼티 이름

객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있음

let key = 'hello';

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

메서드 축약 표현

메서드 정의 시 function 키워드 생략 가능

const obj = {
  name: 'Lee',
  sayHi() {
    console.log('Hi!' + this.name);
  }
};
obj.sayHi(); // Hi! Lee
profile
꾸준함을 잃지 말자.

0개의 댓글