JavaScript - 객체 메서드

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript 객체 메서드의 마법의 세계로 뛰어들어 보겠습니다. 코딩 와드(키보드)를 손에 들고, 이 흥미로운 여정에 함께 동참해 주세요!

JavaScript 객체 메서드는 무엇인가요?

객체 메서드로 마법을 부르기 전에, 먼저 그것이 무엇인지 이해해 보겠습니다. 간단히 말해, 객체 메서드는 객체에 속한 함수입니다. 그들은 우리의 객체가 가지고 있는 특별한 능력들입니다.

기본적인 예제를 보겠습니다:

let wizard = {
name: 'Merlin',
castSpell: function() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // 출력: Abracadabra!

여기서 castSpell은 wizard 객체의 메서드입니다. wizard.castSpell()을 호출할 때, 우리의 마법사가 마법을 수행합니다!

객체 메서드 축약 문법

이제 하나의 유용한 트릭을 배워보겠습니다. ES6은 객체 메서드를 정의하는 더 짧은 방법을 도입했습니다. 마법의 단축키 같은 것입니다!

let wizard = {
name: 'Merlin',
castSpell() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // 출력: Abracadabra!

이제 : function 부분을 제거했습니다. 더 짧고 깨끗해졌죠, 잘 정리된 마법서처럼!

객체에 메서드 추가하거나 업데이트하기

JavaScript의 객체는 유연합니다. 객체가 생성된 후에도 새로운 메서드를 추가하거나 기존 메서드를 업데이트할 수 있습니다. 마법사에게 새로운 마법을 가르치는 것과 같습니다!

let wizard = {
name: 'Merlin'
};

// 새로운 메서드 추가
wizard.castFireball = function() {
console.log('Whoosh! Fireball launched!');
};

wizard.castFireball(); // 출력: Whoosh! Fireball launched!

// 기존 메서드 업데이트
wizard.castFireball = function() {
console.log('Super fireball engaged!');
};

wizard.castFireball(); // 출력: Super fireball engaged!

이 예제에서는 먼저 castFireball 메서드를 wizard 객체에 추가한 다음, 더 강력한 불의 공을 발사하는 메서드로 업데이트했습니다!

내장 메서드 사용하기

JavaScript 객체는 몇 가지 미리 설치된 마법... 즉, 메서드를 가지고 있습니다. 몇 가지를 탐구해 보겠습니다:

1. Object.keys()

이 메서드는 주어진 객체의 자신의 프로퍼티 이름 배열을 반환합니다.

let spellBook = {
fireball: 'Deals fire damage',
iceBeam: 'Freezes the target',
thunderbolt: 'Electrifies the enemy'
};

console.log(Object.keys(spellBook));
// 출력: ['fireball', 'iceBeam', 'thunderbolt']

2. Object.values()

Object.keys()와 비슷하지만, 객체의 자신의 열거 가능한 프로퍼티 값 배열을 반환합니다.

console.log(Object.values(spellBook));
// 출력: ['Deals fire damage', 'Freezes the target', 'Electrifies the enemy']

3. Object.entries()

이 메서드는 주어진 객체의 자신의 열거 가능한 문자 키 프로퍼티 [key, value] 쌍 배열을 반환합니다.

console.log(Object.entries(spellBook));
// 출력: [
//   ['fireball', 'Deals fire damage'],
//   ['iceBeam', 'Freezes the target'],
//   ['thunderbolt', 'Electrifies the enemy']
// ]

이 표는 이 내장 메서드를 요약합니다:

메서드	설명	예제
Object.keys()	객체의 프로퍼티 이름 배열을 반환	Object.keys(spellBook)
Object.values()	객체의 프로퍼티 값 배열을 반환	Object.values(spellBook)
Object.entries()	객체의 [key, value] 쌍 배열을 반환	Object.entries(spellBook)

객체 메서드에서 'this' 키워드

이제 강력하면서도 때로는 혼란스러운 개념에 대해 이야기해 보겠습니다: this 키워드. 객체 메서드에서 this는 메서드가 속한 객체를 가리킵니다. 마치 객체가 "이게 나야!"라고 말하는 것 같습니다!

let wizard = {
name: 'Merlin',
introduceYourself() {
console.log(`Hello, I am ${this.name}!`);
}
};

wizard.introduceYourself(); // 출력: Hello, I am Merlin!

이 예제에서 this.name은 wizard 객체의 name 프로퍼티를 가리킵니다.

실용적인 예제: 마법 부르기 게임

이제 우리가 배운 것을 모두 합쳐서 재미있는 마법 부르기 게임을 만들어 보겠습니다!

let wizard = {
name: 'Merlin',
mana: 100,
spells: {
fireball: 30,
iceBeam: 20,
heal: 50
},
castSpell(spell) {
if (this.mana >= this.spells[spell]) {
this.mana -= this.spells[spell];
console.log(`${this.name} casts ${spell}! Mana remaining: ${this.mana}`);
} else {
console.log(`${this.name} doesn't have enough mana to cast ${spell}!`);
}
}
};

wizard.castSpell('fireball'); // 출력: Merlin casts fireball! Mana remaining: 70
wizard.castSpell('heal'); // 출력: Merlin casts heal! Mana remaining: 20
wizard.castSpell('fireball'); // 출력: Merlin doesn't have enough mana to cast fireball!

이 게임에서 우리의 마법사는 충분한 마나가 있을 때만 마법을 부릅니다. castSpell 메서드는 마법의 마나 비용을 확인하고, 가능하다면 마나를 차감하고 동작 피드백을 제공합니다.

그리고 여기 있습니다, 제자 여러분! JavaScript 객체 메서드의 기본을 배웠습니다. 연습이 완벽을 만드는 것을 기억하세요, 그래서 이 개념들을 계속 실험해 보세요. 곧 당신은 진정한 JavaScript 마법사가 될 것입니다! 코드가 버그가 없기를 바라며, 메서드가 항상 기대하는 출력을 반환하길 바랍니다. 즐거운 코딩을!

Credits: Image by storyset