객체

객체는 상태와 동작 또는 프로퍼티와 메소드로 이루어진 것 입니다. 이렇게 설명하는 객체가 다소 모호한 개념같지만, 객체는 일상생활에서 볼 수 있는 것들이라고 생각하면 이해하기 쉽습니다. 간단하게 예를들면 컴퓨터는 켜져있다/꺼져있다와 같은 상태(프로퍼티)와 프로그램을 실행한다와 같은 동작(메소드)로 이루어져있다고 할 수 있습니다.

이처럼 객체의 상태(프로퍼티)는 객체에 대한 정보를 담고있고, 객체의 동작(메소드)는 객체를 조작하고 활용하게 하는 기능을 일컫습니다.

자바스크립트의 객체

자바스크립트는 크게 세 가지의 객체를 가지고 있습니다. 자바스크립트 내장 객체, 브라우저 객체, 문서 객체 모델이 있습니다. 물론 사용자 정의 객체까지 포함해서 네 개라고도 할 수 있습니다.

내장 객체

내장 객체는 자바스크립트에 탑재되어있는 객체입니다. 따라서 사용자가 정의하거나 인스턴스화 시킬 필요 없이 사용 가능한 것들입니다. 대표적으로 문자열 객체인 String, 배열 객체인 Array, 숫자와 관련한 처리를 하는 Math 등이 있습니다.

브라우저 객체

브라우저 객체는 브라우저를 조작하기 위한 객체입니다. 흔히 브라우저 객체 모델(BOM)으로 알려져있는 브라우저 객체는 브라우저 내부에 계층화되어 저장되어있는 객체로 브라우저를 조작할 수 있게 해줍니다.

문서 객체

문서 객체는 html문서를 조작하기 위한 객체입니다. 이 역시도 문서 객체 모델(DOM)이라는 개념을 통해서 자바스크립트에서 html문서에 접근할 수 있게 해줍니다.

---

인스턴스

객체는 직접 접근해서 사용하는 것을 금기시하고 있습니다. 왜냐하면 외부에서 직접 접근할 경우 내용을 바꿔버리거나 손상시킬 수도 있고, 한 번에 두 곳 이상에서 접근을 하려고 하면 오류를 발생시키기 때문입니다. 그래서 외부에서 객체에 접근하려고 할 때 원본 객체 대신 원본 객체를 복사한 복사본을 이용하도록 하게 되었습니다.

인스턴스(instance)는 원본 객체를 복사해서 만들어진 복사된 객체를 말합니다. 그리고 이렇게 인스턴스를 만들기 위해 객체의 복사본을 생성하는 것을 인스턴스화라고 합니다. 인스턴스를 사용하면 복사본의 내용을 바꾸어도 원본 객체에는 전혀 영향을 주지않고, 두 개 이상의 장소에서 접근을 시도해도 하나의 객체에 안전하게 접근할 수 있게됩니다.

new 연산자

new 연산자는 객체를 인스턴스화 시켜서 인스턴스를 만드는데 이용됩니다. 기본적으로 다음과 같이 사용됩니다.

let 인스턴스명 = new 객체명();

new 연산자뒤에 붙는 객체가 인스턴스화 되어 변수에 담기게 됩니다.

인스턴스화 과정에서 객체를 초기화 시키는데, 이 초기화를 위해 객체 내부에는 객체이름과 동일한 이름의 메소드가 존재하고 이를 생성자(constructor)라고 합니다. 생성자에 대해선 추후 따로 다루겠습니다.

프로퍼티와 메소드의 호출

객체에는 프로퍼티와 메소드가 있고, 이들을 사용한다고 했는데요. 이들은 호출하는 방법에 대해서 알아보겠습니다.

인스턴스화한 객체로부터 프로퍼티/메소드를 호출합니다. 이때 닷 연산자.로 프로퍼티/메소드를 호출합니다.

객체명.프로퍼티명;
객체명.메소드명(인수);

//여기서 객체명은 인스턴스화된 인스턴스 객체 변수

프로퍼티는 대괄호[]를 이용해서 접근하는 방법도 존재합니다.

객체명['프로퍼티명'];

두 가지 방법으로 호출하는 예시를 보겠습니다.

const cat = {
    name: 'ray',
    age: 0
};

console.log(cat.name);		//닷 연산자 이용
console.log(cat['name']);	//대괄호 구문 이용

cat.name = 'Ray';
cat['age'] = 1;

console.log(cat.name);
console.log(cat['age']);