6. class

6-1. 클래스 정의

6-1-1. 생성자 함수

const player = new Object();

player.name = 'Choi';
player.sayWinner = function () {
		console.log('Ladies and gentlemen, Champion is ' + this.name);
};

player.sayWinner();

Ladies and gentlemen, Champion is Choi

6-1-1-1. 객체 리터럴에 의한 객체 생성 방식

const rabbit = {
		type: '토끼',
		name: '빙키',
		sound: '깡총',
		say() {
				console.log(this.sound);
		}
};

console.log(rabbit.say());

const frog = {
		type: '개구리',
		name: '개리',
		sound: '개굴',
		say() {
				console.log(this.sound);
		}
};

console.log(frog.say());

깡총
개굴

6-1-1-2. 생성자 함수에 의한 객체 생성 방식

function Animal(type, name, sound) {
	  this.type = type;
	  this.name = name;
	  this.sound = sound;
	  this.say = function() {
				console.log(this.sound);
		};
}

const rabbit = new Animal('토끼', '빙키', '깡총');
const frog = new Animal('개구리', '개리', '개굴');

rabbit.say();
frog.say();

깡총
개굴

6-1-2. 프로토타입

• 생성자 함수의 prototype 프로퍼티 ⇒ 프로토타입

• 프로토타입의 constructor 프로퍼티 ⇒ 생성자 함수

6-1-3. 클래스 문법

6-1-3-1. Syntactic Sugar(문법적 설탕)인가?

• new 연산자가 없으면 클래스에서 오류 발생, 생성자 함수에서는 일반 함수로서 호출된다.

• 상속을 지원하는 extend와 super 키워드를 클래스에서는 지원, 생성자 함수에서는 미지원한다.

• 클래스 내 모든 코드에 strict mode(엄격 모드)가 지정되어 있으며, 이를 해제할 수 없다. 반면, 생성자 함수는 strict mode(엄격 모드)가 지정되어 있지 않다.

6-1-3-2. 클래스 사용

class Player {}

6-1-3-3. 표현식

• 함수 리터럴을 사용하여 생성할 수 있다.

• 변수나 프로퍼티, 자료구조에 값으로 할당이 가능하다.

• 함수의 인자로 전달할 수 있다.

• 함수의 리턴값으로 사용할 수 있다.

class Player {}

console.log(typeof Player);

function

const Player = class {};  // 익명 클래스 표현식

const Player = class myClass {}; // 기명 클래스 표현식

6-1-4. 정의 방식 비교

6-1-4-1. 생성자 함수

var Player = (function () {

function Player(name) {
		this.name = name;
		}

// 프로토타입 메서드
Player.prototype.sayWinner = function () {
		console.log('Ladies and gentlemen, Champion is ' + this.name);
		};

// 정적 메서드
Player.sayWinner = function () {
		console.log('Champion!');
		};

return Player;
}());

Player.sayWinner();

Champion!

6-1-4-2. 클래스

class Player {
		constructor(name) {
				this.name = name;
		}
		// 프로토타입 메서드
		sayWinner() {
				console.log('Ladies and gentlemen, Champion is ${this.name}');
		}
		// 정적 메서드
		static sayWinner() {
				console.log('Champion!');
		}
}

Player.sayWinner();

Champion!

6-2. 클래스 호이스팅

console.log(Player);

class Player {}

6-3. 인스턴스

6-3-1. 인스턴스란?

class Fruit {}
// 인스턴스 생성
const berry = new Fruit(); 
console.log(berry); 

6-4. 메서드

6-4-1. constructor(생성자)

class Fruit {
		constructor(name) {
				this.name = name;
		}
}
const fruits = new Fruit('cherry');

console.log(typeof Fruit)
console.dir(Fruit);

• 클래스 내 constructor는 한 개만 존재할 수 있다. constructor가 2개 이상 class에 포함되면 에러가 발생한다.

class Fruit {
		constructor(name) {
				this.name = name;
		}
		constructor(num) {
				this.num = num;
		}
}

 



 

