[Javascript-Core] 메서드 내부에서의 this 그리고 함수와 메서드의 차이점 (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(2)

오늘 알아볼 것은 this이다.

나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다.

오늘 그 심오한 기능들에 대해서 짚어보자.

해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다.

1. 전역 공간에서의 this
2. 메서드 내부에서의 this
3. 함수 내부에서의 this
4. 콜백 함수에서의 this

What is this

w3cschool

최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다.

 

• 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다.
• this가 단독으로 사용되면 그것은 global 객체를 뜻한다.
• 함수에서 this는 global 객체를 뜻한다.
• strict mode가 적용된 함수에서 this는 undefined이다.
• 이벤트에서 this는 이벤트를 받는 element를 뜻한다.
• call()과 apply() 같은 메서드에서 this는 any object를 뜻한다.

각각의 예를 통해서 조금 쉽게 이해해보자.

 

모든 원리를 파악하는것이 가장 중요하다.

 

단순히 암기를 해서 사용한다는 것은 당장은 효과적일지 모르겠으나 언제 어떤 언어가 어떻게 사라지고 등장할지 모르는 현재에는 언어의 사용법보단 컴퓨팅적 사고가 중요하다.

---

메서드 내부에서의 this

메서드 내부에서의 this를 이해하기 위해선 먼저 함수와 메서드의 차이에 대해서 알고 있어야 한다.

 

함수를 실행하기 위해서는

1. 함수로써 함수를 호출
2. 메서드로써 함수를 호출

이렇게 두 방법이 존재한다.

 

아니 이게 무슨이야기냐?라고 할 수 있지만 사실 메서드라는 것이 객체 내부에서 동작하는 함수라는 사실을 기억할 수 있다면 이야기가 달라진다.

 

나중에 배우게될 것이지만 ecmascript6에서 소개된 class 내부에 동작하는 함수가 있다고 가정해보자.

class MyReact extends Component {
     render(){
         return(); 
    }
}

 

리액트 컴포넌트를 정의하는 클래스인데, 여기서 render() 메서드는 사실 function render()의 형태지만 클래스(객체) 내부에 위치하기 때문에 임의적으로 function 키워드를 제외하여 사용한다.

 

함수와 메서드에 대해서 정확한 구분을 해보자.

메서드 내부에서의 this를 알아보기 전에 이것 부터 확실히 하자.

 

함수와 메서드의 가장 큰 차이점은 독립성이다.

함수는 그 자체로도 혼자 실행될 수 있지만, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.

 

위와 같은 리액트 코드도 사실 리액트의 코어를 분석해본다면 MyReact.render()를 호출함으로써 컴포넌트를 렌더링할 수 있게 된다.

 

좀 더 정확히 이야기 하자면

class HelloComponent extends Component {
     render(){
         return <div> Hello </div>; 
    }
}

 

에서 말하는 render()(Hello를 출력)와

 

class WorldComponent extends Component {
     render(){
         return <div> World </div>; 
    }
}

console.log(HelloComponent.render());
console.log(WorldComponent.render());

에서 말하는 render()(World를 출력)와는 서로 다른 render이기 때문에 정확한 클래스(객체)의 이름에 관한 .연산으로 호출을 해야 한다.

 

그에 반해 함수는

function hello() {
     return "hello"; 
}

function world() {
      return "world";
}

console.log(hello());
console.log(world());

처럼 독립적으로 함수명으로도 호출이 가능하다.

 

메서드에 대한 오해

 

사람들이 많이 하고 있는 오해가 객체 내부에 정의된 함수는 모두 메서드라고 생각한다.

하지만 그건 틀린 이야기일 수도 있고 맞는 이야기일 수도 있다.

 

함수는 함수로써 호출되면 함수이고, 메서드로서 호출되면 메서드이다.

말이 어렵지 간단하다.

 

여기서 아래와 같은 함수를 호출한다면?

class HelloComponent extends Component {

      sayHello() {
         return "Hello" 
    }
     render(){
         return <div> {sayHello()} </div>; // 클래스 내부에서 함수로써 호출했기 때문에 함수
    }
}

console.log(HelloComponent.sayHello()) // . 연산자로 호출했기 때문에 메서드

HelloComponent 는 객체(클래스)인데, 여기서 render()와 sayHello()는 사실 함수이다.

 

이제 함수와 메서드에 대한 정확한 차이를 알게 되었으므로 본론인 this에 대해서 알아보자.

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담긴다.

즉 . 연산자 바로 앞에 있는 객체가 this가 되는 것이다.

class HelloComponent extends Component {

     render(){
         return <div> "hello world" </div>; 
    }
}

console.log(HelloComponent.render(), this);

이러한 코드가 존재할 때 결과는 바로 현재 연관된 객체 HelloComponent가 thisBinding된 객체이다.

---

함수와 메서드에 대한 설명을 추가하느라 이야기가 많이 길어졌지만 차분히 읽으면 모두 이해가 될 정도의 분량이라고 생각한다.
이해가 안된다고, 설명이 너무 어렵다고 너무 어려워하지 말고 보고 또 보고 다른 일 하고 다시 보고를 반복하면 어느 순간 유레카 하는 시점이 올 것이다. 나 또한 그래왔기 때문에 내가 제일 잘 알고 있다. 모두 포기하지 말고 화이팅!!