[JavaScript] 자바스크립트 객체와 프로퍼티

객체(Object)

- 자바스크립트의 기본 타입(Data type)은 객체(Object)이다.

- 객체는 key와 value가 한 쌍으로 구성된 프로퍼티(Property)가 0개 이상인 정렬되지 않은 집합이다.

- 프로퍼티의 값으로 함수가 올 수도 있다 -> 이런 프로퍼티를 메소드(method)라고 부른다.(실제 메소드X)

- 숫자, 문자열, 불리언, undefiend 타입을 제외한 모든 것이 객체

- Primitive(숫자, 문자열, 불리언) 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 가지게 된다.

- JSON 객체를 표현하기 위한 표준 중 하나이다.

- Property Key, Property Value

- 인스턴스(Instance) : 객체가 메모리에 저장되어 실제로 존재하는 것

name, age라는 property key를 가지고 있는 person 객체

 

 

프로퍼티(Property)

- key와 value으로 구성된 집합

 

(1) 프로퍼티 키(Property Key)

- 프로퍼티 값에 접근할 수 있는 이름

- 식별자 역할

- 식별자 네이밍 규칙을 따르지 않아도 되지만, 그렇게 되면 따옴표를 사용해주어야 하기 때문에 따르는 것이 좋다.

- 문자열, Symbol

ex. {'let': '문자열이지만, 권장되지 않는 키 네임'}

ex. let obj = {name: 'hong', name: 'kim'} -> console.log(obj)에서 kim 출력

ex. let obj = {name: 'hong'} -> console.log(obj.address) 찾는 key가 없기 때문에 undefined 출력

 

(2) 프로퍼티 값(Property Value)

- 자바 스크립트에서 value으로 인식되는 모든 것이 다 가능하다. 

- 문자열, 숫자, 함수(function)

- 함수도 가능하다.(메소드라고 부르긴 하는데 실제 메소드는 X) 

 

 

프로퍼티 동적 추가

- 점 표기법(Dot Notation) ->

- 괄호 표기법(Bracket Notation) -> []

 

프로퍼티 동적 삭제

- delete keyword

 

프로퍼티 접근

- 대괄호 프로퍼티 접근 연산자를 사용 할 경우, 프로퍼티 키를 반드시 따옴표로 감싸주어야 한다.

- 감싸지 않는 경우, 자바스크립트 엔진이 프로퍼티 키를 식별자로 해석하기 때문

---

객체 생성 방법

 

1. 객체 리터럴 (Object Literal)

- 가장 간단한 방법 {} 사용

- 단점은 똑같은 객체를 여러 개 만들어야 한다. 

- 변수가 할당되는 시점에 엔진이 객체 리터럴을 해석해서 객체 생성

 

2. Object() 객체 생성자 함수

- 자바스크립트 내장 함수

- Object 객체는 자바스크립트의 최상위 객체이다.

- 자바스크립트의 모든 기본 내장 객체는 Object 객체를 기본으로 만들어진다.

 

3. 생성자 함수(User Defined)

- 함수를 통해서 객체를 생성하는 방식

- 객체를 만들 때마다 프로퍼티에 대한 공간이 메모리에 할당되어서 비효율적

- 일반 함수와 생성자 함수를 구분하기 위한 일반적 약속

- 일반 함수 : 첫글자(소문자)

- 생성자 함수 : 첫글자(대문자)

 

4. Object.create() method

5. ES6 -> class

 

---

객체 리터럴 확장 방식

- ES6에서 추가

 

User Define(사용자 정의) 생성자 함수로 객체 생성

const person1 = Person();
console.log(person1); // undefined

const person2 = new Person(); // new를 붙여서 생성자 함수로 호출 -> 내부적으로 Instance를 만든다
console.log(person2); // Person {}

const person3 = {}; // 일반 객체
console.log(person3); // {} 

// new 생성자 함수로 호출
// 내부적으로 Instance를 만들어준다.
// 안에 아무거나 없으면
// this를 바인딩해서 this를 리턴해준다.