[JS & ES6 신문법 학습] Arrow function은 function을 대체?

자바스크립트에서는 함수를 만드는 여러 방법이 있다.

근데 특이한 화살표 함수도 있다.

function 함수1(){

    }
    
    let 함수2 = function(){

    }
    let 함수3 = () => {

    }

요롷게 여러가지로 만들 수 있지.

함수는 그냥 쓰는 문법이 아님
함수를 만드는 이유는 크게 2가지

1. 코드들을 기능으로 묶고 싶을 때 사용
2. 입출력 기계를 만들고 싶을 때 사용

let 함수 = (a) => {
      return a + 10
    }

    함수(5)

이런 식으로 쓴다는 말이지.

화살표 함수 장점

0. 입출력 기계 만들 때 보기 쉬움
1. 파라미터 1개면 소괄호 생략가능

화살표 함수를 사용하면, 파라미터가 1개만 사용된다고 할 때 소괄호를 생략해서 사용할 수 있다.

let 함수 = a => {
      return a + 10
    }

    함수(5)

2. 코드 한줄이면 중괄호도 생략 가능

<script>
    let 함수 = a => a + 10

    함수(5)
  </script>

이렇게 또는

<script>
    let 함수 = a => console.log(a)

    함수(5)
  </script>

처럼 사용이 가능하다.

화살표 함수 예시

1. forEach콜백함수

[1,2,3,4].foreach(function(a){
      console.log(a)
    })

요롷게 있다면?!

화살표 함수로 다음 처럼 직관적이게 보여줄 수도 있다.

[1,2,3,4].foreach(a => console.log(a))

2. 이벤트리스터

document.getElementById('버튼').addEventListener('click',function(e){
      console.log(this)
    })

위처럼 있는 녀석을 아래처럼도 가능하지

document.getElementById('버튼').addEventListener('click',(e) => {
      console.log(this)
    })

대신 이렇게 했을 때 이 함수 안에서 this값을 사용하려고 할 때 문제가 생길 수 있음. 상위의 this값을 그대로 받아서 사용되므로

일반함수의 this는 버튼 html을 가리키지만, 화살표 함수의 this는 window를 가리킨다.

일반 이벤트리스너에선 this == e.currentTarget
화살표 함수 이벤트리스너에선 this == 바깥의 this값

그래서 this를 사용하겠다하면 화살표함수를 사용하면 흐음....
그럼에도 this를 화살표함수에서 쓰고 싶다면, e.currentTarget를 사용하면 된다구리.

3. Object안의 함수

let 오브젝트 = {
      함수 : function(){
        
      }
    }

위처럼 사용하던 것을
아래처럼도 사용 가능하다.

let 오브젝트 = {
      함수 : () => {
        
      }
    }

대신 이렇게 하면 this값은 window가 나온다.

let 오브젝트 = {
      함수 : () => {
        console.log(this)
      }
    }
    오브젝트.함수()

오브젝트 바깥에 있는 this값이 출력된다.(window가 출력됨)