JavaScript 메서드(Method): 객체 안의 함수 활용하기

JavaScript 메서드(Method): 객체 안의 함수 활용하기

지금까지 배운 것들을 다시 정리해 볼까요?

여러분은 이제 JavaScript의 핵심 개념들을 배웠습니다:

• ✅ 값(Values): 문자열, 숫자, 배열, 객체
• ✅ 변수(Variables): 값을 저장하는 상자
• ✅ 함수(Functions): 재사용 가능한 코드 블록
• ✅ 매개변수(Parameters): 함수의 입력값
• ✅ 반환값(Return values): 함수의 출력값
• ✅ 객체(Objects): 라벨과 값을 쌍으로 묶은 데이터 구조

이제 이 모든 개념을 연결하는 새로운 개념을 배워볼 시간입니다!

객체에 대해 다시 떠올려 볼까요?

지금까지 객체는 관련된 데이터를 그룹화하는 데 사용했습니다.

 

 

javascript

let job = {
  title: "developer",
  place: "New York",
  salary: 50000
};

객체 안에는 **속성(properties)**들이 있고, 각 속성은 라벨과 값의 쌍이었죠.

그런데 여기서 질문! 객체 안에 값만 넣을 수 있을까요?

객체 안에 함수를 넣을 수 있다면?

놀라운 사실: 객체 안에 함수도 넣을 수 있습니다!

변수를 객체 안에 넣을 수 있듯이, 함수도 객체 안에 넣을 수 있습니다.

왜 객체 안에 함수를 넣나요?

함수를 객체에 넣는 것이 의미 있는 경우:

1. 그 함수가 객체의 데이터와 함께 작동할 때
2. 그 함수가 논리적으로 그 객체에 속해 있을 때

예를 들어:

• person 객체 → greet() 함수 (인사하기)
• car 객체 → start() 함수 (시동 걸기)
• calculator 객체 → add(), subtract() 함수 (계산하기)

메서드(Method)란 무엇인가요?

객체 안에 있는 함수를 특별히 **메서드(Method)**라고 부릅니다.

용어 정리

 

 

javascript

let person = {
  name: "Max",     // 속성 (Property)
  greet() {        // 메서드 (Method)
    alert("Hello!");
  }
};

핵심 용어:

• 속성(Property): 객체 안의 변수
• 메서드(Method): 객체 안의 함수

기억하기 쉽게:

• 데이터를 저장 → 속성
• 동작을 수행 → 메서드

메서드는 어떻게 만드나요?

현대적인 문법 (ES6+, 권장)

 

 

javascript

let person = {
  name: "Max",
  greet() {
    alert("Hello!");
  }
};

구조 분석:

1. greet: 메서드의 이름
2. () 괄호 (매개변수를 넣는 곳)
3. {} 중괄호 안에 실행할 코드

특징:

• ✨ 간결하고 깔끔합니다
• ✨ 현대 JavaScript 표준입니다
• ✨ 대부분의 개발자가 사용합니다

전통적인 문법 (참고용)

 

 

javascript

let person = {
  name: "Max",
  greet: function() {
    alert("Hello!");
  }
};

이 방법도 작동하지만, 현대적인 코드에서는 위의 축약 문법을 더 많이 사용합니다.

일반 함수와의 비교

일반 함수:

 

 

javascript

function greet() {
  alert("Hello!");
}

객체 안의 메서드:

 

 

javascript

let person = {
  greet() {
    alert("Hello!");
  }
};

차이점:

• 메서드는 객체 안에 정의됩니다
• 메서드는 점(.) 표기법으로 호출합니다
• let이나 function 키워드를 앞에 쓰지 않습니다

실제 예제로 이해하기

예제 1: 기본 메서드

 

 

javascript

let person = {
  name: "Max",
  greet() {
    alert("Hello!");
  }
};

// 메서드 호출
person.greet();  // "Hello!" 출력

중요한 점:

• 메서드는 객체의 이름 뒤에 점(.)을 찍고 접근합니다
• 함수처럼 괄호 ()를 붙여서 실행합니다

