🦎 JavaScript

[JS] 객체 방식

하나둘세현 2023. 3. 9. 14:36
728x90

함수는 값의 또 다른 유형이다. 함수가 그냥 값이라면 그 값이 함수인 키 값 쌍을 만들 수 있다. 이 말은 즉 개체에 함수를 추가할 수 있다. 

 

  calcAge: function(birthYear) {
    return 2037 - birthYear
  }
};


  const calcAge: function(birthYear) {
    return 2037 - birthYear
  }
};

첫번째 구문과 두번째 구문의 차이점이 있다.

첫번째 구문의 calcAge는 두번째 구문의 calcAge와 같은 정규 변수가 아니다. jonas의 객체의 속성이다.

따라서 위에서는 콜론을 사용하지만 나머지는 완전히 똑같다. 

 

개체에 부착된 모든 기능은 메서드이다. 

 

function calcAge(birthYear) {
  return 2037 - birthYear
};

이거는 선언이어서 작동이 안된다. 

 

함수를 단순히 값으로 생각할 수 있다면 메서드도 속성이다. 즉 함수 값을 갖고 있는 속성일 뿐이다. 

 

const jonas = {
  firstName: "Jonas",
  lastName: "Schmedtmann",
  birthYear: 1991,
  job: "teacher",
  friends: [("Michael", "Peter", "Steve")],
  hasDriverLicense: true,

  calcAge: function (birthYear) {
    return 2037 - birthYear;
  },
};

다른 속성에 접근할 수 있듯이 calcAge는 속성이나 메서드에 접근할 수 있다. 

 

jonas.calcAge(1991);

calcAge는 이제 함수 값이다. 다른 함수처럼 호출할 때는 괄호를 사용한다. 

 

과연 위의 코드는 잘 작동할 까?

console.log(jonas.calcAge(1991));

jonas.calcAge → 함수 값이다.

 

괄호 표기법을 써서 이  메서드에 액서스할 수 있다. 

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

jonas["calcAge"]를 보면 괄호를 이용해 속성 계산기를 액세스 한다. 그리고 저건 함수로 대체될 것이다. 메서드에 대한 인수로 넘긴 출생년 1991년이 jonas개체 자체로 정의되었다. 

 

const jonas = {
  firstName: "Jonas",
  lastName: "Schmedtmann",
  birthYear: 1991,
  job: "teacher",
  friends: [("Michael", "Peter", "Steve")],
  hasDriverLicense: true,

  // calcAge: function (birthYear) {
  //   return 2037 - birthYear;
  // },
  calcAge: function () {
    return 2037 - birthYear;
  }
};

이 키워드 혹은 이 변수는 기본적으로 메서드가 호출된 개체와 같다. 즉 메서드를 호출하는 개체와 같다.

 

누가 메서드를 호출할까? 

console.log(jonas.calcAge(1991));
//console.log(jonas["calcAge"](1991));

메서드를 호출하는 객체는 Jonas이다. 점이 있는 곳이기때문이다. 그 말은 이 calcAge 매세드 안에서 이

 변수나 키워드가 jonas를 가르킨다. 

const jonas = {
  firstName: "Jonas",
  lastName: "Schmedtmann",
  birthYear: 1991,
  job: "teacher",
  friends: [("Michael", "Peter", "Steve")],
  hasDriverLicense: true,

  // calcAge: function (birthYear) {
  //   return 2037 - birthYear;
  // },
  calcAge: function () {
    console.log(this)
    return 2037 - this.birthYear;
  },
};

console.log(jonas.calcAge(1991));
//console.log(jonas["calcAge"](1991));

this는 전체 jonas 객체이다. jonas 객체가 이 메서드를 호출하는 것이기 때문이다. 

마지막 코드 console.log(jonas.calcAge(1991);을 보면 clacAge 점 앞에 나타나는게 메서드를 호출하는 거다. 

 

  calcAge: function () {
    this.age = 2037 - this.birthYear;
    return;
  },
};

jonas object에 새로운 속성을 사용하기 위해 점 표기법을 사용할 수 있다. 

728x90