3-3. 클래스의 getter(획득자) 와 setter(설정자)

또한 획득자와 설정자라는 method 가 있다. 함수처럼 생긴 mothod 이지만 함수가 아니다. 가상의 함수이다. constructor에서 설정한 property(_carname)를 가져와서 set 할때 쓰이는 method들이다. 그리고 get 의 이름은 property랑 달라야한다. 예를 들어 사용자가 잘못 정보를 기입할 경우 그것을 컴퓨터가 알아들을 수 있게 설정하기 위함이다. 사용자가 잘못 설정한 정보를 get해서 가져온다음 set으로 올바르게 설정하는 것이다. 이때 get/set 함수의 이름은 다룰 property의 이름과 달라야한다.(보통 _를 통해 구분한다.) 안그럼 set 함수에서 끊임없이 호출되기 때문에 오류가 뜬다. property를 다르게 해도 내부적으로 set함수에서 설정한 _age를 다시 age에 할당하므로 호출할때는 User.age라고 해도 된다.

만약 사용자가 user 나이를 실수로 0보다 아래로 설정했을 경우가 있으므로 아래와 같이 get/set을 이용해서 그 경우를 막아준다. 그래서 0보다 아래의 나이를 입력했을 경우 경고창을 뜨게 하거나 0으로 age가 설정되게끔 세팅할 수 있다.

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

  get age() {
    return this._age;
  }
  set age(value) {
    // 요건 공격적인 방법
    // if(value < 0) {
    //   throw Error('age can't be negative')
    // }

    // 아래건 좀 젠틀한 방법
    this._age = value < 0 ? 0 : value;
  }
}

let User1 = new User("영훈", "고", "-1");
console.log(User1.age);
//0

4. 일반 함수를 객체안에 집어넣는 방법??

여기서 자바스크립트가 특이한 이유가 하나 더 있다. 바로 독립적으로 존재하는 함수를 객체 안에다가 메소드로서 넣을 수 있다는 것이다 바로 call 메소드를 통해서 말이다. call을 사용하는 이유는 함수안에서 this 문맥을 바꾸기 위함이다. 물론 arrow function 에서는 this가 없으므로 일반 함수를 사용해야한다.

(참고로 apply 는 call과 같다. 단 apply의 args는 array이다..)

앞에서 bind설명할때 잠깐 설명했지만, 객체안에 함수가 존재하므로 함수의 스코프는 객체의 스코프 안에 존재한다. 따라서 sum 함수의 this는 sum을 감싸고 있는 객체가 되므로 sum 안에 있는 this.first가 실행되는 것이다.

var kim = { first: 10, second: 20 };
var lee = { first: 20, second: 50 };

function sum(para) {
  return para + (this.first + this.second);
}

// sum 함수와 객체 연계시키기. 문법: call(연계시키고 싶은 함수, 그 함수안에 들어갈 parameter..)
console.log(sum.call(kim, "kimpara: "));
console.log(sum.call(lee, "leepara: "));
// kimpara: 30
// leepara: 50

//그럼 kim 객체에 sum 함수가 추가된것일까?
console.log(kim.sum());
// kim.sum is not a function
// 객체의 속성을 바꾸는 것이 아닌 일시적으로 kim의 property를 불러내서 사용하는것인것 같다.

call 과 비슷한 기능이 있는데 바로 bind 라는 메소드이다. call 과 차이점은 call같은 경우 만드는 즉시 사용되는데 반해 bind는 함수를 나중에 호출 하게 한다. 다시말해 변수에 할당한다음 사용가능하다.(bind는 새로운 함수를 다시 만들어서 호출하기 때문)

extends 위의 코딩 ㅋㅋㅋ

var kimBind = sum.bind(kim, "bindKim: ");

console.log(sum.call(kim, "call: "));
console.log(kimBind);
console.log(kimBind());
// call: 30

// ƒ sum(para) {
//   return para + (this.first + this.second);
// }

// bindKim: 30

다음글에선 생성자 함수끼리 proto 링크를 지정하고 그리하여 생성자함수를 상속를 상속하는 방법을 알아보자. 이때까지 배웠던 내용이 심화되기 때문에 이해하기 어려울것이다.

그리고 이 어려운 개념을 쉽고 의미있게 알려주신 이고잉님께 정말 감사한 마음이 든다.