Class 기본 개념

Javascript의 Class를 알아보자.

Javascript에서 Class는 잘 안쓰이긴 하지만,

Typescript를 공부하다보니 자연스럽게 Javascript의 Class에 대해서 찾아보게 되었다.

 

 

 

 

---

 

 

 

 

 

Class란?

 

• 객체(Object) 생성을 위한 템플릿.
• 다양한 개별 인스턴스를 생성.
• Typescript의 인터페이스나 타입 별칭(alias)과 다른 개념.

 

 

 

Constructor (생성자)

• 인스턴스로 생성된 객체를 초기화 하기 위한 특수 함수.
• new로 생성한 인스턴스에 파라미터로 넣어준 값들을 초기화 하며 저장.

class TempClass {
	constructor () {
            ...
        }
}

 

 

class TempClass {
	constructor (first, last) {
    		this.first = first
            	this.last = last
        }
}


const temp1 = new TempClass('seo', 'hyejin') // first: seo, last: hyejin
const temp2 = new TempClass('hong', 'gildong') // first: hong, last: gildong

 

 

 

 

Class Field(클래스 필드)

• Constructor 메서드 안에서 정의하는 데이터가 아닌 클래스 내 필드 값.
• 인스턴스를 선언하면서 넘겨주는 동적 데이터가 아닌 클래스에 기본적으로 내장되는 데이터.
• 클래스 내.외부에서 자유롭게 사용 가능.

class TempClass {
	score = 0
	constructor(first, last) {
    		this.first = first
        	this.last = last
    	}
}

const temp1 = new TempClass('seo', 'hyejin')
// temp1 = { first: 'seo', last: 'hyejin', score: 0 }

 

 

• Private Field (프라이빗 필드)
• 클래스 외부에서 선언 불가한 필드.
• # 기호 사용

class TempClass {
	#score = 0
	constructor(first, last) {
    		this.first = first
        	this.last = last
    	}
        
        getScore () {
        	return this.#score
        }
        #secret () {
        	console.log('프라이빗 필드 메서드')
        }
}

const temp1 = new TempClass('seo', 'hyejin')
temp1.#score // ERROR - 클래스 외부에서 선언 불가
temp1.#secret() // ERROR - 클래스 외부에서 선언 불가
temp1.getScore() // SUCCESS

 

 

 

Getters

• get 키워드 사용.
• 해당 프로퍼티가 있는 것처럼 호출.

class Person {
	constructor (age) {
    	this.age = age
    }
    
    get age () {
    	return this.age + '살'
    }
    
    getAge () {
    	return this.age + '살'
    }
}

const gildong = new Person(30);
gildong.age // 30살
gildong.getAge() // 30살

• get age() 와 getAge()는 같은 값을 리턴해 주지만 getters를 사용하면 구문이 더 간략하고 직관적.
• getters는 object.age 처럼 key 값을 호출하는 것처럼 사용

 

 

 

Setters

• set 키워드 사용.

class Person {
	constructor (age) {
    	this.age = age
    }
    
    get age () {
    	return this.age + '살'
    }
    
    set age (newAge) {
    	return this.age = newAge
    }
    
    getAge () {
    	return this.age + '살'
    }
    
    setAge (newAge) {
    	this.age = newAge
    }
}

const gildong = new Person(30);
gildong.age // 30살
gildong.age(25) // { age: 25 }
gildong.setAge(25) // { age: 25 }

• getters와 마찬가지로 setters를 사용하면, setAge() 함수를 사용하는 것보다 더 직관적이고 편리함.

 

 

 

Static Fields / Methods (정적 필드/메서드)

• static 키워드 사용.
• new로 선언한 개별 인스턴스에는 없지만 클래스내에 선언되어 있음.