[JavaScript] this란 무엇일까?

개념

this란 객체에서 빼놓을 수 없는 속성이라고 할 수 있을 정도로 중요한 개념이다.

하지만, 중요한 만큼 헷갈리는 부분도 많다. 우선 쉽게 말하자면 this는 코딩하는 그 순간에는 당장 의미가 없는 아이지만, 호출당하는 순간 그 의미가 발하는 게 this이다. 호출당한 this는 호출당한 객체 그 자신으로 변신하며 그 객체 안의 키 값을 불러오는 역할을 한다.

 

this는 쓰면 유용한 아이지만, 그렇다고 무작정 쓰는 아이도 아니다.

그렇다면 this는 어떨 때 어떤 방식으로 쓰는 게 맞을까? 아래의 4가지 방식만 기억하면 된다.

 

일반 함수 방식

function hello(){
  console.log(this);
}
hello(); // window

객체가 아닌 일반적인 함수 안에 this를 사용하게 되면, this는 window를 의미하게 된다.

 

점(.) 방식

let kim = {
  age : 30,
  hello : function (){
    console.log(this.age);
  }
}
kim.hello(); // 30

보통 this는 이런 식으로 많이 사용한다. kim 객체 안에 hello()를 호출한다고 하면, hello()가 실행되면서 this.age를 찾게 된다. 여기서 this는 호출한 kim 객체가 되기 때문에 kim 객체 안에 있는 age : 30이 값이 된다.

이 구조를 쉽게 생각하면 이렇다. kim.hello()는 "kim에 있는 hello()를 호출할게" -> "hello()에는 console.log(this.age)를 수행하게 돼있어" -> "근데 this.age는 뭐지?" -> this가 kim으로 변신함 -> "아! kim.age를 가져오면 되겠구나!"

 

함수 메서드 사용

function hello(){
  console.log(this.age)
}

let kim = {
  age : 20
}

let lee = {
  age : 25
}

hello.call(kim); // 20
hello.apply(lee); // 25
let bar = hello.bind(lee);
bar(); // 25

점(.) 방식에서는 객체 안에 함수가 있어서 this로 자기 자신을 불러올 수 있었다.

반대로 객체 안에 함수가 있는 것이 아닌 서로 분리되었을 때는 함수 메소드 call, apply, bind를 사용하면 된다.

파라미터에 this안에 들어갈 객체 이름을 넣어주면 되는데, call, apply, bind 이 3가지의 차이점은 뭘까?

 

call()은 call(kim, 1, 2, 3, 4, 5) 이런 식으로 첫 번째는 무조건 this로 받아올 객체명, 나머지는 모두 함수 인자를 뜻한다.

apply()는 apply(kim, [1, 2, 3, 4, 5]) 파라미터 안에 최대 2개의 값을 입력해야 하며, 함수 인자를 [배열]로 묶어준다.

bind()는 위의 call이나 apply처럼 바로 실행되지 않기 때문에, 먼저 선언부터 해줘야 하며 나머지는 apply와 같다.

 

이 3가지는 this를 불러올 때 쓰이는 메소드 함수이며, 외부 객체를 불러올 때 사용하면 좋다.

 

new 생성자 함수

function Person(name, age){  //  생성자 함수를 사용할 땐 첫 글자를 대문자로 쓴다.
  this.name = name;
  this.age = age;
  console.log(this.name + ' ' + this.age)
}

let kim = new Person('kim', 29);

new와 this는 궁합이 잘 맞는 친구이다. new를 사용하게 되면 메모장의 '새로 만들기'처럼 하얀색 빈 도화지가 생성된다고 상상해보자. 그곳에는 원래 만들어놨던 친구들을 불러오면 좋은데, 그 방법으로 this를 이용하는 것이다. 그렇게 되면 위 코드처럼 this를 통해 함수의 매개변수 값을 불러올 수 있게 된다.

 

문제

객체와 this를 이용하여, 최솟값을 구하는 함수를 만들어라.

let min = {
  arr : [],
  minNum : 100,
  minFind : function (el){
    this.arr = el;
    for (i = 0; i < this.arr.length; i++){
      if (this.minNum > this.arr[i]){
        this.minNum = this.arr[i];
      }
    }
    return this.minNum;
  }
}

let a = min.minFind([10, 20, 30]);
document.write('최솟값 : ' + a);

minFind()를 호출하는 순간, 우리는 min 객체의 mindFind 아래만 쳐다보면 된다.

this가 없다면, 코드는 이런 생각을 할 것이다. 'arr? arr은 정의된 게 없는데?' 하지만, this가 있으면 'arr? 아~ 이 객체의 arr을 말하는 거구나. 위에서 다시 찾아봐야 겠다.' 하면서 위에 있는 arr : [ ]부터 찾아보는 것이다.