자바스크립트(Java Script) 13장 객체(Object) - method, this

13장 객체(Object) - method, this

 

 

 

method 

객체의 property 중 함수인 것.

 

1.
const ironman = {
   name : 'tony',
   age : 37,
   fly : function(){
      console.log('날아갑니다.')
      }
}



2.
const ironman = {
   name : 'tony',
   age : 37,
   fly(){
      console.log('날아갑니다.')
      }
}

위에서 fly가 method이다.

해당 1번의 method는 2번처럼 축약이 가능하다.

 

 

 

 

 

this

method 에서 같은 객체 내의 property를 사용 할 때, 객체의 이름을 사용하면 에러가 나기 때문에

객체의 이름 대신 사용하는 것.

 

1.
sayHello : function(){
   console.log(`Hello, i'm ${this.name}`);
}



2.
let boy = {
   name : 'Jack'
}



3.
let girl = {
   name : 'Juliet'
}

위의 1번 method를 2번과 3번 각각에 넣어서 동작 시키게 되면

 

7, 14번째 줄의 this는 각 객체의 변수를 따라 결과를 나타냄으로 결과가 다르다.

 

 

 

 

 

this의 유용성을 확인하기 위해 아래의 예를 보자.

위의 첫번째 캡쳐의 경우, boy라는 객체를 만들고 그 객체를 man에다가 넣었다.

따라서 Jack이라는 이름을 불러 올 수 있는 방법은 man, boy 두가지가 있었다.

그런데 그 중에 boy의 값을 null로 처리하고 boy의 이름을 불러왔더니 역시나 에러가 발생했다.

 

두번째 캡쳐(6줄)처럼 boy의 객체 안의 method내의 boy.name을 this.name으로 변경했더니

정상적으로 Jack을 출력했다.

위의 같은 객체에 새로운 값을 넣는 상황처럼 예상할 수 없는 상황에도 문제 생길 가능성을 없애기 때문에

객체 안에서 method를 쓸 때는 객체의 이름보다는 this를 사용해주는 게 좋다. 

 

 

 

 

 

※주의

만약 객체의 method를 화살표 함수로 변형 시킨다면 결과값은 달라지게 된다. 

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다.

화살표 함수 내부에서 this를 사용시, 외부의 값을 가져온다.

girl 객체의 method를 화살표 함수로 바꿔서 동작 시켰더니(13줄)

this가 girl의 값(name : 'Juliet')을 가져오지 않고, Codepen(전역객체)를 불러와서 사용하는 걸 볼 수 있다.

이 같은 상황도 있으니 method시 화살표 함수 사용은 주의한다.

(그냥 화살표 함수를 안쓰는 게 속 편할 듯 싶다.)

 

 

 

 

 

비슷한 예 하나를 더 들자면, 위의 경우 객체 자체를 this로 확인하려고 했다.

화살표 함수 사용으로 역시나 this는 전역객체를 불러오려 했고,

전역객체를 콘솔에서 다루기 어렵기 때문에 오른쪽 같은 에러 메세지가 뜬다.