자바스크립트 09 클래스와 인스턴스

1. 현재의 무드: 생략

2. 오늘 학습한 내용 중 키워드: 클래스, 인스턴스, new 키워드, 생성자 함수, ES5 클래스 작성 문법, ES6 클래스 작성 문법

3. 오늘 학습한 내용 요약

 

자바스크립트의 객체 지향 프로그래밍에 대해서 학습했다. 이와 연관된 개념으로 클래스, 인스턴스와 이를 생성하는 new 키워드, 그리고 생성자 함수에 대해 배웠다. 또한, 생성자 함수를 만드는 두 가지 방법인 ES5 문법과 ES6 문법을 구분하여 학습했다. 간략하게 배운 내용을 정리해보겠음!

 

객체 지향 프로그래밍이란?

: 우리가 실생활에서 쓰는 모든 것을 객체라 하며, 객체 지향 프로그래밍이란 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말함. 

 

여기서 객체란, 클래스라는 틀에서 생겨난 실체(instance)이다. 

 

이와 비교되는 개념으로, 절차 지향 방식이 있다. 

절차 지향 방식은 프로그램을 기능중심으로 바라보는 방식으로, "무엇을 어떤 절차로 할 것인가?" 가 핵심이 된다. 

 

객체 지향 프로그래밍은 객체가 중심이며, "누가 어떤 일을 할 것인가?" 가 핵심이 된다. 

특징으로는 추상화, 캡슐화, 상속성, 다형성, 동적바인딩 등이 있지만 이는 나중에 알아보도록 한다. 

 

객체 지향 프로그래밍의 핵심이 되는 클래스와 인스턴스는 다음과 같다.

 

Classes: 객체를 생성하기 위한 템플릿. 데이터와 이를 조작하는 코드를 하나로 추상화해줌! 자바스크립트에서 클래서는 프로토타입을 이용해서 만들어짐. 

 

클래스는 사실 "특별한 함수" 이다. 함수 표현식과 함수 선언식으로 함수를 정의할 수 있듯, 클래스 문법도 마찬가지!

 

1. 클래스 선언 (클래스 키워드 사용) 

class Rectangle {  // class 키워드로 선언
	constructor(height, width) { // constructor 함수 작성
		this.height = height // this는 이후 생성되는 instance 객체를 가르킴
		this.width = width
	}
}

// 함수 선언과 다른 점: 호이스팅 시 초기화는 X -> ReferenceError 발생.

 

2. 클래스 표현식

 

// unnamed

let Rectangle = class {
	constructor(height, width) {
    	this.height = height
        this.width = width
	}
}

console.log(Rectangle.name) // Rectangle

// named 

let Rectangle = class Rectangle2 {
	constructor(height, width) {
    	this.height = height
        this.width = width
	}
}

console.log(Rectangle.name) // Rectangle2

// 호이스팅 제한은 선언과 동일.

 

-> 여기서 constructor가 생성자이다. 이는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다. 이 이름을 가진 메서드는 클래스 안에 한 개만 존재 가능하며, 클래스에 여러개의 constructor가 존재한다면 SyntaxError가 발생한다. 

 

이렇게 클래스를 생성한 후, new 키워드를 통해 인스턴트 객체를 만들 수 있다. 

 

예를 들어,

 

// ES5 (함수로 정의)

function Car(brand, name, color) {

}

// ES6 (class 키워드 사용) 

class Car {
	constructor(brand, name, color) {
    }
}

// new 키워드를 통해 클래스의 인스턴스 생성

let avante = new Car('hyundai', 'avante', 'black') 

avante.brand // 'hyundai'
avante.name // 'avante'
avante.color // 'black'

 

이렇게 생성된 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메서드를 갖는다. 

 

그렇다면 클래스의 속성과 메서드는 어떻게 정의할까? 

 

속성의 정의

class Car {
	constructor(brand, name, color) {
    	this.brand = brand
        this.name = name
        this.color = color
    }
}

// this는 인스턴스 객체 의미. 
// 파라미터의 brand, name, color는 인스턴스 생성 시 지정하는 값
// this에 할당-> 만들어진 인스턴스에 해당 brand, name, color를 부여

 

메서드의 정의

 

// ES5

function Car(brand, name, color) { // }
Car.prototype.refuel = function() {}
Car.prototype.drive = function() {}

// prototype 키워드를 사용하여 메서드 정의. 




// ES6

class Car {
	constructor(brand, name, color) { // }
    
    refuel() {}
    drive() {}
}

// 생성자 함수와 함께, class 키워드 안쪽에 함께 묶어 정의

// 메서드, 속성 인스턴스에서 사용하기

let avante = new Car('hyundai', 'avante', 'black') 
avante.color // 'black'
avante.drive() // 해당 메서드 실행

 

 

ref: http://www.incodom.kr/%EA%B0%9D%EC%B2%B4_%EC%A7%80%ED%96%A5#h_8518e25c0e2cd7cac88e609e7b3bf070

생물정보 전문위키, 인코덤

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

Classes - JavaScript | MDN

 

향후 읽어볼 자료: https://ko.javascript.info/constructor-new