• constructor는 생략이 가능하지만 프로퍼티가 추가되어 초기화된 인스턴스를 생성하려면 constructor에 매개변수를 선언하고 초깃값을 전달해야 인스턴스 생성 시 프로퍼티가 추가되기 된다. 인스턴스 생성과 동시에 프로퍼티 추가를 통해 인스턴스 초기화를 원하면 constructor를 생략해서는 안 된다.

• 반환문은 사용하지 않아야 한다. 생성자 함수에서 new 연산자와 함께 클래스가 호출하면 암묵적으로 인스턴스를 반환하기 때문에 return 문은 쓰지 말아야 한다.
 

class Fruit {
		constructor(name) {
				this.name = name;
				return {};
		}
} 

const fruits = new Fruit('cherry');
console.log(fruits);

결과는 다음과 같다.
 

{}

 

6-4-2. 프로토타입 메서드

function Fruit(name) {
		this.name = name;
}

Fruit.prototype.sayYum = function () {
		console.log(`${this.name} is Yummy`)
};

const fruits = new Fruit('cherry');
fruits.sayYum();

cherry is Yummy

class Fruit{
		constructor(name) {
				this.name = name;
		}
		sayYum() {
				console.log(`${this.name} is Yummy`)
		} 
}

const fruits = new Fruit('cherry');
fruits.sayYum();

cherry is Yummy

6-4-3. 정적 메서드

function Fruit(name) {
		this.name = name;
}
//정적메서드
Fruit.sayYum = function () {
		console.log('Yummy');
};

Fruit.sayYum();

Yummy

class Fruit {
		constructor(name){
				this.name = name;
		}

		static sayYum() {
				console.log('Yummy');
		}
}
Fruit.sayYum();

Yummy

const fruits = new Fruit('cherry');
fruits.sayYum();

class Fruit {
// 정적 메소드
		static sayYum() {
				console.log('Yummy');
		}
// 프로토타입 메서드
		sayHi() {
				console.log('Hi');
		}
}
const fruits = new Fruit('cherry');

fruits.sayHi();    // Hi
Fruit.sayYum();    // Yummy

6-5. 프로퍼티

6-5-1. 프로퍼티란?

프로퍼티에는 두 종류가 있다.

• 인스턴스 프로퍼티(Instance property) : 주어진 특정한 인스턴스(객체)의 데이터를 가진다.

• 스태틱 프로퍼티(Static property) : 모든 객체 인스턴스들과 공유되는 데이터를 가진다.

또한 프로퍼티는 이름과 값을 가진다. (key와 value)

• 이름 : 문자열이거나 심볼 (key)

• 값 : 원시값(primitive), 메서드(method) 또는 객체 참조(object reference)(value)

// 우리는 객체하면 중괄호안에 키와 값이 쌍으로 여러 개 있는 형태를 떠올린다.
const user = {
		// 여기서 key : value 쌍을 객체의 프로퍼티, 엄밀하게 데이터 프로퍼티라고 한다.
		name: 'sungjae',
		dept: 'FE',
		age: 10
}

깊게 들여다 보는 프로퍼티

const user = {
		name: 'sungjae', // 프로퍼티 하나
		dept: 'FE',      // 프로퍼티 둘
		age: 10          // 프로퍼티 셋
}

• value : 해당 프로퍼티의 값을 의미한다.

• writable : 변경 가능여부를 의미한다.

• enumerable : 열거 가능여부를 의미한다.

• configurable : 재정의 가능여부를 의미한다.

const user = {
		name: 'sungjae', // 프로퍼티 하나
		dept: 'FE',      // 프로퍼티 둘
		age: 10          // 프로퍼티 셋
}

user.name = 'kwaksungjae'; // 수정
delete user.age;   // 프로퍼티의 삭제는 delete로 가능하다.

console.log(user); // 수정과 삭제가 되었는지 확인

6-5-2. 인스턴스 프로퍼티

프로퍼티에는 두 종류가 있다.

• 인스턴스 프로퍼티(Instance property) : 주어진 특정한 인스턴스(객체)의 데이터를 가진다.

