자바스크립트 - 화살표 함수(Arrow Function)

점점 편리하게 살아가고 싶은 사람의 본심이랄까...?

함수 표현식, 함수 선언식을 쭉 써오다 보니, 함수를 작성하는게 그렇게 귀찮거나 복잡하다는 생각이 들지 않았다. 하지만 이 방법을 알게 되면서 새로운 세상에 눈을 떴다. 기록해보자!

 

화살표 함수는 단순하고 간결하게 함수를 작성할 수 있게 해준다. (물론 난 아직도 조금 어색...)

let add = function(x, y) {
 return x + y;
}

보통 우리는 함수를 이렇게 작성한다. 하지만 화살표 함수를 만나게 되는 순간 정말 놀랍도록 간결해 진다. 

// ex1 
let add = (x, y) => {
 return x + y;
}

// ex2
let add = (x, y) => x + y;

3줄이었던 함수 코드가, 1줄로 표현이 가능해졌다. 

먼저 function이라는 키워드를 화살표로 축약해서 표시했다. 그리고 함수 본문안에 return문만 있는 경우에 return도 생략이 가능하다! 이때 소괄호 ()는 사용해도 되지만, 중괄호{}는 사용해서는 안된다!

 

let mutiple = function(x) {
 return function(y) {
  return x * y;
 }
}

이런 함수가 있다고 보자, 그럼 이것도 화살표 함수로 표현이 가능할까?

let multiple = x => {
 return y => {
  return x * y
 }
}

let multiple = x => {
 return y => x * y
}

let mutiple = x => y => x * y;

ㄴ0.0ㄱ 함수가 이렇게 간결하게 작성할 수 있다는 사실이 진짜 놀라웠다... 

하지만 이렇게 함수 본문이 한줄로 표현이 되고, return만 있기 때문에 정말 간결하게 표현 할 수 있고, 본문이 2줄이상이거나 복잡해지면 return과 중괄호를 명시적으로 쓰는 것이 좋다!

 

화살표 함수의 경우에는 .call / .apply / .bind를 사용할 수 없고, 화살표 함수의 실행은 this를 결정 짓지 않기 때문에 주의해야한다!

 

다음은 무엇을 기록해볼까?!