객체: 기본 3.4 메서드와 this

♠ 객체: 기본

♣ 3.4 메서드와 this

  • 객체 프로퍼티에 저장된 함수를 '메서드’라고 부릅니다.
  • object.doSomthing()은 객체를 '행동’할 수 있게 해줍니다.
  • 메서드는 this로 객체를 참조합니다.

this 값은 런타임에 결정됩니다.

  • 함수를 선언할 때 this를 사용할 수 있습니다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않습니다.
  • 함수를 복사해 객체 간 전달할 수 있습니다.
  • 함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조합니다.

화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특합니다. 화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옵니다.

eddy’s point

`this`를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능합니다.
let user = { name: "John", age: 30, sayHi() { *alert(user.name); // 'this' 대신 'user'를 이용함*} };

그런데 이렇게 외부 변수를 사용해 객체를 참조하면 예상치 못한 에러가 발생할 수 있습니다.  user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다고 가정해 봅시다.  sayHi()는 원치 않는 값(null)을 참조할 겁니다.

예시:
let user = { name: "John", age: 30, sayHi() { *alert( user.name ); // Error: Cannot read property 'name' of null*} }; let admin = user; user = null; // user를 null로 덮어씁니다. admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.
`alert` 함수가 `user.name` 대신 `this.name`을 인수로 받았다면 에러가 발생하지 않았을 겁니다.

화살표함수의 this

https://www.youtube.com/watch?v=2lIde1abdBY

JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기