• 스태틱 프로퍼티(Static property) : 모든 객체 인스턴스들과 공유되는 데이터를 가진다.

class Student {
	  constructor(id, name, topics) {
		    this.id = id;        // 값을 받아와서 정의
		    this.name = name;    // 값을 받아와서 정의
		    this.topic = topics; // 값을 받아와서 정의
				this.subject = 'javascript study' // 생성 당시에 정의
		}
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);

6-5-3. 접근자 프로퍼티(accessor property)

프로퍼티에는 두 종류가 있다.

• 인스턴스 프로퍼티(Instance property) : 주어진 특정한 인스턴스(객체)의 데이터를 가진다.

• 스태틱 프로퍼티(Static property) : 모든 객체 인스턴스들과 공유되는 데이터를 가진다.

• 여기서 말하는 접근이란, 값을 조회하거나 저장하는 것을 말한다.

• 접근자 함수를 getter함수, setter함수라고도 부른다.

• 접근자 함수이지만 괄호를 안쓴다. 즉, 값처럼 사용을 한다.

• 접근자 프로퍼티는 값을 갖지 않는다. 다만 접근할 뿐이다.(반면, 데이터 프로퍼티는 값을 가진다.)

6-5-3-1. getter함수 & setter함수

class Student {
		constructor(id, name, topics) {
				this.id = id;
				this.name = name;
				this.topic = topics;
				this.subject = 'javascript study'
		}
		set name(value) { // name(value){...} 라는 함수(메소드)앞에 set이 있으므로 setter함수
				this.name = value;
	  }
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);
sungjae.name = '곽성재';

class Student {
		constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
				this.subject = 'javascript study'
		}
	  set name(value) { // name(value){...} 라는 함수(메소드)앞에 set이 있으므로 setter함수
		    this._name = value; // 자기 자신을 계속 호출하지 못하도록 underscore를 써준다.
	  }
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']); 
sungjae.name = '곽성재';
console.log(sungjae.name) // undefined

class Student {
	  constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
				this.subject = 'javascript study'
	 }
  set name(value) { // name(value) {...} 라는 함수(메소드)앞에 set이 있으므로 setter함수
    this._name = value;
	 }
	get name() { // name() {...} 라는 함수(메소드)앞에 get이 있으므로 getter함수
		return this._name;
	}
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);
sungjae.name = '곽성재'; // 이전과는 다르게 setter함수를 호출
sungjae.name;          // 이전과는 다르게 getter함수를 호출
// 두 접근자 프로퍼티 모두 함수이지만 괄호를 쓰지 않고, 마치 값처럼 사용한다.

class Student {
	  constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
			  this.subject = 'javascript study'
	  }
	  set nameAndId(value) { 
	    [this.name, this.id] = value; // 이처럼 우리는 할당 받을 때 하나만을 받게 된다.
		}
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);
sungjae.nameAndId = ['곽성재', 10101010];

6-5-4. 클래스 필드

class Student {
		// constructor외부에서 정의가 가능하다
		subject = 'javascript study'
	  constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
	  }
}

// 생성자 함수 앞에 위치할지 말 지는 상관없다.

class Student {
	  constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
	  }
		// constructor외부에서 정의가 가능하다
	  subject = 'javascript study'
} 

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);

class Student {
	  this.subject = 'javascript study'
		// Uncaught SyntaxError: Unexpected token '.'에러가 발생한다.
	  constructor(id, name, topics) {
		    this.id = id;
		    this.name = name;
		    this.topic = topics;
	  }
}

6-5-4-1. private 필드 정의

class Student {
	  subject = 'javascript study'
		#id; // 값은 받아와서 할당하기위해 선언만 해준다. 이대로 값을 받아오지 않는다면 undefined.
	  constructor(id, name, topics) {
		    this.#id = id;
		    this.name = name;
		    this.topic = topics;
	  }
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);

console.log(sungjae.id) // undefined

