내가 원하는 데이터들이 쏙쏙 들어가는 걸 보고
기분이 좋은데 이거 정상 아니죠?
오늘 기분 좋게 공부했네요.
object를 공부하고 난 후 정리를 해봤습니다.

object(객체)란

• JS의 데이터 타입 중 하나로 관련 데이터,함수의 집합체이다.

• 객체는 key와 value의 집합체이다. (object = { key : value };)

• object를 구성하는 key:value의 한 묶음을 property라 부른다.

ex)
const obj = {name: kang, age: 30};

// 변수 obj의 중괄호 { } 안에는 name:kang과
// age: 30 이라는 두 개의 프로퍼티가 있다.

객체 생성 방법

1. 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식.
중괄호({})를 사용하여 객체를 생성하는데 {} 내에
1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가
추가된 객체를 생성할 수 있다.
{} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

2. Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.
빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.

객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다.
하지만 object 생성자 함수도 알아두긴 해야겠어서 작성했다.

2.1 생성자란?

new 키워드와 함께 객체를 만들고 초기화하는 함수를 말한다.
생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.

자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date 등의 빌트인 생성자 함수를 제공한다.

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 객체에 프로퍼티를 추가하고 값을 할당한다. 이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다.

3. 생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 불편하다. 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야 한다.

아래의 예제를 보면 프로퍼티가 같은데도 반복해 작성한 걸 볼 수 있다.

자바스크립트의 생성자 함수는 이름 그대로 객체를 생성하는 함수이다.
하지만 자바와 같은 클래스 기반 객체지향 언어의
생성자(constructor)와는 다르게 그 형식이 정해져 있는 것이 아니라
기존 함수와 동일한 방법으로 생성자 함수를 선언하고
new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

이는 생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면
생성자 함수처럼 동작할 수 있다는 것을 의미한다. 따라서
일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여
혼란을 방지하려는 노력을 한다.

객체 프로퍼티 접근

1. 프로퍼티 키

• 프로퍼티 키는 일반적으로 문자열(공백 포함)을 지정한다.

• 프로퍼티 키는 문자열이므로 따옴표(‘ ’ 또는 “ “)를 사용한다.
  하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우,
  따옴표를 생략할 수 있다.
  그러나 사용 가능한 유효한 이름이 아닌 경우,
  반드시 따옴표를 사용하여야 한다.

• 프로퍼티 값은 모든 값과 표현식이 올 수 있으며
  프로퍼티 값이 함수인 경우 이를 메소드라 한다.

특이한 이름을 key로 사용하려면 [" "]를 이용해 쓰는 것이 좋겠다.

2. 프로퍼티 값 읽기

마침표(.) 표기법과 대괄호([]) 표기법을 이용해
객체의 프로퍼티 값에 접근할 수 있다.

• 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우
  프로퍼티 값은 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다.

• 프로퍼티 이름이 유효한 자바스크립트 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 읽어야 한다. 대괄호([]) 표기법을 사용하는 경우, 대괄호 내에 들어가는 프로퍼티 이름은
  반드시 문자열이어야 한다.

• 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다.

3. 프로퍼티의 동적 생성

object를 공부하면서 신기했던 개념이었다.

객체에 없는 key에 value를 할당하면 해당 객체에 프로퍼티가 추가된다.

ex)
const person = {
  'speciality': 'Marathon',
  'hobby': 'Cross-Fit',
  gender: 'male',
};

person.age = 30; //객체에 없는 프로퍼티 추가
console.log(person.age); // 30 출력

Reference
PoiemaWeb
MDN
vencott_velog