JS 지식_1. this란?

FE_지식 시리즈의 외전인 JS_지식 시리즈를 시작한다.

---

this?

많은 이들을 고통받게 하는 this 친구.

this 라는 뭐같은 친구를 뭐라고 정의하면 좋을까?

정의

사실 this 의 정의는 참 어렵지만, 다음과 같이 모호함의 끝을 달려보자.

this 란,

그냥 어떤 값이다.

?? 개 얼탱이 없다. 더 읽어보자.

어디서 쓰일까?

this 는 함수 내부에서 쓰인다.

함수 내부에서 쓰인다는 정보를 사용하여, 다음과 같이 정의를 구체화 할 수 있겠다.

😏 this의 최종 정의

this 란,

함수 내부에서 쓰이는데, 그 함수가 어떻게 호출되었는지에 따라 가변적으로 가지는 어떤 값

이라고 볼 수 있겠습니다.

---

this 사용 예제

this 를 사용하는 예로는 크게 4가지를 들어보겠습니다.

1. 일반 함수 내 호출

그냥 막 호출해보자.

function func(){
    if(window === this){
        console.log("window === this");
    }
}

func(); // window === this 출력.

다음과 같은 특징을 알 수 있다.

• 일반 함수내에서 this 를 호출하면 이는 전역객체, 즉 window 이다.

결론) 일반 함수내에서 this 를 호출하면 이는 window 를 가르킨다.

조금은 마음에 안들어도, 2번을 보시면 그래도 빠르게 이해할 수 있을 겁니다.

---

2. 메소드 내 호출

먼저, 메소드가 무엇일까?

메소드란, 객체 내부에 존재하는 함수 이다.

가령, 아래 코드에서 sayHi 함수가 메소드이다.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  console.log("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

혹은, 아래와 같이 생긴 함수, speak 함수도 메소드라고 할 수 있겠다.

const person = {
  speak: function() {
    console.log("호에..?")
  },
}
person.speak() // 호에..?

그렇다면, 저렇게 생긴 함수, 메소드 안에서 this 를 불러보자.

메소드 내부 this 호출

const test = {
    check : function(){
        if(test === this){
            console.log("Same.", this);
        }
    }
}
test.check(); // Same. {check: f}

다음과 같은 사실을 알 수 있다.

• 객체의 소속인 메소드의 this는 그 객체를 가르킨다.

• 즉, 위 예제에서는 this 는 test 객체 그 자체를 가르킨다.

---

중간 정리

정리를 해보면,

1. 일반 함수 내부 에선 this 가 window 를 가르키며,

2. 메소드 내부 에서는 메소드가 소속되어 있는 객체를 가르킨다.

❗ 하지만 생각해보면, 일반 함수도 전역객체 window 의 메소드입니다.

즉, 1번은 다음과 같이 생각할 수 있는 것이죠.

function func(){
    if(window === this){
        console.log("window === this");
    }
}

window.func(); // window === this 출력.

마지막 줄의 window.func() 로 호출하였음을 확인 할 수 있습니다.

결국 func 함수도 window 의 메소드라서, func 내부 this 가 window 를 가르킵니다.

결국, 일반함수 내부 케이스, 메소드 내부 케이스가 같은 맥락입니다.

---

3. 생성자 함수 내 호출

생성자는 new 로 객체를 만들어 사용하는 방식입니다.

🎈 코드와 주석을 참고해주세요.

let check = null; // 이 변수와, 
 
function generalFunc(){ // 이 함수로 this를 판별해 볼 것입니다.
    check = this;
}

// 1. 일반 함수 확인.

const temp = generalFunc();
// 윗 줄을 수행하며 check 변수에는 일반함수 내에서 호출한 this값이 들어깁니다.

if(check === window){
    console.log('window 다!'); // window 다! 출력.
}

// 2. 생성자 함수 확인.
 
const constructorObj = new generalFunc();
// new 로 생성자 호출.

if(check === constructorObj){
    console.log('생성자 객체다!'); // this는 새롭게 생성한 객체를 가르킨다.
}

다음과 같은 사실을 알 수 있습니다.

• 생성자 함수 내의 this 는 new 를 통해 만들어진 새로운 변수가 됩니다.

• 참고) 객체지향 언어에서 일반적으로 객체를 만들 때 쓰이는 문법과 동일합니다.

이렇게도 정리 할 수 있겠네요.

1. 생성자는 빈 객체를 만듭니다.
2. 그 빈 객체 안에서 this 에 만들어진 객체를 할당한다.

---

최종 정리

this 는, 다음과 같이 정리를 해볼 수 있어요.

1. 일반 함수 내부 / 메소드 내부에서 쓰였을 때

   • this 값: 현재 위치에 있는 함수를 호출한 객체

     • 일반 함수: this는 window
     • 메소드: this는 메소드를 포함하는 객체

2. 생성자 내부에서 쓰였을 때

   • this 값: new 로 만들어진 새로운 변수

---

아직 개어려운 화살표함수와 this, 그리고 bind, apply, call이 남았음.

서터레스!

잘못된 내용이 있다면 댓글로 알려주세요 :)