[🌳javascript] class

그동안 미뤄왔던 class 정리해야지, 해야지 하다가 드디어 정리하는 날.

오브젝트 복사하고 싶땅

비슷한 object 를 여러 개 찍어내고 싶으면 class 를 이용하면 된다.
ES6 신문법이 나오기 전에는 function 키워드로 열심히 찍어냈다.

function Student(이름){
  this.name = 이름;
}

let 학생1= new Student('Lee')

this는 새로 생성되는 오브젝트를 의미하며, 멋진 개발자 용어로 인스턴스 라고 한다.

class

위에서 쓰던 this키워드는 유지한 채 class 키워드와 constructor() 키워드를 아름답게 조합하여 만들면 된다.

class Student{ //클래스명은 대문자, 클래스명 다음에 () 안쓴다!
  constructor(이름){ //파라미터 자리는 constructor()여기에 쓰는거다!
  	this.name = 이름;
  }
}

let 학생1= new Student('Lee')

class에 함수 추가하기

class Student{
  constructor(이름){
	this.name= 이름;
    this.sayHi= function(){
    }
  }
  sayHello(){
    alert(this.name)
  }
}

함수는 constructor 안에서 this.어쩌구함수 = function(){} 이렇게 쓰거나 constructor()밖에서 저쩌구함수(){} 이렇게 쓸수 있다. this 로 쓰면 자식은 직접 그 함수를 가질테고, contructor 밖에서 쓰면 prototype에 넣어주는 것이니 자식이 직접 소유하지는 못할 것이다.

prototype

class 만들었으면 이제 학생1, 학생2,...을 열심히 찍어낼 수 있기 때문에 class는 부모, 열심히 찍어낸 학생1,2는 자식이라고 보통 칭한다. 그리고 부모가 가지고 있던 그 안의 속성들을 자식들도 가질 수 있게 되는걸 상속이라고도 표현한다. 이렇게 상속하게 되는 건 class 외에 prototype이라는 걸로도 가능한데, 쉽게 생각해서 그냥 유전자라고 생각하면 된다.
위에서 만든 '학생1' 을 콘솔창에 찍어보면 Student{name: 'Lee'} 정도만 나오지만

Student.prototype.school='seoul'

을 적고 다시보면 여전히 Student{name: 'Lee'} 라고만 보이는..........
것처럼 보이지만, 사실 아래에 prototype 을 클릭해서 보면 school: 'seoul' 도 보이는 매직!

우리가 학생1을 직접적으로 건든 적은 없지만, 그 부모의 유전자에 shcool: 'seoul' 을 넣어줌으로써, 그 유전자에 의해 자식들도 사용가능하게 된 것이다. (주의할 것이 있다면, prototype으로 추가된 그 데이터는 부모만 가지고 있다. 자식들이 직접 가지고 있는 게 아니라!)

그런데 이게 어떻게 가능한 걸까? 이건 자바스크립트의 동작원리를 이해하면 쉬운데, JS는 오브젝트에서 자료를 뽑을 때 오브젝트 안에 그 자료가 없으면 그 녀석의 부모님한테까지 간다. 그 부모님도 없으면 그 증조부한테도 가고, 없으면 고조부한테도 간다. 끝까지 간다.

이걸 잘 생각해보면 이제 그동안 우리가 Array에서 .sort(), .map() 등등의 메소드를 직접 넣어준 게 아닌데 어떻게 사용할 수 있었을까 를 이해할 수 있게 된다.

const arr1=[1,2,3] // 보통 우리가 편하게 배열 만드는 방식
const arr1= new Array(1,2,3) // 근데 컴퓨터는 항상 이런식으로 이해함

new 키워드 써서 만드는 걸 보니 엇 방금 위에서 오브젝트 찍어낼 때 쓰던 거랑 똑같네? 라는 걸 알게 된다. 그렇다. 사실 저 Array라는 것의 prototype에는 .filter(), .length(), .forEach(),...등등으로 가득차있고, 그것의 자식들을 우리가 찍어내면 다 유전자 때문에 쓸 수 있었던 것이다.

그동안 mdn에 나오는 prototype.저게 이런 뜻이었구나...하는 걸 이제야 알게 되는 순간(!)

constructor VS prototype

그럼 둘은 무슨 차이가 있을까?
constructor 로 상속시키면 자식은 직접 그 값을 소유할 수 있게 되고,
prototype 으로 상속시키면 자식은 직접 그 값을 가지지는 못한다. 부모가 가지고 있는 걸 참조해서 쓸 수는 있겠지만.

prototype은 constructor 함수에만 생성된다

prototype은 일반 object,array에도 생기는 게 아니라 위에서 본 'Student', 'Student1' 'Array' 이렇게 찍어내는 녀석들에만 생기는 거다.일반 object 같은 거 상속시키고 싶으면 constructor / class 같은 거 쓰면 된다.

Student.prototype.school='seoul'

Student가 아닌 학생1에게 prototype 쓰면 새빨간 에러를 내뱉는다...흥

학생1.prototype.school='seoul' //Error~!~!~!~!~!~!!!!!!!

내 부모님의 유전자를 찾아주세요: proto

부모로부터 생성된 자식들은 __proto__라는 속성이 생기는데, 이걸 클릭하면 부모의 prototype을 출력해준다.

console.log(학생1.__proto__)  <-- 이거랑
console.log(Student.prototype)  <-- 이거가 같은 말이다.

이걸 잘 조작하면 상속기능을 부모님을 언급하지 않고도 다른 방식으로도 구현할 수가 있게 된다.
예를 들어

