자바스크립트 객체의 메서드와 this

객체 지향 프로그래밍(OOP)

자바스크립트(JavaScript)는 객체 지향적 프로그래밍 언어 중 하나이다. 

객체 지향 프로그래밍(Object-Oriented Programming, OOP)는  컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.(출처: 위키백과)

 

따라서 자바스크립트에서의 객체에 대한 이해가 중요하다. 

그중 메서드와 this에 관하여 모던자바스크립트 튜토리얼 및 mdn을 참조하여 정리하였다.

 

자바스크립트의 객체는 메서드(메소드, method)라는 속성을 가지고 있다. 

메서드(Method)란?

• 객체의 속성인 함수이다.
• 객체의 property에 할당된 함수로, 객체가 행동할 수 있도록 하는 역할을 한다.

메서드 만들기

1) 함수 표현식으로 함수를 생성후 객체 프로퍼티에 할당할 수 있다.

//객체 생성
let guest = {
	name: "Jake",
	age: 15
};

//함수 생성후 객체 프로퍼티에 할당
guest.sayHi = function() {
	alert("Welcome");
};

//메서드 실행
guest.sayHi(); // Welcome

위와 같이 객체내에 메서드를 할당하고 객체를 확인해보면 객체내에 함수가 할당된 것을 알 수 있다.

2) 함수 선언문으로 이미 정의된 함수로 메서드를 만들수도 있다.

//객체 생성
let guest = {
	name: "Jake",
	age: 15
};

//함수 선언
function sayHi() {
	alert("Welcome");
};

//선언된 함수를 메서드로 등록
guest.sayHi = sayHi;

//메서드 실행
guest.sayHi(); // Welcome

3) 객체 리터럴 내에서 메서드 선언 / 단축구문 사용

객체 리터럴 안에서 메서드를 선언할 수 있으며, 이때 메서드 단축구문을 사용할 수 있다. 

이때 단축구문은 익명함수가 아닌 유명함수를 사용해야 한다.

//객체 생성
let guest = {
	name: "Jake",
	age: 15
    sayHi: function() {
    	alert("Welcome");
	}
};

//단축구문 사용시...
let guest = {
	name: "Jake",
	age: 15
    sayHi() {
    	alert("Welcome");
	}
};

//위의 두 객체는 동일하게 동작한다.

 

메서드와 this

자바스크립트의 this는 함수 호출 방식에 따라서 this에 바인딩될 값이 결정된다.

객체 리터럴의 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

   this.key()   처럼 사용하고, this는 메서드를 호출한 객체에 바인딩된다.

this에 guest인 외부 변수를 사용할 수도 있으나, 예기치 못한 에러가 발생할 수 있다. (객체 복사시 등의 상황에서)

 

 

자유로운 this

자바스크립트의 this는 모든 함수에 사용가능하며, 런타임에 값이 결정된다.

메서드가 어디서 정의되었는지와는 상관없이 점 앞의 객체가 무엇인지에 따라 결정된다.

이러한 점은 다른 언어와 자바스크립트의 차이이다.  

 

this가 없는 화살표 함수

화살표 함수는 고유한 this를 가지지 않는다.

화살표함수에서 this를 사용하면 화살표 함수가 아닌 외부함수에서 this값을 가져온다.

이는 콜백함수 내부의 this문제를 해결하기 위해 의도적으로 설계된 것이다. (콜백함수는 엄격모드가 적용되면서 this에 undefined가 바인딩된다)

 

별도 this를 생성하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 유용하다.

(예제 출처: 모던자바스립트 튜토리얼)

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName); //this는 user.sayHi()의 this
    arrow();
  }
};

user.sayHi(); // 보라

//this.title이 화살표 함수 바깥의 메서드인 showList가 가리키는 대상과 동일해진다. 
//즉, this.title 은 group.title과 같다.
let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    ); 
  }
};

group.showList();

//이때, 화살표 함수 대신 일반 함수 사용시 에러 발생함
let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(function(student) { 
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

 

 

---

Reference

• https://ko.javascript.info/object-methods
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this#%EB%AA%85%EC%84%B8%EC%84%9C
• 모던 자바스크립트 Deep dive, 이웅모, 2020, 위키북스