💡자바스크립트의 객체

thumb_hyeok·2022년 3월 15일

JavaScript object

🟡 JavaScript

목록 보기

5/15

🤔 객체란 무엇일까?

자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값은 모두 객체다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

이처럼 객체는 프로퍼티와 메서드로 구성된 집합체다.

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

엔진이 값을 저장하는 방식은 구현 의존적(Implementation-Dependent)이다. 객체 컨테이너에 담지 않는 게 일반적이다. 객체 컨테이너에는 실제로 값이 있는 곳을 가리키는 포인터(레퍼런스) 역할을 담당하는 프로퍼티명이 담겨있다.

프로퍼티

객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다.

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

식별자 네이밍 규칙을 따르지 않는 값을 프로퍼티 키로 사용할 수 있지만 권장하지 않는다. 그 외에도 프로퍼티 키를 사용하는 여러가지 경우가 있을 수 있다. 아래 예시를 통해 살펴보자

빈 문자열을 프로퍼티 키로 사용 : 권장 X
문자열 또는 문자열로 평가할 수 있는 표현식을 프로퍼티 키를 동적으로 생성할 수 있음 : [...]로 묶어야함
프로퍼티 키에 문자열이나 심벌 값 외의 값 사용 → 암묵적 타입 변환을 통해 문자열로 변환
프로퍼티 키 중복 선언 → 나중에 선언한 프로퍼티가 덮어씀 (에러 발생 X)

메서드

자바스크립트의 함수는 객체(일급 객체)다. 따라서 함수는 값으로 취급할 수 있다. 그러므로 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값으로 사용된 함수를 메서드라 부른다.
그러나 생각보다 메서드로 인정되는 범위가 상당히 좁다. 이는 함수에 대해 다루면서 알아보도록 하자.

프로퍼티 접근법

마침표 표기법(dot notation) : 마침표 프로퍼티 접근 연산자(.)를 사용
대괄호 표기법(bracket notation) : 대괄호 프로퍼티 접근 연산자([...])를 사용

