화살표 함수

기존 함수

function add(a, b){ return a + b };

화살표 함수

const add = (a, b) => a + b;

화살표 함수 특징

1. 함수 표현이 더 간단하다.

기존 함수

const nubmers = [1,2,3,4,5];
const odd = numbers.filter(function(x) {
  return x%2 === 1;
});

화살표 함수

const numbers = [1,2,3,4,5]
const odd = numbers.filter( x => x%2 === 1);

한눈에 봐도 훨씬 간결해 보이죠?
"=>" 를 씀으로써 function과 return을 사용하지 않아도 됩니다.

또한 매개변수가 1개인 경우에는 소괄호를 생략 해도 됩니다.

const double = x => {x * 2}

함수를 한줄로 표현이 가능하다면 중괄호 생략도 가능 합니다.

const double = x => x * 2

2. 화살표 함수는 항상 익명함수이다.
3. 화살표 함수는 자기 고유의 this가 없습니다.
   함수가 실행 될때 자신을 감싸고 있는 외부 스코프에서 this를 받아옵니다.

ES5 <-> ES6 함수 변환

1. ES5 -> ES6

// ES5 기존 함수
function welcome(name){
  return "안녕하세요" + name
}

// ES6 화살표 함수

const welcome = (name) => {
  return "안녕하세요" + name
}

2. ES6 -> ES5

// ES6 화살표 함수
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}

// ES5 기존 함수

function handleBio(nickname, bio) {
  const user = {
    nickname = nickname,
    bio : bio
  }
  return user
}

화살표 함수가 기존 함수를 대체 할수 있을까?

화살표 함수가 기존 함수를 완벽하게 대체 할 수는 없습니다.. 바로 this 때문입니다.

일반 함수의 경우 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 정해지는데
화살표 함수의 경우 바인딩할 객체가 정적으로 정해집니다.
-> 언제나 상위 스코프의 this (Lexical this)

한가지 예를 들어보면

btn.addEventListner("click", function() {
	console.log(this.textContent);
}):

해당 코드는 function이 들어가 있어 this는 자기 자신을 가르키기 때문에
버튼 클릭시 버튼의 텍스트 값이 출력되는데

btn.addEventListner("click", () => {
	console.log(this.textContent); // undefined
}):

이렇게 화살표 함수의 경우는 this가 자기 자신이 아니라 자신을 감싸고 있는 부모 블록에 포함되기 때문에 버튼의 텍스트가 출력되지 않습니다.

때문에 메소드, 생성자 함수, addEventListner 함수의 콜백 함수로서 화살표 함수를 사용해서는 안됩니다!