자바스크립트 바인딩 개념 정리와 코드 적용 예시

자바스크립트를 활용하는 많은 개발자들이 ‘this’ 키워드의 바인딩 개념에 대해 혼란을 느끼곤 합니다. 이는 ‘this’가 호출되는 컨텍스트에 따라 동적으로 바뀌기 때문입니다. 이번 글에서는 자바스크립트의 바인딩 규칙에 대해 체계적으로 정리하고, 다양한 코드 예시를 통해 이를 명확히 이해할 수 있도록 도움을 드리겠습니다.

자바스크립트에서의 this 바인딩

자바스크립트에서 ‘this’는 함수가 호출되는 방식에 따라 결정되는 특별한 키워드입니다. 이를 이해하기 위해서는 다음의 다섯 가지 바인딩 규칙을 알아야 합니다.

1. 기본 바인딩

함수가 일반적으로 호출될 때, ‘this’는 전역 객체에 바인딩됩니다. 웹 브라우저 환경에서는 ‘this’가 ‘window’ 객체를 가리키며, Node.js에서는 ‘global’ 객체를 참조합니다. 다음의 예를 보세요:

function showName() {
 console.log(this.name);
}
var name = 'John';
showName(); // 'John'이 출력됩니다.

그러나 엄격 모드에서 이러한 방식은 다르게 동작합니다:

'use strict';
function showName() {
 console.log(this.name);
}
showName(); // TypeError: Cannot read property 'name' of undefined

2. 암시적 바인딩

함수는 객체의 메소드로 호출될 때, ‘this’는 해당 객체에 바인딩됩니다. 아래 코드를 통해 이 개념을 알아보겠습니다:

var person = {
 name: 'Alice',
 greet: function() {
  console.log(this.name);
 }
};
person.greet(); // 'Alice'가 출력됩니다.

하지만 만약 메소드를 다른 변수에 저장하고 호출하면, ‘this’는 기본 바인딩으로 바뀝니다:

var greetFn = person.greet;
greetFn(); // 'undefined'가 출력됩니다.

3. 명시적 바인딩

자바스크립트에는 ‘call’, ‘apply’, ‘bind’와 같은 메소드가 있습니다. 이들을 통해 ‘this’의 값을 명확하게 설정할 수 있습니다.

var person = {
 name: 'Bob'
};
function sayHello() {
 console.log(this.name);
}
sayHello.call(person); // 'Bob'이 출력됩니다.

‘apply’ 메소드도 유사하게 동작하며, 인자를 배열 형태로 받을 수 있습니다:

sayHello.apply(person); // 'Bob'이 출력됩니다.

‘bind’ 메소드는 ‘this’를 영구적으로 바인딩한 새로운 함수를 반환합니다:

var boundSayHello = sayHello.bind(person);
boundSayHello(); // 'Bob'이 출력됩니다.

4. new 바인딩

함수가 ‘new’ 키워드와 함께 호출되면, ‘this’는 새로 생성된 객체를 가리킵니다:

function Person(name) {
 this.name = name;
}
var john = new Person('John');
console.log(john.name); // 'John'이 출력됩니다.

5. 화살표 함수

ES6에서 도입된 화살표 함수는 ‘this’를 렉시컬 스코프에 바인딩합니다. 즉, 화살표 함수가 정의된 시점의 ‘this’를 참조하게 됩니다:

var obj = {
 name: 'Charlie',
 greet: function() {
  setTimeout(() => {
   console.log(this.name);
  }, 1000);
 }
};
obj.greet(); // 'Charlie'가 1초 후에 출력됩니다.

바인딩 우선순위

여러 바인딩 방식에서 ‘this’의 우선순위는 다음과 같이 정리할 수 있습니다:

• 명시적 바인딩 (call, apply, bind) > 암시적 바인딩 > 기본 바인딩
• new 바인딩은 다른 바인딩들과 동일하게 우선됩니다.

따라서 ‘this’를 명확하게 이해하고 활용하기 위해서는 호출 방식을 잘 알고 있어야 합니다. 특히, 암시적 바인딩과 명시적 바인딩의 우선순위를 기억하는 것이 중요합니다. 이러한 바인딩 규칙을 숙지하면 자바스크립트로 코딩할 때 더 이상 ‘this’로 인한 혼란을 느끼지 않으실 것입니다.

마무리

이번 포스팅에서는 자바스크립트의 ‘this’ 바인딩에 대한 기본 개념과 다양한 사례들을 살펴보았습니다. ‘this’의 바인딩 방식은 자바스크립트의 핵심 개념 중 하나이며, 이를 이해하는 것은 개발자에게 필수적인 요소입니다. 앞으로의 프로젝트에서 ‘this’를 적절하게 활용해 더 나은 코드 작성을 진지하게 고민하시기 바랍니다.

자주 묻는 질문과 답변