const crew = {
	name: 'Harry',
	greeting: function () {
		console.log(`Hello!, I'm ${this.name});
	}
}

console.log(crew.name) // Harry
console.log(crew["name"]) // Harry

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는다면, 반드시 대괄호 표기법을 사용해야한다. 대괄호 표기법을 사용하는 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야한다. 단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

[[Get]], [[Set]]

자바스크립트의 객체는 Essential Internal Methods로 [[Get]], [[Set]] 함수를 가진다. 이는 프로퍼티에 접근하거나, 세팅할 때 각각이 사용된다.

const myObject = {
	a: 2
}
myObject.a; //2

myObject.a는 누가 봐도 프로퍼티 접근이지만 a란 이름의 프로퍼티를 myObject에서 찾지 않는다. 명세에 따르면 이 코드는 myObject에 대해 [[Get]] 연산을 한다. 기본적으로 [[Get]] 연산은 주어진 이름의 프로퍼티를 먼저 찾아보고 있으면 그 값을, 어떻게 해도 찾을 수 없으면 undefined를 반환한다.

const myObject = {
	a: 2
}
myObject.a = 3; 
console.log(myObject.a) //3

이는 myObject의 a란 이름의 프로퍼티에 값을 재할당하는 [[Set]] 연산을 실행하면 주어진 객체에 프로퍼티가 존재하는지 등 여러가지 요소에 따라 이후의 작동 방식이 달라진다. [[Set]] 알고리즘은 이미 존재하는 프로퍼티에 대해 대략 다음의 확인 절차를 밟는다.

프로퍼티가 접근 서술자(Accessor Descriptor)이면 세터를 호출한다.
프로퍼티가 writable:false인 데이터 서술자(Data Descriptor)이면 실패한다(엄격은 TypeError)
이외에는 프로퍼티에 해당 값을 세팅한다..

🪧 객체의 생성방식

자바스크립트은 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

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

지금은 객체 리터럴에 의한 방식과 생성자 함수들에 의한 방식만 살펴보도록하겠다.

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

이러한 객체 생성 방법 중 가장 일반적이고 간단한 방법이 객체 리터럴을 사용하는 방법이다.
객체 리터럴은 중괄호 내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다. (객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다. 값으로 평가되는 표현식이기 때문이다. 중괄호의 마지막에는 표현식의 끝을 알리는 세미콜론을 붙인다.)

const crew = {
	name: 'Harry',
	greeting: function () {
		console.log(`Hello!, I'm ${this.name});
	}
}

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

프로퍼티 축약 표현

프로퍼티 값으로 변수를 사용하는 경우에 변수명과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략(property shorthand)할 수 있다. 이 때 프로퍼티 키는 변수 이름으로 자동 생성된다.

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다. 단, 프로퍼티 키로 사용할 표현실을 대괄호([...])로 묶어야한다.
이를 계산된 프로퍼티 이름(computed property name)이라 한다.

(ES5에서는 객체 리터럴 외부에서만 계산된 프로퍼티 이름으로 프로퍼티 키를 동적생성할 수 있다.)

const prefix = 'prop'
let i = 0;

const obj = {
	[`${prefix}-${++i}`]: i, // prop-1: 1
	[`${prefix}-${++i}`]: i, // prop-2: 2
	[`${prefix}-${++i}`]: i  // prop-3: 3
}

메서드 축약표현

//ES5
var obj = {
	myFunc: function() {
		console.log('Hello, World!');
	}
}

//ES6
const obj = {
	myFunc() {
		console.log('Hello, World!');
	}
}

메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당된 함수와 다르게 동작한다.

생성자 함수에 의한 객체 생성

생성자 함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수를 통해 객체(인스턴스)를 생성할 수 있다. 자바스크립트는 Object 생성자 함수 외에도 String, Number, Function 등등 여러가지 빌트인(built-in) 생성자 함수를 제공한다.

생성자 함수 방식의 장점과 객체 리터럴 방식의 단점

객체 리터럴 방식 : 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야하는 경우 비효율적
생성자 함수 방식 : 객체를 생성하기 위한 템플릿(클래스)처럼 사용. 구조가 동일한 프로퍼티 생성할 때 효율적

생성자 함수의 인스턴스 생성과정

자바스크립트 엔진은 new 연산자와 함께 생성자 함수를 호출하면 다음과 같은 과정을 거쳐 암묵적으로 인스턴스를 생성하고 인스턴스를 초기화한 후 암묵적으로 인스턴스를 반환한다.

암묵적으로 빈 객체가 생성된다
빈 객체, 즉 인스턴스는 생성자 함수 내부의 this에 바인딩된다 (여기까지는 런타임이전에 실행된다.)
인스턴스 초기화 (인스턴스 프로퍼티 추가 및 초기값 할당)
생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다 (만약 this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return문에 명시한 객체가 반환다된다. 원시 값 반환은 무시된다.)

내부 메서드 [[Call]]과 [[Construct]]

함수는 객체이므로 일반 객체(ordinary object)와 동일하게 동작할 수 있다. 함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있기 때문이다.

함수는 객체이지만 일반 객체와는 다르다. 함수는 일반 객체와 다르게 호출이 가능하다
따라서 함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드는 물론, 함수로서 동작하기 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 추가로 가지고 있다.

함수가 일반 함수로 호출 - [[Call]] 호출
함수가 생성자 함수로 호출 - [[Construct]] 호출

모든 함수 객체는 [[Call]]을 가지지만, 모든 함수가 [[Construct]]를 가지지 못한다.
모든 함수 객체는 아래를 만족한다.

callable & constructor || callable & non-constructor

constructor: 함수 선언문, 함수 표현식, 클래스
non-constructor: 메서드 (ES6 메서드 축약 표현), 화살표 함수

new.target

생성자 함수가 new 연산자 없이 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined이다.

이를 통해 new 연산자를 통해 생성자 함수로서 호출하지 않은 경우를 확인할 수 있다.
참고로 대부분의 빌트인 생성자 함수는 new 연산자와 함께 호출되었는지를 확인한 후 적절한 값을 반환한다. Object와 Function 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작한다.

🧬 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드

내부 슬롯(internal slot)과 내부 메서드(internal method)는 자바스크립트 엔진 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)이다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드이다.

내부 슬롯과 내부 매서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 프로퍼티는 아니다. (프로퍼티도 아니다) 원칙적으로 직접 접근, 호출하는 방법을 제공하지 않으나, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기도 한다.

프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. value, writable, enumerable, configurable를 말한다.

