[JavaScript] this 사용법

JAVA SCRIPT를 사용하면 this를 사용하는 경우가 많이 있다. 단순한 코드에서는 흘러가는대로 대충 이해하고 넘어가면 되지만 복잡한 로직이 들어간 코드에 대해서는 확실하게 이해하고 넘어가지 않으면 계속 걸리게 될것이다.

⚡️ this의 정의

❗️this는?

• this란 ‘이것’ 이란 뜻을 가진 javas script 예약어
• this는 함수가 호출될때 결정된다.
• 즉 함수의 호출 방식에 따라 호출시에 동적으로 바뀐다.

아래의 코드를 보면서 이해해 보겠다.

예제 1 (함수 호출)

코드

function outFunction() {
  this.title = 'Hello World!';
  console.log("--------outFunction-------")
  console.log(this)
  console.log("/-------outFunction------/") 
  console.log("")
  inFunction = function() {
    console.log("--------inFunction-------")
    console.log(this)
    console.log("/-------inFunction------/")
    console.log("")
  }
  inFunction();
}
outFunction();

실행 결과

--------outFunction-------
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
/-------outFunction------/

--------inFunction-------
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
/-------inFunction------/

outFunction을 호출할때에 따로 지정해 준 객체가 없기 때문에 가장 상위 객체인 Window 객체가 this로 지정된다.

예제 2 (객체 선언 후 호출)

코드

function outFunction() {
  this.title = 'Hello World!';
  console.log("--------outFunction-------")
  console.log(this)
  console.log("/-------outFunction------/") 
  console.log("")
  inFunction = function() {
    console.log("--------inFunction-------")
    console.log(this)
    console.log("/-------inFunction------/")
    console.log("")
  }
  inFunction();
}
var myFn = new outFunction();
myFn

실행 결과

--------outFunction-------
outFunction {title: 'Hello World!'}
/-------outFunction------/

--------inFunction-------
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
/-------inFunction------/

outFunction이라는 객체를 만들어 outFunction()을 호출했다. 따라서 outFunction()에 있는 this는 위와같이 나왔다 하지만 inFunction()을 호출할때에는 따로 객체가 지정되지 않았다. 그래서 inFunction()안에 this는 Window 객체가 된것이다.

---

그렇다면 어떻게해야 같은 this를 사용할 수 있을까?
여러가지 방법이 있지만 그 중 몇개를 소개하겠다.

---

예제 3 (this.inFunction 지정)

코드

function outFunction() {
  this.title = 'Hello World!';
  console.log("--------outFunction-------")
  console.log(this)
  console.log("/-------outFunction------/") 
  console.log("")
  this.inFunction = function() {
    console.log("--------inFunction-------")
    console.log(this)
    console.log("/-------inFunction------/")
    console.log("")
  }
  this.inFunction();
}
var myFn = new outFunction();
myFn

실행 결과

--------outFunction-------
outFunction {title: 'Hello World!'}
/-------outFunction------/

--------inFunction-------
outFunction {title: 'Hello World!', inFunction: ƒ}
/-------inFunction------/

this.을 이용해 inFunction()를 선언하고 호출하면 outFunction()을 호출한 객체를 사용하기 때문에 outFunction 객체와 inFunction() 함수까지 포함된 객체가 된다.

예제 4 (this를 변수로 저장)

코드

function outFunction() {
  this.title = 'Hello World!';
  console.log("--------outFunction-------")
  console.log(this)
  console.log("/-------outFunction------/") 
  console.log("")
  var _this = this;
  inFunction = function() {
    console.log("--------inFunction-------")
    console.log(_this)
    console.log("/-------inFunction------/")
    console.log("")
  }
  inFunction();
}
var myFn = new outFunction();
myFn

실행 결과

--------outFunction-------
outFunction {title: 'Hello World!'}
/-------outFunction------/

--------inFunction-------
outFunction {title: 'Hello World!'}
/-------inFunction------/

outFunction() 내부에 var _this=this 로 선언을 하고 inFunction()내부에 _this를 호출한다.

예제 5 (arrow 함수(=>) 사용)

코드

function outFunction() {
  this.title = 'Hello World!';
  console.log("--------outFunction-------")
  console.log(this)
  console.log("/-------outFunction------/") 
  console.log("")
  inFunction = () => {
    console.log("--------inFunction-------")
    console.log(this)
    console.log("/-------inFunction------/")
    console.log("")
  }
  inFunction();
}
var myFn = new outFunction();
myFn

실행 결과

--------outFunction-------
outFunction {title: 'Hello World!'}
/-------outFunction------/

--------inFunction-------
outFunction {title: 'Hello World!'}
/-------inFunction------/

arrow함수를 이용해 함수를 작성하면 자동으로 상위 스코프의 this를 받기때문에 위와같은 결과가 나온다.