JavaScript 기초 <10. this는 왜 이렇게 헷갈릴까? (실제 사례로 이해하기)>

자바스크립트 JavaScript

10. this는 왜 이렇게 헷갈릴까? (실제 사례로 이해하기) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. this란?

JavaScript에서 this는 현재 실행 중인 코드의 실행 문맥(Execution Context)을 가리키는 키워드입니다.
즉, 함수가 어떻게 호출되었느냐에 따라 this의 값이 달라집니다.

📌 this는 실행 방식에 따라 값이 다르게 결정되므로, 정확한 개념을 이해하는 것이 중요함!

---

 

2. this의 기본 원칙

1. 전역 컨텍스트(Global Context)
   • 전역에서 this를 호출하면 window(브라우저) 또는 global(Node.js)을 가리킵니다.

console.log(this); // 브라우저에서는 window 객체, Node.js에서는 global 객체

1. 객체의 메서드(Method)에서 this
   • 객체의 메서드 내부에서 this는 해당 객체를 가리킵니다.

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

obj.greet(); // "Alice"

📌 객체의 메서드에서 this는 해당 객체를 가리킴!

---

 

3. this가 헷갈리는 이유 – 호출 방식에 따라 달라지는 값

JavaScript에서는 같은 this라도 호출하는 방식에 따라 값이 달라질 수 있습니다.
대표적인 예제를 보면서 이해해 보겠습니다.

✅ 일반 함수 호출 (기본 this)

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

showThis(); // 브라우저: window, Node.js: global

✅ 객체의 메서드 호출

const person = {
    name: "Alice",
    sayName: function () {
        console.log(this.name);
    }
};

person.sayName(); // "Alice"

✅ 객체에서 내부 함수 호출 (this가 달라지는 경우)

const person = {
    name: "Alice",
    sayName: function () {
        function innerFunction() {
            console.log(this.name);
        }
        innerFunction();
    }
};

person.sayName(); // undefined (전역 `this`를 가리킴)

📌 내부 함수에서 this는 기본적으로 window 또는 global을 가리킴!

---

✅ 여기까지 this의 기본 원칙과 헷갈리는 이유를 배웠습니다!
👉 "그렇다면, 화살표 함수에서는 this가 어떻게 다르게 동작할까?"
✅ 2부에서 화살표 함수, call/apply/bind, 클래스에서의 this까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 화살표 함수에서 this의 동작

화살표 함수는 일반 함수와 다르게 자신만의 this를 생성하지 않고, 상위 스코프의 this를 상속합니다.

✅ 화살표 함수와 일반 함수 비교

const obj = {
    name: "Alice",
    normalFunc: function () {
        console.log(this.name);
    },
    arrowFunc: () => {
        console.log(this.name);
    }
};

obj.normalFunc(); // "Alice"
obj.arrowFunc(); // undefined (화살표 함수는 `this`를 바인딩하지 않음)

📌 화살표 함수는 this를 바인딩하지 않으므로, 객체 내부에서 사용하면 주의해야 함!

---

 

2. call, apply, bind로 this 변경하기

때때로 this의 값을 명확하게 설정해야 하는 경우가 있습니다.
이를 위해 call(), apply(), bind() 메서드를 사용할 수 있습니다.

✅ 1) call() – 즉시 실행하면서 this 변경

function introduce() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
}

const user = { name: "Alice" };
introduce.call(user); // "안녕하세요, 저는 Alice입니다."

✅ 2) apply() – call()과 비슷하지만, 배열로 인자를 전달

function introduce(age, city) {
    console.log(`안녕하세요, 저는 ${this.name}, 나이는 ${age}, 사는 곳은 ${city}입니다.`);
}

introduce.apply(user, [25, "Seoul"]); // "안녕하세요, 저는 Alice, 나이는 25, 사는 곳은 Seoul입니다."

✅ 3) bind() – this를 영구적으로 변경하여 새로운 함수 반환

const boundFunc = introduce.bind(user);
boundFunc(); // "안녕하세요, 저는 Alice입니다."

📌 call()과 apply()는 즉시 실행, bind()는 새로운 함수를 반환함!

---

 

3. 클래스(Class)와 this

클래스 내부에서 this는 생성된 인스턴스를 가리킵니다.

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
}

const alice = new Person("Alice");
alice.sayHello(); // "안녕하세요, 저는 Alice입니다."

📌 클래스 내부에서 this는 해당 인스턴스를 가리킴!

---

 

✅ 지금까지 this의 동작 원리, 화살표 함수, call/apply/bind, 클래스에서의 this를 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 객체(Object)와 프로토타입 개념은 어떻게 동작할까?"
✅ 다음 회차에서 JavaScript 객체의 구조와 프로토타입 상속을 깊이 있게 배워봅시다! 🚀