Wii Pointer #1 Tilt Normal
본문 바로가기
📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/JavaScript

[JavaScript] 클라스와 객체 (1)

by 개발자_후니 2023. 1. 12.
728x90
반응형

객체(object) 타입

 

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

 

예를들어서 노트북 전문 쇼핑몰을 생각해보자

 

여기서 파는 모든 노트북들은 이름 가격 제조사와 같은 데이터들을 가지고 있을거다.

 

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

 

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

 

객체를 좀 어렵게 얘기하면 물리적으로 존재하거나 추상저긍로 생각할 수 있는 것중에서 

 

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

 

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로 되어있다.

 

 

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

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

console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.company)

[TERMINAL] 출력하면

 

Node.js v19.3.0
PS C:\sparta\Javascript> node class.js
Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }
Macbook
2000000
Apple

 

추가적으로 이렇게 적어줄 수도 있겠다.

 

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

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

const notebook2 = new Notebook('Macbook', 2020000, 'Apple')

const notebook3 = new Notebook('Macbook', 2300000, 'Apple')

const notebook4 = new Notebook('Macbook', 3200000, 'Apple')

const notebook5 = new Notebook('Macbook', 1900000, 'Apple')

const notebook6 = new Notebook('Macbook', 2700000, 'Apple')

const notebook7 = new Notebook('Macbook', 2500000, 'Apple')


console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.company)


console.log(notebook4)

console.log(notebook5)

console.log(notebook3)
 
 
 
[TERMINAL] 출력하면
 
 

PS C:\sparta\Javascript> node class.js
Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }
Macbook
2000000
Apple
Notebook { name: 'Macbook', price: 3200000, company: 'Apple' }
Notebook { name: 'Macbook', price: 1900000, company: 'Apple' }
Notebook { name: 'Macbook', price: 2300000, company: 'Apple' }

728x90
반응형