JavaScript / class와 object, 객체지향(상속 & 다형성)

이 포스팅은 유튜브 드림코딩 엘리님의 강의를 통해 개념을 정리하는 목적으로 작성되었습니다.

https://youtu.be/_DLhUBWsRtw

 

⭐ 클래스는 조금더 연관있는 데이터들을 한데 묶어두는 컨테이너같은 것이다.

 

▶ Class란?

클래스는 fields와 methods가 종합적으로 묶여있는 것

클래스는 상속, 다형성, 캡슐화가 가능

- template만 정의

- 데이터는 안에 들어있지 않음

ex. 붕어빵 틀 => 클래스

 

클래스를 이용해 새로운 인스턴스를 생성하면 오브젝트가 된다.

▶ Object란?

- 클래스의 인스턴스

- 여러번 만들 수 있음

- 데이터가 들어있음

ex. 팥 붕어빵 / 슈크림 붕어빵 / 피자 붕어빵 => 오브젝트

 

 

Object-oriented programming

 

▶ 자바스크립트에 클래스 도입 배경

- ES6에서 추가

- 클래스가 도입되기 전에는 바로 오브젝트를 만들 수 있었음

  함수를 이용해서 템플릿을 만드는 방법을 사용했다.

- 기존의 존재하던 JS 위에 추가된 것

  => 기존에 존재하던 프로토타입을 기반으로 클래스 문법만 추가된 것

 

▶ 클래스 정의하기

class Person {
	//constructor
    constructor(name, age){
    //fields
    this.name = name;
    this.age = age;
    }
    
    //methods
    speak() {
    	console.log(`${this.name}: hello!`);
    }
}

 

▶ 오브젝트 선언

const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);

 

▶ Getter & Setters

getter: 속성 값을 가져오는 함수

setter: 클래스의 속성 값을 변경하는 함수

class User{
	constructor(firstName, lastName, age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age; //this.age를 부르면 getter 호출, 값을 할당 시 setter 호출
 	}
    
    get age() {
    	return this._age; // 내부적으로 age와 약간 다른 변수명을 사용해준다. 
    }
    
    set age(value) {
    	this._age = value < 0 ? 0 : value; // 내부적으로 age와 약간 다른 변수명을 사용해준다. 
        					// 무한 호출로 Maximum call stack size exceeded 에러 방지
                                           // 사람 나이가 음수가 될 수 없으므로 setter에 조건 설정
    }
}

const user1 =  new User('Steve', 'Job', -1);
console.log(user1.age); // 0 출력

▶ Public & Private

최근에 추가된 사항 (Safari에서 지원 불가)

class Experiment {
	publicField = 2;
    #privateField = 0; //변수 앞에 #을 붙이면 private, 외부에서 접근 불가
}

const experiment = new Experiment();
console.log(experiment.publicField); // 2 출력
console.log(experiment.privateField); // undefined 출력

▶ Static

Static으로 정의하면 오브젝트에 상관없이클래스 자체에 정의되어 있는 것

들어오는 데이터에 상관없이 공통적으로 클래스에서 사용하는 것이라면 static으로 정의하는 것이 좋다.

메모리 사용을 조금 더 줄여줄 수 있어 좋다~~

class Article {
	static publisher = 'Dream coding';
    constructor(articleNumber) {
		this.articleNumber = articleNumber;
    }
    
    static printPublisher() {
    	console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);

console.log(Article.publisher); //static으로 정의된 변수를 사용할 때는 클래스명으로 접근해야 한다.

Article.printPublisher();

 

▶ 상속 & 다형성

상속: 상위 클래스의 기능을 하위 클래스에 물려주는 것

다형성 : 필요한 함수만 재정의(Overriding)해서 사용할 수 있음

class Shape {
	constructor(width, height, color){
		this.width = width;
        this.height = height;
        this.color = color;
    }
    
    draw() {
    	console.log(`drawing ${this.color} color!`);
    }
    
    getArea() {
    	return this.width * this.weight;
    }   
}

class Reactangle extends Shape {} // Shape란 클래스를 상속! extends 키워드를 통해 상속 가능
class Triangle extends Shape {
	draw() {
    	super.draw(); //부모의 draw()를 호출!
        console.log('▲');
    }

	getArea() { // 부모의 것을 물려받고 필요한 기능만 재정의 해서 사용할 수 있다.
    	return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color! 출력
console.log(rectangle.getArea()); // 400 출력

const triangle = new Triangle(20, 20, 'red');
triangle.draw();
// drawing red color!
   ▲
   출력
console.log(triangle.getArea()); // 200 출력

 

▶ instanceOf

이 오브젝트가 이 클래스를 이용해서 만들어진 것인지 확인할 때 사용한다.

Class checking!

console.log(rectangle instanceOf Rectangle); // rectangle은 Rectangle란 클래스를 통해 만들어진 것인가? True 출력
console.log(triangle instanceOf Rectangle); // False 출력
console.log(triangle instanceOf Triangle); // True 출력
console.log(triangle instanceOf Shape); // True 출력 -> 상속받았으니!
console.log(triangle instanceOf Object); // True 출력 -> 우리가 만든 모든 오브젝트는 JS의 Object를 상속한 것

⭐ 자바스크립트에서 만든 모든 오브젝트는 Object를 상속받는다! => Object에 있는 함수를 사용 & 오버라이딩할 수 있다.

 

⭐ 자바스크립트 내부에 포함되어있는 object는 어떤 것이 있는지 카테고리 별로 확인할 수 있는 유용한 사이트!

JavaScript reference - JavaScript | MDN (mozilla.org)

JavaScript reference - JavaScript | MDN

 

 

---

리액트 개발 시 클래스형 컴포넌트 예제를 찾아볼 때 생성자, getter & setter 정의 부분때문에 헷갈리는 부분이 좀 있었는데

JS의 클래스 정의 방법을 다시 정리해보니 이젠 확실히 참고할 수 있을 것 같다. ㅋㅋㅋ

교수님이 그렇게 강조하셨던 객체지향의 PIE(다형성 & 상속 & 캡슐화)..!! 정말 중요함을 깨닫게 되었다...

JS 프로젝트를 해보고 문법 강의를 다시 들으니까 더 이해가 잘된다...

까먹을 때 마다 복습하는 것이 최고인듯!