[Javascript] 메소드와 this

몇번 this를 접했지만 제대로된 이해가 필요 할 것 같아 정리해보았다.

 

method와 this

자바스크립트에서는 object의 property에 함수를 넣을 수 있다.

let user = {
  name: "Jay",
  age : 28
};

user.hello = function(){
  console.log("hello");
};

user.hello();
//hello

user의 property에 함수를 만들어 넣고 해당 object에 할당되어있는 함수 호출이 가능하다.
이 object property에 할당된 함수를 메소드(method) 라고 한다.

 

let user = {
  name: "Jay",
  age : 28
};

function hello(){
  console.log("hello");
};

user.hello = hello();

이렇게 따로 선언된 함수를 메소드로 등록 할 수도 있다.
그렇다면 객체 안에서 함수를 적을 수도 있을 것이다.

let user = {
  name: "Jay",
  age : 28,
  hello : function (){
    console.log("hello");
  }
};


//* 위 코드의 단축구문
let user = {
  name: "Jay",
  age : 28,
  hello() { //hello : function ()과 동일
    console.log("hello");
  }
};

user.hello();

그냥 인사메세지를 보여주는 것 말고 object의 정보를 활용하여 user의 이름을 함께 보여주고 싶다면?

 

메소드의 this

메소드는 this를이용하여 object에 저장된 정보에 접근할 수 있다.
this 값은 런타임에 결정된다.

this는 객체가 무엇인가에 따라 ‘자유롭게’ 결정된다는 장점을 지니고 있다.

 

let user = {
  name: "Jay",
  age : 28,
  hello(){
    console.log("hello " + this.name);
  }
};

user.hello();
//hello Jay

this는 현재 object를 나타내며 즉 this.name == user.name을 보여준다.

user.name을 사용하여 나타내도 되지만, 배열의 변동성에 대한 에러를 고려 해야한다.

 

let man = { name: "man" };
let woman = { name: "woman" };

function hello() {
  console.log("hello " + this.name);
};

man.hello = hello;
woman.hello = hello;


man.hello(); 
woman.hello();
//hello man
//hello woman

이렇게 함수를 만들고 해당 함수를 두 개의 object에 할당 해주고
함수를 호출하면 this로 인해 각 name을 호출할 수 있다.

반복되는 정보가 있는 데이터에서 활용하기 좋을 것 같다.

 

 

+++

화살표 함수에는 this가 없다.

화살표 함수는 일반 함수와는 달리 고유한 this를 가지지 않는다.
화살표 함수 안에서 this를 사용하면 화살표 함수가 아닌 외부 함수에서 this를 받는다.

 

처음엔 이해가 잘 안되었지만 예제를 직접 해보며 이해했다.

 

1. 일반 함수 사용

let class = {
  name: "A class",
  member: ["Jay", "Sujan", "Rachel"],
  memberList(){
    this.member.forEach(function(member) {
      console.log(this.name  + " " + member)
    });
  }
};

group.memberList();
// Jay
// Sujan
// Rachel

위와 같이 foreEach에서 일반 함수를 사용하여 출력 시
this가 undefined이기 때문에 this.name을 불러올 수 없다.

 

2. 화살표 함수 사용

let class = {
  name: "A class",
  member: ["Jay", "Sujan", "Rachel"],
  memberList(){
    this.member.forEach(member=> {
      console.log(this.name  + " " + member)
    });
  }
};

group.memberList();
//A class Jay
//A class Sujan
//A class Rachel

하지만 이렇게 화살표 함수를 사용 시 화살표 함수 안에 this자체가 없기 때문에
this.name을 화살표 함수 바깥에 있는 memberList가 가르키는 대상과 동일해진다.

즉 별개의 this를 만들지 않고 외부에 있는 this를 사용하고 싶을 때 화살표 함수를 사용한다.