지난 시간에 자바스크립트 객체에 대해 배웠다. 이번엔 메소드에 대해 배워보자
지난 시간에 만들었던 슈퍼맨 객체에 날아간다는 동작을 추가하였다.
이렇게 객체 프로퍼티로 할당 된 함수를 메소드라고 한다.
저 코드는 이런식으로 줄여서 작성도 가능하다.
이번에는 객체와 메소드의 관계에 대해 알아보자.
저 메소드에 name을 넣고 싶으면 어떻게 해야할까?
이렇게 user객체에 name을 넣어 출력할 수 있다. 이 방식은 문제가 될 수 있는데 이렇게 하는것보다 
이런식으로 this를 사용하는 것이 좋다.
이 this는 user 그 자체를 의미하는것이다.
다른 예제로 boy라는 객체와 girl이라는 객체를 만들고 sayHello라는 메소드를 만들었다.
이 this는 아직 결정되지 않았다. 어떻게 호출하냐에 따라 달라진다.
그리고 이 함수를 각 객체에 넣어고 호출하면?
this는 실행하는 시점인 런타임 시점에 결정이 된다.
따라서 저 this는 sayHello(); 각각 앞에 붙어 있는 boy,girl이 된다.
중요한것은 이 함수를 아래와 같이 화살표 함수로 바꾸면 전혀 달라지게 된다.
화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다.
화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져온다.
이렇게 화살표 함수로 메소드를 구현하고 boy.sayHello();를 호출하면 저 안에 this는 boy를 지칭하지 않는다.
화살표 함수는 this를 가르키지 않기 때문에 this는 전역객체를 가지고 온다.
참고로 브라우저 환경에서 전역객체는 window이고 Node.js에서 전역객체는 global이다.
자바스크립트에서 this는 상당히 복잡하다.
아까 위에서 this를 사용하지 않고 그대로 boy를 사용하면 문제가 발생 할 수 있다고 했는데
이걸 보면 man이라는 변수에 boy 객체를 할당하였다. 그리고 나서
man의 이름을 tom으로 바꾸고 boy.name을 찍어보면 tom으로 출력되는 것을 볼 수 있다.
그리고 나서
boy를 null로 만들어버리면 이제 man이라는 객체만 남게 된다.
이 상황에서 man.showName();으로 메소드를 호출하면 에러가 발생한다. boy의 name이 사라졌기때문에 name이 없다고 에러가 나는 것이다.
이걸 해결하기 위해
boy를 this로 바꿔 출력을 할 수 있다.
이 글은 유튜브 코딩앙마 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
