화살표 함수는 ES6 함수다.

그럼 ES [ i ] 는 무엇인가???

ES란 ECMASCRIPT를 뜻하는 약어이며 자바스크립트의 표준 및 규격을 나타내는 용어이다.

ECMAscript와 javascript를 헷갈려들 하는데
ECMAscript는 그냥 규격이라고 생각하면 되고 javascript는 그 규격을 준수하면서 만들어진 언어다.

---

1. 1999년 ES3가 발표되었고, 우리가 흔히 알고있는 javascript 형식을 띄기 시작했다.

2. 2009년에는 ES5가 발표되었고, forEach, map, filter, evert, some, reduce 등의 메소드를 지원하기 시작했다. (strict mode 지원), JSON 지원 시작

3. 2015년에는 ES6가 발표되었고

   1. let과 const 추가
   2. arrow 함수를 지원하기 시작했다.
   3. Promise 도입
   4. module export, import 도입 (도입된지 이렇게나 얼마 안됐나...?)
   5. iterator, generator 추가 (추후 벨로그로 알아보자)

4. 2017년 ES8 도입

   1. async - await 도입

---

삼천포로 새다가 동남아까지 갈것 같으니 다시 애로우 함수에 대해 이야기 해보자면

우선 전임자가 남겨둔 소스 유지보수를 위해 코드를 뜯다 보면 일반 function과 arrow function을 정확히 이해하고 사용한것이 아닌것 같아서 정리하려고 해본다.

우선 화살표 함수는 제약조건이 있다.

1. 익명함수로만 사용 가능
2. 메소드나 생성자로 사용 불가

여기서 잠깐

익명함수(Anonymous function)

익명 함수는 함수명 대신 변수명에 코드를 저장하는 방식.
익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다.
익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.

---

일반 funtion과 arrow function의 가장 큰 차이점은 this 유무라고 생각한다.

1. 화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리킨다.
   (자바스크립트는 this값이 없거나 찾을 수 없으면 상위 객체에서 this를 찾는다. 화살표 함수는 this를 가지지 않기에 상위 객체에서 this를 찾는다.)

2. 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고, 함수를 호출 할 때 함수가 어떻게 호출 되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

3. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

4. 화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다.

5. 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

그렇다면 렉시컬 스코프는 무슨 소리인가?

우선 우리는 C-family Lang은 코드블록 스코프이지만 JS는 함수 레벨 스코프라는것을 유의해야한다.

코드로 예제를 들어보자

---

if (1 == 1) {
  var x = 1;
}
console.log(x);

해당 소스에서 var x는 전역변수일까 지역변수일까??
정답은 전역변수이다. 이게 무슨 시나락 까먹는소리일까 싶지만 당연하게도 if문은 코드블록이지 함수블록이 아니기에 var x는 지역변수가 아닌 전역변수가 되는것이다.

---

function ex (){
	var x = 600;
    console.log(x);
}

그렇다면 위 코드 내부에 있는 var x는 지역변수가 되는것이다.

그렇다면 해당 스코프를 헷갈려서 전역변수 var x가 중복된다면 어떻게 되는것인가?

var x = 0;

function ex (){
	var x = 20;
    console.log(x);
}

ex();
console.log(x);

ex 함수를 호출하고 x를 콘솔에 찍으면
ex() = > 20;
console.log(x) => 0;
이 나온다.

변수가 중복되면 함수 내에서는 지역변수를 먼저 참조한다.

---

출처

하지만 이런 상황에서는 어떨까?

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?

foo에서 bar를 호출한다.
그럼 bar는 foo 내부의 지역변수 var x를 호출할까 전역변수 var x를 호출할까?

이런 사항은 bar의 상위 스코프가 무엇인지에 따라 결정된다.
두가지 선택지가 있는데

1. 어디서 호출 했는지에 따라서 정해지는 스코프 (동적 스코프)
2. 어디서 선언 했는지에 따라서 정해지는 스코프 (정적 스코프)

첫번째 방식을 동적 스코프라고 하고, 두번째 방식을 렉시컬 스코프, 또는 정적 스코프라고 한다.
자바스크립트를 비롯한 대부분의 언어는 렉시컬 스코프를 따른다.

렉시컬 스코프 => 함수를 어디에 선언하였는지에 따라 결정된다.

JS는 렉시컬 스코프를 따름으로 함수를 선언한 시점에 상위 스코프가 결정된다.

따라서 foo(), bar() 모두 1을 출력한다.

---

이거참 삼천포에 안빠지려고 했는데 호주쯤 간듯 싶다.

어쨌든

일반 function은 동적 스코프

arrow function은 정적 스코프

끝!