스터디/모던 자바스크립트 Deep Dive(24.02-24.06)

10장. 객체 리터럴

minseokiim 2024. 3. 19. 18:12

1. 객체

원시값을 제외한 나머지 값은 모두 객체

객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적 자료구조

 

객체 타입은 변경가능한 값(<-> 원시 타입 : 변경 불가능한 값)

 

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음,

자바스크립트의 함수는 일급객체이므로, 값으로 취급 가능

(* 일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)

 

프로퍼티값이 함수인 경우, 일반함수와 구분을 위해 "메서드"라고 부름

 

객체는 프로퍼티메서드로 구성된 집합체,

- 프로퍼티 : 객체의 상태를 나타내는

- 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작 할 수 있는 동작

 

 

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

객체 리터럴 : 중괄호 내에 0개 이상의 프로퍼티 정의, 변수 할당 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체 생성, 여기서의 중괄호는 코드블록이 아님!!

 

- 클래스 기반 객체 지향 언어(c, c++..) : 클래스를 사전에 정의하고 필요한 시점에 new연산자와 함께 생성자 호출하여 인스턴스 생성

 

- 프로토타입 기반 객체 지향 언어(js) : 객체 생성 방법 -> 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)

 

 

 

3. 프로퍼티

객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성

 

프로퍼티 나열할때는 쉼표로 구분

 

- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값, 예약어도 가능하지만 비추천

- 프로퍼티 값 : 자바스크립트에서 사용 할 수 있는 모든 값

 

식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 함.

 

+ 프로퍼티 키를 동적으로 생성하는 법 : 프로퍼티 키로 사용할 표현식을 대괄호로 묶으면 됨.

 

 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입변환 통해 문자열이 됨.

 

 

4. 메서드

객체에 묶여있는 함수

프로퍼티 값이 함수인 경우, 일반 함수와 구분하기 위해 메서드라고 부름.

 

 

5. 프로퍼티 접근

- 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.) 사용

- 대괄호 표기법 : 대괄호 프로퍼티 접근 연산자([]) 사용, 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야함!! (따옴표가 없다면 자바스크립트 엔진은 식별자로 인식하는 문제 발생-> 참조에러)

 

식별자 네이밍 규칙을 준수하는 이름이라면 둘다 사용 가능. 

+ 책 132쪽 예시 참고

 

프로퍼티 삭제하는 법 : delete 연산자

 

 

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

1) 프로퍼티 축약 표현 : 프로퍼티값으로 변수 사용하는 경우, 변수이름과 프로퍼티 키가 같은 이름이면  프로퍼티 키 생략 가능

2)계산된 프로퍼티 이름 : 프로퍼티 키를 동적으로 생성 가능( ES6부터는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 가능)

3) 메서드 축약 표현 : ES6에서 메서드 정의할때 function키워드 생략 가능(프로퍼티에 할당한 함수와 동작은 다름)

 

 

 

'스터디 > 모던 자바스크립트 Deep Dive(24.02-24.06)' 카테고리의 다른 글

12장. 함수  (0) 2024.04.01
11장. 원시 값과 객체의 비교  (0) 2024.03.19
9장. 타입 변환과 단축 평가  (0) 2024.03.19
8장. 제어문  (1) 2024.03.14
7장. 연산자  (0) 2024.03.14