자바스크립트 객체에 함수 추가하기

자바스크립트 객체란 무엇인가

자바스크립트 객체(Object)는 다양한 데이터와 기능을 하나로 묶어 관리할 수 있는 강력한 데이터 타입이다. 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합이며, 이 값에는 함수(function)도 포함될 수 있다. 이를 통해 객체는 데이터뿐만 아니라 동작(메서드)까지도 함께 저장할 수 있다.

자바스크립트 객체는 {} 중괄호를 이용해 생성할 수 있으며, 각 프로퍼티는 키: 값 형태로 표현된다. 객체는 단순한 데이터 저장소를 넘어, 프로그램의 구조를 체계적으로 설계하는 데 필수적이다.

객체에 함수(메서드) 추가하는 방법

객체에 함수를 추가하는 것은 자바스크립트에서 객체지향 프로그래밍을 구현하는 기본적인 방법이다. 함수를 객체의 프로퍼티로 추가하면 그 함수는 '메서드'라고 불린다.

1. 객체 리터럴 방식으로 함수 추가하기

const person = {
  name: "홍길동",
  greet: function() {
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
  }
};

person.greet(); // 출력: 안녕하세요, 제 이름은 홍길동입니다.

여기서 greet는 person 객체의 메서드다. this 키워드를 통해 객체 내부 데이터(name)에 접근할 수 있다.

2. 객체 생성 후 함수 추가하기

객체를 만든 다음에 함수를 동적으로 추가할 수도 있다.

const car = {
  brand: "현대"
};

car.showBrand = function() {
  console.log(`이 자동차 브랜드는 ${this.brand}입니다.`);
};

car.showBrand(); // 출력: 이 자동차 브랜드는 현대입니다.

이 방법은 이미 생성된 객체에 새로운 동작을 추가할 때 유용하다.

반응형

3. 생성자 함수에서 메서드 정의하기

생성자 함수(Constructor Function)를 사용하면 여러 객체 인스턴스를 효율적으로 만들 수 있다.

function Animal(name) {
  this.name = name;
  this.speak = function() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  };
}

const dog = new Animal("강아지");
dog.speak(); // 출력: 강아지이(가) 소리를 냅니다.

4. 프로토타입을 이용한 메서드 추가

성능 최적화를 위해 메서드는 객체 인스턴스가 아닌 생성자 함수의 프로토타입에 추가하는 것이 좋다.

function Bird(name) {
  this.name = name;
}

Bird.prototype.fly = function() {
  console.log(`${this.name}이(가) 날아갑니다.`);
};

const sparrow = new Bird("참새");
sparrow.fly(); // 출력: 참새이(가) 날아갑니다.

이 방법은 메모리 사용량을 줄이고, 모든 인스턴스가 동일한 메서드를 공유하게 한다.

반응형

객체에 동적으로 함수 추가하는 고급 테크닉

객체 내부에서 함수 생성하기

객체를 생성하면서 특정 로직에 따라 함수를 추가할 수 있다.

const calculator = {
  number: 0,
  addFunction: function(name, func) {
    this[name] = func;
  }
};

calculator.addFunction('addTen', function() {
  this.number += 10;
});

calculator.addTen();
console.log(calculator.number); // 출력: 10

조건에 따라 메서드 추가

런타임 중 조건에 따라 객체에 메서드를 다르게 추가할 수 있다.

const robot = {};

const canTalk = true;

if (canTalk) {
  robot.speak = function() {
    console.log("로봇이 말을 합니다.");
  };
} else {
  robot.silent = function() {
    console.log("로봇이 조용히 있습니다.");
  };
}

robot.speak(); // 출력: 로봇이 말을 합니다.

이처럼 동적인 메서드 추가는 복잡한 프로그램의 유연성을 높인다.

반응형

자바스크립트 객체 함수 추가 시 주의사항

1. this 키워드 주의

객체 내부 함수에서는 this가 객체 자체를 가리킨다. 그러나 일반 함수나 콜백 함수 안에서는 this가 달라질 수 있다.

const user = {
  name: "사용자",
  greet: function() {
    setTimeout(function() {
      console.log(`안녕하세요, ${this.name}`);
    }, 1000);
  }
};

user.greet(); // 출력: 안녕하세요, undefined

위 예제에서 this.name은 의도한 값이 아니라 undefined가 출력된다. 이를 해결하려면 화살표 함수를 사용해야 한다.

const user = {
  name: "사용자",
  greet: function() {
    setTimeout(() => {
      console.log(`안녕하세요, ${this.name}`);
    }, 1000);
  }
};

user.greet(); // 출력: 안녕하세요, 사용자

2. 메모리 누수 주의

객체에 무분별하게 함수를 추가하거나 클로저를 남발하면 메모리 누수가 발생할 수 있다. 특히 이벤트 리스너나 DOM 조작 관련 함수는 적절히 제거해야 한다.

3. 프로토타입과 객체의 관계 이해

프로토타입 체인을 통해 객체가 상속받는 메서드와 프로퍼티가 무엇인지 정확히 이해하고 있어야 한다. 잘못된 메서드 오버라이딩은 디버깅을 어렵게 만든다.

반응형

실전 예제: 객체에 다양한 기능 추가하기

사용 예제 1: 사용자 관리 시스템

const userManager = {
  users: [],
  addUser: function(user) {
    this.users.push(user);
  },
  listUsers: function() {
    console.log("등록된 사용자 목록:");
    this.users.forEach(user => console.log(user));
  }
};

userManager.addUser("홍길동");
userManager.addUser("이순신");
userManager.listUsers();

사용 예제 2: 동적 이벤트 핸들러 등록

const buttonHandler = {};

function registerEvent(buttonId, eventName, func) {
  if (!buttonHandler[buttonId]) {
    buttonHandler[buttonId] = {};
  }
  buttonHandler[buttonId][eventName] = func;
}

registerEvent('saveBtn', 'click', function() {
  console.log('저장 버튼 클릭');
});

buttonHandler['saveBtn']['click'](); // 출력: 저장 버튼 클릭

반응형

객체에 함수를 추가하는 다양한 패턴 총정리

방법 설명 예제

객체 리터럴	선언 시 바로 메서드 정의	{ greet: function() {} }
생성 후 추가	객체 생성 후 메서드 추가	obj.greet = function() {}
생성자 함수	인스턴스별 메서드 생성	this.greet = function() {}
프로토타입 이용	인스턴스 간 메서드 공유	Constructor.prototype.greet = function() {}

반응형

결론

자바스크립트 객체에 함수를 추가하는 기술은 단순히 메서드를 만드는 것을 넘어, 프로그램의 확장성, 재사용성, 유지보수성을 향상시키는 핵심이다. 다양한 방법을 조합해 상황에 맞는 최적의 패턴을 선택하는 것이 중요하다. 객체지향적인 사고를 통해 구조화된 코드를 작성하면 코드 품질이 비약적으로 향상된다.