[JavaScript] 일반 함수 vs 화살표 함수(arg, this)

 

자바스크립트(ES6)에서 함수를 정의하는 방법은 크게 두가지로 나뉩니다.
일반함수와 화살표 함수

  function main() {
    console.log('hello');
  }

  const main = () => {
    console.log('hello');
  };

 

1. 가변인자(arguments)

  function main() {
    console.log(arguments) // arg[0] -> 1 , arg[1] -> 2, arg[2] -> 3
  }

  main(1,2,3)

main()함수에 매개변수를 따로 정의해 주지 않아도 함수 내에서 arguments라는 변수를 전달 받습니다.

즉, argumant 변수는 main()함수가 전달받은 인자를 담고있는 배열 형태의 객체

  const main = (...args) => {
    console.log(args)
  }

  main(1,2,3)

 

 

하지만 화살표 함수는 arguments 라는 변수를 전달 받지 않습니다.
화살표 함수에서 가변함수를 사용하고 싶으면 매개변수로 아무단어나 넣으면 사용이 가능합니다.

 

 

2. this

일반 함수의 this

자바스크립트는 함수 호출 방식에 따라 this에 바인딩될 어떤 객체가 동적으로 결정. 즉, 함수를 호출할 때 함수가 어떻게 호출 되었느냐에 따라 this에 바인딩할 객체가 결정이 됩니다.

 

obj객체 두개를 선언후 각각 main함수를 담도록 하였습니다. obj.main()의 함수를 호출하면은 각각 this의 출력값이 호출한 객체 임을 확인할 수 있습니다.

function main() {
  console.log(this);
};
const obj = {
  name: 'go',
  main: main,
};
const obj2 = {
  name: 'kim',
  main: main,
};

obj.main(); // obj
obj2.main(); // obj2

 

일반 함수에서 this는 함수가 어디에 선언되었든 상관 없이 this값은 함수를 호출한 객체를 가리키게 됩니다.

 

화살표 함수의 this

화살표 함수는 함수를 선언할 때 this에 바딩인할 객체가 결정, 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킵니다.

 

일반함수가 자신만의 this를 갖는것과 달리, 화살표 함수는 자신만의 this를 갖지 않습니다. 화살표 함수를 감싸고 있는 스코프의 this를 가지고 옵니다.

다시말해서 화살표 함수 내부에서 this를 접근하면 외부로 부터 this를 가져와서 사용합니다.

 

const obj = {
  name: 'go',
  main: function () {
    console.log(this);
  },
  mainArrow: () => {
    console.log(this);
  },
};

obj.mainArrow(); // window

 

obj.mainArrow() 함수 호출시 obj객체가 아닌 window객체를 가리키는 것을 확인 할 수 있습니다.

화살표 선언된 시점에서 this가 결정되고 바뀌지않습니다.

 

메서드 내부에서 this를 통해 객체의 속성에 접근시 일반함수를 사용하는 것이 좋습니다.

 

일반 함수 안에 내장 함수

const obj = {
  name: 'go',
  main: function () {
    const innerFunction = function () { // 일반함수
      console.log(this);
    };
    innerFunction();
  },
};
obj.main(); // this = window

위에서 일반함수에서 this는 호출해준 객체를 갖게 된다고 했는데, 왜 window를 출력한 것일까?
일반 함수의 this는 함수를 호출한 객체가 된다고 했는데, innerFunction() 호출 문을 보면 어떤 객체로 부터 호출된게 아니게 됩니다.
그렇기 때문에 innerFunction 안에 있는 this값은 자동으로 window가 출력이 됩니다.

 

 

화살표 함수 안에 내장 함수

const obj = {
  name: 'go',
  main: function () {
    const innerFunction = () => { // 화살표 함수
      console.log(this);
    };
    innerFunction();
  },
};
obj.main(); // this = {name: 'go', main: func}

obj.main()을 호출하면 this는 어떤 값을 출력을 할까?

이때 this는 생성한 obj 객체가 됩니다.

 

화살표 함수의 this는 화살표 함수를 감싸고 있는 외부 스코프의 this를 따릅니다.

따라서 위 코드에서 화살표 함수(innerFunction)을 감싸고 있는 함수는 main()이 되고 main() 함수는 obj.main() 호출이 되었기 때문에 이때 this는 호출해준 객체인 obj가 되기때문에 화살표 함수의 this가 obj기 됩니다.

 

결론

일반 함수의 this는 함수 선언 위치에 상관 없이 함수를 호출하는 방법에 다라 달라집니다 -> 일반 함수의 this는 함수를 호출한 객체를 가리킵니다.

 

화살표 함수의 this는 함수의 호출 방법에 상관없이 함수를 선언한 위치에 의해 결정됩니다 -> 화살표 함수의 this는 함수를 감싸는 상위 스코프의 this를 그래도 가져와서 사용합니다.