# 2.3.2 화살표 함수

기본적으로 자바스크립트 함수 내부에서 참조된 `this` 키워드의 값은 함수가 정의되는 시점이 아닌 실행되는 시점에 결정된다. 동일한 내부 구조를 가진 함수가 동일한 블록 내에서 실행 되더라도 어떤 방식으로 호출되냐에 따라 함수 내에서의 `this`값은 달라질 수 있다.

```javascript
function getName() {
  console.log(this.name);
}
const a = {
  name: 'javascript',
  getName: getName
};
function getNames() {
  a.getName(); // 'javascript'
  getName(); // TypeError: Cannot read property 'name' of undefined
}
```

이러한 `this`의 동작은 자주 혼란을 야기한다. 

ES6에 추가된 화살표 함수(arrow function) 문법을 사용하면 함수 내의 `this`가 실행 시점이 아닌 정의 시점에 결정되는 함수를 정의할 수 있다. 화살표 함수 내에서의 모든 `this` 참조는 해당 함수가 정의되는 시점에서 함수를 둘러싼 문맥의 `this` 값으로 고정된다. 화살표 함수는 `(인자) => (함수 본문)`의 문법으로 정의한다.

```javascript
const obj = {
  a: 1,
  normalFunc: function() { console.log(this); },
  arrowFunc: () => { console.log(this); },
};
const { normalFunc, arrowFunc } = obj;
obj.normalFunc(); // { 
                  //   a: 1,
                  //   normalFunc: [Function: normalFunc],
                  //   arrowFunc: [Function: arrowFunc] 
                  // }
normalFunc(); // undefined
obj.arrowFunc(); // (global object)
arrowFunc(); // (global object)
```

만약 인자가 하나일 경우, 화살표 함수의 인자를 둘러싼 괄호를 생략할 수 있다.

```javascript
const a = args => { console.log(args); };
console.log(a);
```

함수 본문이 한 줄의 표현식으로 이루어졌을 시, 본문을 감싸는 대괄호를 생략할 수 있다. 이 때 해당 표현식의 값이 함수의 반환값이 된다.

```javascript
const isOdd = n => (n % 2 === 1);
console.log(isOdd(3)); // true
```

`this`의 동작 이외에도 화살표 함수는 `function` 키워드를 이용해 선언한 함수와 다음의 차이점을 갖는다.

* 생성자로 사용할 수 없다.
* 함수 내에 `arguments` 바인딩이 존재하지 않는다.
* `prototype` 프로퍼티를 갖고 있지 않는다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ahnheejong.gitbook.io/ts-for-jsdev/02-ecmascript/function/arrow-functions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.