Class란

연관있는 데이터 + 함수를 한 군데에 묶어서 관리하는 컨테이너

class 안에는 데이터만 있기도, 함수만 있기도 한다.

class를 이용해서 상속다양성이 일어날 수 있는데 이런 것들이 가능한 것이 객체지향언어라고 하며,
자바스크립트는 객체지향언어이고, 최근 ES6에 추가되었다고 한다.
prototype을 기반으로 그 위에 문법만 class가 추가된 것.(syntactical sugar)

class 도입 전에는 바로 object를 만들 때 function을 사용하여 틀을 만들었음.

classobject
TemplateInstance of a class
Declare onceCreated many times
No data inData in

class에는 데이터가 없고, 만 갖춰진 것으로 청사진이라고도 불린다.
class는 관련 데이터만 들어 올 수 있도록 정의만 하고, 한 번만 선언한다.

class를 이용해 데이터를 넣어서 만드는 것이 object.
class를 이용해서 새로운 instance를 생성하면 object가 된다.
objectclass를 이용해서 많이 만들 수 있고, class는 단순 정의만 한 것이다.
실제로 데이터를 object에 넣지 않으면 class는 메모리에 올라가지 않고, 데이터를 object에 넣어야 메모리에 올라간다.

▶︎ Class의 기본문법


class 선언

 class Person{ // class 선언
  constructor (name,age){ // 생성자 constructor를 통해 object로부터 필요한 데이터 전달받는다.
    this.name = name; // 속성 (field, data); 전달받은 데이터를 할당
    this.age = age; // 속성 (field, data); 전달받은 데이터를 할당
  }
    speak() { // 행동(method)
 console.log(`${this.name}, hello!`) 
    }
  }

object 생성

let emily = new Person('emily',19); // object instance 생성
console.log(emily.name); // "emily" ;
console.log(emily.age); // 19 ;
console.log(emily); // {age:19. name:"emily"} ;
emily.speak(); // "emily, hello!"

생성된 object으로 class의 객체나 함수를 불러와야 한다.
class 내부의 this 는 생성된 object 이름을 받아 프로퍼티 값을 가져온다.

▶︎ getter & setter

class 안에서 내부적으로 보여지는 변수, 밖에서 보일 수 있는 변수를 나눠지기도 한다.
객체의 외부에서 접근 할 수 없고, 외부로부터 감춰진 속성이나 메소드를 encapsulation(캡슐화) 라고 한다.
캡슐화는 외부에서 설정된 값을 변경할 수 없게 숨겨둔 것이다.

게터(getter)
객체의 프로퍼티를 가져오는 함수
class를 사용하는 사용자가 입력한 값을 return
getter는 파라미터 값을 가질 수 없다.

세터(setter)
객체의 프로퍼티를 설정하는 함수
class를 사용하는 사용자가 잘못된 값을 입력할 때 set을 이용하여 값을 설정.
값을 설정하기 때문에 value 를 받아와야 함. 따라서 1개의 파라미터를 가진다.


class User{
	constructor(firstName,lastName,age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
   get age(){ // get 함수
   	return this._age; // 'this.age'는 getter를 호출
   }
   set age(value){ // set 함수
     if (value < 0){ // age의 파라미터가 0 보다 작으면 Error return 
     	throw Error ('Please check your age')
     }
   	this._age = value; // '= age'는 setter를 호출
 // this._age = value < 0 ? 0 : value; 이런 표현방법도 있음 */
   }
}
const user1 = new User('Emily','Park',-1);
console.log(user1.age); // '-1'은 0보다 작기 때문에 Error 출력
// 내부적으로 'get'와 'set'를 이용하기 때문에 '.age'로 호출해도 '_age'에 할당할 수 있다.

getter를 정의하는 순간 this.age는 메모리에 있는 데이터를 읽어 오는 것이 아니라 getter를 호출.

setter를 정의하는 순간 = age 값을 할당 할 때 메모리의 값을 할당하는 것이 아니라 setter를 호출

만약 setter의 프로퍼티를 .age하는 경우, setter 호출을 반복.

this.age 가 반복되는 것을 방지하기 위해서 gettersetter 에서 쓰이는 변수의 이름을 보통은 ' _ ' 기호를 이용함.

✓ User class에는 총 3개의 field (fristName,lastName,_age) 가 있다.

▶︎ public, private (최근에 추가)

	class Experiment{
	publicField = 2;
	#privateField = 0;
    }
    const experiment = new Experiment();
	console.log(experiment.publicField);
	console.log(experiment.privateField);

constructor를 쓰지 않고 필드를 정의할 수 있는데 그냥 정의하게 되면 "public" -> 외부에서 접근이 가능

'#' 해쉬기호를 붙이게 되면 private.
class 내부에서만 값이 보여지고, 접근이 되고, 값이 변경 가능하지만
class 외부에서는 이 값을 읽을 수도, 변경할 수가 없다.

따라서, publicField를 출력하면 '2' 가 출력되지만, privateField'undefined'가 출력된다.

아직 사파리, 최신 브라우저에서 지원을 하지 않는다.

▶︎ Static (정적 메서드)

class에 있는 데이터와 상관없이 class가 가지고 있는 공통적인 class의 고유의 값과 메소드를 동일하게 반복되어 사용해야 하는 경우가 있을 때 사용.

