20250901 JavaScript 화살표 함수와 this

JavaScript 함수 선언 방식

1. 함수 선언문

function greet(name) {
  return "Hello " + name;
}

 

이름이 있는 함수를 선언하는 방식

호이스팅이 되고 선언 전에 호출 가능하다.

 

2. 함수 표현식 / 리터럴

const greet = function(name) {
  return "Hello " + name;
};

 

변수에 함수 자체를 대입하는 방식

변수에 할당되므로 호이스팅 시 변수 선언만 호이스팅. 함수 호출은 선언 이후에 해야 한다.

 

3. 화살표 함수

const sum = (a, b) => a + b;

 

한 줄이면 { } 생략 가능하고 매개변수가 하나면 ( )도 생략 가능하다.

 

 

this 란?

 

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 

자바스크립트의 this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

 

객체  메서드의 함수 this

let obj={
	myVar: 'foo',
 	myMeth: function jes(){ //obj가 메모리에 만들어질 때 같이 만들어진다
          console.log(this.myVar); //수행 컨텍스트가 obj
	}
}
obj.myMeth(); // foo

 

obj.myMeth()가 실행되면서 호출이 되고 호출의 주체가 obj이기 때문에 function jes() 안의 this는 obj가 된다.

 

 

객체 메서드 안의 콜백 함수 내부의 일반 함수 this

let obj = {
  myVar: 'foo',
  
  myMeth: function jes() { 
    console.log(this.myVar);   //수행 컨텍스트가 obj
 
    setTimeout(function hkd() { //1초 뒤에 Window에 의해 객체가 만들어진다. 소유주가 Window
      console.log(this.myVar); //수행 컨텍스트가 window
    }, 1000);
  }
}
obj.myMeth(); //foo  undefined

 

obj.myMeth()가 실행되면서 setTimeout() 안의 함수 hkd()는 그냥 일반 함수로 실행되어 호출 주체가 따로 없으므로 this는 window가 된다. strict 모드에서는 undefined. 

 

 

this를 obj에 바인딩하는 방법

let obj = {
  myVar: 'foo',  
  myMeth: function jes() { 
    let self = this;
    console.log(this.myVar) ; //수행 컨텍스트가 obj
  
    setTimeout(function hkd() {
      console.log(self.myVar); //수행 컨텍스트는 window이지만 self는 obj
    }, 1000);
  }
}
obj.myMeth(); // foo  foo

 

let self = this; 에서 self 변수가 obj를 참조하게 된다. 그래서 hkd()가 실행될 때도 foo가 콘솔로그에 출력된다.

 

 

this를 obj에 바인딩하는 방법 2

let obj = {
  myVar: 'foo',
  
  myMeth: function jes() { 
    console.log(this.myVar) ; //수행 컨텍스트가 obj
  
    setTimeout(function hkd() {
      console.log(this.myVar, this);
    }.bind(this), 1000); //수행 컨텍스트가 obj
  }
}
obj.myMeth(); // foo  foo

 

.bind(this)를 통해 명시적으로 this를 obj에 고정할 수 있다.

 

 

this를 obj에 바인딩하는 방법 3

let obj = {
  myVar: 'foo',
  
  myMeth: function jes() { 
    console.log(this.myVar) ; //수행 컨텍스트가 obj
  
    setTimeout(() => { //화살표 함수, function()객체가 만들어질때 this를 바인딩, bind()한 것처럼 lexical scope을 갖는다
      console.log(this.myVar); //수행 컨텍스트가 obj
    }, 1000);
  }
}
obj.myMeth(); // foo  foo

 

화살표 함수를 사용하는 것이다. 화살표 함수는 자신만의 this를 만들지 않고 함수가 호출될 때 바인딩되는 것이 아니라 정의될 때 상위 스코프를 그대로 사용한다.

 

 

화살표 함수를 메서드로 사용하게될 경우

let obj = {
  myVar: 'foo',  
  myMeth: () =>{ //미리 만들어져 바인딩 되지 않고 호출 시 바인딩 됨
    console.log(this.myVar) ; //수행 컨텍스트가 window
  
    setTimeout(() => {
      console.log(this.myVar); //수행 컨텍스트가 window
    }, 1000);
  }
}
obj.myMeth(); // undefined undefined

 

화살표 함수는 정의될 때 상위 스코프를 그대로 가져오게 되서 this가 window를 가리키게 되고 콜백 함수의 화살표 함수도 window를 가리키게 된다.

 

 

 

가장 좋은 사용법

let obj = {
  myVar: 'foo',
  
  myMeth: function jes() { 
    console.log(this.myVar) ; //수행 컨텍스트가 obj
  
    setTimeout(() => { //화살표 함수, function()객체가 만들어질때 this를 바인딩, bind()한 것처럼 lexical scope을 갖는다
      console.log(this.myVar); //수행 컨텍스트가 obj
    }, 1000);
  }
}
obj.myMeth(); // foo  foo

 

객체 메서드 안에서 화살표 함수를 사용하는 방식. this가 obj를 유지해서 개발자 입장에서 편하다.

 

 

 

결론

화살표 함수가 필요한 이유는 this 문제를 해결하기 위한 방법이 되기 때문이다.