object method, this

Juyeon Lee·2022년 1월 10일
0

이렇게 객체가 있다고 해보자.

const jonas = {
  firstName: "Jonas",
  lastName: "Lee",
  birthYear: 1991,
  job: "teacher",
  friends: ["Michael", "Peter", "Steven"],
  hasDriversLicense: true,
  calcAge: function(birthYear){
          return 2037 - birthYear;
      }
  };

객체에 calcAge와 같이 함수를 값으로 가지는 키-값을 추가할 수 있다. 점 표기법(dot notation)괄호 표기법(bracket notation)을 사용하여 이를 호출할 수 있다.

console.log(jonas.calcAge(1991));
console.log(jonas['calcAge'](1991));

이렇게 calcAge 프로퍼티를 호출할 수 있다. 그러나 이 코드에서 1991이라는 인자(argument)는 이미 객체의 birthYear: 1991 속성으로 정의되어 있는 것을 볼 수 있다.

코드를 작성할 때는 중복을 최소화하는 것이 좋다. 예를 들어, 반복적으로 1991을 사용하는 것을 줄이려면 this를 사용할 수 있다.

const jonas = {
  firstName: "Jonas",
  lastName: "Lee",
  birthYear: 1991,
  job: "teacher",
  friends: ["Michael", "Peter", "Steven"],
  hasDriversLicense: true,
  calcAge: function () {
      // console.log(this);
      return 2037 - this.birthYear;
    },
  };
  
  

console.log(jonas.calcAge(1991));에서 jonas 객체의 calcAge 함수를 호출할 때, calcAge 안에서 사용하는 this는 객체 jonas를 의미한다.

 calcAge: function () {
      return 2037 - this.birthYear;

함수의 매개변수를 제거하고 console.log(jonas.calcAge());로 콘솔에 출력하면 동일한 결과를 얻을 수 있다.

여기서 한 가지 더 생각해볼 점은 이제 age가 사용된다는 것이다. age를 여러 번 사용해야 한다면 반복해서 계산하기보다는 계산 과정을 변수에 저장하고 재사용하는 것이 효율적이다.

const jonas = {
  firstName: "Jonas",
  lastName: "Lee",
  birthYear: 1991,
  job: "teacher",
  friends: ["Michael", "Peter", "Steven"],
  hasDriversLicense: true,
  
  calcAge: function () {
    this.age = 2037 - this.birthYear;
    return this.age;
  

이렇게 this.age에 계산 값을 할당하고 반환한다. 이제 jonas 객체에 age라는 키와 값이 calcAge 함수를 호출할 때마다 새로 추가된다. 그래서 함수를 호출한 후에는console.log(jonas.age);로 age 값을 간편하게 받을 수 있다.

0개의 댓글