<JavaScript> Arrow Function

ES6 이전에 JavaScript에서 함수를 만드는 방법은 크게 3가지가 있다
1. 전통적인 함수의 정의
2. Anonymous Function
3. new 키워드 사용

	// #1. normal
	function add_1 (a,b) {
		return a+b;
	}

	// #2. variable (anonymous)
	var add_2=function (a,b) {
		return a+b;
	}

	// #3. new 
	var add_3=new Function ('a', 'b', 'return a+b');

	console.log(add_1 (10,20));
	console.log(add_2 (10,20));
	console.log(add_3 (10,20));

1. Arrow Function 사용

• a를 출력하는 간단한 함수를 만들어 보자

  var print = (a) => console.log(a);
  print("arrow 1");

• 아래와 같이 인자가 하나인 경우 (), {}를 생략할 수도 있다

  var print=a=>console.log(a);

• 인자가 없는 경우

  var print = () => console.log("arrow function");
  

2. Arrow Function 의 한계

this에 대한 바인딩이 없다

• Arrow Function은 자신의 this가 없고, 화살표 함수를 둘러싸는 렉시컬 범위 (lexical scope)의 this가 사용

• 화살표 함수는 일반 변수 조회 규칙 (normal variable lokkup rules)를 따름 -> 현재 범위에서 존재하지 않는 this를 찾을 때, 바로 바깥 범위에서 this를 찾는 것으로 검색을 끝내게 됨

  const obj = {
      num: 5,
  
      print: () => {
      console.log(this.num); 
      console.log(this); 
      },
  };
  
  console.log(obj.num); //***************(1)
  obj.print();		  //***************(2)
  

  위에서 (1)을 확인해보면 5가 나온다.
  하지만 (2)를 확인해본 결과 obj에 있는 print() function이 호출되고, 결과는 undefined, window가 차례로 출력된다

Reference
https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions