[ES6+] Classes

class

드디어..!! 드디어 배우는구나 두둥 두둥

클래스 진짜 배우고 싶었다. async랑 await랑 같이!!!!!!

클래스는 화려한 object라고 생각하면 된다

보통은 클래스를 직접만들어서 사용한다기 보다는 만들어져 있는 클래스를 가져와서 사용한다

클래스는 코드 구성하는데 도와준다.

코드가 겁나 많을때 클래스를 사용하면 유용하다 왜냐믄 클래스는 재사용이 가능하니까!!

클래스는 청사진이라고 생각하면 된다(어떤 대상의 전체적인 전개만 보여주고 실질적으로는 사용할 수 없는)

또, 클래스는 생성자(constructor)를 안에 가지고 있다

class User{
  constructor(){
    this.username = "sora";
  }
}

console.log(username);
//undefined

왜 undefined이 뜰까?

그건, 실제로 User 클래스를 직접 이용할 수 없기 때문이다. (=청사진 역할을 하기 때문)

user클래스는 청사진이라고 생각하면 되는데, 이 청사진으로 클래스를 생성(construct)해야한다.

그래서, 클래스를 새로 만들어보자

class User{
  constructor(){
    this.username = "sora";
  }
}

const sexyUser = new User();
console.log(sexyUser.username);
//sora

secyUser 는 이제 User 클래스의 인스턴스이다.

인스턴스는 살아있는 클래스를 의미한다

User 클래스는 단지 청사진 역할만을 하는 클래스이기 때문에 실직적으로 살아있는 클래스라고는 보기 어렵다

그래서 sexyUser.username을 찍으면 sora를 찍게되는것이다

함수도 만들수있다

class User{
  constructor(){
    this.username = "sora";
  }
  sayHello(){
    console.log("hi i'm Sora");
  }
}

const sexyUser = new User();
console.log(sexyUser.username);
sexyUser.sayHello;
//sora
//hi i'm Sora

인스턴스는 얼마나 만들수있을까?

원하는만큼!!!!

class User{
  constructor(){
    this.username = "sora";
  }
  sayHello(){
    console.log("hi i'm Sora");
  }
}

const sexyUser = new User();

const uglyUser = new User();

sexyUser.sayHello();
uglyUser.sayHello();
//hi i'm Sora
//hi i'm Sora

같은 청사진을 이용했기 때문에 결과는 같다

클래스가 아니라 그냥 오브젝트에다가 만들어도 된다

const baseObject = {
	username:"sora",
	sayHello:function(){
		console.log("sora");
	}
}

const sexyUser = baseObject;
const uglyUser = baseObject;

sexyUser.sayHello();
uglyUser.sayHello();
//sora
//sora

그렇다면, 도대체 클래스는 왜 만드는걸까

물론 오브젝트로도 만들 수 있지만, 그렇게 되면 오브젝트를 하나 더 만드는 수준이라는거다

클래스는 오브젝트를 만드는 공장같아서 계속해서 만들어낼 수 있다

변수적인 특징을 가지는것만으로도 그렇다 (아래 예시코드)

class User{
	construntor(name){
		this.username = name;
	}
  sayHello(){
    console.log(`hi my name is ${this.username}`);
  }
}
const sexyUser = new User("sora");
sexyUser.sayHello();
//hi my name is sora

sayHello();
//에러 (sayHello는 클래스 안에서만 작동하는 함수이므로 외부에서는 사용할 수 없다)
//하지만 그냥 클래스가 아니라 클래스의 인스턴스안에 존재하는거다

클래스를 쓰면 코드를 엄청 구조적으로 바꿀 수 있다. 그렇기 때문에 클래스를 사용하는것!

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

class

Share this post