객체(Object) 타입 & 클래스(Class) 선언

1️⃣ 객체(Object) 타입

관련있는 데이터들을 묶어서 한번에 잘 나타낼수 있는 데이터 타입.

 

// 노트북1을 것을 표현하기 위한 데이터들
// 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음
const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

// 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까?

 

이 때 사용하는 데이터 타입이 바로 객체 타입이다. 객체를 좀 어렵게 얘기하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것' 을 의미한다.

 

위의 예시 코드를 통해 다시 생각해보면 노트북1은 이름, 가격, 제조사라는 자신만의 속성을 갖고 있고 다른 노트북들과 식별 가능한 것이니 객체로 나타낼 수 있는 것!

 

2️⃣ 클래스(Class) 선언

객체를 만들때 마치 설계도처럼 사용하는 것이 바로 클래스!

 

그래서 흔히들 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 한다. 우리가 함수를 정의하고 해당 함수를 필요할 때 계속 사용할 수 있었던 것처럼 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.

 

class Notebook { // 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋다.
   constructor(name, price, company) {  // 생성자 (constructor)에 3개의 매개변수를 정의했고 각각의 이름은 name, price, company
        this.name = name
        this.price = price
        this.company = company 

// 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다.
   }
}

 

✅ 1. class 키워드와 클래스명

 

class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나온다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋다. 위의 예에서 Notebook 대신 Person 같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 것이다

 

✅ 2. 생성자 (constructor)

 

중괄호 안에는 생성자라는 것을 적어준다. 생성자가 함수와 많이 비슷하다. 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 이해하기 좋다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company

 

✅ 3. this와 속성(property)

 

생성자의 바디를 보면 this 라는 키워드가 있다. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것이다.

 

3️⃣ 객체 만들기 : const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

 

✅ 클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 된다. 그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당된다.

 

✅ 만들어진 객체는 변수에 할당해준다. 기본 타입의 데이터들을 변수에 할당하면 변수를 사용해 해당 데이터에 접근할 수 있었다. 객체도 마찬가지다. 객체도 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있다.

 

✅ 객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때 이 때는 this.속성명 을 사용한다.

 

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name) // MacBook
console.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple