[Javascript]자바스크립트 this 완벽 가이드: 개념부터 활용까지!

JavaScript를 배우다 보면 this라는 키워드를 자주 접하게 됩니다. this는 함수 내부에서 사용되는 특별한 키워드로, 함수를 호출할 때 결정되는 실행 컨텍스트를 참조합니다. 이를 제대로 이해하지 못하면 코드가 의도치 않게 동작할 수 있습니다. 이번 포스팅에서는 자바스크립트 this가 어떻게 동작하는지, 다양한 상황에서 어떻게 사용되는지 살펴보겠습니다.

≣ 목차

• this의 동작 원리와 기본 개념🧠
• 메서드에서의 this 사용법💼
• 콜백 함수와 이벤트 핸들러에서의 this🎛️
• 화살표 함수에서의 this📐
• this를 사용한 예제🔧

자바스크립트에서 this는 함수 내에서 사용됩니다. 함수와 관련된 자세한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 함수 완벽 가이드: 초보자를 위한 필수 팁과 예제

---

01. this의 동작 원리와 기본 개념🧠

기본적인 this의 동작 방식

자바스크립트 this는 함수를 호출하는 방법에 따라 참조하는 대상이 달라집니다. 전역 컨텍스트와 함수 내부에서 각각 다르게 동작하죠.

console.log(this); // 전역 객체 (브라우저에서는 window 객체)

전역 컨텍스트에서의 this

전역 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 됩니다.

function globalThis() {
    console.log(this);
}
globalThis(); // window 객체

함수 내부에서의 this

일반 함수에서는 호출 방식에 따라 this가 달라집니다.

function regularFunction() {
    console.log(this);
}
regularFunction(); // window 객체 (엄격 모드에서는 undefined)

---

02. 메서드에서의 this 사용법💼

객체 메서드에서의 this

객체의 메서드로 호출된 함수에서는 해당 객체를 참조합니다.

const obj = {
    name: 'JavaScript',
    getName: function() {
        console.log(this.name);
    }
};
obj.getName(); // 'JavaScript'

생성자 함수에서의 this

생성자 함수는 새로운 객체를 생성할 때 사용되며, this는 생성되는 객체를 참조합니다.

function Person(name) {
    this.name = name;
}
const person = new Person('John');
console.log(person.name); // 'John'

---

03. 콜백 함수와 이벤트 핸들러에서의 this🎛️

콜백 함수에서의 this

콜백 함수 내부에서의 this는 호출되는 컨텍스트에 따라 달라집니다. 이를 명확히 하기 위해 bind, apply, call 메서드를 사용할 수 있습니다. 각 메서드의 사용법과 특징을 설명하겠습니다.

• bind: this 값을 설정한 새로운 함수를 반환합니다.
• call: 함수를 호출하면서 this 값을 설정하고, 인수를 쉼표로 구분하여 전달합니다.
• apply: 함수를 호출하면서 this 값을 설정하고, 인수를 배열로 전달합니다.

---

bind 메서드

bind 메서드는 함수를 호출하지 않고, this 값을 설정한 새로운 함수를 반환합니다. 이를 통해 콜백 함수가 호출될 때 this가 원하는 객체를 가리키게 할 수 있습니다.

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};

const callback = obj.getName.bind(obj);
callback(); // 'Alice' 출력

const anotherObj = {
  name: 'Bob',
  getName: callback
};
anotherObj.getName(); // 'Alice' 출력 (bind로 설정된 this가 유지됨)

예제: bind를 사용한 콜백 함수에서의 this 제어

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};

function executeCallback(cb) {
  cb();
}

const boundCallback = obj.getName.bind(obj);
executeCallback(boundCallback); // 'Alice' 출력

---

call 메서드

call 메서드는 함수를 호출하면서 this 값을 명시적으로 설정할 수 있습니다. 첫 번째 인수로 this 값을 전달하고, 그 뒤에 함수의 인수를 쉼표로 구분하여 전달합니다.

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = { name: 'Alice' };
greet.call(person, 'Hello'); // 'Hello, Alice' 출력

예제: call을 사용한 콜백 함수에서의 this 제어

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};

function executeCallback(cb) {
  cb.call(obj); // 명시적으로 this 설정
}

executeCallback(obj.getName); // 'Alice' 출력

---

apply 메서드

apply 메서드는 call과 유사하지만, 함수의 인수를 배열로 전달합니다. 첫 번째 인수로 this 값을 설정하고, 두 번째 인수로 인수 배열을 전달합니다.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };
greet.apply(person, ['Hello', '!']); // 'Hello, Alice!' 출력

예제: apply를 사용한 콜백 함수에서의 this 제어

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};

