이 글을 쓰는 지금도 this를 완벽하게 이해하지 못했다는 이야기

 

🔔 서론

프로그래머스 데브코스 Javascript 강의를 수강하면서 과제를 진행하던 중 나를 미치게 만드는 요소가 크게 두 가지 있었는데

첫 번째가 장시간 앉아서 강의를 듣다보니 생긴 허리통증 이었다면, 두 번째는 this 였다.

그런의미로 오늘은 this를 공부해보자.

 

🔔 this란?

먼저 mdn 공식문서에서 this를 뭐라고 설명하는지 알아보자

그만 알아보자..

🤔 흠... 그렇구만.. 흐음..

이라는 생각만 들게 만드는 문장들이다. this의 특징들을 살펴보면서 위의 문장을 제대로 이해해보도록 하자.

---

📌 this

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
• this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서 의미가 있다.
• this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수에서 사용할 때로 나뉜다.

 

🤔 바인딩?

• 식별자와 값을 연결하는 과정을 뜻한다.
• 예를들어 변수선언은 변수 이름과 메모리 공간의 주소를 바인딩(결합)하는 것이다.
• this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

 

📌 전역 스코프의 this

this는 자신이 속한 객체 즉, 자신에게 가장 가까운 상위 객체를 가리킨다.

❗️ 브라우저에서 전역 스코프의 this

브라우저에서 this를 출력하면 Window 객체를 가리키는 모습을 볼 수 있다. 브라우저의 최상위 스코프는 Window인걸 알 수 있다.

 

❗️ Node.js에서 전역스코프의 this

node에서는 어떨까?

console.log(this)	// {}

왠 빈 객체가 튀어 나오는데

node에서의 this 즉, 최상위 스코프의 this의 정체는 module.exports로 파일을 모듈로 사용할 수 있게 해주는 객체이다.

이 때 exports와 module.exports는 같은 객체를 가리키고, 둘다 최상의 스코프의 this와 비교연산을 했을 때 true를 반환한다

console.log(this === exports);	// true
console.log(this === module.exports);	// true

 

📌 함수 스코프의 this

• 함수는 크게  전역에 선언된 일반 함수와 객체안의 메소드로 나뉜다
• this는 현재 함수를 실행하고 있는 객체를 참조한다
• 엄격모드에서 일반 함수의 this는 undefinded가 바인딩 된다

 

---

✏️ this 사용 예시

❗️ 일반 함수에서의 this

일반 함수에서의 this는 node.js 내장 객체인 global을 가리킨다.

function test() {
  return this;
}

console.log(test()); 	// Object [global] {...}

 

또한, new 연산자를 사용해 생성자 함수방식으로 인스턴스를 생성한 경우 생성자 함수가 빈 객체를 만들고 this는 이 빈 객체를 가리킨다.

function TestFunc() {
  this.text = 'hello';
  return this;
}

const text = new TestFunc();
console.log(text);	// TestFunc { text: 'hello' }

 

❗️ 객체의 메서드에서의 this

객체의 메서드에서의 this는 메서드의 소속된 객체를 참조한다

const testObj = {
  text: 'hello',
  sayText() {
    console.log(this.text)
  }
}

testObj.sayText() // 'hello'

객체의 메서드에서의 일반함수는 전역 객체를 참조한다

const testObj = {
  text: 'hello',
  sayText() {
    function testFunc() {
      console.log(this);
    }
    testFunc();
  }
}

testObj.sayText(); // Object [global] {...}

 

❗️ 화살표 함수에서의 this

화살표 함수 안에서의 this는 언제나 상위 스코프의 this를 가리킨다.

const testFunc = () => {
  return this;
}
console.log(testFunc());  // {}

 

const testObj = {
  text: 'hello',
  sayText() {
    const testFunc = () => {
      console.log(this);
    }
    testFunc();
  }
}

testObj.sayText(); // { text: 'hello', sayText: [Function: sayText] }

 

---

💊 결론

자 이렇게 특징들과 사용 예시들을 한번 쭉 정리 해봤으니 다시 mdn 공식문서의 설명을 읽어 보자

 

🧐 아하! this는 어떤 위치에 있고, 어디서 호출하고, 어떤 함수에 있냐에 따라 참조 값이 달라지니까 사용할 때 주의를 해야겠구나!!

이해했어! (이해못함)