모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/05/10

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우에, 일반적인 함수와 구분하기 위해 메서드(method)라고 부른다. 한마디로, 메서드는 객체에 묶여있는 함수를 의미한다.프로퍼티에 접근하는 방법에는 두 가지가 있다.

2023년 5월 10일2min read

10장. 객체 리터럴

10-4. 메서드

자바스크립트에서 사용할 수 있는 모든 값은 ``프로퍼티 값``으로 사용할 수 있다.

프로퍼티 값```이 ```함수```일 경우에, 일반적인 함수와 구분하기 위해 ```메서드(method)```라고 부른다. 한마디로, 메서드는 ```객체에 묶여있는 함수```를 의미한다.


### 10-5. 프로퍼티 접근

프로퍼티에 ```접근```하는 방법에는 ```두 가지```가 있다.

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

**a) 프로퍼티 키가 ```식별자 네이밍 규칙을 준수```하는 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다.**

![](https://velog.velcdn.com/images/minkwan/post/cc5936ca-72b3-4be0-9e3b-643d997e7812/image.png)

대괄호 표기법을 사용하는 경우 대괄호 내부에 지정하는 프로퍼티 키는 반드시 ```따옴표로 감싼 문자열```이어야 한다. 그렇지 않으면 자바스크립트 엔진은 ```식별자```로 해석한다.

![](https://velog.velcdn.com/images/minkwan/post/938c27d1-50ac-482b-8088-73f9f994acd5/image.png)

식별자 name이 도대체 어디 있냐고 갈구는 모습이다.

추가적으로, 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 이때 ReferenceError가 발생하지 않는다.

![](https://velog.velcdn.com/images/minkwan/post/be610169-a492-4f20-9eb3-3b81a5964a9f/image.png)

**b) 프로퍼티 키가 ```식별자 네이밍 규칙을 준수하지 않는``` 이름이면 반드시 대괄호 표기법을 사용해야 한다.**

![](https://velog.velcdn.com/images/minkwan/post/d2911741-c68e-4347-b19d-b6b66906bea7/image.png)

p.132의 퀴즈는 21.4절 "전역 객체 window"를 학습하고 살펴보겠다.

### 10-6. 프로퍼티 값 갱신

10-7. 프로퍼티 동적 생성

존재하지 않는``` 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.


![](https://velog.velcdn.com/images/minkwan/post/92f8fbf2-2ec6-4945-a1aa-0138446737fd/image.png)


### 10-8. 프로퍼티 삭제

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

프로퍼티 축약 표현

객체 리터럴의 프로퍼티 = 프로퍼티 키 + ``프로퍼티 값``

이때, 프로퍼티의 값이 ``변수에 할당된 값`, 즉 `식별자 표현식`일 수 있다. ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 `변수 이름`과 `프로퍼티 키`가 동일한 이름일 때 `프로퍼티 키``를 생략할 수 있다.

계산된 프로퍼티 이름