function executeCallback(cb) {
  cb.apply(obj); // 명시적으로 this 설정
}

executeCallback(obj.getName); // 'Alice' 출력

---

이벤트 핸들러에서의 this

이벤트 핸들러에서 this는 이벤트가 발생한 DOM 요소를 참조합니다. 이 기본 동작은 이벤트 리스너가 호출될 때 브라우저가 this를 이벤트가 발생한 요소로 설정하기 때문입니다. 그러나 다양한 방법을 통해 this를 다른 값으로 설정하거나 조작할 수 있습니다. 각 경우와 방법을 설명하겠습니다.

기본 이벤트 핸들러

기본적으로 이벤트 핸들러 함수에서 this는 이벤트가 발생한 DOM 요소를 참조합니다.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this); // 클릭된 버튼 요소를 출력
});

화살표 함수로서의 이벤트 핸들러

화살표 함수는 자신만의 this를 가지지 않고, 정의된 스코프의 this를 상속받습니다. 따라서 화살표 함수를 이벤트 핸들러로 사용하면 의도하지 않은 this가 참조될 수 있습니다.

const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
  console.log(this); // 상위 스코프의 this를 출력 (전역 객체 또는 undefined)
});

bind를 이용한 this 설정

이벤트 핸들러에서 this를 특정 객체로 설정하고 싶다면 bind 메서드를 사용할 수 있습니다.

const obj = {
  name: 'Alice',
  handleClick: function() {
    console.log(this.name); // 'Alice'를 출력
  }
};

const button = document.getElementById('myButton');
button.addEventListener('click', obj.handleClick.bind(obj));

call과 apply를 이용한 this 설정

call과 apply를 사용하여 이벤트 핸들러 내부에서 this를 설정할 수 있지만, 이러한 방법은 직접 이벤트 리스너에 사용하는 경우가 드뭅니다. 대신 이벤트 핸들러 내에서 다른 함수 호출 시 사용됩니다.

const obj = {
  name: 'Alice',
  handleClick: function() {
    console.log(this.name); // 'Alice'를 출력
  }
};

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  obj.handleClick.call(obj);
});

---

이벤트 핸들러에서의 this를 제어하는 다른 방법

1. 이벤트 핸들러 내부에서 this 저장하기

const obj = {
  name: 'Alice',
  handleClick: function() {
    console.log(this.name);
  }
};

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  const self = this; // 이벤트가 발생한 요소를 참조
  obj.handleClick.call(obj); // 'Alice' 출력
  console.log(self); // 클릭된 버튼 요소를 출력
});

2. 데이터 속성을 사용하여 this 전달

HTML:

<button id="myButton" data-name="Alice">Click me</button>

JavaScript:

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  const name = this.dataset.name; // data-name 속성 값 가져오기
  console.log(name); // 'Alice' 출력
});

---

요약

• 기본적으로 이벤트 핸들러에서 this는 이벤트가 발생한 DOM 요소를 참조합니다.
• 화살표 함수로 이벤트 핸들러를 작성하면 this는 상위 스코프의 this를 참조합니다.
• bind 메서드를 사용하여 이벤트 핸들러에서 this를 특정 객체로 설정할 수 있습니다.
• call과 apply를 사용하여 함수 호출 시 this를 설정할 수 있습니다.
• 이벤트 핸들러 내부에서 this를 제어하기 위해 self를 사용하거나, HTML 데이터 속성을 활용할 수 있습니다.

---

04. 화살표 함수에서의 this📐

JavaScript에서 화살표 함수는 일반 함수와 this의 동작 방식이 다릅니다. 화살표 함수는 자체적인 this 바인딩을 갖지 않고, 상위 스코프의 this를 상속받습니다. 이는 화살표 함수가 정의된 문맥(context)을 유지하기 때문입니다.

따라서 화살표 함수를 사용하면 일반 함수에서 this가 혼동될 수 있는 상황을 피할 수 있습니다. 화살표 함수는 this가 상위 스코프를 참조하므로, 콜백 함수나 이벤트 핸들러에서 this 바인딩 문제를 해결할 수 있는 장점이 있습니다.

주요 특징

1. 화살표 함수는 자신의 this를 가지지 않습니다.

• 일반 함수는 호출 방식에 따라 this가 달라지지만, 화살표 함수는 정의될 때의 스코프의 this를 사용합니다.

2. 상위 스코프의 this를 상속받습니다.

• 화살표 함수 내부에서 this는 화살표 함수가 정의된 위치의 상위 스코프의 this와 동일합니다.

---

예제와 설명

1. 일반 함수와 this

const obj = {
  name: 'Alice',
  regularFunction: function() {
    console.log(this.name); // 'Alice'
  }
};

