[JavaScript] 메서드와 this

문규찬·2021년 8월 28일
0
post-thumbnail

- 메서드 (method)

자바스크립트에선 객체 프로퍼티 안에 함수를 할당에 객체에게 행동 할 수 있는 능력을 부여합니다.

let user={ 
name:"moon",
age:32,

(1)
sayHi:function(){
console.log("hello")
}  

(2)
sayHi(){
console.log("hello")
}
// (1)과 (2)은 동일합니다.
};

user객체 안에 함수를 할당해 호출해주면 user가 인사해줍니다.
이렇게 객체 프로퍼티에 할당된 함수를 ⭐️메서드(method) 라고 부릅니다.

- this

메서드 내부에서 this 키워드를 사용하면 객체에 접근 할 수 있습니다.

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다. 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용합니다.

let user={ 
name:"moon",
age:32,
sayHi(){
console.log(this.name)
}

user.sayHi();

user.sayHi()가 실행되는 동안 this는 user를 나타냅니다.

🔴 외부 변수(this.name 이 아닌 user.name)를 사용해 객체에 참조하면 예상치 못한 에러가 발생할 수 있습니다.

let user={ 
name:"moon",
age:32,
sayHi(){
console.log(user.name) // Error: Cannot read property 'name' of null
}

let admin=user
user=null;

admin.sayHi() // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생하였습니다.

user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다고 가정해 봅시다. sayHi()는 원치 않는 값(null)을 참조할 겁니다.

- 자유로운 this

let person1={
  name:"moon",
  age:32,
}

let person2={
  name:"kim",
  age:31,
}

function showName(){
  console.log(this.name)
}

person1.f = showName
person2.f = showName

person1.f() // "moon"
person2.f() // "kim"

동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라집니다.

자유로운 this가 만드는 결과
다른 언어를 사용하다 자바스크립트로 넘어온 개발자는 this를 혼동하기 쉽습니다. this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각하죠. 이런 개념을 'bound this'라고 합니다.
자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다.
이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있습니다. 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점입니다. 자바스크립트가 this를 다루는 방식이 좋은지, 나쁜지는 우리가 판단할 문제가 아닙니다. 개발자는 this의 동작 방식을 충분히 이해하고 장점을 취하면서 실수를 피하는 데만 집중하면 됩니다.

0개의 댓글