[JavaScript_study] arrow function (화살표 함수)

* arrow function (화살표 함수)의 특징

• 문법이 깔끔함
• 생성자 함수로 사용이 불가능 (무거운 프로토타입을 만들지 말것)
• 함수 자체 arguments객체를 가지고 있지 않다. ex) console.log(arguments[0])이 되지 않는다.
  • 일반함수에서는 arguments라는 객체가 있어서 전달된 인자에 대한 정보를 가지고 있다.
  • 화살표함수에서는 arguments란 함수 외부의 argument를 참조만함
    • 화살표함수는 node환경에서는 node에서 사용하고 있는 node를 실행할 때 전달받는 인자에 대한 정보를 출력
• this에 대한 바인딩이 정적으로 결정된다.
  • 함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩됨

 

* arrow function을 사용하는 이유

  - 객체안에서 함수표현식을 사용해서 function을 적으면 생성자 함수처럼 만들어지기 때문에 무거운 prototype이 생성된다. 또한 함수는 this바인딩이 동적으로 된다.

이를 해결하기 위해 arrow function을 사용하면 되는데 arrow function을 사용하게 되면 생성자 함수를 사용할 수 없게 된다. 우리가 일반 생성자 함수로도 사용할 수 있기 때문에 이 함수에 자체적으로 더 무거운 prototype를 가지고 있다. 그래서 객체안에서 함수 표현식을 사용하는것은 좋지 않다.

 

(참고) 자바스크립트에서 함수는 함수처럼 사용 혹은 생성자 함수로 사용 (클래스) 하지만, 이걸 위해서 불필요한 무거운 프로토타입(많은 데이터를 담고 있는 객체) 생성됨

 

  - 바인딩을 해결할 때 arrow function을 쓰는 순간 화살표 함수가 정의되어져 있는 곳에서 정적으로 상위 this에 의해서 this가 결정이 된다. 

 

항상 static하게 바인딩이 되어있으니 arrow function을 쓰면 이 함수를 어디에 전달하든 누가 호출하든 상관없이 바인딩이 되어있어서 동일한 객체를 출력한다.

 

 

* arrow function 예시 코드

const dog = {
  name: 'Dog',
  // 객체안에서 함수표현식을 사용해서 만든 function
  // 생성자 함수처럼 만들어지기 때문에 무거운 prototype이 생성
  // 객체안에서 함수 표현식을 사용하는것은 좋지 않다.
  play: function () {
    console.log('논다멍');
  },
};

// dog객체에 play를 호출해서 일반함수처럼 사용이 가능하다.
// 이 함수에 자체적으로 더 무거운 prototype를 가지고 있다.
dog.play();

const obj = new dog.play(); // 💩()
console.log(obj);

// 위와 차이점 key : function() { }
// 아래의 ES6코드는 객체안에서 함수 메서드로 정의를 하였다. ex) play() { }
// ES6코드
const cat = {
  name: 'cat',
  // 객체의 메서드 (오브젝트에 속한 함수)
  play(){
    console.log('냐옹');
  },
};
cat.play();
// const obj1 = new cat.play(); // 메서드를 이용하면 생성자 함수로 사용 ❌

function sum(a, b) {
  console.log(arguments);
}
sum(1, 2);

// 해당 arrow function에서의 arguments는 함수안에서의 arguments가 아니라 함수를 감싸고 있는 전역객체의 arguments를 출력한다.
// 지금은 node환경이여서 node에서 사용하고 있는 node를 실행할 떄 전달받는 인자에 대한 정보를 출력하고 있다.
// 그래서 화살표 함수안에서의 arguments란 함수 외부의 argument를 참조만 함
const add = (a, b) => {
  console.log(arguments); // arrow 함수 외부의 arguments를 참조만 함
};
add(1, 2);

// 화살표 함수안에서의 this는 이 화살표함수를 감싸고 있는 함수가 정의된 곳에서의 한단계 감싸고 있는 스코프의 this정보를 간직한다.
// 해당 함수에서의 this는 글로벌 this인 모듈에서 출력하는것을 볼 수 있다.
const printArrow = () => {
  console.log(this);
};
printArrow();
cat.printArrow = printArrow;
cat.printArrow();