obj.regularFunction(); // 'Alice' 출력

2. 화살표 함수와 this

const obj = {
  name: 'Alice',
  arrowFunction: () => {
    console.log(this.name); // 상위 스코프의 `this`를 참조
  }
};

obj.arrowFunction(); // 상위 스코프가 전역 객체이면 `undefined` 출력

3. 상위 스코프의 this를 상속받는 화살표 함수

화살표 함수는 상위 스코프의 this를 상속받습니다. 이 예제에서 화살표 함수는 객체 메서드 내부에서 정의되었으므로, 상위 스코프의 this는 해당 객체를 참조합니다.

const obj = {
  name: 'Alice',
  regularFunction: function() {
    const arrowFunction = () => {
      console.log(this.name); // 'Alice'
    };
    arrowFunction();
  }
};

obj.regularFunction(); // 'Alice' 출력

4. 콜백 함수로서의 화살표 함수

콜백 함수로 화살표 함수를 사용할 때도 상위 스코프의 this를 유지합니다.

const obj = {
  name: 'Alice',
  init: function() {
    document.getElementById('myButton').addEventListener('click', () => {
      console.log(this.name); // 'Alice'
    });
  }
};

obj.init();

이 예제에서 click 이벤트 핸들러로 사용된 화살표 함수는 init 메서드가 호출될 때의 this를 유지하므로, this.name은 'Alice'를 출력합니다.

---

주의사항

1. 글로벌 컨텍스트에서 화살표 함수 사용

화살표 함수가 전역 컨텍스트에서 정의된 경우, this는 전역 객체를 참조합니다.

const arrowFunction = () => {
  console.log(this); // 전역 객체 (브라우저에서는 `window`, Node.js에서는 `global`)
};

arrowFunction();

2. 객체 리터럴 메서드로서의 화살표 함수 사용

객체 리터럴의 메서드로 화살표 함수를 사용하는 것은 피하는 것이 좋습니다. 이 경우, this는 상위 스코프의 this를 참조하게 되어 예상치 못한 결과를 초래할 수 있습니다.

const obj = {
  name: 'Alice',
  arrowFunction: () => {
    console.log(this.name); // 상위 스코프의 `this`를 참조 (전역 객체)
  }
};

obj.arrowFunction(); // `undefined` 출력

요약

• 화살표 함수는 자신의 this 바인딩을 가지지 않고, 상위 스코프의 this를 상속받습니다.
• 콜백 함수로 화살표 함수를 사용할 때 상위 스코프의 this를 유지하여 혼동을 피할 수 있습니다.
• 객체 리터럴의 메서드로 화살표 함수를 사용하는 것은 바람직하지 않으며, 일반 함수 표현식을 사용하는 것이 좋습니다.

---

05. this를 사용한 예제🔧

예제 1: 객체 내부의 메서드에서 this 사용하기

// 객체 생성
const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    // 여기서 this는 person 객체를 가리킨다.
    return this.firstName + ' ' + this.lastName;
  }
};

// fullName 메서드 호출
console.log(person.fullName()); // 출력: John Doe

위 예제에서 this는 person 객체를 참조합니다. person.fullName()이 호출될 때, this는 person 객체를 가리키므로 this.firstName과 this.lastName는 John과 Doe를 반환합니다.

예제 2: 생성자 함수에서 this 사용하기

// 생성자 함수 정의
function Car(make, model) {
  this.make = make;
  this.model = model;
  this.getCarInfo = function() {
    // 여기서 this는 생성된 인스턴스를 가리킨다.
    return this.make + ' ' + this.model;
  };
}

// Car 생성자 함수를 이용해 객체 생성
const myCar = new Car('Toyota', 'Corolla');

// getCarInfo 메서드 호출
console.log(myCar.getCarInfo()); // 출력: Toyota Corolla

위 예제에서 this는 Car 생성자 함수가 생성한 인스턴스를 가리킵니다. myCar.getCarInfo()를 호출할 때 this는 myCar 객체를 가리키므로 this.make과 this.model은 Toyota와 Corolla를 반환합니다.

예제 3: 함수 호출 시 this의 동적 바인딩

// 일반 함수 정의
function greet() {
  console.log('Hello, ' + this.name);
}

// 다양한 객체 생성
const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };

// 함수 호출 시 다른 객체를 this에 바인딩
greet.call(obj1); // 출력: Hello, Alice
greet.call(obj2); // 출력: Hello, Bob

위 예제에서 call() 메서드를 사용하여 greet() 함수를 호출할 때 this를 obj1과 obj2로 각각 바인딩합니다. 이를 통해 greet() 함수 내부의 this.name은 각 객체의 name 속성 값에 접근할 수 있습니다.