객체
는 상태와 동작 또는 프로퍼티와 메소드로 이루어진 것 입니다. 이렇게 설명하는 객체
가 다소 모호한 개념같지만, 객체
는 일상생활에서 볼 수 있는 것들이라고 생각하면 이해하기 쉽습니다. 간단하게 예를들면 컴퓨터는 켜져있다/꺼져있다와 같은 상태(프로퍼티)
와 프로그램을 실행한다와 같은 동작(메소드)
로 이루어져있다고 할 수 있습니다.
이처럼 객체의 상태(프로퍼티)
는 객체에 대한 정보를 담고있고, 객체의 동작(메소드)
는 객체를 조작하고 활용하게 하는 기능을 일컫습니다.
자바스크립트는 크게 세 가지의 객체를 가지고 있습니다. 자바스크립트 내장 객체, 브라우저 객체, 문서 객체 모델이 있습니다. 물론 사용자 정의 객체까지 포함해서 네 개라고도 할 수 있습니다.
내장 객체
는 자바스크립트에 탑재되어있는 객체입니다. 따라서 사용자가 정의하거나 인스턴스화 시킬 필요 없이 사용 가능한 것들입니다. 대표적으로 문자열 객체인 String, 배열 객체인 Array, 숫자와 관련한 처리를 하는 Math 등이 있습니다.
브라우저 객체
는 브라우저를 조작하기 위한 객체입니다. 흔히 브라우저 객체 모델(BOM)
으로 알려져있는 브라우저 객체는 브라우저 내부에 계층화되어 저장되어있는 객체로 브라우저를 조작할 수 있게 해줍니다.
문서 객체
는 html문서를 조작하기 위한 객체입니다. 이 역시도 문서 객체 모델(DOM)
이라는 개념을 통해서 자바스크립트에서 html문서에 접근할 수 있게 해줍니다.
객체는 직접 접근해서 사용하는 것을 금기시하고 있습니다. 왜냐하면 외부에서 직접 접근할 경우 내용을 바꿔버리거나 손상시킬 수도 있고, 한 번에 두 곳 이상에서 접근을 하려고 하면 오류를 발생시키기 때문입니다. 그래서 외부에서 객체에 접근하려고 할 때 원본 객체 대신 원본 객체를 복사한 복사본을 이용하도록 하게 되었습니다.
인스턴스(instance)
는 원본 객체를 복사해서 만들어진 복사된 객체를 말합니다. 그리고 이렇게 인스턴스를 만들기 위해 객체의 복사본을 생성하는 것을 인스턴스화
라고 합니다. 인스턴스를 사용하면 복사본의 내용을 바꾸어도 원본 객체에는 전혀 영향을 주지않고, 두 개 이상의 장소에서 접근을 시도해도 하나의 객체에 안전하게 접근할 수 있게됩니다.
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']);