> For the complete documentation index, see [llms.txt](https://bugtype-kr.gitbook.io/javascript-advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bugtype-kr.gitbook.io/javascript-advanced/arrow-function/normal-function-vs-arrow-function.md).

# Normal function vs Arrow Function

```typescript
class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
    this.hello = this.hello.bind(this);
  }

  hello(){
    alert(this.state.name)
  }


  render() {
    return (
      <div onClick={this.hello}>
          hello worlld 
      </div>
    );
  }
}
```

리액트에서 **클래스형 컴포넌트**로 구현할 때, 우리는 메소드에 bind를 항상 해줘야 했다.

```typescript
this.hello = this.hello.bind(this);
```

만약 위 처럼 bind를 해주지 않으면, 정상적으로 **this가 class의 인스턴스**를 가르키고 있지 않아. 원하는 결과를 받을 수 없게 된다. (참고로 this는 mutable이다.)

```
Cannot read property 'state' of undefined
```

이런 식으로 state를 찾을 수 없다고 에러 메시지를 띄우게 된다. 그래서 우리는 bind를 항상 해주었다. 그러다 arrow function이 나오면서 편해졌다. 왜냐면 불편한 bind를 안해줘도 되기 때문이다.

```typescript
class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
    // this.hello = this.hello.bind(this);
  }

  hello(){
    alert(this.state.name)
  }

  helloWorld = () => {
    alert(this.state.name)
  }

  render() {
    return (
      <div onClick={this.helloWorld}>
          hello worlld 
      </div>
    );
  }
}
```

helloWorld 메소드는 정상적으로 `React` 알트창을 띄우는 것을 알 수 있다.

`그러면 Arrow Function면 쓰면 되겠네??`

아직 섣부르게 판단하면 안된다. 앞으로 이어지는 내용에서 차이점에 대해서 설명할 것이다.

1. this bind
2. arrow function
3. autobind decorator


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://bugtype-kr.gitbook.io/javascript-advanced/arrow-function/normal-function-vs-arrow-function.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.