🌸10장. 객체 리터럴
✅10.1 객체란?
원시타입은
하나의 값
만 나타내지만 객체타입(object/reference type)은다양한 타입의 값을 하나의 단위
로 구성원시 값은
변경 불가(immutable)
한 값이지만, 객체타입은변경 가능(mutable)
한 값객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key:value로 구성된다.
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있는데, 프로퍼티 값이 함수일 경우,
메서드(method)
라 부른다.
프로퍼티 : 객체의 상태를 나타내는 값
메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
인스턴스(instance)란
객체는 클래스와 인스턴스를 포함한 개념
클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 하고, 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것을 말한다.
✅10.2 객체 리터럴에 의한 객체 생성
자바스크립트는 프로토타입 기반 객체지향 언어로서, 다양한 객체 생성 방법을 지원한다.
객체 리터럴 (가장 일반적)
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스+(ES6)
객체 리터럴
객체 리터럴
은객체를 생성하기 위한 표기법
이다.중괄호(
{...}
) 내에 0개 이상의 프로퍼티를 정의한다.변수에 할당되는 시점
에 자바스크립트 엔진은 객체 리터럴을 해석해객체를 생성
나머지 객체 생성방식
모두 함수를 이용해 객체를 생성하기 때문에 함수 공부한 이후에 다시 살펴볼 예정
✅10.3 프로퍼티
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키(key)
: 빈 문자열을 포함하는 모든문자열(string)
또는심벌(symbol) 값
프로퍼티 값(value)
: 자바스크립트에서 사용할 수 있는 모든 값
프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 "식별자 역할"
반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다.
식별자 네이밍 규칙을 따르는 경우, (자바스크립트에서 사용 가능한 유효한 이름인 경우) :
따옴표( '' or "")
를 생략할 수 있다.즉,
반대로 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야한다.
만약 last-name에 따옴표를 제거하면,
SyntaxError: Unexpected token '-'
에러가 발생한다.
프로퍼티 특징
프로퍼티 키로 사용할 표현식을 대괄호(
[...]
)로 묶으면, 프로퍼티 키를동적으로 생성
할 수도 있다.프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면
암묵적 타입 변환
을 통해 문자열이 된다.var, function과 같은 예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않는다. (하지만 권장 X)
이미 존재하는 프로퍼티 키를
중복 선언
하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를덮어쓴다
. ( 에러 발생하지 않음 )
✅10.4 프로퍼티 접근 방법
프로퍼티에 접근하는 방법은 아래 2가지다.
마침표(.)
프로퍼티 접근 연산자를 사용하는 방법 →마침표 표기법(dot notation)
대괄호([...])
프로퍼티 접근 연산자를 사용하는 방법 →대괄호 표기법(bracket notation)
주의할 점
대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는
반드시 따옴표로 감싼 문자열
이어야 한다.문자열 형태가 아니면, 자바스크립트는
식별자
로 해석하기 때문에ReferenceError
발생
객체에 존재하지 않는 프로퍼티
에 접근하면undefined
를 반환한다.
✅10.5 프로퍼티 동적 생성 & 삭제
존재하지 않는 프로퍼티에 값을 할당하면, 프로퍼티가 동적으로 생성된다.
delete
연산자를 통해 객체의 프로퍼티를 삭제할 수 있다.
✅10.6 ES6에서 추가된 객체 리터럴 확장 기능
프로퍼티 축약 표현
프로퍼티 값으로 변수를 상요하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략(
property shorthand
)할 수 있다.
계산된 프로퍼티 이름
프로퍼티 키를 문자열/문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해서 동적으로생성할 수 있다.
메서드 축약 표현
function 키워드를 생략할 수 있다.
하지만,
메서드 축약 표현
으로 정의한 메서드는프로퍼티에 할당한 함수(ES5 메서드)
와는 다르게 동작한다.
Last updated