참고한 싸이트
https://hhyemi.github.io/2021/06/09/arrow.html

에로우 펑션과 그냥 펑션

모르는 사람들은 무지성 에로우 펑션을 사용했을것이다.
근대 다른 코드들을 보면 function을 사용한 코드들을 본적이 있을것이다
도대체 뭐가 다르길래?

비교에 앞서 알아야할 것들이 있다.

this

디스가 무엇인지?
그리고 메소드와 함수의 차이점을 알아보자

메소드

let a ={
  b:function(){// 난 메소드 겍체에 속성값으로 담겨져있음}
}

함수

	function a(){
    // 난그냥함수 전역에 선언되어있음
    }

1. 일반함수(function)

   • 자바스크립트에서는 모든 일반함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.
   • this가 바인딩 되는 상황
     • 함수 실행시에는 전역 객체를 가리킨다.
     • 메소드 실행시에는 모소드를 소유하고있는 겍체를 가르킨다.
     • 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
   • 일반 함수는 함수를 선언할때 this에 바인딩할 객체가 정적으로 결정되지 않음 함수를 호출할때 어떻게 호출 되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됨

2. 화살표함수(arrowFunction)

   • 전역으로 실행될때 this를 새로 정의하지 않음
   • 화살표 함수는 함수를 선언할 때 바인딩할 객체가 정적으로 결정
   • 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다(lexical this)
   • 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

코드로 비교해보자 먼소린지 알수있다.

function ReturnFunc() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {
      console.log(this.name);
    },
  };
}
function ReturnArrFunc() {
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {
      console.log(this.name);
    },
  };
}
const normalFunc = new ReturnFunc();
normalFunc.speak(); // "바이"

const arrfunc = new ReturnArrFunc();
arrfunc.speak(); // "하이"

위에 코드를 비교해보면
일반함수는 자신이 속한 객체를 가르킨다.
화살표함수는 자신이 속한 인스턴스를 가르킨다.

• 때문에 화살표함수는 메소드로써 사용하면 안된다.(this가 자신이 속한 객체를 가르키지 않는다.)

생성자 함수로 사용가능한 여부

1. 일반함수는 생성자 함수로 사용가능
2. 화살표함수는 생성자 함수로 사용 불가능 그이유는 prototype 프로퍼티가 없기때문

const arr = () => {};
const func = function () {};

let a = new arr(); // error
let b = new func();

arguments 사용 가능 여부

1. 일반 함수에서는 함수가 실행 될때 암묵적으로 arguments변수가 전달되어 사용한다.
2. 화살표 함수는 함수가 실행 될때 암묵적으로 arguments가 전달되지 않는다.(브라우저에선)

const arr = () => {
  console.log(arguments);
};
const func = function () {
  console.log(arguments);
};

arr(1, 2, 3);   //VM275:2 Uncaught ReferenceError: arguments is not defined
    		// at arrFun (<anonymous>:2:15)
    		// at <anonymous>:1:1
func(1, 2, 3); 
//Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
//0: 1
//1: 2
//2: 3
//3: 4
// ....

호이스팅

1. 화살표함수는 항상 익명함수의 형태이다. 때문에 함수 선언문에 사용된다.
2. 일반함수는 익명함수/기명함수 형태이다. 때문에 함수 선언문/표현식이 가능하다.

다음 코드를 확인해보자

console.log(x()); // x 함수 선언문 호이스팅가능
function x() {
  return "x";
}

console.log(xx()); //ReferenceError: Cannot access 'xx' before initialization
// 함수 표현식은 호이스팅 불가능

const xx = function () {
  return "xx";
};

//위와같은 특성때문에 화살표함수는 호이스팅이 불가능하다.
// 표현식이 불가능한 이유는 형태를 보면 알수있듯이 변수로 선언취급되어 선언부만 끓어올림