📘 8.1.4 메서드 정의하기 - 객체에게 특별한 능력 부여하기
오늘은 참으로 특별한 시간입니다. 지금까지 우리는 객체라는 정보의 보물함에 여러 가지 보물들을 넣고 꺼내는 방법을 배웠습니다. 하지만 이제는 정말 신기한 것을 배울 것입니다. 바로 객체가 스스로 행동할 수 있는 특별한 능력을 주는 방법 말이지요.
이를 메서드(Method)라고 부르는데, 마치 우리가 생각하고 말하고 행동할 수 있는 것처럼, 객체도 자신만의 특별한 행동들을 할 수 있게 되는 것입니다. 정말 경이로운 일이지요.
🧠 새로운 단어들과 친해지기
객체에게 특별한 능력을 주기 위해 필요한 새로운 단어들을 마음에 담아보겠습니다.
| 단어 | 쉬운 설명 |
|---|---|
| 메서드 | 객체 안에 들어있는 특별한 능력이나 기능입니다. 객체가 할 수 있는 행동이지요 |
| 함수 | 특정한 일을 하는 코드들을 하나로 묶어놓은 것입니다 |
| 매개변수 | 메서드가 일을 할 때 필요한 재료나 정보입니다 |
| 호출하기 | 메서드를 실제로 작동시키는 것입니다 |
| 반환값 | 메서드가 일을 끝내고 우리에게 돌려주는 결과입니다 |
이 단어들은 메서드를 이해하는 데 정말 중요한 열쇠들입니다.
✨ 메서드가 무엇인지 알아보기
메서드란 객체가 할 수 있는 특별한 동작이나 능력을 말합니다. 마치 우리가 걷고, 말하고, 계산하는 능력을 가지고 있는 것처럼, 객체도 메서드를 통해 다양한 일을 할 수 있게 됩니다.
메서드는 객체 안에 살고 있는 특별한 함수입니다. 일반 함수와 다른 점은 특정 객체에 속해있어서, 그 객체의 정보들을 마음껏 사용할 수 있다는 것이지요. 마치 가족 구성원이 우리 집의 물건들을 자유롭게 사용할 수 있는 것과 같습니다.
메서드의 가장 아름다운 점은 몇 번이든 다시 사용할 수 있다는 것입니다. 한 번 만들어놓으면 필요할 때마다 몇 번이든 불러서 사용할 수 있습니다. 또한 매개변수라는 특별한 재료를 받아서 상황에 따라 다르게 동작하게 만들 수도 있습니다.
따뜻한 이야기: 우리 집 스마트 로봇의 기능들
메서드를 더 쉽게 이해하기 위해 우리 집 스마트 로봇을 상상해보겠습니다.
여러분이 정말 똑똑한 스마트 로봇을 가지고 있다고 생각해보세요. 이 로봇에는 여러 가지 기능 버튼들이 있습니다. "인사하기" 버튼을 누르면 로봇이 "안녕하세요!"라고 정중하게 말합니다. "춤추기" 버튼을 누르면 신나게 춤을 추고, "계산하기" 버튼을 누르면 어려운 수학 문제도 척척 풀어줍니다.
이 버튼들이 바로 메서드와 똑같습니다. 각 버튼(메서드)는 로봇(객체)이 할 수 있는 특별한 능력을 나타내지요.
그런데 어떤 버튼들은 추가 정보가 필요합니다. 예를 들어 "노래하기" 버튼을 누를 때는 "어떤 노래를 부를지" 알려줘야 하잖아요? "동요를 불러줘"라고 말하면 동요를 부르고, "생일 축하 노래를 불러줘"라고 하면 생일 축하 노래를 불러줍니다. 이런 추가 정보가 바로 매개변수입니다.
그리고 로봇이 일을 끝내고 나서 "계산 결과는 42입니다"라고 알려주는 것처럼, 메서드도 작업을 끝내고 결과를 돌려줄 수 있습니다. 이것이 바로 반환값입니다.
🎯 왜 메서드를 배워야 할까요?
그럼 우리는 왜 메서드를 배워야 할까요? 정말 중요하고 아름다운 이유들이 있습니다.
첫 번째는 관련 있는 것들을 하나로 묶어서 관리할 수 있기 때문입니다. 학생 객체에 이름, 나이 정보만 있는 게 아니라 "자기소개하기", "공부하기", "성적계산하기" 같은 기능도 함께 가질 수 있습니다. 마치 스마트폰 앱처럼 필요한 모든 것이 한 곳에 깔끔하게 모여있는 것입니다.
두 번째는 같은 기능을 여러 번 사용할 수 있어서입니다. 인사하는 메서드를 한 번 만들어두면, 필요할 때마다 불러서 사용할 수 있습니다. 같은 코드를 계속 다시 쓸 필요가 없어서 정말 편리합니다.
세 번째는 현실 세계를 코드로 표현할 수 있어서입니다. 실제 세상에서는 모든 것이 속성과 행동을 가지고 있잖아요? 강아지는 이름, 나이라는 속성과 함께 짖기, 꼬리흔들기라는 행동도 있습니다. 메서드를 배우면 이런 현실 세계를 코드로 더 자연스럽게 만들 수 있게 됩니다.
마지막으로 프로그래밍을 더 재미있게 만들어줍니다. 단순히 정보만 저장하는 게 아니라, 객체가 실제로 무언가를 하는 모습을 볼 수 있거든요.
⚙️ 메서드 만들고 사용하는 방법 배우기
메서드를 만들고 사용하는 기본적인 방법을 알아보겠습니다.
기본 메서드 만들기:
let 객체이름 = {
속성: "값",
메서드이름: function() {
// 메서드가 할 일을 여기에 씁니다
}
};메서드 호출하기:
객체이름.메서드이름(); // 괄호()를 꼭 붙여주세요!재료가 필요한 메서드:
let 객체 = {
메서드: function(재료1, 재료2) {
// 재료를 사용해서 일하기
}
};🧪 실습으로 익혀보기
강물이 조용히 흘러가듯이, 이제 천천히 실습을 통해서 메서드를 어떻게 만들고 사용하는지 직접 경험해보겠습니다.
🔹 실습 1: 첫 번째 메서드 만들기 - 인사하는 학생
때로는 가장 단순한 것에서 가장 깊은 의미를 찾을 수 있습니다. 첫 번째 실습에서는 가장 간단한 메서드부터 시작해보겠습니다. 학생이 인사할 수 있는 특별한 능력을 만들어보겠습니다.
// 인사할 줄 아는 똑똑한 학생 객체 만들기
let smartStudent = {
name: "김지민", // 학생 이름
age: 12, // 학생 나이
grade: 6, // 학생 학년
// 인사하는 특별한 능력(메서드) 만들기
sayHello: function() {
console.log("안녕하세요! 저는 학생입니다! 😊");
console.log("만나서 정말 반가워요! 👋");
}
};
console.log("=== 똑똑한 학생 소개 ===");
console.log("학생 이름:", smartStudent.name);
console.log("학생 나이:", smartStudent.age + "살");
console.log("학생 학년:", smartStudent.grade + "학년");
console.log("\n=== 이제 학생이 직접 인사해볼까요? ===");
// 메서드 호출하기 (괄호() 꼭 붙이기!)
smartStudent.sayHello();
console.log("\n=== 한 번 더 인사해달라고 해볼게요! ===");
smartStudent.sayHello(); // 같은 메서드를 또 다시 사용할 수 있습니다!
console.log("몇 번이든 인사할 수 있네요!");이 과정을 차근차근 살펴보면, 먼저 일반적인 속성들을 가진 학생 객체를 만듭니다. 그다음 function 키워드를 사용해서 sayHello라는 특별한 능력(메서드)을 정의하지요. 마지막으로 점 표기법과 괄호를 사용해서 그 능력을 발동시킵니다. 같은 능력을 여러 번 사용할 수 있다는 것도 정말 아름답지요.
🔹 실습 2: 매개변수로 더 똑똑하게 - 맞춤형 인사
진정한 소통은 상대방을 생각하는 마음에서 시작됩니다. 두 번째 실습에서는 매개변수라는 특별한 재료를 사용해서 상황에 따라 다른 인사를 할 수 있는 메서드를 만들어보겠습니다.
// 정말 똑똑하게 인사할 수 있는 애완동물 객체
let cleverPet = {
name: "코코", // 애완동물 이름
type: "앵무새", // 애완동물 종류
age: 2, // 애완동물 나이
// 맞춤형 인사 능력 (특별한 재료인 손님 이름을 받습니다)
greetGuest: function(guestName) {
console.log("🦜 안녕하세요, " + guestName + "님!");
console.log("🦜 저는 " + cleverPet.name + "이에요!");
console.log("🦜 저는 " + cleverPet.age + "살 " + cleverPet.type + "입니다!");
console.log("🦜 만나서 정말 반가워요!");
}
};
console.log("=== 똑똑한 애완동물의 맞춤형 인사 시간 ===");
// 여러 손님들에게 각각 다른 인사하기
console.log("첫 번째 손님이 왔어요:");
cleverPet.greetGuest("철수");
console.log("\n두 번째 손님이 왔어요:");
cleverPet.greetGuest("영희");
console.log("\n세 번째 손님이 왔어요:");
cleverPet.greetGuest("민수");
console.log("\n각 손님에 맞춰서 다르게 인사하네요!");이 예시에서는 guestName이라는 매개변수(특별한 재료)를 받아서 각기 다른 손님에게 맞춤형 인사를 할 수 있습니다. 또한 객체 내부의 정보들(cleverPet.name, cleverPet.age 등)을 메서드 안에서 활용하는 방법도 보여줍니다. 이렇게 하면 메서드가 객체의 정보를 활용해서 더 똑똑하게 동작할 수 있습니다.
🔹 실습 3: 계산하고 결과 돌려주기 - 반환값 활용
때로는 우리가 한 일의 결과를 다른 곳에서도 사용하고 싶을 때가 있습니다. 세 번째 실습에서는 매개변수를 받아서 계산을 하고, 그 결과를 우리에게 돌려주는 메서드를 만들어보겠습니다.
// 정말 똑똑한 계산기 로봇 객체
let calculatorRobot = {
brand: "스마트계산기 3000", // 계산기 브랜드
version: "3.0", // 계산기 버전
// 더하기 능력 (두 숫자를 받아서 더한 결과 돌려주기)
addNumbers: function(number1, number2) {
console.log("🤖 " + number1 + " + " + number2 + "를 계산하고 있어요...");
let answer = number1 + number2;
console.log("🤖 계산 완료! 결과가 나왔어요!");
return answer; // 결과를 선물로 돌려주기
},
// 곱하기 능력 (더 간단하게 작성)
multiplyNumbers: function(a, b) {
console.log("🤖 " + a + " × " + b + " = " + (a * b) + " 입니다!");
return a * b; // 결과를 선물로 돌려주기
}
};
console.log("=== 똑똑한 계산기 로봇 소개 ===");
console.log("브랜드:", calculatorRobot.brand);
console.log("버전:", calculatorRobot.version);
console.log("\n=== 계산 시작! ===");
// 더하기 계산하고 결과를 선물 상자에 받기
let addResult = calculatorRobot.addNumbers(15, 25);
console.log("더하기 결과 선물상자:", addResult);
// 곱하기 계산하고 결과를 또 다른 선물 상자에 받기
let multiplyResult = calculatorRobot.multiplyNumbers(6, 7);
console.log("곱하기 결과 선물상자:", multiplyResult);
// 계산 결과들을 다른 계산에 다시 활용하기
console.log("\n=== 결과들을 합쳐보기 ===");
let finalAnswer = calculatorRobot.addNumbers(addResult, multiplyResult);
console.log("최종 답 선물상자:", finalAnswer);
console.log("🎉 모든 계산이 끝났어요! 결과를 여러 번 활용할 수 있어서 정말 편리해요!");이 실습은 메서드의 진정한 능력을 보여줍니다. 매개변수를 받아서 계산을 수행하고, return을 사용해서 결과를 선물처럼 돌려주지요. 이렇게 받은 선물(반환값)은 다른 상자에 저장해서 나중에 다른 용도로 사용할 수 있습니다. 마치 진짜 계산기처럼 계산 결과를 메모해두고 다음 계산에 활용하는 것과 같습니다.
🧚♀️ 이야기로 다시 배우기: 학교의 특별한 친구들
지금까지 배운 내용을 하나의 따뜻한 이야기로 다시 정리해보겠습니다.
우리 학교에는 여러 특별한 친구들이 있었습니다. 각 친구는 자신만의 특별한 능력들을 가지고 있었답니다.
요리왕 민수는 정말 다양한 요리를 만들 수 있었습니다. "간단한 샌드위치 만들기", "맛있는 쿠키 굽기", "따뜻한 수프 끓이기" 같은 멋진 능력들이 있었지요. 친구들이 민수에게 "쿠키 좀 만들어줘!" 라고 부탁하면 (민수.쿠키만들기()), 그는 즉시 맛있는 쿠키를 만들어줬습니다.
공부대장 지영이는 어려운 문제들을 해결하는 놀라운 능력이 있었습니다. 하지만 지영이의 능력은 더 특별했는데, 어떤 과목의 문제인지 정확히 말해줘야 했습니다. "지영아, 수학 문제 좀 도와줘!" (지영이.문제해결하기("수학"))라고 말하면, 지영이는 수학에 딱 맞는 해결법을 사용했지요.
계산천재 준호는 정말 복잡한 계산도 순식간에 해결했습니다. 친구들이 "이 두 숫자를 더해줘"라고 부탁하면 (준호.더하기(25, 17)), 준호는 계산을 끝내고 정확한 답을 공책에 적어서 돌려줬습니다. 그 공책은 나중에 다른 계산에도 사용할 수 있었답니다.
학교 친구들은 이런 특별한 친구들 덕분에 정말 편리하고 즐겁게 공부할 수 있었습니다. 각 친구(객체)는 자신만의 특별한 능력들(메서드)을 가지고 있었고, 다른 친구들이 부탁할 때마다 그 능력을 발휘해서 도움을 주었거든요.
우리가 만드는 객체와 메서드도 이런 도움이 되는 특별한 친구와 똑같습니다.
🧠 자주 하는 실수와 주의할 점
메서드를 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 안전하고 정확하게 사용할 수 있습니다.
❌ 실수 1: 메서드 호출할 때 괄호 빼먹기
// 노래하는 로봇 친구 객체
let musicRobot = {
name: "멜로디",
sing: function() {
console.log("🎵 도레미파솔라시도~ 🎵");
}
};
console.log("=== 올바른 방법과 틀린 방법 ===");
// ❌ 틀린 방법: 괄호 없이 호출
console.log("틀린 방법:", musicRobot.sing); // 노래가 나오지 않고 이상한 글자가 나와요!
// ✅ 올바른 방법: 괄호 포함해서 호출
console.log("올바른 방법:");
musicRobot.sing(); // "🎵 도레미파솔라시도~ 🎵" (정상적으로 노래가 나와요!)
console.log("메서드를 호출할 때는 반드시 괄호()를 붙여야 해요!");메서드를 호출할 때는 반드시 괄호 ()를 붙여야 합니다. 괄호가 없으면 메서드가 실행되지 않고 그냥 이상한 코드 내용만 보여줍니다.
❌ 실수 2: 매개변수 이름을 잘못 사용하기
// 인사하는 강아지 친구 객체
let friendlyDog = {
name: "바둑이",
greetPerson: function(personName) {
console.log("=== 올바른 방법과 틀린 방법 ===");
// ❌ 틀린 방법: 매개변수 이름 틀림
// console.log("안녕, " + name + "!"); // 에러! personName이어야 해요
// ✅ 올바른 방법: 정확한 매개변수 이름 사용
console.log("멍멍! 안녕, " + personName + "!");
console.log("나는 " + friendlyDog.name + "이야! 🐕");
}
};
console.log("강아지가 철수에게 인사해볼게요:");
friendlyDog.greetPerson("철수"); 매개변수의 이름을 정확히 써야 합니다. 철자가 틀리면 에러가 발생합니다.
❌ 실수 3: function 키워드 빼먹기
let gameCharacter = {
name: "용사",
level: 5,
// ❌ 틀린 방법: function 키워드 없음
// attack: console.log("공격!"); // 이건 메서드가 아니라 즉시 실행돼요!
// ✅ 올바른 방법: function 키워드 포함
attack: function() {
console.log(gameCharacter.name + "가 멋지게 공격합니다! ⚔️");
console.log("레벨 " + gameCharacter.level + " 파워 공격!");
}
};
console.log("용사가 공격해볼게요:");
gameCharacter.attack(); 메서드를 만들 때는 반드시 function 키워드를 써야 합니다. 없으면 메서드가 아니라 그냥 코드가 바로 실행되어버립니다.
✏️ 연습문제로 실력 기르기
연습은 완벽을 만든다고 했습니다. 이제 배운 내용을 연습문제를 통해서 차근차근 익혀보겠습니다.
Ex1) 간단한 자기소개 메서드 만들기
작은 소개 한 마디가 때로는 큰 만남의 시작이 됩니다. 자기소개할 줄 아는 학생 객체를 만들어보겠습니다.
// 자기소개할 줄 아는 학생 객체 만들어보세요
let myStudent = {
name: "김민수",
age: 11,
hobby: "축구",
introduce: function() {
console.log("=== 자기소개 시간 ===");
console.log("안녕하세요! 저는 " + myStudent.name + "입니다! 😊");
console.log("저는 " + myStudent.age + "살이에요!");
console.log("취미는 " + myStudent.hobby + "예요!");
console.log("만나서 반가워요! 👋");
}
};
// 메서드 호출해보세요
console.log("학생이 자기소개를 해볼게요:");
myStudent.introduce();Ex2) 매개변수를 받는 인사 메서드 만들기
진정한 인사는 상대방을 생각하는 마음에서 나옵니다. 다양한 인사를 할 수 있는 로봇 친구를 만들어보겠습니다.
// 다양한 인사를 할 수 있는 로봇 친구 만들어보세요
let greetingRobot = {
name: "인사봇 3000",
sayGreeting: function(greeting, friendName) {
console.log("🤖 " + greeting + "! " + friendName + "님!");
console.log("🤖 저는 " + greetingRobot.name + "입니다!");
console.log("🤖 만나서 정말 반가워요!");
}
};
// 다양한 인사로 테스트해보세요
console.log("로봇이 여러 방법으로 인사해볼게요:");
greetingRobot.sayGreeting("안녕하세요", "철수");
console.log("");
greetingRobot.sayGreeting("좋은 아침이에요", "영희");Ex3) 계산 결과를 반환하는 메서드 만들기
모든 노력에는 그에 따른 결실이 있습니다. 간단한 계산을 하는 계산기 친구를 만들어보겠습니다.
// 간단한 계산을 하는 계산기 친구 만들어보세요
let simpleCalculator = {
name: "간단계산기",
color: "파란색",
addNumbers: function(a, b) {
let result = a + b;
console.log("🧮 " + a + " + " + b + " = " + result);
console.log("🧮 계산 완료!");
return result; // 결과를 선물로 돌려주기
}
};
// 계산해보고 결과를 선물상자에 저장해보세요
console.log("계산기가 계산해볼게요:");
let answer = simpleCalculator.addNumbers(10, 15);
console.log("선물상자에 저장된 답:", answer);
// 결과를 다른 계산에도 사용해보기
let secondAnswer = simpleCalculator.addNumbers(answer, 5);
console.log("두 번째 계산 결과:", secondAnswer);지금까지 메서드 정의하기를 차근차근 배워보았습니다. 이제 여러분도 객체에게 다양한 멋진 능력을 부여해서 더욱 똑똑하고 유용한 프로그램을 만들 수 있게 되었습니다. 🎉✨
🔄 복습 문제 - 이전에 배운 내용들 기억하나요?
8단원을 배우면서 이전에 배운 내용들도 잊지 않도록 조용히 복습해보겠습니다.
🔁 5단원 복습: 함수 만들어보기
// 문제: 인사하는 함수를 만들고 메서드와 비교해보세요
function normalGreeting(name) {
console.log("일반 함수: 안녕하세요, " + name + "님!");
}
// 메서드를 가진 객체
let greetingObject = {
robotName: "인사로봇",
greeting: function(name) {
console.log("메서드: 안녕하세요, " + name + "님!");
console.log("저는 " + greetingObject.robotName + "예요!");
}
};
// 사용해보기
normalGreeting("철수"); // 일반 함수 호출
greetingObject.greeting("철수"); // 메서드 호출
console.log("메서드는 객체의 속성도 함께 사용할 수 있어요!");🔁 7단원 복습: 배열과 메서드 함께 사용하기
// 문제: 여러 친구들에게 인사하는 메서드 만들기
let classManager = {
className: "6학년 1반",
students: ["철수", "영희", "민수", "지영"],
greetAllStudents: function() {
console.log(classManager.className + " 학생들에게 인사해요:");
for (let i = 0; i < classManager.students.length; i++) {
console.log("안녕, " + classManager.students[i] + "!");
}
},
countStudents: function() {
return classManager.students.length;
}
};
// 사용해보기
classManager.greetAllStudents();
console.log("총 학생 수:", classManager.countStudents() + "명");✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| 메서드의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 매개변수와 반환값 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다.
추가 문제 1. 간단한 인사 메서드를 만들어보세요.
let robot = {
name: "로봇",
sayHi: function() {
console.log("안녕하세요! 저는 로봇입니다!");
}
};
robot.sayHi();추가 문제 2. 매개변수를 받아서 메시지를 출력하는 메서드를 만들어보세요.
let book = {
title: "해리포터",
showMessage: function(message) {
console.log(message + ": 해리포터");
}
};
book.showMessage("제목");
book.showMessage("추천 도서");추가 문제 3. 매개변수를 받는 메서드를 만들어보세요.
let greeter = {
welcome: function(name) {
console.log("환영합니다, " + name + "님!");
}
};
greeter.welcome("민수");
greeter.welcome("영희");추가 문제 4. 다음 코드에서 올바른 메서드 호출 방법은?
let game = {
start: function() {
console.log("게임 시작!");
}
};
// A) game.start;
// B) game.start();
// C) game.start{}
// D) start();답: B) game.start()
설명: 메서드를 실행하려면 반드시 괄호()를 붙여야 합니다.
추가 문제 5. 다음 코드의 실행 결과를 예상해보세요.
let animal = {
sound: function(animalType) {
console.log(animalType + "가 소리를 냅니다");
}
};
animal.sound("고양이");답: "고양이가 소리를 냅니다"
설명: animalType 매개변수로 전달받은 "고양이"가 출력됩니다.
📂 마무리 정보
오늘 배운 8.1.4 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나겠습니다.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'8. 정보 꾸러미 만들기 (객체) > 8.1 객체 다루기' 카테고리의 다른 글
| 8.1.3 점 표기법 vs 대괄호 표기법 - 두 가지 접근 방법의 차이점 (0) | 2025.07.10 |
|---|---|
| 8.1.2 속성 접근하고 삭제하기 - 정보 상자 속 데이터 다루기 (0) | 2025.07.10 |
| 8.1.1 정보 꾸러미 만들기 - 객체 리터럴 (0) | 2025.07.09 |