프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다.

따라서 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 있다. 이는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터(PropertyDescriptor) 객체를 반환한다.

데이터 프로퍼티와 접근자 프로퍼티

프로퍼티는 데이터 프로퍼티(Data Property)와 접근자 프로퍼티(Accessor Property)로 구분된다. ES5부터 모든 프로퍼티는 프로퍼티 디스크립터(Property Descriptor)로 표현된다.
프로퍼티 디스크립터는 프로퍼티의 종류에 따라 데이터 프로퍼티 디스크립터(Data Property Descript)와 접근자 프로퍼티 디스크립터 (Accessor Property Descriptor)로 나뉜다.

데이터 프로퍼티 : 키와 값으로 구성, 지금까지 살펴본 모든 프로퍼티다.
접근자 프로퍼티 : 자체적 값 X, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출하는 접근자 함수(accessor function)으로 구성된 프로퍼티다.

데이터 프로퍼티

데이터 프로퍼티의 데이터 프로퍼티 디스크립터에는 4가지 내부 슬롯이 존재한다

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Value]]	value	프로퍼티 값
[[Writable]]	writable	프로퍼티 값의 변경 가능 여부
[[Enumerable]]	enumerable	프로퍼티의 열거 가능 여부
[[Configurable]]	configurable	프로퍼티 재정의 가능 여부

value
프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다.
프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다.
이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다.
writable
프로퍼티 값의 쓰기 가능 여부를 조정한다
쓰기 금지된 값을 수정하려고 하면 조용히 실패하며, 엄격 모드에선 TypeError가 발생한다.

configurable
configurable가 true라면 defineProperty()로 프로퍼티 서술자를 변경할 수 있다.
false라면 defineProperty() 호출 시 엄격 모드와 상관없이 TypeError가 발생한다.
delete 연산자로 존재하는 프로퍼티 삭제도 금지된다.
단, [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다.

enumerable
enumberable은 for...in 루프처럼 객체 프로퍼티를 열거하는 구문에서 해당 프로퍼티의 표출 여부를 나타낸다. false라면 지정된 프로퍼티는 접근할 수는 있지만 루프 구문에서 감춰진다

접근자 프로퍼티

ES5부터는 getter/setter를 통해 프로퍼티 수준에서 이러한 기본 로직을 오버라이드 할 수 있다.
getter/setter는 각각 실제로 값을 가져오는/세팅하는 감춰진 함수를 호출하는 프로퍼티다. 접근자 프로퍼티 디스크립터에서는 프로퍼티의 값, writable, configurable, enumerable 속성이 무시되며, 대신에 프로퍼티의 겟(Get)/셋(Set) 속성이 중요하다.

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	getter 함수 호출
[[Set]]	set	setter 함수 호출
[[Enumerable]]	enumerable	데이터 프로퍼티와 같음
[[Configurable]]	configurable	데이터 프로퍼티와 같음

get
접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수다.
즉, 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
set
접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다.
즉, 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[Set]]의 값, 즉 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장된다.

객체 변경 방지

ES5부터는 프로퍼티/객체가 변경되지 않게 할 수 있는 다양한 방법을 제공하지만, 얕은 불변성(Shallow Immutability)만 지원한다. 그러나, 자바스크립트에서 뼛속까지 고정된 불변 객체를 쓸 일은 거의 없다.

객체 상수
writable:false, configurable:false를 같이 쓰면 객체 프로퍼티를 상수처럼 쓸 수 있다.
객체 확장 금지
객체에 더는 프로퍼티를 추가할 수 없게 차단하고 현재 프로퍼티는 있는 그대로 놔두고 싶을 때
Object.preventExtensions()를 호출한다.
객체봉인
Object.seal()은 봉인된 객체를 생성한다.
어떤 객체에 대해 Object.preventExtensions()를 실행하고, 프로퍼티를 전부 configurable:false 처리한다.

객체 동결
Object.freeze()는 객체를 꽁꽁얼린다.
Object.seal()를 적용하고, 프로퍼티를 모두 writable:false 처리해서 값도 못 바꾸게 한다.
그러나 어디까지나 직속 프로퍼티까지만 봉쇄한다 (얕은 봉쇄)

객체가 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze를 호출해 불변객체를 만들 수 있다.