[TIL] Javascript - 클래스와 객체

데이터 타입

데이터 타입은 기본 또는 원시형 (Primitive) 타입이라고 불리는 number, string, boolean, null, undefined가 존재하고 있으며, 이러한 기본 타입 이외에 객체형 타입이라는 데이터도 존재합니다. 

 

1) 숫자 ( Number )

말 그대로 숫자 데이터입니다.

나이, 거리, 무게, 가격 등등 무수히 많은 종류의 데이터들을 숫자로 표현할 수 있습니다!

 

2) 문자 ( String )

문자열 데이터를 말하며, 큰따옴표(" ")나 작은따옴표(' ')로 데이터를 감싸야합니다.

브랜드명, 제품명 등등 많은 종류의 데이터를 문자열로 나타낼 수 있으며 숫자 또한 따옴표로 묶었을 시 숫자 데이터가 아닌 문자 데이터로 나타나 집니다!

 

3) Boolean

JavaScript에서 참과 거짓을 나타내는 True / False를 표현하는 데이터입니다.

비교 연산자에서 많이 활용합니다.

 

4) null, undefined

null은 텅텅 비어있는 값을 의미하며, undefined는 변수를 선언만 하고 값이 할당되어 있지 않는 것을 의미합니다.

 

클래스와 객체

객체(Object) 타입

데이터들을 표현할 때 관련 있는 데이터들을 묶어서 한 번에 잘 나타낼 수 있는 데이터 타입의 필요성 느끼게 됩니다.

예를 들어 옷을 살 때도 그 옷의 브랜드명, 가격, 사이즈 등등 하나의 옷에 다양한 데이터들을 가지고 있습니다.

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

 

클래스(class) 선언

객체를 만들 때 마치 설계도처럼 사용하는 것이 바로 클래스입니다. 함수를 정의하고 해당 함수를 필요할 때마다 계속 사용할 수 있는 것처럼, 마찬가지로 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있습니다.

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = 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에 각각 할당하고 있는 것입니다.

 

객체 만들기

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

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

 

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

 

객체의 속성 하나하나에 접근해 데이터를 갖고 와야 할 때도 있겠죠? 이 때는 this. 속성명을 사용합니다.

 

메소드 (Method)

클래스에는 데이터(값)를 나타내는 속성뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있습니다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 됩니다.

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

 

객체 리터럴 (Object Literal)

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있습니다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각해주시면 될 거 같아요. 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄 바꿈도 해주는 게 좋습니다.

const 변수명 = {

    속성명: 데이터,

    메소드명: function () { 메소드 호출 시 실행할 코드들 }

}

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

name, price라는 속성과 printInfo라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드입니다. 해당 객체의 printInfo 메소드를 바로 호출까지 해보았습니다.

 

결과적으로는 클래스를 활용해 객체를 만든 것과 동일합니다. 그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까요? 바로 재사용성 때문입니다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있습니다.