[JavaScript] Arrow Function (화살표함수)

함수 만드는 법 (기존)

function 함수(){ }
or
let 함수 = function(){ }

Arrow function

let 함수 = ( ) => { }

함수를 만드는 이유

• 코드를 기능별로 묶고 싶을 때
• 입출력 기계를 만들고 싶을 때

💡입출력 기계
let 함수 = (a) => { return a +10 } 처럼 뭔가를 입력하면 출력해주는 것

arrow function의 장점

• 위에서 보여준 입출력 기계를 만들 때 직관적으로 볼 수 있다
• 파라미터가 1개면 소괄호 생략 가능하다
• 코드가 한 줄이면 중괄호도 생략 가능하다

arrow function 예시

forEach 콜백함수

forEach 함수는 array 자료 갯수만큼 내부 코드를 실행해줌, 이때 a는 array 내의 자료를 의미

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

이벤트리스너

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

object 안의 함수

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

arrow function의 단점

arrow function은 기존 function과 비슷한 것 같지만 this값이 달라진다는 점에서 큰 차이가 있다

this를 사용할 일이 있으면 무조건적으로 arrow function을 사용하면 안된다는 것을 주의하자