TIL) 객체 지향 프로그래밍, 클래스, 인스턴스, 모듈화를 하는 이유

 

객체 지향 프로그래밍 (OOP; Object-oriented programming)= 데이터와 기능을 한 곳에 묶어서 처리한다. 

 

속성과 메서드가 하나의 '객체'라는 개념에 포함되며, 이는 js 내장 타입인 object와는 다르게, 클래스라는 이름으로 부른다. 

 

메서드 호출하는 방법 // 화살표 함수를 쓰지 않는다. 

 

** 화살표 함수 **

this나 super에 대한 바인딩이 없다. 

메서드로 사용될 수 없다. 

new.target 키워드가 없다. 

 

---

모듈화란?

 

코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 

==> 그 중 하나가 코드를 여러개의 파일로 분리하는 것이다. (모듈화)

 

1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 

2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 

3. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다. 

4. 필요한 로직만들 로드해서 메모리의 낭비를 줄일 수 있다. 

5. 한번 다운로드된 모듈은 웹브라우저에 의해 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약 할 수 있다. 

 

---

객체 지향 프로그래밍(OOP; Object-oriented programming) 쉬운 설명 

=> 하나의 모델이 되는 청사진을 만들고 (class), 그 청사진을 바탕으로 한 객체(object)를 만드는 (instance) 프로그래밍 패턴

 

인스턴스(instance) = '청사진'을 바탕으로 한 객체 (그냥 객체x)

// 인스턴스 만들 때 new 키워드를 써서 만든다.

=> 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체 즉 인스턴스가 할당된다. 

// 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됩니다. 

 

클래스(class) = 청사진

// 대문자로, 일반명사로 만든다. 

// 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다. 

 

**속성과 메소드

 

속성: 브랜드, 차 이름, 색상, 최고 속력 등등

메소드: 객체에 딸린 함수 ex) 연료 주입, 속력 설정, 운전

 

"학생"이라는 클래스를 만든다고 가정한다면!

 

속성: 학교명, 반, 번호, 이름, 과목별 성적

메소드: 주중 기상 시간, 취침 시간, 평소 공부량

 

 

ES5방법 : 클래스는 함수로 정의할 수 있다.

function Car(brand, name, color){
// 인스턴스가 만들어질 때 실행되는 코드
}

 

ES6방법 : class라는 키워드를 이용해서 정의할 수도 있다.  (최근에는 ES6방법 주로 사용)

객체지향 프로그래밍에서 생성자 함수 (constructor) ==> 인스턴스가 만들어질 때 실행되는 코드다. 

class Car {
	constructor(brand, name, color){
    // 인스턴스가 만들어질 때 실행되는 코드
    }
}

 

---

클래스: 속성 정의

 

ES6에서는 this 라는 새로운 키워드 사용! (객체지향 프로그래밍에서 자주 나온다. )

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

this는 인스턴스 객체를 의미한다. 

parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이다. 

아래처럼 this에 할당한다는 것은 만들어진 인스턴스에 ...을 부여하겠다는 것이다. 

 

 

클래스: 메소드의 정의

 

ES5 => prototype이라는 키워드를 사용해서 메서드를 정의할 수 있다. 

function Car(brand, name, color){//생략}
Car.prototype.refuel = function(){
	//연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
	//운전을 구현하는 코드
}

 

ES6=> 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다. 

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

 

 

---

• prototype = 모델의 청사진을 만들 때 쓰는 원형 객체
• constructor = 인스턴스가 초기화될 때 실행하는 생성자 함수
• this = 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context( execution context) 그리고 new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 된다. 

 

class Car {
	constructor(brand,name,color){
    	this.brand = brand;
        this.name = name;
        this.color = color;
        drive() {
        	console.log(this.name + '가 운전을 시작합니다');
    }
    }
}

let avante = new Car ('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive; // avante가 운전을 시작합니다.

 

---

배열은 모두 Array의 인스턴스이다. 

let arr = ['code', 'states', 'pre'];
arr.length; //3
arr.push('course') // 새로운 element 추가

 

배열 메서드 (push, filter, forEach 등등) 모든 메서드는 클래스의 원형 객체 (prototype)에 정의되어 있다. 

let arr = new Array['code', 'states', 'pre'];
arr.length; //3
arr.push('course') // 새로운 element 추가