예제 2: 매개변수가 있는 메서드

 

 

javascript

let person = {
  greet(name) {
    alert("Hello, " + name + "!");
  }
};

person.greet("철수");  // "Hello, 철수!"
person.greet("영희");  // "Hello, 영희!"

메서드도 일반 함수처럼 매개변수를 받을 수 있습니다!

예제 3: 반환값이 있는 메서드

 

 

javascript

let calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

let sum = calculator.add(5, 3);
alert(sum);  // 8

let diff = calculator.subtract(10, 4);
alert(diff);  // 6

메서드도 일반 함수처럼 값을 반환할 수 있습니다!

메서드 호출 방법 상세히 알아보기

잘못된 호출 방법

 

 

javascript

let person = {
  greet() {
    alert("Hello!");
  }
};

// ❌ 이렇게 하면 안 됩니다!
greet();  // 에러: greet is not defined

왜 안 될까요?

greet는 전역 함수가 아니라 person 객체의 메서드이기 때문입니다!

올바른 호출 방법

 

 

javascript

// ✅ 점(.) 표기법 사용
person.greet();

단계별 분석:

1. person - 객체 이름
2. . - 점으로 접근
3. greet - 메서드 이름
4. () - 실행을 위한 괄호

속성 접근과 비교하기

 

 

javascript

let person = {
  name: "Max",        // 속성
  greet() {           // 메서드
    alert("Hello!");
  }
};

// 속성 접근
alert(person.name);   // "Max" - 값만 가져옴

// 메서드 호출
person.greet();       // "Hello!" - 함수 실행

차이점:

• 속성: 점 표기법만 사용 (person.name)
• 메서드: 점 표기법 + 괄호 (person.greet())

IDE(에디터)의 도움 받기

현대적인 코드 에디터는 속성과 메서드를 구별해서 보여줍니다!

 

 

javascript

let person = {
  name: "Max",
  greet() {
    alert("Hello!");
  }
};

person.  // ← 여기서 점을 찍으면

자동 완성 목록에서:

• 🔵 파란색 상자: 속성 (Property)
• 🟣 보라색 상자: 메서드 (Method)

이 시각적 구분이 속성과 메서드를 쉽게 구별하게 해줍니다!

메서드의 다양한 형태

1. 매개변수와 반환값이 모두 없는 메서드

 

 

javascript

let robot = {
  sayHi() {
    alert("안녕하세요!");
  }
};

robot.sayHi();  // 그냥 인사만 함

2. 매개변수는 있지만 반환값이 없는 메서드

 

 

javascript

let printer = {
  print(message) {
    alert(message);
  }
};

printer.print("출력할 내용");

3. 매개변수는 없지만 반환값이 있는 메서드

 

 

javascript

let dice = {
  roll() {
    return Math.floor(Math.random() * 6) + 1;
  }
};

let result = dice.roll();
alert("주사위 결과: " + result);

4. 매개변수와 반환값이 모두 있는 메서드

 

 

javascript

let converter = {
  celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
  }
};

let fahrenheit = converter.celsiusToFahrenheit(25);
alert(fahrenheit);  // 77

중요한 원칙: 일반 함수와 마찬가지로, 메서드도 매개변수나 반환값이 꼭 필요한 것은 아닙니다. 메서드가 하는 일에 따라 결정됩니다!

실전 예제: 종합 활용

예제 1: 사용자 객체

 

 

javascript

let user = {
  name: "김철수",
  age: 25,
  
  introduce() {
    alert("안녕하세요! 저는 " + this.name + "입니다.");
  },
  
  getAge() {
    return this.age;
  }
};

user.introduce();  // "안녕하세요! 저는 김철수입니다."
let userAge = user.getAge();
alert(userAge);    // 25

참고: this는 나중에 배울 개념입니다. 지금은 객체 자신을 가리킨다고만 이해하세요!

예제 2: 계산기 객체

 

 

javascript

let calculator = {
  add(a, b) {
    return a + b;
  },
  
  subtract(a, b) {
    return a - b;
  },
  
  multiply(a, b) {
    return a * b;
  },
  
  divide(a, b) {
    if (b === 0) {
      alert("0으로 나눌 수 없습니다!");
      return null;
    }
    return a / b;
  }
};

// 사용하기
alert(calculator.add(10, 5));       // 15
alert(calculator.multiply(3, 4));   // 12
alert(calculator.divide(10, 2));    // 5

예제 3: 게임 캐릭터

 

 

javascript

let character = {
  name: "용사",
  health: 100,
  
  attack(damage) {
    alert(this.name + "이(가) " + damage + "의 공격을 합니다!");
    return damage;
  },
  
  takeDamage(damage) {
    this.health = this.health - damage;
    alert(this.name + "이(가) " + damage + "의 피해를 입었습니다!");
    alert("남은 체력: " + this.health);
  },
  
  heal(amount) {
    this.health = this.health + amount;
    alert(this.name + "이(가) " + amount + "만큼 회복했습니다!");
    alert("현재 체력: " + this.health);
  }
};

character.attack(30);
character.takeDamage(20);
character.heal(15);

속성 vs 메서드: 언제 무엇을 사용하나요?

속성을 사용해야 할 때

데이터를 저장해야 할 때:

 

 

javascript

let book = {
  title: "JavaScript 입문",
  author: "홍길동",
  pages: 350,
  price: 25000
};

메서드를 사용해야 할 때

동작이나 기능이 필요할 때:

 

 

javascript

let book = {
  title: "JavaScript 입문",
  price: 25000,
  
  getDiscountedPrice(discountRate) {
    return this.price * (1 - discountRate);
  },
  
  displayInfo() {
    alert("제목: " + this.title);
    alert("가격: " + this.price + "원");
  }
};

원칙:

• 값을 저장 → 속성
• 작업을 수행 → 메서드

내장 객체의 메서드를 사용하고 있었습니다!

사실 여러분은 이미 메서드를 사용하고 있었습니다!

문자열 메서드

 

 

javascript

let text = "Hello World";

// toUpperCase()는 String 객체의 메서드!
alert(text.toUpperCase());  // "HELLO WORLD"

// toLowerCase()도 메서드!
alert(text.toLowerCase());  // "hello world"

배열 메서드

 

 

javascript

let fruits = ["사과", "바나나", "오렌지"];

// push()는 Array 객체의 메서드!
fruits.push("포도");

// length는 속성!
alert(fruits.length);  // 4

Math 객체의 메서드

 

 

javascript

// Math.random()은 Math 객체의 메서드!
let randomNum = Math.random();

// Math.floor()도 메서드!
let roundedNum = Math.floor(3.7);  // 3

깨달음: JavaScript의 많은 기능들이 실제로는 내장 객체의 메서드였습니다!

메서드의 실용적인 활용 사례

사례 1: 검증 기능

 

 

javascript

let form = {
  email: "",
  password: "",
  
  setEmail(newEmail) {
    if (newEmail.includes("@")) {
      this.email = newEmail;
      alert("이메일이 설정되었습니다.");
    } else {
      alert("올바른 이메일 형식이 아닙니다!");
    }
  },
  
  setPassword(newPassword) {
    if (newPassword.length >= 8) {
      this.password = newPassword;
      alert("비밀번호가 설정되었습니다.");
    } else {
      alert("비밀번호는 8자 이상이어야 합니다!");
    }
  }
};

form.setEmail("user@example.com");  // 성공
form.setPassword("12345");           // 실패

사례 2: 상태 관리

 

 

javascript

let counter = {
  count: 0,
  
  increment() {
    this.count = this.count + 1;
    this.display();
  },
  
  decrement() {
    this.count = this.count - 1;
    this.display();
  },
  
  reset() {
    this.count = 0;
    this.display();
  },
  
  display() {
    alert("현재 카운트: " + this.count);
  }
};

counter.increment();  // 1
counter.increment();  // 2
counter.decrement();  // 1
counter.reset();      // 0

사례 3: 포맷팅

 

 

javascript

let formatter = {
  formatCurrency(amount) {
    return amount.toLocaleString() + "원";
  },
  
  formatDate(year, month, day) {
    return year + "년 " + month + "월 " + day + "일";
  },
  
  formatPhone(number) {
    // "01012345678" → "010-1234-5678"
    return number.slice(0, 3) + "-" + 
           number.slice(3, 7) + "-" + 
           number.slice(7);
  }
};

alert(formatter.formatCurrency(1000000));      // "1,000,000원"
alert(formatter.formatDate(2024, 1, 22));      // "2024년 1월 22일"
alert(formatter.formatPhone("01012345678"));   // "010-1234-5678"

메서드 작성 시 주의사항

1. 메서드도 일반 함수의 규칙을 따릅니다

 

 

javascript

let person = {
  // ✅ 좋은 메서드 이름 (동작 설명)
  greet() { },
  calculateAge() { },
  
  // ❌ 나쁜 메서드 이름 (데이터처럼 보임)
  greeting() { },
  age() { }
};

2. 메서드는 한 가지 일만 해야 합니다

 

 

javascript

// ❌ 너무 많은 일을 하는 메서드
let user = {
  doEverything() {
    alert("안녕");
    let age = 25;
    return age * 2;
    // 뭘 하는 건지 불명확
  }
};

// ✅ 명확한 목적의 메서드들
let user = {
  greet() {
    alert("안녕");
  },
  
  doubleAge(age) {
    return age * 2;
  }
};

3. 관련된 기능끼리 그룹화하세요

 

 

javascript

let shoppingCart = {
  items: [],
  total: 0,
  
  addItem(item, price) {
    this.items.push(item);
    this.total = this.total + price;
  },
  
  removeItem(index, price) {
    this.items.splice(index, 1);
    this.total = this.total - price;
  },
  
  getTotal() {
    return this.total;
  },
  
  clear() {
    this.items = [];
    this.total = 0;
  }
};

모든 메서드가 shoppingCart와 논리적으로 연관되어 있습니다!

복잡한 메서드 예제

예제 1: 할일 관리자

 

 

javascript

let todoManager = {
  todos: [],
  
  addTodo(task) {
    this.todos.push({
      task: task,
      completed: false,
      createdAt: new Date()
    });
    alert("할일이 추가되었습니다: " + task);
  },
  
  completeTodo(index) {
    if (this.todos[index]) {
      this.todos[index].completed = true;
      alert("할일 완료: " + this.todos[index].task);
    }
  },
  
  removeTodo(index) {
    if (this.todos[index]) {
      let removed = this.todos.splice(index, 1)[0];
      alert("할일 삭제: " + removed.task);
    }
  },
  
  listTodos() {
    if (this.todos.length === 0) {
      alert("할일이 없습니다.");
      return;
    }
    
    let list = "할일 목록:\n";
    for (let i = 0; i < this.todos.length; i++) {
      let status = this.todos[i].completed ? "✓" : "○";
      list += status + " " + this.todos[i].task + "\n";
    }
    alert(list);
  }
};

// 사용하기
todoManager.addTodo("JavaScript 공부하기");
todoManager.addTodo("운동하기");
todoManager.listTodos();
todoManager.completeTodo(0);
todoManager.listTodos();

예제 2: 은행 계좌

 

 

javascript

let bankAccount = {
  owner: "홍길동",
  balance: 0,
  transactions: [],
  
  deposit(amount) {
    if (amount <= 0) {
      alert("0원보다 큰 금액을 입금해주세요.");
      return;
    }
    this.balance += amount;
    this.transactions.push({
      type: "입금",
      amount: amount,
      date: new Date()
    });
    alert(amount + "원이 입금되었습니다.");
    this.showBalance();
  },
  
  withdraw(amount) {
    if (amount <= 0) {
      alert("0원보다 큰 금액을 출금해주세요.");
      return;
    }
    if (amount > this.balance) {
      alert("잔액이 부족합니다!");
      return;
    }
    this.balance -= amount;
    this.transactions.push({
      type: "출금",
      amount: amount,
      date: new Date()
    });
    alert(amount + "원이 출금되었습니다.");
    this.showBalance();
  },
  
  showBalance() {
    alert("현재 잔액: " + this.balance.toLocaleString() + "원");
  },
  
  getTransactionHistory() {
    if (this.transactions.length === 0) {
      alert("거래 내역이 없습니다.");
      return;
    }
    
    let history = "거래 내역:\n";
    for (let i = 0; i < this.transactions.length; i++) {
      let t = this.transactions[i];
      history += t.type + ": " + t.amount.toLocaleString() + "원\n";
    }
    alert(history);
  }
};

