이젠 공부해야겠지...? "this"

this를 공부하기 위한 선수 지식

• 일반함수와 메서드의 차이

---

 

this는 JavaScript에서 조금 복잡할 수 있지만, 기본적으로 어떤 함수나 메서드가 작동하는 현재 객체를 참조한다고 생각하면 됩니다.

this가 무엇인가요?

this는 현재 실행 중인 컨텍스트에 있는 객체를 가리키는 키워드입니다. 예를 들어, 객체 내부의 함수(메서드라고도 함)에서 this를 사용하면, 그 함수가 속해 있는 객체를 가리키게 됩니다.

this 예제

let myObject = {
  name: 'ChatGPT',
  greet: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

myObject.greet(); // 출력: "Hello, ChatGPT!"

이 예제에느 myObject라는 객체가 있고, greet이라는 함수(메서드)가 있습니다. greet 메서드 안에서 this.name을 사용하면, this는 greet 메서드를 포함하고 있는 myObject를 가리키기 때문에, myObject의 name 속성에 접근하게 됩니다.

왜 this를 사용하나요?

this 키워드를 사용하는 이유는 JavaScript에서 매우 중요한 부분을 차지해요. this는 현재 실행 컨텍스트의 객체를 가리키며, 객체 지향 프로그래밍에서 객체의 메서드 내부에서 그 객체 자신에 접근할 수 있게 해 줍니다.

1. 코드의 재사용성 향상

this를 사용하면 같은 메서드나 함수를 다양한 객체에 대해 재사용할 수 있습니다. 이는 코드의 유연성을 높이고 중복을 줄여줍니다. 예를 들어, 여러 객체가 비슷한 구조를 가지고 있지만 다른 값을 가질 때, this를 사용하여 각 객체의 특정 값을 참조할 수 있습니다.

2. 명확한 참조 제공

객체 내부에서 this를 사용하면, 그 객체의 속성이나 메서드를 명확하게 참조할 수 있습니다. 이는 특히 여러 레벨의 중첩 함수가 있거나 외부 스코프와 내부 스코프에서 동일한 이름의 변수나 함수를 사용할 때 유용합니다. this를 사용하면 현재 객체의 속성이나 메서드임을 분명히 할 수 있어요.

3. 동적 컨텍스트의 관리

JavaScript의 함수는 다양한 방식으로 호출될 수 있으며, this는 함수가 호출되는 방식에 따라 동적으로 값이 결정됩니다. 예를 들어, .call(), .apply(), .bind() 메서드를 사용하면 함수 호출 시 this의 값을 명시적으로 설정할 수 있습니다. 이러한 특성은 함수형 프로그래밍과 객체 지향 프로그래밍의 장점을 결합할 때 매우 강력합니다.

4. 생성자 함수에서의 사용

this는 생성자 함수에서 새로 생성되는 객체 인스턴스에 속성을 추가할 때 사용됩니다. 생성자 함수 내부에서 this를 사용하여 새 객체에 속성이나 메서드를 할당하면, 그 함수를 사용하여 생성된 모든 객체에 이러한 속성이나 메서드가 포함됩니다.

5. 프로토타입과 메서드 체이닝

this는 객체의 프로토타입 메서드 내에서 현재 객체에 접근할 수 있게 해 주며, 이는 메서드 체이닝 패턴을 가능하게 합니다. 메서드 체이닝은 여러 메서드 호출을 연결하여 간결하고 읽기 쉬운 코드를 작성할 수 있게 해 줍니다.

this 주의점

this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다. 예를 들어, 일반 함수로서 호출될 때와 메서드로서 호출될 때 this가 가리키는 대상이 달라질 수 있습니다.

this가 일반함수와 메서드로서 호출될 때 차이점

일반 함수와 메서드로서 호출될 때의 주요 차이점은 this 키워드가 가리키는 대상과 함수가 실행되는 컨텍스트에 있어. 이 차이를 이해하려면, 먼저 this가 함수나 메서드 내에서 어떻게 작동하는지 알아야 합니다.

일반 함수에서의 this

• 전역 컨텍스트: 일반 함수에서 this는 기본적으로 전역 객체를 가리키게 됩니다. 웹 브라우저에서는 window 객체가 전역 객체가 되며, Node.js에서는 global 객체가 그 역할을 합니다.

엄격 모드: JavaScript에서 엄격 모드('use strict')를 사용하면, 일반 함수에서의 this는 undefined가 될 수 있어. 엄격 모드는 this가 기본적으로 전역 객체를 가리키는 것을 방지하기 위해 도입됩니다.

예시:

function showThis() { 
	console.log(this); 
} 
showThis(); // 웹 브라우저에서는 window를 출력, 엄격 모드에서는 undefined 출력

 

메서드로서 호출될 때의 this

• 객체 컨텍스트: 메서드로서 호출될 때, this는 그 메서드를 호출한 객체를 가리키게 됩니다. 이는 메서드가 해당 객체의 상태나 속성에 접근할 수 있게 해 줍니다.

예시:

let myObject = { 
    name: 'ChatGPT', 
    showThis: function() { 
        console.log(this); 
        } 
};

myObject.showThis(); // myObject를 출력, 여기서 this는 myObject를 가리킴

주요 차이점

• this의 대상: 일반 함수에서 this는 전역 컨텍스트(또는 엄격 모드에서는 undefined)를 가리키지만, 메서드로서 호출될 때 this는 해당 메서드를 호출한 객체를 가리킨다.
• 함수의 사용 방식:
  • 메서드는 객체의 상태를 조작하거나 객체와 관련된 작업을 수행하는 데 사용되며, 이 경우 this를 통해 객체에 접근할 수 있습니다.
  • 일반 함수는 독립적인 로직을 수행하며, 특정 객체에 속하지 않아. → this 를 사용하면 전역 컨텍스트를 가리키는 이유!

이 차이점들은 함수가 어떻게 호출되고 사용되는지에 따라 다른 결과와 동작을 초래합니다. JavaScript에서는 이러한 차이점들을 이해하고 올바르게 활용하는 것이 중요합니다

 

특히 객체 지향 프로그래밍을 할 때 더 중요하다!

Q. 함수도 객체니까 함수안의 함수속 this는 바깥쪽 함수를 바라보는건가요?

JavaScript에서 함수는 실제로 객체의 한 종류로 취급되지만, 함수 내부에서 다른 함수를 호출할 때 this의 작동 방식은 직관적이지 않을 수 있습니다. 함수 내부에서 this를 사용하면, 그 this 값은 외부 함수의 this 값을 자동으로 상속하지 않습니다. 대신, this의 값은 함수가 어떻게 호출되었는지에 따라 결정됩니다.

일반 함수의 경우

function outerFunction() {
  console.log('외부 함수의 this:', this);

  function innerFunction() {
    console.log('내부 함수의 this:', this);
  }

  innerFunction();
}

outerFunction();

 

둘 모두 일반 함수로 호출되기 때문에 전역 객체를 가리킨다.

화살표 함수를 사용한 경우.

화살표 함수는 자신을 포함하고 있는 외부 함수의 this 값을 “상속”받습니다. 그래서 내부 함수를 화살표 함수로 작성하면 외부 함수의 this에 접근할 수 있습니다.

function outerFunction() {
  console.log('외부 함수의 this:', this);

  const innerFunction = () => {
    console.log('내부 함수의 this:', this);
  }

  innerFunction();
}

outerFunction();

• 이 경우 innerFunction은 outerFunction의 this 값을 상속받는다.

내부 함수에서 외부 함수의 this 컨텍스트를 접근하는 방법

1. 화살표 함수 사용하기

위쪽 예시처럼 내부함수를 화살표함수를 선언하면 화살표 함수는 자신을 포함한 외부 함수의 this값을 “상속” 받으므로 외부 함수의 this에 접근 가능하다.

2. 변수에 this 할당하기

함수 내부에서 외부 함수의 this를 변수에 할당하고, 내부 함수에서 이 변수를 사용할 수 있습니다.

function outerFunction() {
  const self = this; // 외부 함수의 this를 self 변수에 할당

  function innerFunction() {
    console.log('내부 함수의 this:', self); // 외부 함수의 this에 접근
  }

  innerFunction();
}

outerFunction();

bind() 사용하기

bind() 함수를 사용하여 내부 함수의 this를 외부 함수의 this로 명시적으로 설정할 수 있습니다.

function outerFunction() {
  function innerFunction() {
    console.log('내부 함수의 this:', this);
  }

  const boundInnerFunction = innerFunction.bind(this);
  boundInnerFunction();
}

outerFunction();