const score={
  math: 100
}

라는 오브젝트를 학생1한테 유전자로 주는 또다른 방법을 소개하겠다.

학생1.__proto__ = score;
console.log(학생1.math) // 100

Object.getPrototypeOf()

()안에 오브젝트를 넣으면 그의 부모 prototype을 출력해주는 것으로서, __proto__ 와 비슷한 역할을 한다고 보면 된다.

extends

이전 class에서 만든 것과 완전 똑같진 않고 비슷한 class를 하나 더 만들고 싶은데, class 코드를 다 가져다가 복붙하려니 코드가 너무 지저분한 것이다. 그래서 extends가 탄생하게 되었는데..!

class 할아버지{
  constructor(이름){
    this.name=이름
    this.gender='남성'
  }
}
class 아버지 extends 할아버지{
  constructor(나이){
    this.age=나이
  }
}  

이렇게 하면 아버지 클래스는 할아버지 클래스도 가져다가 쓸수 있게 된 것이라고 생각이 든다. 흐뭇하게 const 아버지1=new 아버지()를 만들고 콘솔을 찍어본 결과..
super()가 없다며 난리를 친다.
자 다음은 그냥 암기다.

class 아버지 extends 할아버지{
  constructor(이름,나이){
    super(이름);
    this.age=나이
  }
}  

할아버지 class의 constructor() 를 가져다가 쓰고 싶으면 super() 를 써야 한다. 이건 이해고 자시고 그냥 외우면 된다. 그럼 이제 편안하게 에러가 사라진다. 위에서 할아버지 class constructor에서 쓰던 이름 파라미터는 고대로 아버지 constructor()칸에 넣어주면 된다.

함수 추가

class 할아버지{
  constructor(이름){
    this.name=이름
    this.gender='남성'
  }
  sayHi(){
    console.log(`i'm your grandfather`)
    }            
}
class 아버지 extends 할아버지{
 constructor(이름,나이){
    super(이름);
    this.age=나이
  }
}  
const 아버지1 = new 아버지();
아버지1.sayHi() //i'm your grandfather

근데 이 sayHi함수가 너~~무 유용한 나머지 아버지 클래스에 가져와서 그대로 사용하고 싶다면

class 아버지 extends 할아버지{
 constructor(이름,나이){
    super(이름);
    this.age=나이
  }
 sayHello(){
    super.sayHi() //i'm your grandfather
 	console.log(`I'm your father`)
 }
}  
아버지1.sayHello() // i'm your grandfather
                 // I'm your father 이렇게 두 줄이 나온다.

getter/ setter

const hana = {
  name: "hyewon",
  age: 27,
  nextAge() {
    this.age + 1;
  },
};

내년 나이 구하는건 hana.nextAge()를 쓰든 hana.age+1 를 쓰든 지금은 별반 차이가 없어보인다. 그런데 만약 데이터가 엄청나게 복잡한 구조였다면?
hana.age[3].age[6].어쩌구로 꺼내는 구조였으면 꺼내쓰는 것보다 미리 만들어놓은 함수를 이용하는 게 훨씬 편할 것이다. 또한 안에 들은 데이터 수정을 가할 때 age는 딱 봐도 숫자만 받는 녀석인데 hana.age='28'이라고 해도 자바스크립트는 구별없이 다 받아준다. 함수를 사용하면 하나의 안전장치를 만들 수 있는 것이다. 다음 예시처럼.

const hana = {
  name: "hyewon",
  age: 27,
  setAge(나이) {
    this.age = Number(나이) // 무조건 숫자만 출력되게 함
  },
};
hana.setAge('323') // 323 <- 숫자뿅!

일일이 () 쓰기 귀찮으면 get/set 키워드를 사용하면 되는데, 위 예시랑 다 똑같은데 이왕이면 class에서 한 번 사용해보겠다.

const Hana {
  constructor(){
    name: "hyewon",
    age: 27
  }
    set setAge(나이) { //데이터를 수정/입력하는 함수
      this.age = Number(나이) 
    },
    get nextAge(){ //데이터를 가져오는/뽑아오는 함수
      return this.age+1
    }
  }
};
hana.setAge = 323 
hana.nextAge;

set이 붙은 함수들은 setter라고 한다. 데이터를 set(수정하는) 함수.
setter는 데이터를 입력해서 수정해야 하므로 파라미터가 반드시 한개 존재해야한다.
get이 붙은 함수들은 getter라고 한다. 데이터를 get(가져오는) 함수.
getter는 그냥 저장되어있는거 그대로 가져만 올 것이기 때문에 그 어떤 파라미터도 필요없다. return만 잘 해두면 된다.

---

• 오늘 새롭게 알게 된 것
  class로 오브젝트 찍어내는 법에 대해 배웠다.
  prototype으로 부모님 찾기에 대해 배웠다.
  extends, super로 유사한 오브젝트를 더 만들 수 있는 법에 대해 배웠다.
  getter는 리턴만 잘하기/ setter는 수정,입력해야 하니까 파라미터 한 개 꼭 입력하기.

• 오늘 배운 것들 중 궁금하거나 더 알고 싶은 것
  class를 쓰고나니 이제 this에 대해 정리해야겠다는 생각이 든다.
  getter/setter 를 배우니 immutability에 대해 공부해야겠다는 생각이 든다.
  연습문제 풀면서 sort() 함수 정렬하는 법에 대해 다시 공부해야겠다고 생각했다.

• 오늘의 소감

외울 거 왤케 많냐고!!!~!~!~!! 날씨는 왜 좋은 거냐고~!~!!!!