[ES6] Arrow function

function 함수명(){
  console.log("hi");
}

또는

var 함수명 = function(){
  console.log("hi");
}

ES5까지의 자바스크립트에선 이렇게 함수를 만들어 사용했었습니다,

ES6에서는 새롭게 함수를 만들 수 있는 방법이 등장했는데, 그것이 arrow function 함수입니다.

지금부터 arrow function 을 왜 쓰며, 어떻게 쓰는지 같이 알아봅시다.

---

Arrow function

var 함수명 = (a) => {
     var sum = a * 2
}

위 코드는 arrow function 을 적용한 함수입니다.

바뀐점 : function이 =>로 바뀜.

엥? function이란 글자가 =>로 바뀐게 끝이라면 헷갈리게 왜 새로 나왔나요?

---

💡 그럼 이건 어떤가요??

var 함수명 = a => { return a * 2 }

💡 아직 모르겠다구요??

var 함수명 = a =>  a * 2

💡 이건요?

갈수록 함수가 짧아지고 직관적으로 바뀌는 게 느껴지시나요?

💡 네 맞습니다,

arrow function 의 장점은 함수의 내용을 짧고 직관적이게 사용할 수 있습니다.

---

그럼 이제 ES6에서 arrow function도 배웠으니 함수를 전부 arrow function으로 쓰면 되겠네요?

💡 그건 아닙니다,

Arrow fiunction에서 this를 쓸 땐 this를 함수내에서 찾는게 아니라 상위 this를 찾게되기 때문인데요,

· 보통 함수에서 this를 사용 한다고 하면 이럴 것입니다.

  var 나 = {
   이름 : "홍길동",
   소개 : function(){
   console.log("안녕 난" + this.이름 + "이야")
    } 
  }
  
  나.소개()

이렇게 코드를 짜게되면 "안녕 난 홍길동이야" 라고 콘솔에 출력됩니다.

💡 여기서 만약에 소개의 함수를 arrow function으로 짜게된다면 ?

  var 나 = {
   이름 : "홍길동",
   소개 : ()=> {
   console.log("안녕 난" + this.이름 + "이야")
    } 
  }
  
  나.소개()

"안녕 난 undefined이야" 라고 콘솔에 출력됩니다. 왜그럴까요?

💡 arrow function을 사용 할 경우 this는 "나"라는 함수를 찾는게 아니라 상위 스코프인
window를 찾게되기 때문입니다.

💡 여기서 Window란 ?
→ 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체입니다.
쉽게말하면, document.getElementById(), alert(), console.log() 이런 함수들이 있는 곳입니다.

그래서 console.log("안녕 난" + this.이름 + "이야")은 콘솔에서 this = 나 X / WIDNOW(O)가
되기 때문에 undefined가 뜨는 겁니다.

---

• addEventListener 함수의 콜백 함수에서의 this

 
 var button = document.getElementById('mybutton');
  button.addEventListener('click', () => {
   console.log(this)
});

코드를 이렇게 짰다면 this는 무엇을 가르킬까요?

💡 네 역시 Window 입니다.

이렇기 때문에 arrow function을 쓸 땐 this의 사용을 주의 해야됩니다.

---

그럼 arrow function은 간단한 함수 말곤 실무에서 쓰지않나요?

💡 아닙니다, forEach,map,this를 쓰지않는 콜백함수 등에 쓰입니다.
(이 함수들은 다음에 알아보기로 합시다.)

오늘의 결론

1. arrow function은 function을 대체하는 문법이 아닌 또 하나의 함수 선언방식이다.
2. this를 사용할려면 fucntion을 사용하자.
3. 사용 할때 function을 사용 할 건지 arrow function을 사용 할 건지 잘 생각해서 사용하자.

감사합니다 🙏 (혹시 잘못 된 부분이나 보완사항이 있으시면 댓글 부탁드리겠습니다.)