자바스크립트에서 ‘this’ 마스터하기
-
관리자 신현승 - 카테고리: 개발이슈
- 조회수: 89
- 작성일:
관리자 신현승 자바스크립트에서 this 키워드는 현재 문맥을 나타내지만, 사용 시 복잡할 수 있습니다. 그러나 원리를 이해하면 다양한 상황에서 유용하게 활용할 수 있는 강력한 도구입니다.
this는 카멜레온처럼 호출 문맥에 따라 다른 값을 가집니다. 이 특성은 초보 개발자에게 혼란을 줄 수 있습니다. 예를 들어, 일반 함수, 메서드, 콜백 함수 등에서 this의 값이 달라질 수 있습니다.
이번 글에서는 함수 호출 방식에 따른 this의 변화를 다루며, 전역에서의 호출, 일반 함수, 메서드, 생성자 함수, 콜백 함수, 그리고 call, apply, bind 메서드의 예제를 살펴보겠습니다.
전역 공간에서의 호출
전역 공간에서는 this가 전역 객체를 참조합니다. 브라우저에서는 window, Node.js에서는 global 객체를 가리킵니다.
console.log(this); // 브라우저 환경: window 객체 출력// Node.js 환경: global 객체 출력
일반 함수에서의 호출
일반 함수에서 this는 호출 방식에 따라 달라지며, 기본적으로 전역 객체를 참조합니다.
function regularFunction() { console.log(this);}regularFunction(); // 브라우저: window 객체 출력// Node.js: global 객체 출력
메서드에서의 호출
메서드 내부에서는 호출한 객체에 따라 this가 결정됩니다. 메서드는 객체의 속성으로 정의된 함수입니다.
1) 메서드란?
메서드는 객체의 속성으로 정의된 함수입니다.
const user = { name: '홍길동', greet: function () { console.log(`안녕하세요, 홍길동입니다!`); }};user.greet(); // 출력: 안녕하세요, 홍길동입니다!
2) 메서드 내부에서의 this
메서드 내부의 this는 호출한 객체를 참조합니다.
const user = { name: '홍길동', greet: function () { console.log(this); }};user.greet(); // 출력: { name: '홍길동', greet: [Function: greet] }
생성자 함수에서의 호출
생성자 함수는 객체 생성을 위해 사용되며, new 키워드와 함께 사용됩니다.
1) 생성자 함수란?
생성자 함수는 새로운 객체를 생성하는 데 사용됩니다.
function User(name, age) { this.name = name; this.age = age; }const user1 = new User('홍길동', 25);const user2 = new User('김철수', 30);console.log(user1); // User { name: '홍길동', age: 25 }console.log(user2); // User { name: '김철수', age: 30 }
2) 생성자 함수 내부에서의 this
생성자 함수 내부에서 this는 새로 생성된 객체를 참조합니다.
function User(name, age) { this.name = name; this.age = age; }const user1 = new User('홍길동', 25);console.log(user1.name); // 홍길동
콜백 함수에서의 호출
콜백 함수에서 this는 호출된 방식에 따라 달라집니다.
1) 콜백 함수란?
콜백 함수는 다른 함수에 인수로 전달되어 실행되는 함수입니다.
function greet(callback) { console.log("안녕하세요!"); callback();}function sayGoodbye() { console.log("안녕히 가세요!");}greet(sayGoodbye); // 출력: 안녕하세요! 안녕히 가세요!
2) 콜백 함수 내부에서의 this
콜백 함수의 this는 상황에 따라 달라지며, 일반적으로 전역 객체를 가리킵니다.
const user = { name: '홍길동', greet: function () { console.log(`안녕하세요, ${this.name}입니다.`); }};function executeCallback(callback) { callback();}executeCallback(user.greet); // 출력: 안녕하세요, undefined입니다.
this를 고정시키는 방법
this를 고정시키는 방법으로는 bind, call, apply 메서드가 있습니다.
1) bind 메서드
bind 메서드는 함수의 this 값을 고정시킵니다.
const user = { name: '홍길동', greet: function () { console.log(`안녕하세요, ${this.name}입니다.`); }};const boundGreet = user.greet.bind(user);boundGreet(); // 안녕하세요, 홍길동입니다.
2) call, apply 메서드
call과 apply는 함수를 즉시 실행하면서 this를 설정합니다. call은 개별 인수로, apply는 배열 형태로 인수를 전달합니다.
user.greet.call({ name: '김철수' }, '안녕하세요'); // 안녕하세요, 김철수입니다.user.greet.apply({ name: '이영희' }, ['반갑습니다']); // 반갑습니다, 이영희입니다.
마치며
this는 상황에 따라 참조 대상을 바꾸며, 이를 잘 활용하면 효율적인 코드를 작성할 수 있습니다. 이번 글을 통해 다양한 호출 방식에서 this를 잘 다루는 개발자가 되기를 바랍니다.
<참고>
해당 기사는 GPT를 이용하여 요약한 내용입니다.