[JS] 화살표 함수 Arrow function

// 화살표 함수
// () => {} vs function () {}

const double = function (x) {
  return x * 2
}

const doubleArrow = (x) => {
  return x * 2
}

 double 과 doubleArrow 변수 둘 다 같은 결과를 도출하지만 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명이라는 점에 차이가 있습니다.

 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

 

const doubleArrow = x => x * 2

 화살표 함수는 return을 지정해주지 않아도 실행문을 출력할 수 있으며, 매개변수가 하나밖에 없을 때는 위 코드처럼 () 도 생략이 가능합니다.

 

const doubleArrow = x => {x * 2}
// {} 로 감싸면 블럭으로 인식하기 때문에 반환되지 않음.

const doubleArrow = x => {
  return x * 2
} // return 을 추가하여 반환 가능. 본래의 코드로 돌아온 것을 확인할 수 있음

 만약 {}를 포함하는 경우에는 위 코드의 두번 째 변수 선언처럼 return 을 추가해주어야만 데이터 반환이 가능합니다.

 

// 화살표 함수 내에서 객체 데이터를 반환할 때는 () 로 감싸주어야함  
const doubleArrow = x => ({ name: 'mildMan' })

 하필이면 객체 데이터를 지정할 때 {} 를 사용하기 때문에 화살표 함수는 객체 데이터 반환이 불가능하다고 생각할 수도 있지만 {} 밖을 () 로 감싸주어 객체 데이터의 반환도 가능합니다.

 

---

참고문헌 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN