JavaScript Object 객체 메서드

JavaScript의 객체 메서드는 객체의 속성 중 하나로서, 해당 메서드를 소유하고 있는 객체에 대해 특정 작업을 수행하는 함수입니다. 객체의 메서드는 종종 객체의 데이터를 다루는 데 사용되며, 이는 객체 지향 프로그래밍의 중요한 개념입니다.

객체 메서드의 정의

객체 메서드는 객체 리터럴 내에서 함수로 정의될 수 있습니다.

 

예를 들어:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // "John Doe"

 

여기서 fullName은 person 객체의 메서드로서, this 키워드를 사용하여 객체 자신의 속성에 접근합니다.

ES6에서의 간결한 메서드 구문

ECMAScript 6 (ES6) 이후로, 객체 리터럴 내에서 메서드를 더 간결하게 정의할 수 있는 구문이 도입되었습니다:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // "John Doe"

 

this 키워드

객체 메서드 내에서 this 키워드는 메서드를 소유하고 있는 객체를 참조합니다. 따라서 메서드가 객체의 내부 상태를 읽거나 변경할 수 있습니다.

메서드와 프로토타입

메서드는 또한 객체의 프로토타입에 정의될 수 있으며, 이 경우 해당 프로토타입을 상속하는 모든 객체가 해당 메서드에 접근할 수 있습니다.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function() {
  return this.firstName + ' ' + this.lastName;
}

const person = new Person('John', 'Doe');

console.log(person.fullName()); // "John Doe"

 

프로토타입의 필요성

이 예제에서는 "Person"이라는 생성자 함수를 정의하고 있습니다. 이 생성자는 firstName과 lastName 속성을 가진 객체를 생성합니다.

만약 여러분이 수백 개의 "Person" 객체를 생성하려 한다면, 각각의 객체마다 fullName 메서드를 가지고 있다면 메모리를 많이 차지하게 됩니다.

프로토타입을 사용하는 이유

이 문제를 해결하기 위해, fullName 메서드를 "Person"의 프로토타입에 추가할 수 있습니다. 이렇게 하면 모든 "Person" 객체는 fullName 메서드를 공유하게 되어 메모리를 효율적으로 사용할 수 있습니다.

Person.prototype.fullName = function() {
  return this.firstName + ' ' + this.lastName;
}

여기서 Person.prototype은 "Person" 생성자로 생성된 모든 객체가 공유하는 프로토타입 객체입니다. fullName 메서드가 프로토타입에 추가되면, 모든 "Person" 인스턴스는 해당 메서드에 접근할 수 있습니다.

결과

결과적으로, 이렇게 하면 코드의 재사용성과 유지보수성이 향상됩니다. 만약 fullName 메서드를 변경해야 한다면, 프로토타입에만 변경을 하면 모든 "Person" 객체에서 변경이 반영됩니다.