[JavaScript] 객체(Object)

객체(Object)

  - 자바스크립트는 객체(object) 기반의 스크립트 언어이다

  - 자바스크립트를 이루고 있는 거의 대부분이 객체 > 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)

    모두 객체이다.

  - 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

  - 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)

    로 구성된 집합

  - 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있다

  - 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용함

  - 객체지향의 상속을 구현하기 위해 '프로토타입(prototype)' 이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다

 

내장 객체

- Array, Date, Math, Object 등..

- new Array(), new Date(), Math.메소드()

BOM 객체

- window, document, form, text, button 등..
- BOM 트리 구성 요소들

DOM 객체

- element, attribute, text, comment 등..

 

 

---

사용자 정의 객체

JavaScript에는 클래스가 없다. 따라서 원하는 객체 생성이 불가능하다. 대신에, 클래스에 준하는 모습을 보이는 문법은 제공한다.

(ES6에서 진짜 class가 아니라 class처럼 보이는 요소를 도입했다. 원하는 객체 생성은 안되는 대신 원하는 형대의 객체를 만들 수는 있다. 이는 면접 질문으로 나오기도 한다고 하니 잘 알아두어야겠다.)

 

사용자 정의 객체 생성

  - Object 클래스를 사용하는 방법과 객체 리터럴 표기법( {} )을 사용하는 것이 있다

 

일단 첫번째로, Object 클래스를 사용한 방법이다

클래스 설계는 하지 못하기 때문에 오브젝트부터 만든다. 

(자바로 치면, object로부터 상속받은 느낌-인 것 같다. 부모클래스(object)로부터 구현 가능한 멤버들이 많으니..)

 

const Test = new Object();

 

JavaScript의 객체는 프로퍼티(Property)를 자유롭게 설정할 수 있다.

 

Test.mango = '망고'; //Test 객체에 mango 프로퍼티를 정의(추가)
Test.apple = '사과';

Test.grape = '포도'; //작성이 편하고 가독성이 높다
Test['grape'] = '백포도'; //작성이 조금 불편하지만 조작성이 높다.(변수 치환 등)

 

Test['grape'] = '백포도'; 는 해쉬맵 형태로, 'grape' 가 문자열 형태이기 때문에 조작성이 높다. 필요에 따라 둘을 적절히 혼용해 사용할 수 있다.

 

 

두번째는 {} 객체 리터럴 표기법을 사용한 방법이다.

 

const You = {
name : '유재석',
    age : 51,
    address : '서울시 강남구'
}; //초기화할 때 사용 가능

You.gender : 'm'; //나중에 추가/삭제가 가능

 

두번째 방법(리터럴)은 초기화 할 때 사용 가능하고, 첫번째 방법(Object)은 나중에 추가하거나 삭제가 가능하다.