// 사용하기
bankAccount.deposit(10000);
bankAccount.deposit(5000);
bankAccount.withdraw(3000);
bankAccount.getTransactionHistory();

예제 3: 타이머

 

 

javascript

let timer = {
  seconds: 0,
  isRunning: false,
  intervalId: null,
  
  start() {
    if (this.isRunning) {
      alert("타이머가 이미 실행 중입니다.");
      return;
    }
    
    this.isRunning = true;
    this.intervalId = setInterval(() => {
      this.seconds++;
      console.log("경과 시간: " + this.seconds + "초");
    }, 1000);
    alert("타이머 시작!");
  },
  
  stop() {
    if (!this.isRunning) {
      alert("타이머가 실행 중이 아닙니다.");
      return;
    }
    
    clearInterval(this.intervalId);
    this.isRunning = false;
    alert("타이머 정지! 총 " + this.seconds + "초 경과");
  },
  
  reset() {
    this.stop();
    this.seconds = 0;
    alert("타이머 리셋!");
  },
  
  getTime() {
    let minutes = Math.floor(this.seconds / 60);
    let secs = this.seconds % 60;
    return minutes + "분 " + secs + "초";
  }
};

// 사용하기
timer.start();
// 잠시 후...
timer.stop();
alert("경과 시간: " + timer.getTime());

다음 단계는?

메서드를 배우면서 this라는 키워드를 여러 번 봤을 것입니다. this는 메서드 안에서 객체 자신을 참조하는 특별한 키워드입니다.

앞으로 배울 내용:

• this 키워드의 정확한 의미와 사용법
• 화살표 함수와 메서드의 차이
• 메서드 체이닝 (Method Chaining)
• 생성자 함수와 클래스

이런 고급 개념들은 메서드의 기초를 확실히 이해한 후에 배워야 합니다!

---

핵심 정리

✅ 메서드는 객체 안에 있는 함수입니다

• 일반 함수와 같지만 객체의 일부로 존재합니다

✅ 메서드 vs 속성

• 속성(Property): 객체 안의 변수 (데이터 저장)
• 메서드(Method): 객체 안의 함수 (동작 수행)

✅ 현대적인 메서드 문법 (권장)

 

 

javascript

let obj = {
  methodName(parameters) {
    // 코드
    return value;  // 선택사항
  }
};

✅ 전통적인 문법 (참고)

 

 

javascript

let obj = {
  methodName: function(parameters) {
    // 코드
  }
};

✅ 메서드 호출 방법

 

 

javascript

objectName.methodName(arguments);

• 점(.) 표기법으로 접근
• 괄호 ()로 실행

✅ 메서드의 특징

• 매개변수를 받을 수 있습니다
• 값을 반환할 수 있습니다
• 매개변수와 반환값 모두 선택사항입니다

✅ 이미 메서드를 사용하고 있었습니다

• text.toUpperCase()
• array.push()
• Math.random() → 모두 내장 객체의 메서드!

✅ 메서드를 사용하는 이유

• 관련된 데이터와 기능을 함께 그룹화
• 코드의 구조화와 조직화
• 더 읽기 쉽고 유지보수하기 쉬운 코드

메서드는 객체 지향 프로그래밍의 핵심 개념입니다. 현대적인 축약 문법을 사용하면 코드가 더 깔끔하고 읽기 쉬워집니다. 실습을 통해 메서드 사용에 익숙해지세요! 💪🚀