	class Essential {
	 static supplements = "omega-3"
	  constructor(nutrition){
	   this.nutrition = nutrition;
	  }
	 static omega(){
	  console.log(this.supplements)
	  }
	}
  const essential = new Essential('sports research')
  const essential2 = new Essential('Number 1 product')

console.log(essential.supplements) // undefined
console.log(Essential.supplements) // "omega-3"
Essential.omega(); // "omega-3"
// static이 안붙어 있는 경우에는 object이름을 불러서 하지만 static이 붙어 있는 경우에는 class 이름을 붙여서 프로퍼티를 가져온다.
>
console.log(essential.nutrition); // "sports research"
console.log(Essential.nutrition); // undefined

object마다 할당되는 것이 아니기 때문에 object의 이름을 붙이지 않고,
class의 이름을 붙여서 프로퍼티를 가져온다.

따라서 'static'이 붙여져 있으면 object 인스턴스에서 호출 할 수 없다.

공통적으로 class에서 쓸 수 있는 거라면 'static'을 사용해 메모리의 사용을 줄일 수 있다.

▶︎ extends를 이용한 class 상속과 다양성

상속

기존class에 있는 것들을 extends를 이용하여 새로운 class에 상속할 수 있다.
상속을 하게 되면 공통되는 것들을 재사용 할 수가 있다.
재사용이 가능하기에 유지보수가 쉬움.

다양한 object를 만들어서 서로 다른 기능을 하도록 할 수 있다.

	class Service{
    constructor(roomNumber,drinks){
      this.roomNumber = roomNumber;
      this.drinks = drinks;
    }
      front() {
      console.log(`Can I get welcome drinks as ${this.drinks}?`)
      }
      getNumber() {
       console.log(`My room number is${this.roomNumber}`);
      }
    }
	const service = new Service(2020,'coffee')
	class Hotelservice extends Service {}
// 새로운 'Hotelservice'class에 'Service' class의 프로퍼티와 함수를 물려줌
const hotelservice = new Hotelservice(1004,'juice');
console.log(hotelservice); // {drinks: 'juice', roomNumber:1004}
hotalservice.front(); // "Can I get welcome drinks as juice?"

다양성 overriding

새로운class에 원하는 기능을 끼워 넣어 필요한 함수만 바로 재정의해서 쓸 수 있다.

	class Service{
    constructor(roomNumber,drinks){
      this.roomNumber = roomNumber;
      this.drinks = drinks;
    }
      front() {
      console.log(`Can I get welcome drinks as ${this.drinks}?`)
      }
      getNumber() {
       console.log(`My room number is${this.roomNumber}`);
      }
    }
const service = new Service()
class Roomservice extends Service {
     front() {
       super.front();
 // 부모의 메소드(기존 class의 메소드)를 'supper'를 사용하여 가져 올 수 있다.
      console.log(`Please deliver ${this.drinks} to ${this.roomNumber}`)
     }
 }
const roomservice = new Roomservice(1004,'juice');
console.log(roomservice); // {drinks:'juice', roomNumber: 1004}
roomservice.front();
/* "Can I get wellcome drinks as juice?"
-> super.front()인 부모 class의 front() 출력
   "Please deliver juice to 1004"
-> roomservice.front() 추력*/

새로운 Roomservice라는 class 에 부모 class인 Service를 상속했다.
이는, Service에 있는 프로퍼티와 함수가 Roomservice에 귀속된다는 말이다.

Roomservice class 안에 원하는 함수만 가지고 와서 수정하거나, 새로운 함수를 추가 할 수 있다.

이처럼 class를 이용하여 다양한 값을 만들어 낼 수 있다.

▶︎ instanceof

'true' or 'false' 반환

instanceof 기준으로 왼쪽에 있는 object오른쪽에 있는 classobject인지 확인
즉, objectclass를 이용해서 만들진 것인지 아닌지 확인 하는 것

	class Drinks {
 	  constructor(wellcome){
	    this.wellcome = wellcome;
	  }
   	}
	let hotel = new Drinks('ice coffee');
      console.log(hotel instanceof Object) // true

자바스크립트에서 만든 모든 "object", "class"들은 자바스크립트에 있는 object를 상속한 것.
어떠한 object라도 공통적으로 존재하는 이미 지정된 메소드들을 쓸 수 있다.


💡 드림코딩 클래스와 오브젝트의 차이점
💡 드림코딩 클래스와 콜백함수



🙋🏻‍♀️ Today,

제코베 문제 푸는 중간에 class라는 문제가 나와서 2-3일간 class에 대해 공부한 것 같다.
사전적인 의미도 찾아보고, 기본서도 찾아보고, 벨로그 글도 찾아봤다.
그런데도 도무지 머리 속으로 안들어와서 유튜브 영상을 보게되었다.
눈동냥을 많이 해서 그런가 이해가 조금은 수월했고, class의 기본 개념이 들어왔다.
역시 인고의 시간은 배신하지 않는 것인가🙏

드림코딩님의 유튜브가 많은 도움되었다.
보고서 따라치고.. 따라치면 값이 나오고 🎊🎊
물론 값이 안나올 때도 있었다.
신기하게도 똑같이 따라 치는데도 안나올 때는 눈을 지긋이 감게 된다.
왜냐면 눈이 너무 피로해서.. 이 때 눈을 감아본다.🤦🏻‍♀️

특히 한/영 키 왜 말을 그렇게 안듣는지.
울컥할 때가 한두 번이 아니다.
그럴 때는 가끔 키보드를 뚱땅뚱땅 내려친다.
가아아아끔... 노트북은 소중하니까.🤝

profile
Whatever you want

0개의 댓글