#.7 Class

1. JS class

• ES6에 도입됨
• 클래스가 도입되기 전에는 클래스를 정의하지 않고 함수를 이용해서 클래스를 만들고 오브젝트를 생성해서 사용했었음
• 기존에 존재하던 자바스크립트에 추가된 것이기에 기존에 존재하던 프로토 타입을 기반하여 그 위에 간편하게 쓸 수 있도록 문법만 클래스가 추가된 것임 (syntactical sugar)
• prototype based inheritance된 클래스이기 때문에, 프로토타입을 이해하는 것이 좋음

 

• JS에 클래스가 없다면? : 정의한 모든 변수들이 파편화되어 규모있는 프로젝트를 진행하기 어려웠을 것
• class : 조금 더 연관있는 것들을 묶어놓는 하나의 컨테이너
  • 클래스는 속성(field), 행동(method)가 들어있음
  • data class : 속성만 들어있는 클래스
  • 다형성, 캡슐화, 추상화
  • 객체지향 언어는 리얼 월드에 있는 사물과 물체를 객체로 정의해서 프로그래밍하는 것이 자연스럽기 때문에, 개발자들이 유연하게 프로그래밍 할 수 있는 장점을 가짐

 

• class : 붕어빵을 만드는 틀과 같음
  • template
  • declare once
  • no data in
  • 데이터는 들어있지 않고 틀만, 템플릿만 정의해놓는다.
• object : 붕어빵
  • instance of a class
  • created many times
  • data in
  • 클래스를 통해서 새로운 인스턴스를 만들면 객체
  • 클래스는 정의만 한 것이여서 실제로 메모리에는 올라가지 않음, 객체는 메모리에 올라감

 

2. 클래스 선언

class Person {
		//constructor 생성자를 이용해서 오브젝트를 만들 때 필요한 데이터를 전달
	constructor(name, age) { 
	//fields 오브젝트에 존재하는 두 가지 필드에 전달된 데이터를 할당
		this.name = name;
		this .age = age;
	}
	//methods
	speak() {
		console.log(`${this.name}: hello!`);
	}
}

3. Object 생성

• 새로운 object를 만들 때는 new라는 키워드를 사용

const haksae = new Person('haksae', 20);
console.log(haksae.name); // 출력
console.log(haksae.age);
haksae.speak(); // 함수 호출

4. getter & setter

• 소위 accessor property(접근자 프로퍼티)라고 함. 값이 없고 프로퍼티를 읽거나 쓸 때 호출하는 함수를 값 대신 지정할 수 있는 프로퍼티
• get : parameter가 없는 함수로, property를 읽을 때 동작함
• set : 인수가 하나인 함수로, property에 값을 쓸 때 호출됨

class User {
	constructor(firstName, lastName, age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	}

	get age() { //get이라는 키워드를 통해서 값을 리턴
			return this._age; // 변수가 변경될 때 콜백이 되지 않도록 변수 이름을 다르게함
}
	set age (value) { // set이라는 키워드를 통해서 값을 설정. set은 값을 설정하기 떄문에 value를 받아와야함
//			if (value < 0) {
//				throw Error('age can not be negative'); IF를 통해서 제어해도되고 
//			}
			this._age = value < 0 ? 0 : value; // 밸류가 - 라면 0, 아니면 그냥 사용
	}
}

const user1 = new User('Steve', 'Job', -1);
// 사람의 나이가 -1이 된 것, 이러한 상황을 막아야함. 그래서 위와 같이 getter&setter를 사용
console.log(user1.age); // 0 출력

5. Public & Private

• 최근에 추가된 기능
• 생성자를 쓰지 않고 필드를 정의할 수 있음

class Experiment {
	publicField = 2;     // 외부에서 접근 가능
	#privateField = 0;   // 클래스 내부에서만 값이 보여지고, 변경 가능

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

6. Static

• 최신에 추가된 기능
• 일반적으로 클래스 안에 있는 필드와 메소드들은 그대로 객체에 복제됨
• 그러나 스태틱은 클래스에 계속해서 귀속됨
• Static은 오브젝트와 데이터에 상관없이 클래스와 연결되는 메소드를 선언할 때 사용
• 장점 : 메모리 사용을 줄여줄 수 있음

class Article {
	static publisher = 'Dream'; // static 변수
	constructor(articleNumber) {
		this.articleNumber = articleNumber;
	}

static printPublisher () { // static 메소드
	console.log(Article.publisher);
	}
}
const article1 = new Article(1);
console.log(article1.publisher); // undefined 출력
console.log(Article.publisher); // object가 아닌 클래스로 불러야함
Article.printPublisher(); // 동일하게 class로

7. 상속(Inheritance), 다형성 or 다양성(Polymorphism)

• 선언 : class 클래스이름 extends 상속할클래스이름
• 상속할 클래스의 field와 method가 상속되어, 그대로 사용 가능
• overriding(오버라이딩)
  • 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 기술
  • 필요한 함수만 오버라이딩해서 사용 가능
• super
  • super.상위클래스메소드명();
  • 오버라이딩을 통해서 상위 클래스의 메소드를 재정의했는데, 상위 클래스의 메소드도 사용하고 싶은 경우는 super로 불러온다.

8. instanceOf

• checking instanceOF
• (오브젝트명 instanceof 클래스명): 해당 오브젝트가 클래스의 인스턴스인지 확인
• ex) : console.log(sm5 instanceof Car);

출처 : 드림코딩엘리 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w