코딩 스쿨 JavaScript

언어선택 : HTMLCSSJAVAJAVASCRIPTMYSQLSQL PHP
▶ JavaScript Tutorial
JavaScript HOME
JavaScript Introduction
JavaScript Where To
JavaScript Output
JavaScript Statements
JavaScript Syntax
JavaScript Comments
JavaScript Variables
JavaScript Let
JavaScript Const
JavaScript Operators
JavaScript Arithmetic
JavaScript Assignment
JavaScript Data Types
JavaScript Functions
JavaScript Objects
JavaScript Object Properties
JavaScript Object Methods
JavaScript Object Display
JavaScript Object Constructors
JavaScript Events
JavaScript Strings
JavaScript String Methods
JavaScript String Search
JavaScript String Templates
JavaScript Numbers
JavaScript BigInt
JavaScript Number Methods
JavaScript Number Properties
JavaScript Arrays
JavaScript Array Methods
JavaScript Array Search
JavaScript Array Sort
JavaScript Array Iteration
JavaScript Array Const
JavaScript Dates
JavaScript Date Formats
JavaScript Date Get Methods
JavaScript Date Set Methods
JavaScript Math
JavaScript Random
JavaScript Booleans
JavaScript Comparisons
JavaScript If Else
JavaScript Switch
JavaScript Loop For
JavaScript Loop For In
JavaScript Loop For Of
JavaScript Loop While
JavaScript Break
JavaScript Iterables
JavaScript Sets
JavaScript Set Methods
JavaScript Maps
JavaScript Map Methods
JavaScript Typeof
JavaScript Type Conversion
JavaScript Destructuring
JavaScript Bitwise
JavaScript RegExp
JavaScript Precedence
JavaScript Errors
JavaScript Scope
JavaScript Hoisting
JavaScript Strict Mode
JavaScript this Keyword
JavaScript Arrow Function
JavaScript Classes
JavaScript Modules
JavaScript JavaScriptON
JavaScript Debugging
JavaScript Style Guide
JavaScript Best Practices
JavaScript Mistakes
JavaScript Performance
JavaScript Reserved Words

JavaScript this Keyword

JavaScript this Keyword: 동작 원리와 다양한 사용 사례

JavaScript의 this 키워드는 함수가 호출되는 **맥락(context)**에 따라 달라지는 참조를 나타냅니다. 이는 현재 실행 중인 코드에서 객체의 속성이나 메서드에 접근할 수 있도록 도와줍니다. **this**는 동적으로 결정되며, 함수가 어떻게 호출되었는지에 따라 참조하는 대상이 달라집니다.

이 가이드는 JavaScript에서 this 키워드가 어떻게 동작하는지, 그리고 다양한 상황에서 **this**가 가리키는 객체가 무엇인지 설명합니다.


1. this의 기본 개념

JavaScript에서 **this**는 함수가 호출될 때 자동으로 생성되는 특수한 객체를 참조합니다. this는 함수가 어떤 방식으로 호출되었는지에 따라 다르게 동작하며, 전역 객체, 객체 메서드, 생성자 함수 등에서 각기 다른 대상을 참조할 수 있습니다.

1.1. 기본적인 this 사용

function showThis() {
    console.log(this);
}
showThis();  // 출력: 전역 객체 (브라우저 환경에서는 window)


2. this의 동작 방식

this가 가리키는 대상은 호출 방법에 따라 다르게 동작합니다. 주요 동작 방식을 살펴보겠습니다.

2.1. 전역 스코프에서의 this

전역 스코프에서 **this**는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체, Node.js에서는 global 객체를 참조합니다.

console.log(this);  // 출력: window (브라우저 환경)

2.2. 객체 메서드에서의 this

객체의 메서드 내부에서 **this**는 해당 메서드를 소유한 객체를 참조합니다.

const person = {
    name: "Alice",
    greet: function() {
        console.log(this.name);  // this는 person 객체를 참조
    }
};

person.greet();  // 출력: Alice

여기서 **this.name**은 person 객체name 속성에 접근합니다.

2.3. 생성자 함수에서의 this

생성자 함수에서 **this**는 새로 생성되는 객체를 가리킵니다. 생성자 함수는 new 키워드를 사용해 객체를 만들 때 호출됩니다.

function Person(name) {
    this.name = name;
}

const alice = new Person("Alice");
console.log(alice.name);  // 출력: Alice

new 키워드로 생성된 객체 내부에서 this는 새로 생성된 객체 **alice**를 참조합니다.

2.4. call(), apply(), bind()를 사용한 this 설정

call(), apply(), bind() 메서드를 사용하면 this를 수동으로 설정할 수 있습니다. 이를 통해 함수가 호출될 때 this가 참조할 객체를 지정할 수 있습니다.

