🐸 [JavaScript] 객체 리터럴

JavaScript의 모든 것은 객체라는 말을 들어봤을 것이다.

이번 글에서는, 객체란 무엇인지, 그리고 대표적인 객체 생성 방법인 객체 리터럴에 대해 알아보자.

---

Object

JavaScript는 Object 기반의 프로그래밍 언어이다.

JavaScript에는 원시타입과 객체타입이 있는데, 모든 것이 객체라도 생각해도 무방하다.

• 원시 타입 : 변경 불가능한 값
  단 하나의 값만을 나타낸다

• 객체 타입 : 변경 가능한 값
  다양한 type의 값을, 하나의 단위로 구성해 둔 자료구조이다
  
  

property

객체란, 0개 이상의 property로 구성된 집합이다.

JavaScript의 모든 값은 property가 될 수 있으며,

property가 함수인 경우, 이를 method라고 부른다.


다시 정리하자면 객체란, property와 method로 구성된 집합인 것이다.


property는 객체의 상태값을 나타내는 값이며,
method는 property의 상태data를 참조하고 조작할 수 있는 동작이라고 생각하면 된다.


다시 property로 돌아가자.


property라는 건, key와 value로 이루어져 있다.

• key
  모든 문자열 (빈 문자열도 포함)
• value
  JavaScript에서 사용 가능한 모든 값

key는, property의 값에 접근하기 위한 이름, 그러니까 식별자 역할을 한다.

key naming을 할 때, 반드시 식별자 규칙을 따라야하는 것은 아니다.

그러나 JavaScript 엔진이 key를 표현식으로 오해해 잘못 작동하지 않도록, 규칙을 지켜주는 것이 좋다.

property: Key & value

1. 접근

property에 접근하는 방법은 두가지가 있다.

• . dot notation
  점표기법은, 마침표 property 접근 연산자라고도 한다.

• [...] bracket notation
  대괄호 표기법은, 대괄호 property 접근 연산자라고도 한다.

표현식 뒤에 접근 연산자를 붙여주면 된다.

이때 표현식은 객체로 평가되는 표현식이어야 하며,
객체에 존재하지 않는 property에 접근하면 undefined를 반환한다.


bracket notation [] 안에는 property key를 지정해야하며, 이는 따옴표 '' 로 감싼 문자열이어야 한다.

만약 property key가 JavaScript의 네이밍 규칙을 준수하지 않았을 경우,
반드시 dot notation이 아닌, 대괄호 표기법을 사용해야 한다고 한다.

2. 값 갱신

이미 존재하는 property에 값을 할당하면 갱신된다.

3. 동적 생성

존재하지 않는 property에 값을 할당하면 어떤 일이 일어날까?

property가 동적으로 생성 & 추가되고, property 값이 할당된다.

4. 삭제

delete 연산자를 사용해서 객체의 property를 삭제한다.

delete 연산자의 피연산자는, property 값에 접근할 수 있는 표현식이어야 한다.

만약 존재하지 않는 property를 삭제할 경우, error 없이 무시된다고 한다.

---

객체 생성 - 객체 리터럴

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

객체를 생성하는 방법은 다양하다.

위에 적어둔 바와 같이 5가지의 방법이 있다.

이번 글에서는 객체 리터럴에 대해 살펴보겠다
(나머지 방법들은, 함수에 대한 글을 정리한 다음 살펴보자)

객체 리터럴

literal은, 사람이 이해할 수 있는 문자/약속된 기호를 사용하여 값을 생성하는 표기법이다.


객체 리터럴은, {}내에 0개 이상의 property를 정의해주면 된다.

신기하게도 그냥 숫자, 문자열의 생성과 비슷하게 리터럴로 객체를 생성한다.

간단한 방법이지만, 가장 일반적인 객체 생성 방법이다.
(0개의 property를 정의할 경우 빈객체가 생성된다.)


JavaScript 엔진이, 변수가 할당되는 시점에 객체 리터럴을 해석해서, 객체를 생성한다.


주의할 점은, 이때에 사용하는 {}는 code block이 아니라는 사실이다.
때문에 {}뒤에 ;을 붙이는 것을 권장한다고 한다.


객체 리터럴이라는 객체 생성 방법이, JavaScript에게 유연성과 강력함이라는 수식어를 붙여주었다고 생각해도 될 것 같다.

객체 리터럴에 property를 포함시켜서, 객체를 생성함과 동시에 property를 만들 수도 있고,

또는 객체 생성 이후에 동적으로 만들 수도 있다.

---

확장 기능 (ES6)

1. property 축약 기능

property 이름과 property key가 동일한 값일 경우에 적용된다.
해당 경우 property key를 생략해도 된다!

2. 계산된 property 이름

문자열( 또는 문자열로 type 변환이 가능한 값)으로 평가되는 표현식을 사용해서,
property key를 동적으로 생성할 수 있다

3. Method 축약 표현

ES5에서 method를 정의하려면, property 값으로 함수를 할당해야 한다.
ES6에서는, function keyword를 생략한 축약 표현을 사용할 수 있다.
(이런 방법을 통해 만든 method는, property에 할당한 함수와는 다르게 동작한다.)

---

객체가 JavaScript에서 굉장히 중요한 개념이라고 들어와서, 열심히 정리해보려고 했다.

잘 정리된 글이 아닌 것 같다는 생각이 들지만,,,,,

JavaScript의 객체가 어떻게 강점이 되는 개념인지 정도는 이해해낸 것 같아 만족한다.