[JavaScript] Class(클래스)와 Instance(인스턴스)

공부하다가 클래스를 한 줄로 명확하게 정리한 문장을 보았다.

 

 

class는 object 뽑는 기계일 뿐

출처: https://www.youtube.com/watch?v=dHrI-_xq1Vo 

 

 

이 문장 보고 한참을 웃었던...ㅋㅋㅋㅋ

클래스를 이보다 완벽하고 간결하게 정의한 문장이 있을까 싶어 적어놓는다. 

그리고 저 뽑혀나온, class로부터 생성된 object가 instance다.

 

 

동물원의 동물을 파악하기 위한 코딩을 한다고 치자. 하드코딩하면 아래처럼 될 것이다. 

 

//하드코딩
let 토끼 = {
    명칭: 토끼, 
    개체수: 10, 
    우리: A
}

let 사자 = {
    명칭: 사자, 
    개체수: 2, 
    우리: B
}

let 기린 = {
    명칭: 기린, 
    개체수: 5, 
    우리: C
} 

...

 

양이 많아지면 많아질수록 코드 짜기가 힘들어진다. 이 부분을 조금 쉽게 해결할 수 있도록 해주는 것이 class.

ES5, ES6 문법에 따라 만들면 아래와 같다. 최근엔 ES6문법을 많이 사용한다고 한다.

 

//ES5 문법
function Animal (name, population, area){
    this.명칭= name;
    this.개체수= population;
    this.우리= area;
}

Animal.prototype.noFood = function(){
	return `${this.명칭}에게 먹이를 주지 마시오`
}

let 토끼 = new Animal('토끼', 10, 'A');
let 사자 = new Animal('사자', 2, 'B');
let 기린 = new Animal('기린', 5, 'C');
...

console.log(기린.noFood()); //기린에게 먹이를 주지 마시오

 

//ES6 문법
class Animal2 {
    constructor(name, population, area){
        this.명칭= name;
        this.개체수= population;
        this.우리= area;
    }
    noFood(){
        return `${this.명칭}에게 먹이를 주지 마시오`;
    }
}

let 토끼 = new Animal2('토끼', 10, 'A');
let 사자 = new Animal2('사자', 2, 'B');
let 기린 = new Animal2('기린', 5, 'C');
...

console.log(기린.noFood()); //기린에게 먹이를 주지 마시오

 

Class는 함수와 구분하기 위해 일반명사, 첫 글자 대문자로 작성한다.

 

ES6문법에서 사용되는 constructor는 instance를 만들 때 사용하는 new로 인해 자동으로 호출되어 객체를 초기화하는 생성자 함수이다. ES5 class 문법과 ES6 class 문법의 차이는 아래 글에서 잘 설명되어 있다.

https://ko.javascript.info/class

https://www.geeksforgeeks.org/differences-between-es6-class-and-es5-function-constructors/

 

instance를 만들 때에는 new 로 새로운 객체(instance)를 만들어주어야 한다. 새로운 객체는 변수에 담아 활용 가능.

 

new키워드로 instance를 생성하면, this가 가리키는 값은 해당 instance이다.

 

메서드(객체 안에 생성된 함수)를 여러 개 만들어야 할 땐 메서드 사이에 쉼표 없음에 주의!

 

 

---

이 글은 코드스테이츠 블로깅 과제로, 배운 것을 정리한 글입니다.

 

참고자료

• https://www.youtube.com/watch?v=dHrI-_xq1Vo
• https://ko.javascript.info/class
• 코드스테이츠 강의 자료