2.4.1. call() 사용

call() 메서드는 함수를 호출할 때 this를 명시적으로 설정합니다.

function greet() {
    console.log(`Hello, ${this.name}`);
}

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

2.4.2. apply() 사용

apply()call()과 비슷하지만, 매개변수를 배열로 전달한다는 점이 다릅니다.

function greet(greeting) {
    console.log(`${greeting}, ${this.name}`);
}

const person = { name: "Bob" };
greet.apply(person, ["Hi"]);  // 출력: Hi, Bob

2.4.3. bind() 사용

bind()는 함수의 this를 영구적으로 설정한 새 함수를 반환합니다. 즉, 호출하지 않고 새로운 함수를 반환한 후, 나중에 그 함수를 호출할 수 있습니다.

function greet() {
    console.log(`Hello, ${this.name}`);
}

const person = { name: "Charlie" };
const boundGreet = greet.bind(person);
boundGreet();  // 출력: Hello, Charlie


3. 함수 내부의 this

3.1. 일반 함수에서의 this

일반 함수에서 **this**는 전역 객체를 참조합니다. 이 경우 this는 전역 객체인 window(브라우저 환경)나 global(Node.js 환경)을 가리킵니다.

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

showThis();  // 출력: window (브라우저 환경)

3.2. 화살표 함수에서의 this

화살표 함수에서는 this가 자신을 감싸고 있는 스코프의 this를 상속합니다. 즉, 화살표 함수 내부의 this는 외부 함수나 객체의 this와 동일합니다.

const person = {
    name: "Daisy",
    greet: function() {
        const innerFunc = () => {
            console.log(this.name);  // this는 외부 함수의 this를 상속
        };
        innerFunc();
    }
};

person.greet();  // 출력: Daisy

위 예시에서 화살표 함수는 **person 객체의 this**를 상속받아 this.name이 **person.name**을 참조하게 됩니다.


4. 클래스에서의 this

JavaScript의 클래스프로토타입 기반 객체지향 프로그래밍을 단순화한 문법입니다. 클래스 내부의 메서드에서 **this**는 해당 클래스로 생성된 인스턴스를 참조합니다.

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

    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

const person = new Person("Eve");
person.greet();  // 출력: Hello, Eve

위 예시에서 클래스의 메서드 내부의 **this**는 클래스 인스턴스person을 참조합니다.


5. 이벤트 핸들러에서의 this

HTML 이벤트 핸들러 내부의 **this**는 이벤트가 발생한 DOM 요소를 가리킵니다.

<button id="myButton">Click me</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
    console.log(this);  // 출력: 클릭된 버튼 요소
});
</script>

이벤트 핸들러의 일반 함수에서 this는 이벤트가 발생한 DOM 요소(button)를 참조합니다.

5.1. 화살표 함수와 이벤트 핸들러

화살표 함수 내부에서 **this**는 외부 스코프를 참조하기 때문에, DOM 요소가 아닌 **상위 스코프의 this**를 참조합니다.

<button id="myButton">Click me</button>

<script>
document.getElementById("myButton").addEventListener("click", () => {
    console.log(this);  // 출력: 전역 객체 (브라우저 환경에서는 window)
});
</script>


6. this 사용 시 주의사항

  • 화살표 함수this를 상속하므로, 일반 함수처럼 this동적으로 바인딩하지 않습니다. 화살표 함수 내부에서 this가 필요하면, 상위 스코프에서 참조를 가져옵니다.
  • call(), apply(), **bind()*를 통해 this명시적으로 설정할 수 있습니다.
  • 이벤트 핸들러에서 this이벤트가 발생한 요소를 가리키지만, 화살표 함수를 사용하면 주의가 필요합니다.

요약

  • *this*는 함수 호출 방식에 따라 다르게 동작하며, 일반적으로 객체나 함수의 실행 문맥을 참조합니다.
  • 전역 스코프에서 this전역 객체를 참조하며, 메서드에서는 메서드를 호출한 객체를 참조합니다.
  • 화살표 함수에서는 **외부 스코프의 this*를 상속하며, 생성자 함수에서는 새로 생성된 객체를 가리킵니다.
  • call(), **apply()
  • *, **bind()*를 사용하면 함수 호출 시 this를 명시적으로 설정할 수 있습니다.
  • 이벤트 핸들러에서는 this이벤트가 발생한 DOM 요소를 참조합니다.

this 키워드의 동작을 이해하면 JavaScript 코드의 가독성유연성을 높이고, 함수의 실행 문맥을 정확하게 제어할 수 있습니다.


copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com