자바스크립트(9) 클래스와 객체

자바스크립트 강의 

개발일지

학습 진행 내용

객체(Object) 타입

 

데이터의 기본 타입을 활용해서 필요한 데이터들을 적절히 표현하고, 연산도 할 수 있다.

 예를 들어 노트북 전문 쇼핑몰을 생각해보면,  쇼핑몰에서 파는 모든 노트북들은 이름, 가격, 제조사와 같은 데이터들을 가지고 있을 것이다.

그런데 이러한 것들을 기본 타입만으로 표현한다면, 그 데이터들을 묶어서 표현한다는 게 쉽지 않다.

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

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

 이럴때 관련있는 데이터들을 묶어서 한번에 잘 나타낼 수 있도록

사용하는 데이터 타입이 바로 객체 타입이다.

 

객체란?, 좀 어렵게 얘기하면

'물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서

자신의 속성을 갖고 있고 다른 것과 식별 가능한 것' 을 의미한다.

 

 위의 예시 코드를 다시 생각해보면,

노트북1은 이름, 가격, 제조사라는 자신만의 속성을 갖고 있고 다른 노트북들과 식별 가능하다.

즉, 객체로 나타낼 수있다.

 

 

클래스(Class) 선언

 클래스란, 객체를 만들때 쓰는 설계도다.

(그래서 흔히들 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 한다.)

 

함수를 정의하고 해당 함수를 필요할 때 계속 사용하듯이,

 클래스를 미리 정의해놓고 필요할 시 정의한 클래스를 사용해서 

동일한 모양을 가진 객체를 만든다.

 

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

해당 코드를 보면,

class는 클래스를 선언하는 문구다.

그 뒤에 바로 클래스 명이 나온다. (Notebook)

(🔥클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋다.)

 

생성자 (constructor)

 중괄호 안에는 생성자라는 것을 적어준다.

생성자가 함수와 많이 비슷하다.

생성자는 말 그대로, 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출 되는 함수로 생각하면 된다.

 해당 코드의 생성자를 살펴보면 3개의 매개변수를 정의했다. (각각의 이름은 name, price, company 이다.)

 

this와 속성(property)

생성자의 바디를 보면 this 라는 키워드가 등장한다.

 

 이 this는 클래스를 사용해 만들어 질 객체 자기 자신을 의미하고,

this 뒤에 붙는 name, price, company는 객체의 속성이다.

 

 (생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를

객체의 속성 name, price, company에 각각 할당하고 있는 것이다.)

 

객체 만들기

 

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 출력됨