> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/js-frequently-used-in-react/arrow-function.md).

# Arrow function

[화살표 함수(Arrow Function)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98)는 **JavaScript로 함수를 작성하는 새로운 방법**이며, `this` 참조를 처리하는 방법이 기존 방법(함수 선언 또는 함수 식)과 다소 다릅니다. React 앱 개발에서 화살표 함수는 여러 방면에서 자주 사용됩니다.

```javascript
const consoleWrapper = (method, message) => console[method](message)
const log = (message) => consoleWrapper('log', message)
const warn = (message) => consoleWrapper('warn', message)
const error = (message) => consoleWrapper('error', message)

// ES5 —————————————————————————————————————————————————————————————

function consoleWrapper(method, message) {
  console[method](message);
}

function log(message) {
  consoleWrapper('log', message);
}

function warn(message) {
  consoleWrapper('warn', message);
}

function error(message) {
  consoleWrapper('error', message);
}
```