자바스크립트 공부(5) - 객체(Object)

클래스 : 붕어빵 틀. 데이터가 들어있지 않고 템플릿만 존재하는 것. 한 번만 선언함. 정의만 해둔 것이기 때문에 실제 메모리에 올라가지는 않음.

오브젝트 : 클래스를 이용해서 실제로 데이터를 넣어서 만드는 것. 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다.

클래스는 ES6부터 도입된 것. 이전에는 클래스를 정의하지 않고 바로 오브젝트를 생성함.

책에서 배운 객체가 너무 이해가 잘 안 돼서 따로 찾아봤다. 객체지향 개념이 익숙하지 않아서 그런 것 같다.

참고 : 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

---

 

 

1. 자바스크립트 내 객체의 종류

---

• 내장 객체(Built-int Object) : 프로그래밍을 할 때 자주 사용하는 요소로 미리 정의되어 있는 객체들. Number, Boolean, Array 등이 있다.
• 문서 객체 모델(DOM) : 객체를 사용하여 웹 문서를 관리하는 방식. 웹 문서뿐 아니라 그 안에 포함된 이미지., 링크, 텍스트 필드 등도 포함된다.

 

2. 속성과 메서드

---

• 속성(Property) : 객체에서 값을 담고 있는 정보이다. 속성 값을 가져올 때는 객체.속성처럼 객체 이름 뒤에 마침표를 찍고 뒤에 속성의 이름을 적는다.
• 메서드(Method) : 객체가 어떻게 동작할지 선언해 놓은 함수이다.

 

3. 프로토타입과 인스턴스

---

프로토타입(Prototype)은 기본 틀, 인스턴스(Instance)는 프로토타입을 사용해서 만들어낸 객체이다.

인스턴스 만들기

new 예약어 뒤에 프로토타입 객체 이름과 괄호를 써서 인스턴스를 만든다.

var now = new Date()

 

4. 사용자 정의 객체 만들기

---

자바스크립트에서 객체를 만드는 방법엔 여러 가지가 있다. 그 중에서도 객체 리터럴과 생성자 함수가 가장 많이 사용된다.

리터럴 표기법 사용하기

리터럴(Literal)을 사용한다는 것은 변수 선언과 동시에 값을 지정하는 방식을 말한다. 객체 리터럴 표기법 역시 객체 선언과 동시에 값을 지정해주는 것을 말한다. 리터럴 표기법은 객체 틀을 만들지 않고 개별적으로 객체를 선언 및 사용하는 방법이다.

var person = {
    name: "홍길동", 
    age: 20, 
};

이렇게 정의된 사용자 정의 객체 역시 마침표를 사용해서 속성 값을 가져올 수 있다.또한 프로그램 작성 도중 새로운 속성을 추가, 제거할 수도 있다.

person.address = "서울시 서대문구 대현동"

🔺 속성 추가 예시

이는 자바스크립트가 동적 언어이기 때문에 가능한 것이다. 다만 이런 식으로 코드를 작성하면 유지보수가 힘들고 예상치 못한 오류가 발생할 수 있기 때문에 가급적 사용하지 않는 것이 좋다.

생성자 함수 사용하기

리터럴 표기법은 정해진 값을 가진 객체를 한 번만 만들어 낸다. 이 방법을 사용한다면 매번 똑같은 속성과 함수를 입력하고 값을 다르게 하여 새롭게 객체를 만들어야 한다. 이럴 때 생성자 함수를 사용한다면 편리하게 객체를 만들 수 있다.

function Name(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
}

hong = new Name("홍길동", 20, "서울시 서대문구 대현동")

🔺 생성자 함수를 이용하여 생성한 객체와 인스턴스 예시