안녕하세요! 오랜만에 블로그 글을 쓰네요!
오늘은 자바스크립트 this 키워드에 대해서 알아보도록 하겠습니다!
Java나 C# 같은 객체지향 언어를 써본 분들에게는 this 키워드가 익숙할 겁니다.
다만 JavaScript에서는 이 this가 Java나 C#과는 조금 다르게 동작하니 주의가 필요합니다.
🦁 Java에서의 this
Java에서 this는 항상 인스턴스(객체) 자신을 가리키는 참조 변수입니다.
즉, this는 객체 그 자체를 의미합니다.
주로 메서드 매개변수 이름과 객체의 멤버 변수 이름이 같을 때 둘을 구분하기 위해 this를 사용합니다.
예를 들어,
class Person {
String name;
Person(String name) {
this.name = name; // this.name은 객체의 멤버 변수, name은 매개변수
}
}여기서 this.name은 객체에 저장된 name을 뜻하고, 오른쪽의 name은 메서드로 들어온 입력값입니다.
✅ Java에서는 this가 항상 '그 객체 자신'을 가리킵니다. 변하지 않습니다.
🦁 JavaScript에서의 this
JavaScript에서도 this라는 키워드를 사용하지만, Java와 다르게 this가 가리키는 객체가 상황마다 달라질 수 있습니다.
즉, 함수가 어떻게 호출되었느냐에 따라 this가 바뀌는 특징이 있습니다.
예를 들어,
- 일반 함수로 호출하면 this는 전역 객체(window)를 가리키고,
- 메서드로 호출하면 this는 메서드를 호출한 객체를 가리키고,
- new를 사용해 호출하면 this는 새로 만들어진 객체를 가리킵니다.
function sayName() {
console.log(this.name);
}
const user = { name: "훈진", sayName };
user.sayName(); // '훈진'
const anotherSay = user.sayName;
anotherSay(); ✅ JavaScript의 this는 '누가, 어떻게 호출했는지'에 따라 유동적으로 바뀝니다.
🦁 함수 호출 방식과 this 바인딩
자바스크립트에서는 함수를 부를 때(호출할 때)마다 this가 누구를 가리킬지가 그때그때 정해집니다.
✅ 즉, 함수를 만들 때 this가 누구일지 정해지는 게 아니고, 함수를 부를 때 "누구처럼 행동할지"가 결정되는거죠
🦁 함수 호출 방식 4가지
- 함수 호출 :
그냥 함수()로 부름 - 메서드 호출 :
객체.함수()로 부름 - 생성자 함수 호출 :
new 함수()로 부름 - apply / call / bind 호출 :
this를 직접 골라서 부름
🦁 this는 무엇을 가리킬까?
this를 쉽게 말하면 "지금 누가 나를 불렀는지" 알려주는 단어입니다.
📍 함수를 부르면 this가 "부른 사람" 을 가리킵니다.
📍 this는 항상 "나를 호출한 객체" 를 가리킵니다.
🧍♂️ 사람 2명이 있다고 가정해봅시다
훈진 (이름: "훈진"), 소영 (이름: "소영")
이 둘 모두 "내 이름 말하기" 라는 같은 함수를 가지고 있다고 가정해볼게요.
function sayName() {
console.log(this.name);
}
// 각각의 사람 객체에 sayName 함수를 연결
const hunjin = {
name: "훈진",
sayName: sayName,
};
const soyoung = {
name: "소영",
sayName: sayName,
};
// 호출해봅니다
hunjin.sayName();
// "훈진" 출력
soyoung.sayName();
// "소영" 출력📌 왜 이렇게 되는 걸까요?
-
hunjin이
sayName()을 부르면,
👉 this는 hunjin을 가리킵니다. -
soyoung이
sayName()을 부르면,
👉 this는 soyoung을 가리킵니다.
✅ this는 항상 '나를 부른 객체'를 가리킵니다.
🚀 추가 예제
1️⃣ 그냥 함수만 부르면?
sayName();- 아무 객체도 없이 함수를 그냥 호출했습니다.
- 이 경우에는 this가
전역 객체(window)를 가리킵니다.
2️⃣ 특정 객체처럼 행동시키고 싶을 때? (call, apply)
sayName.call(soyoung);- call 메서드를 이용해
👉 "야, 소영처럼 행동해!" 라고 this를 강제로 지정했습니다. - this는
soyoung을 가리키게 됩니다.
🦁 call과 apply는 무엇일까?
call이랑 apply를 쉽게 설명하면,
"함수한테 '너, 이 사람처럼 행동해' 하고 강제로 시키는 방법"입니다.
자바스크립트에서 함수는 누가 부르느냐에 따라 this가 달라지지만,
call이나 apply를 쓰면 "야! 이번엔 저 사람처럼 행동해!"하고 this를 강제로 지정할 수 있습니다.
const person = {
name: "훈진",
sayHello: function() {
console.log("안녕, 나는 " + this.name);
}
};기본적으로 person.sayHello()를 호출하면
person.sayHello();
// 👉 "안녕, 나는 훈진"✅ this는 person을 가리키기 때문에 "훈진"이라고 출력됩니다.
🚀 call과 apply 사용하기
이제 다른 사람을 만들어봅시다.
const otherPerson = { name: "소영" };1️⃣ call 사용
person.sayHello.call(otherPerson);sayHello함수를 불러서this를otherPerson으로 바꿔줍니다.
안녕, 나는 소영✅ 훈진이 아니라 소영처럼 행동합니다!
2️⃣ apply 사용
person.sayHello.apply(otherPerson);이번엔 apply를 써서 똑같이 this를 otherPerson으로 바꿔줍니다.
안녕, 나는 소영✅ apply도 this를 소영으로 강제로 바꿔줍니다.
(이 예제에서는 인자가 없기 때문에 call과 apply의 차이가 보이지 않습니다.)
🧠 call과 apply의 차이 (인자가 있을 때)
차이는 "추가로 넘기는 인자"를 어떻게 처리하느냐입니다.
call은?
📍 첫 번째 인자: 누구처럼 행동할지(this)
📍 그 다음 인자부터: 함수에 하나하나 따로 전달
function introduce(greeting, hobby) {
console.log(`${greeting}, 나는 ${this.name}이고, 취미는 ${hobby}이야.`);
}
const person = { name: "훈진" };
introduce.call(person, "안녕", "코딩");
// 👉 "안녕, 나는 훈진이고, 취미는 코딩이야."apply는?
📍 첫 번째 인자: 누구처럼 행동할지(this)
📍 두 번째 인자: 배열에 담아서 전달
introduce.apply(person, ["안녕", "코딩"]);
// 👉 "안녕, 나는 훈진이고, 취미는 코딩이야."결과는 같지만,
✅ call은 인자들을 하나씩,
✅ apply는 배열 하나로 묶어서 넘긴다는 차이만 있습니다.
🦁 화살표 함수에서의 this
자바스크립트에서 화살표 함수(=>) 는 일반 함수와 다르게
this가 변하지 않고, 선언된 위치의 this를 고정해서 사용합니다.
let count = 0;
const myObj = {
count: 0,
visit: function () {
// ✅ 여기서 this는 myObj를 가리킨다.
this.count++;
const visit2 = () => {
// ✅ 화살표 함수는 상위 스코프(this)를 그대로 사용
this.count++;
};
visit2(); // 화살표 함수 호출
},
};
myObj.visit();
myObj.visit();
console.log("방문자수", myObj.count);
>> 방문자수 4📌 코드 설명
-
myObj.visit()를 호출하면
👉this는 myObj를 가리킨다. -
visit2()는 화살표 함수이기 때문에
👉 visit 메서드 안의 this(myObj) 를 그대로 가져온다. -
각각
this.count++가 두 번씩 실행된다.
👉 한 번 호출에 2씩 증가 → 두 번 호출하면 총 4
✅ 화살표 함수는 상위 스코프의 this를 그대로 따라간다.
🚀 만약 visit2를 일반 함수로 만들었다면?
const visit2 = function () {
this.count++;
};이렇게 하면 visit2() 안의 this는 전역 객체(window) 를 가리키게 되어 원래 의도대로 동작하지 않습니다.
너무 유익해요!