[JavaScript] 바인딩이란

"바인딩"이라는 용어는 프로그래밍에서 다양한 맥락에서 사용됩니다. 여기서는 주로 JavaScript에서의 "바인딩"에 초점을 맞추어 설명하겠습니다. JavaScript에서 바인딩은 특히 함수의 실행 컨텍스트와 관련하여 "this" 키워드의 값을 결정하는 프로세스를 말합니다.

### this 바인딩

JavaScript에서 함수 내부의 `this` 키워드는 함수가 호출되는 방식에 따라 그 값이 달라집니다. `this`의 값은 함수가 실행될 때 결정되며, 이는 함수가 어떻게 호출되었는지에 따라 다릅니다.

#### 1. 전역 컨텍스트
전역 실행 컨텍스트에서 `this`는 전역 객체를 가리킵니다. 브라우저에서는 `window`, Node.js에서는 `global` 객체가 이에 해당합니다.

#### 2. 함수 호출
일반 함수로 호출될 때, `this`는 기본적으로 전역 객체를 가리킵니다. 하지만 엄격 모드(`'use strict'`)에서는 `this`가 `undefined`로 설정됩니다.

```javascript

function show() {
  console.log(this);
}

show();  // 일반적인 경우 전역 객체(window 또는 global), 엄격 모드에서는 undefined

```

#### 3. 메서드 호출
객체의 메서드로 호출될 때, `this`는 그 메서드를 호출한 객체를 가리킵니다.

```javascript

const obj = {
  name: 'zerocho',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

obj.greet();  // this는 obj를 가리킴

```

#### 4. 생성자 함수
새로운 인스턴스를 생성하기 위해 생성자 함수로 호출될 때, `this`는 새로 생성된 객체를 가리킵니다.

```javascript

function Person(name) {
  this.name = name;
}

const person = new Person('zerocho');
console.log(person.name);  // 'zerocho'

```

#### 5. 화살표 함수
화살표 함수에서 `this`는 함수가 생성된 정적 범위의 `this`를 가리키며, 화살표 함수는 자신만의 `this` 바인딩을 가지지 않습니다.

```javascript

const obj = {
  name: 'zerocho',
  greet: function() {
    setTimeout(() => {
      console.log('Hello, ' + this.name);
    }, 1000);
  }
};

obj.greet();  // this는 obj를 가리킴

```

### 명시적 바인딩
`call`, `apply`, `bind` 메서드를 사용하여 함수 호출 시 `this` 값을 명시적으로 설정할 수 있습니다. 이를 통해 `this` 바인딩을 개발자가 의도한 대로 제어할 수 있습니다.

### 바인딩의 중요성
바인딩은 데이터와 함수를 연결하고, `this`의 값이 어떻게 결정되는지를 정의하여 프로그램의 실행 흐름을 제어하는 데 중요한 역할을 합니다. 코드의 재사용성, 확장성, 그리고 객체 지향 프로그래밍의 핵심 개념을 구현하는 데 필수적입니다.