class Student {
	  subject = 'javascript study'
	  constructor(id, name, topics) {
		    this.#id = id;
		    this.name = name;
		    this.topic = topics;
	  }
}
// Private field '#id' must be declared in an enclosing class
// private 필드는 클래스의 내부에서 반드시 선언해야 한다고 알려준다.

class Student {
	  subject = 'javascript study'
		#id;
	  constructor(id, name, topics) {
		    this.#id = id;
		    this.name = name;
		    this.topic = topics;
	  }
		get id() {
				return this.#id;
		}
		set id(val) {
				this.#id = val;
		}
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);

// getter함수 추가하기 전
console.log(sungjae.id); // undefined
console.log(sungjae.#id); // '#id' must be declared in an enclosing class

// getter함수 추가한 후
console.log(sungjae.id); // 1
sungjae.id = 10101; // setter함수의 추가로 수정이 가능하다.
console.log(sungjae.id); // 10101

6-5-4-2. static 필드 정의

• 인스턴스 프로퍼티(Instance property) : 주어진 특정한 인스턴스(객체)의 데이터를 가진다.

• 스태틱 프로퍼티(Static property) : 모든 객체 인스턴스들과 공유되는 데이터를 가진다.

class Student {
		// static을 붙여서 선언해준다.
		static isHuman = true;
		static level = 'beginner';
	  subject = 'javascript study'
		#id;
	  constructor(id, name, topics) {
		    this.#id = id;
		    this.name = name;
		    this.topic = topics;
	  }
		get id() {
				return this.#id;
		}
		set id(val) {
				this.#id = val;
		}
}

let sungjae = new Student(1, '성재', ['조건문', '클래스', '구조분해할당']);

console.log(sungjae.isHuman);
// undefined
console.log(sungjae.level);
// undefined
console.log(Student.isHuman);
// true
console.log(Student.level);
// 'beginner'

• 접근을 객체에서 해주어야 한다 == 개별의 객체들만이 가져야 할 속성이다. ⇒ 인스턴스 프로퍼티로 설정

• 접근을 클래스에서 해주어야 한다 == 클래스 자체가 가져야 할 속성이다. ⇒ 스태틱 프로퍼티로 설정

6-6. 상속에 의한 확장

6-6-1. 클래스 확장이란 무엇일까?

6-6-1-1. 이전까지의 class 상속

class NormalClass {
    constructor(arg1, arg2) {
        this.normalArg1 = arg1;
        this.normalArg2 = arg2;
    }

    normalMethod() {
        console.log("노말 메소드 예시입니다.");
    }
}

const normal = new NormalClass(10, 20);
console.dir(normal);

6-6-1-2. 클래스 확장 정의

// 클래스 A의 속성을 클래스 B가 상속 받는다.
클래스B extends 클래스A

6-6-2. 슈퍼 클래스 & 서브 클래스

// 클래스 A : 슈퍼 클래스
// 클래스 B : 서브 클래스
클래스B extends 클래스A

6-6-2-1. 슈퍼 클래스

6-2-2-2. 서브 클래스

6-6-3. 클래스 확장의 예시 및 인스턴스 생성 과정

6-6-3-1. 클래스 확장의 예시

// Human class(슈퍼 클래스)
class Human {
    constructor(height, weight) {
        console.log(this);
        this.height = height;
        this.weight = weight;
    }
    walk() {
        console.log("걷는 중..");
    }
    see() {
        console.log("보는 중..");
    }
}

// Chef class(서브 클래스1)
class Chef extends Human {
    constructor(height, weight, orderedMenu) {
        super(height, weight); // constructor를 명시해주는 경우에 생략해서는 안된다.
        this.orderedMenu = orderedMenu;
    }
    // Chef의 자체 메서드
    cook() {
        console.log(`${this.orderedMenu}를 만드는 중...`);
    }
}

// Waiter class(서브 클래스2)
class Waiter extends Human {
    constructor(height, weight, cookedMenu) {
        super(height, weight); // constructor를 명시해주는 경우에 생략해서는 안된다.
        this.cookedMenu = cookedMenu;
        console.log(this);
    }

    // Waiter의 자체 메서드
    order() {
        console.log(`주문 받는 중...`);
    }

    // walk 메서드 오버라이드, 실행할 메서드를 찾을 때는 프로토타입 체인 상에서 제일 가까운 메서드를 찾아서 실행한다.
    walk() {
        console.log(`요리된 ${this.cookedMenu} 서빙하는 중...`);
    }

    superWalk() {
        super.walk();
    }
}

const chef = new Chef(160, 67, "고등어 정식");
const waiter = new Waiter(180, 80, "고등어 정식");

console.dir(chef);
chef.cook();
chef.see();
chef.walk();

console.dir(waiter);
waiter.order();
waiter.see();
waiter.walk();
waiter.superWalk();

superWalk() {
    super.walk();
}

6-6-3-2. 클래스 확장을 통한 인스턴스 생성 과정

1. 서브 클래스를 new 연산자를 통해 호출하게 되면 기본 클래스 인스턴스 생성과 동일하게 constructor 함수가 실행된다. 하지만 이때 기본 클래스 인스턴스 생성과정과는 다르게 인스턴스 생성을 위한 빈 객체를 생성하지 않는다.
 

const waiter = new Waiter(180, 80, "고등어 정식");

 

2. 서브 클래스로 사용되는 클래스의 경우에서는 constructor 함수 내에서 super 키워드를 생략할 수 없는데 서브 클래스에서는 이 super 키워드를 이용해서 슈퍼 클래스의 constructor 함수를 실행시킨다.
 

class Waiter extends Human {
    constructor(height, weight, cookedMenu) {
        super(height, weight); // constructor를 명시해주는 경우에 생략해서는 안 된다.
        ...
    }
	...
}

 

3. super 키워드에 의해 슈퍼 클래스의 constructor가 실행되고 이때 생성될 waiter 인스턴스를 위해 Javascript에서 자체적으로 빈 객체를 만들고 슈퍼 클래스의 this 값이 이 빈 객체를 가리키게 된다. 이후 constructor 함수를 실행하며 객체에 Human 클래스의 프로퍼티를 추가해 준다. 완성된 객체는 super()의 반환 값으로 서브 클래스의 constructor 함수 내로 반환된다.
 

// Human class(슈퍼 클래스)
class Human {
    constructor(height, weight) {
	      this.height = height;
	      this.weight = weight;
    }
		// constructor 함수 실행 결과로 아래의 객체가 생성된다.
		// { height : 180, weight : 80 }
	  ...
}

 
💡
인스턴스 생성을 위해 생성된 빈 객체 생성된 빈 객체는 [[Prototype]]으로 Waiter.prototype을 가리키는 객체가 생성되게 된다. Waiter.prototype의 [[Prototype]]은 Human.prototype을 가리키기 때문에 이로 인해서 빈 객체는 해당 Waiter, Human 클래스들에서 제공하는 메서드들을 다 사용할 수 있게 된다.
 

4. super()의 결과로 반환된 객체는 서브 클래스의 this를 통해 가리키게 된다. 이후 서브 클래스의 constructor 함수 내에서 실행되지 못했던 super() 이후의 코드들이 실행되면서 반환된 객체에 Waiter 클래스의 프로퍼티들이 추가된다.

// Waiter class(서브 클래스2)
class Waiter extends Human {
    constructor(height, weight, cookedMenu) {
        super(height, weight); // constructor를 명시해주는 경우에 생략해서는 안 된다.
        this.cookedMenu = cookedMenu;
    }
		// constructor 함수 실행 결과로 아래의 객체가 생성된다.
		// { height : 180, weight : 80, cookedMenu : "고등어 정식"}
		...
}

1. 이렇게 완성된 객체는 new 연산자와 호출된 Class의 결과물로 반환된다.
 

const waiter = new Waiter(180, 80, "고등어 정식");

console.dir(chef);

 

Reference

1. https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

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

3. https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript

4. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

5. https://ko.wikipedia.org/wiki/메소드_오버라이딩