15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언

15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

thejavascript4kids 2025. 7. 22. 02:55

📘 15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

여러분, 안녕하세요. 오늘도 함께 새로운 것을 배울 수 있어서 참 감사한 마음입니다. 지난 시간 우리가 클래스라는 틀을 만들고, constructor로 객체의 첫 모습을 그려내는 법을 익혔었지요. 이제는 그 객체들이 실제로 할 수 있는 일들, 그들만의 특별한 능력을 만들어볼 시간이에요.

인스턴스 메서드라고 부르는 이 기능들은 마치 우리 각자가 가진 고유한 재능과 같아요. 같은 학교에 다니는 학생들이라도 누구는 노래를 잘하고, 누구는 그림을 잘 그리듯이, 같은 클래스로 만들어진 객체들도 각자 자신만의 방식으로 그 능력들을 발휘할 수 있거든요.

🧠 새로운 단어들과 친해지기

우리가 앞으로 만날 새로운 개념들을 차근차근 살펴보겠습니다.

단어	쉬운 설명
인스턴스 메서드	클래스로 만든 각 객체가 사용할 수 있는 특별한 기능이에요.
기능 사용하기	객체의 기능을 실행하라고 명령하는 것이에요.
연속 사용하기	여러 기능을 점(.)으로 연결해서 연속으로 사용하는 방법이에요. 메서드 체이닝이라고도 해요.
동작	객체가 할 수 있는 일이나 행동을 말해요.

메서드라는 말이 어렵게 느껴질 수도 있지만, 영어로 "방법"이라는 뜻이에요. 객체가 어떤 일을 하는 방법이라고 생각하시면 됩니다.

✨ 인스턴스 메서드가 뭔지 알아보기

인스턴스 메서드는 클래스 안에 정의된 특별한 기능으로, 그 클래스로 만든 각 객체가 사용할 수 있는 능력이에요. 생각해보면 constructor가 객체의 첫 설정을 담당했다면, 인스턴스 메서드는 객체가 살아가면서 할 수 있는 모든 일들을 담당하는 거지요.

가장 중요한 특징은 this를 사용해서 자기 자신의 속성에 접근하고 변경할 수 있다는 점이에요. 같은 클래스로 만든 여러 객체가 있어도, 각 기능은 자신을 호출한 객체의 정보만 다룹니다.

또한 메서드는 전달값을 받을 수도 있고, 결과값을 반환할 수도 있어요. 심지어 자기 자신을 반환해서 기능을 연속으로 사용하는 멋진 기법도 가능합니다.

재미있는 비유: 스마트폰의 다양한 기능들

인스턴스 메서드를 더 쉽게 이해하기 위해 우리 일상의 스마트폰에 비유해볼까요.

여러분이 스마트폰을 가지고 있다고 생각해보세요. 스마트폰에는 전화걸기, 메시지 보내기, 사진 찍기, 게임하기 같은 여러 기능들이 있어요. 이런 기능들이 바로 인스턴스 메서드와 같습니다.

철수의 스마트폰과 영희의 스마트폰은 같은 브랜드, 같은 모델이에요(같은 클래스). 하지만 각자 다른 전화번호, 연락처, 사진들을 가지고 있죠(각자 다른 속성값).

철수가 "전화걸기" 기능을 사용하면:

철수폰.전화걸기("엄마") → 철수의 연락처에서 엄마 번호를 찾아서 전화

영희가 "전화걸기" 기능을 사용하면:

영희폰.전화걸기("친구") → 영희의 연락처에서 친구 번호를 찾아서 전화

같은 기능이지만 각자 자신의 정보를 사용하는 거예요. 이것이 바로 인스턴스 메서드의 핵심입니다.

🎯 왜 인스턴스 메서드를 배워야 할까요?

그렇다면 우리는 왜 인스턴스 메서드를 배워야 할까요?

첫 번째로, 객체를 살아있게 만들어줘요. 속성만 있는 객체는 정보만 담고 있는 상자 같지만, 메서드가 있으면 실제로 일을 할 수 있는 살아있는 존재가 됩니다.

두 번째로, 관련된 기능을 하나로 묶어서 관리할 수 있어요. 학생 객체라면 출석하기, 숙제하기, 시험보기 같은 학생 관련 기능들을 모두 모아둘 수 있습니다.

세 번째로, 안전한 정보 관리가 가능해져요. 메서드를 통해서만 속성을 변경하도록 하면, 잘못된 값이 들어가는 것을 막을 수 있어요.

마지막으로, 코드 재사용성이 높아져요. 같은 클래스로 만든 여러 객체들이 모두 같은 메서드들을 사용할 수 있어서 중복을 줄일 수 있습니다.

⚙️ 기본 사용법 살펴보기

이제 인스턴스 메서드를 실제로 만들고 사용하는 방법을 알아보겠습니다.

class 클래스이름 {
    constructor(전달값) {
        this.속성 = 전달값;
    }

    기능이름() {
        // 기능 내용
        // this.속성으로 접근 가능
    }

    전달값받는기능(값) {
        // 전달값을 사용한 기능
        return 결과;
    }
}

// 사용법
let 객체 = new 클래스이름(값);
객체.기능이름();
let 결과 = 객체.전달값받는기능(값);

간단한 예시:

// 강아지 클래스
class Dog {
    constructor(name) {
        this.name = name;
        this.energy = 100;
    }

    bark() {
        console.log(this.name + ": 멍멍!");
        this.energy = this.energy - 10;
    }

    eat() {
        console.log(this.name + "이(가) 맛있게 먹어요!");
        this.energy = this.energy + 20;
    }
}

// 강아지 만들고 기능 사용하기
let myDog = new Dog("멍멍이");
myDog.bark();  // "멍멍이: 멍멍!"
myDog.eat();   // "멍멍이이(가) 맛있게 먹어요!"

🧪 직접 해보면서 배우기

이제 실제 상황에서 인스턴스 메서드를 사용하는 예시들을 살펴보겠습니다.

🔹 첫 번째 예시: 게임 캐릭터 만들기

간단한 게임 캐릭터로 인스턴스 메서드의 기본 사용법을 익혀보겠습니다.

// 게임 캐릭터 클래스
class GameCharacter {
    constructor(name) {
        this.name = name;
        this.health = 100;    // 체력
        this.level = 1;       // 레벨
        this.experience = 0;  // 경험치
    }

    // 공격하기 기능
    attack() {
        console.log(this.name + "이(가) 공격합니다!");
        this.experience = this.experience + 10;
        console.log("경험치 +10! 현재 경험치: " + this.experience);
    }

    // 체력 회복 기능
    heal() {
        this.health = this.health + 30;
        if (this.health > 100) {
            this.health = 100;  // 최대 체력 제한
        }
        console.log(this.name + "의 체력이 회복되었습니다! 현재 체력: " + this.health);
    }

    // 상태 확인 기능
    showStatus() {
        console.log("=== " + this.name + "의 상태 ===");
        console.log("체력: " + this.health);
        console.log("레벨: " + this.level);
        console.log("경험치: " + this.experience);
    }
}

// 캐릭터 만들고 게임하기
let hero = new GameCharacter("용사");
hero.showStatus();
hero.attack();
hero.attack();
hero.heal();
hero.showStatus();

이 예시에서는 각 기능이 캐릭터의 상태를 변경하고, 그 결과를 확인할 수 있어요.

🔹 두 번째 예시: 은행 계좌 관리하기

전달값을 받고 반환값을 가지는 기능들을 연습해보겠습니다.

// 은행 계좌 클래스
class BankAccount {
    constructor(owner) {
        this.owner = owner;
        this.balance = 0;      // 잔액
        this.transactions = 0; // 거래 횟수
    }

    // 입금 기능
    deposit(amount) {
        if (amount > 0) {
            this.balance = this.balance + amount;
            this.transactions = this.transactions + 1;
            console.log(this.owner + "님이 " + amount + "원 입금했습니다.");
            console.log("현재 잔액: " + this.balance + "원");
        } else {
            console.log("입금액은 0보다 커야 해요!");
        }
    }

    // 출금 기능
    withdraw(amount) {
        if (amount > 0 && amount <= this.balance) {
            this.balance = this.balance - amount;
            this.transactions = this.transactions + 1;
            console.log(this.owner + "님이 " + amount + "원 출금했습니다.");
            console.log("현재 잔액: " + this.balance + "원");
        } else {
            console.log("출금할 수 없어요! 잔액을 확인하세요.");
        }
    }

    // 잔액 확인 기능 (반환값 있음)
    getBalance() {
        return this.balance;
    }

    // 계좌 정보 출력 기능
    showInfo() {
        console.log("=== 계좌 정보 ===");
        console.log("예금주: " + this.owner);
        console.log("잔액: " + this.balance + "원");
        console.log("거래 횟수: " + this.transactions + "회");
    }
}

// 계좌 만들고 사용하기
let account = new BankAccount("철수");
account.deposit(1000);
account.withdraw(300);
account.deposit(500);

let currentBalance = account.getBalance();
console.log("확인된 잔액: " + currentBalance + "원");
account.showInfo();

이 예시에서는 기능이 전달값을 받아서 처리하고, 필요에 따라 값을 반환하는 것을 보여줍니다.

🔹 세 번째 예시: 연속 사용하기 (메서드 체이닝)

기능이 자기 자신을 반환해서 연속으로 사용할 수 있게 만들어보겠습니다.

// 텍스트 처리기 클래스
class TextProcessor {
    constructor(text) {
        this.text = text || "";  // 기본값 빈 문자열
    }

    // 텍스트 추가 기능
    add(newText) {
        this.text = this.text + newText;
        return this;  // 자기 자신을 반환 (연속 사용용)
    }

    // 감탄표 추가 기능
    addExclamation() {
        this.text = this.text + "!";
        return this;  // 자기 자신을 반환 (연속 사용용)
    }

    // 공백 제거 기능
    removeSpaces() {
        this.text = this.text.replace(/ /g, "");
        return this;  // 자기 자신을 반환 (연속 사용용)
    }

    // 결과 가져오기 기능
    getResult() {
        return this.text;
    }

    // 출력 기능
    print() {
        console.log("처리된 텍스트: " + this.text);
    }
}

// 연속 사용하기 (메서드 체이닝)
let processor = new TextProcessor("안녕");
processor.add(" 하세요").addExclamation().add(" 반가워요").addExclamation();
processor.print();  // "처리된 텍스트: 안녕 하세요! 반가워요!"

// 한 줄로도 가능
let result = new TextProcessor("좋은 ")
    .add("하루 ")
    .addExclamation()
    .getResult();
console.log("최종 결과: " + result);  // "좋은 하루 !"

이 예시에서는 연속 사용하기(메서드 체이닝)를 통해 여러 기능을 연속으로 사용하는 방법을 보여줍니다.

🔄 기능 실행 과정 정리하기

지금까지 배운 인스턴스 메서드의 실행 과정을 단계별로 정리해보겠습니다.

첫 번째 단계는 기능 호출입니다. 객체.기능이름() 형태로 원하는 기능을 실행하라고 명령합니다.

두 번째 단계는 전달값 처리입니다. 기능에 전달된 값들을 받아서 내부에서 사용할 수 있게 준비해요.

세 번째 단계는 this로 속성 접근입니다. this를 통해 기능을 호출한 객체의 속성들에 접근하고 필요에 따라 변경합니다.

마지막 단계는 결과 처리입니다. 계산이나 작업을 수행하고, 필요하면 결과값을 반환하거나 출력합니다.

🔄 14단원 복습: 배열 메서드 되돌아보기

15단원을 배우기 전에 14단원에서 배운 고급 배열 메서드를 복습해볼까요?

복습 문제 1: find로 특정 조건의 요소 찾기

// 학생 배열에서 90점 이상인 첫 번째 학생을 찾아보세요.
let students = [
    { name: "철수", score: 85 },
    { name: "영희", score: 92 },
    { name: "민수", score: 78 },
    { name: "지은", score: 96 }
];

let topStudent = students.find(function(student) {
    return student.score >= 90;
});

console.log("90점 이상 첫 번째 학생:", topStudent);
// { name: "영희", score: 92 }

// 간단하게 쓰기
let excellentStudent = students.find(student => student.score >= 95);
console.log("95점 이상 학생:", excellentStudent); // { name: "지은", score: 96 }

find는 조건을 만족하는 첫 번째 요소를 찾아서 반환해주는 기능이에요. 조건에 맞는 것이 없으면 undefined를 반환합니다.

복습 문제 2: some과 every로 전체 상황 확인하기

// 반 전체의 상황을 확인해보세요.
let classScores = [88, 76, 92, 85, 94, 79];

// 90점 이상인 학생이 있나요?
let hasExcellent = classScores.some(function(score) {
    return score >= 90;
});

// 모든 학생이 70점 이상인가요?
let allPassed = classScores.every(function(score) {
    return score >= 70;
});

console.log("점수들:", classScores);
console.log("90점 이상이 있나요?", hasExcellent); // true
console.log("모두 70점 이상인가요?", allPassed);   // true

// 낙제생이 있는지 확인
let hasFailure = classScores.some(score => score < 60);
console.log("낙제생이 있나요?", hasFailure); // false

some은 "하나라도 조건을 만족하면 true", every는 "모든 것이 조건을 만족해야 true"를 반환하는 기능이에요.

🧠 자주 하는 실수와 주의할 점

인스턴스 메서드를 사용할 때 초보자들이 자주 하는 실수들을 알아보고 피하는 방법을 살펴보겠습니다.

❌ 실수 1: 기능 안에서 `this` 없이 속성 접근하기

// 잘못된 예시 - this 없이 속성 접근
class WrongCar {
    constructor(speed) {
        this.speed = speed;
    }

    accelerate() {
        speed = speed + 10;  // this 없음! 에러 발생!
        console.log("속도 증가");
    }
}

// 올바른 예시 - this와 함께 속성 접근
class CorrectCar {
    constructor(speed) {
        this.speed = speed;
    }

    accelerate() {
        this.speed = this.speed + 10;  // this 필수!
        console.log("현재 속도: " + this.speed + "km/h");
    }
}

let car = new CorrectCar(50);
car.accelerate();  // 정상 작동

기능 안에서 객체의 속성을 사용할 때는 반드시 this를 붙여야 해요.

❌ 실수 2: 기능 정의할 때 `function` 키워드 사용하기

// 잘못된 예시 - function 키워드 사용
class WrongAnimal {
    constructor(name) {
        this.name = name;
    }

    function speak() {  // 틀렸어요! function 사용하면 안 됨
        console.log(this.name + "이(가) 말해요!");
    }
}

// 올바른 예시 - function 키워드 없이
class CorrectAnimal {
    constructor(name) {
        this.name = name;
    }

    speak() {  // 맞아요! function 없이
        console.log(this.name + "이(가) 말해요!");
    }
}

let animal = new CorrectAnimal("멍멍이");
animal.speak();  // 정상 작동

클래스 안에서 기능을 정의할 때는 function 키워드를 쓰지 않아요.

❌ 실수 3: 연속 사용하기에서 `this` 반환 안 하기

// 잘못된 예시 - this 반환 안 함
class WrongChain {
    constructor(value) {
        this.value = value;
    }

    add(num) {
        this.value = this.value + num;
        // return this가 없어서 연속 사용 불가
    }

    multiply(num) {
        this.value = this.value * num;
        // return this가 없어서 연속 사용 불가
    }
}

// 올바른 예시 - this 반환하여 연속 사용 가능
class CorrectChain {
    constructor(value) {
        this.value = value;
    }

    add(num) {
        this.value = this.value + num;
        return this;  // 연속 사용을 위해 자기 자신 반환
    }

    multiply(num) {
        this.value = this.value * num;
        return this;  // 연속 사용을 위해 자기 자신 반환
    }

    getValue() {
        return this.value;
    }
}

let chain = new CorrectChain(5);
let result = chain.add(3).multiply(2).getValue();
console.log("연속 사용 결과:", result);  // 16 ((5+3)*2)

연속 사용하기(메서드 체이닝)를 하려면 각 기능에서 this를 반환해야 해요.

연습문제 시작 전 잠깐, 이야기 하나.

문득 생각해보니 우리가 배우는 이 기능들이 참 신기해요. 코드 속에서 객체들이 저마다의 일을 해내는 모습을 보면, 마치 작은 세상이 돌아가는 것 같거든요. 각자 자신만의 역할을 하면서도 필요할 때 서로 도와주고, 때로는 혼자서도 여러 가지 일을 차례대로 해내기도 하죠. 이제 우리가 직접 그런 세상을 만들어볼 시간이에요.

✏️ 연습문제로 개념 다지기

배운 내용을 연습문제를 통해 확실히 익혀보겠습니다.

Ex1) 계산기 만들어서 "더하기 완료!" "빼기 완료!" 메시지를 띄워보자

// 계산기 클래스
class Calculator {
    constructor() {
        this.result = 0;  // 계산 결과 저장
    }

    // 더하기 기능
    add(number) {
        this.result = this.result + number;
        console.log("더하기 완료! +" + number + " = " + this.result);
    }

    // 빼기 기능
    subtract(number) {
        this.result = this.result - number;
        console.log("빼기 완료! -" + number + " = " + this.result);
    }

    // 결과 보기 기능
    showResult() {
        console.log("현재 결과: " + this.result);
    }

    // 초기화 기능
    clear() {
        this.result = 0;
        console.log("계산기가 초기화되었습니다.");
    }
}

// 계산기 사용하기
let calc = new Calculator();        // 새로운 계산기 객체 생성
calc.add(10);                      // 10을 더함
calc.subtract(3);                  // 3을 뺌
calc.add(5);                       // 5를 더함
calc.showResult();                 // 최종 결과 확인 (12)
calc.clear();                      // 계산기 초기화

Ex2) 연속 사용이 가능한 문자 처리기를 만들어서 "처리 완료!" 메시지를 보여주자

// 문자 처리기 클래스
class StringHelper {
    constructor(text) {
        this.text = text;  // 처리할 문자 저장
    }

    // 문자 추가 기능
    append(newText) {
        this.text = this.text + newText;
        return this;  // 연속 사용을 위해 자기 자신 반환
    }

    // 반복 기능
    repeat(times) {
        let original = this.text;
        for (let i = 1; i < times; i++) {
            this.text = this.text + original;
        }
        return this;  // 연속 사용을 위해 자기 자신 반환
    }

    // 결과 가져오기 기능
    get() {
        return this.text;
    }

    // 출력 기능
    print() {
        console.log("처리 완료! 결과: " + this.text);
    }
}

// 연속 사용하기 (메서드 체이닝)
let helper = new StringHelper("안녕");
helper.append("하세요!").repeat(2).print();
// "안녕하세요!안녕하세요!" 출력

let result = new StringHelper("좋아").append("요!").get();
console.log("최종: " + result);  // "좋아요!" 출력

Ex3) 전등을 켜고 끄면서 "전등이 켜졌어요!" "전등이 꺼졌어요!" 메시지를 띄워보자

// 전등 클래스
class Light {
    constructor(location) {
        this.location = location;    // 전등 위치
        this.isOn = false;          // 전등 상태 (꺼진 상태로 시작)
        this.brightness = 0;        // 밝기 0으로 시작
        this.usageCount = 0;        // 사용 횟수 0으로 시작
    }

    // 켜기 기능
    turnOn() {
        if (!this.isOn) {
            this.isOn = true;
            this.brightness = 100;
            this.usageCount = this.usageCount + 1;
            console.log("전등이 켜졌어요! " + this.location + " 밝기: " + this.brightness);
        } else {
            console.log("이미 켜져 있어요!");
        }
    }

    // 끄기 기능
    turnOff() {
        if (this.isOn) {
            this.isOn = false;
            this.brightness = 0;
            console.log("전등이 꺼졌어요! " + this.location);
        } else {
            console.log("이미 꺼져 있어요!");
        }
    }

    // 상태 확인 기능
    getStatus() {
        console.log("=== " + this.location + " 전등 상태 ===");
        console.log("전원: " + (this.isOn ? "켜짐" : "꺼짐"));
        console.log("밝기: " + this.brightness);
        console.log("사용 횟수: " + this.usageCount + "회");
    }
}

// 전등 사용하기
let roomLight = new Light("방");
roomLight.getStatus();           // 처음 상태 확인
roomLight.turnOn();              // 전등 켜기
roomLight.turnOff();             // 전등 끄기
roomLight.turnOn();              // 다시 전등 켜기
roomLight.getStatus();           // 최종 상태 확인

🤔 심화 문제로 실력 확인하기

더 깊이 있는 문제들을 통해 인스턴스 메서드에 대한 이해를 확인해보겠습니다.

Q1. 인스턴스 메서드를 친구에게 설명한다면 어떻게 설명하겠나요?

정답: "인스턴스 메서드는 물건이 할 수 있는 일과 같아요. 예를 들어 로봇 장난감에 '걷기', '말하기', '춤추기' 버튼이 있는 것처럼, 각 객체마다 그 객체가 할 수 있는 특별한 기능들이 있어요. 같은 종류의 로봇이라도 각자 자기 자신의 배터리나 설정을 가지고 있어서, 같은 기능을 실행해도 각자 다르게 반응해요."

Q2. 다음 코드에서 문제점을 찾아보세요.

class Car {
    constructor(speed) {
        this.speed = speed;
    }

    function accelerate() {
        speed = speed + 10;
        console.log(speed);
    }
}

정답: 세 가지 문제가 있어요.

1) function 키워드를 사용했어요 (제거해야 함)
2) this 없이 속성에 접근했어요 (speed → this.speed)
3) 올바른 형태는 accelerate() { this.speed = this.speed + 10; console.log(this.speed); }입니다.

🧚‍♀️ 이야기로 다시 배우기: 로봇 연구소의 특별한 로봇들 대모험

마지막으로 인스턴스 메서드를 하나의 재미있는 이야기로 정리해볼게요.

우리나라에 "첨단 로봇 연구소"가 있었어요. 이 연구소의 로봇들은 보통 로봇들과 달리 각자 특별한 능력을 가지고 있었답니다.

연구소에는 도우미 로봇 클래스로 만들어진 여러 로봇들이 있었어요. 모든 로봇들은 같은 기본 능력들을 가지고 있었죠:

알파라는 로봇은 이런 능력들을 가지고 있었어요:

알파.청소하기() - "알파가 청소합니다!" 하고 청소하면서 배터리 10% 소모
알파.충전하기() - 충전소에서 배터리 20% 회복
알파.상태보고() - 현재 배터리와 작업 횟수 알려주기

베타라는 다른 로봇도 똑같은 능력들을 가지고 있었지만, 자기 자신의 상태를 가지고 있었어요:

베타.청소하기() - "베타가 청소합니다!" (자기 이름으로 말하기)
베타.충전하기() - 베타의 배터리가 회복
베타.상태보고() - 베타의 상태 알려주기

신기한 건 연속 작업을 할 수 있는 로봇들도 있었어요. 체인이라는 로봇은 이런 능력을 가지고 있었답니다:

체인.청소하기().충전하기().정리하기().보고하기()

이렇게 여러 작업을 연결해서 한 번에 실행할 수 있었어요! 각 작업이 끝날 때마다 "다음 작업도 준비 완료!"라고 말하면서 자기 자신을 반환해주는 거였죠.

연구소 과학자들이 "어떻게 이런 기능이 가능해요?"라고 물어보니, 연구소장이 대답했어요. "각 로봇마다 자기만의 특별한 능력들이 있고, 그 능력들은 항상 자기 자신의 상태를 바꾸거나 확인할 수 있어요. 같은 능력이라도 누가 사용하느냐에 따라 결과가 달라지는 것이 바로 인스턴스 메서드의 핵심이랍니다!"

이처럼 인스턴스 메서드는 객체들이 각자 자신만의 특별한 능력을 가질 수 있게 해주는 기술이에요. 여러분도 이제 이 기술을 배웠으니, 객체들에게 정말 다양하고 멋진 기능들을 선물해줄 수 있게 되었답니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
15.1.3의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
14단원 복습 완료	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. BankAccount 클래스를 만들고 입금, 출금 메서드를 추가해보세요.

// 답:
class BankAccount {
    constructor(owner, balance = 0) {
        this.owner = owner;
        this.balance = balance;
    }

    // 입금 메서드
    deposit(amount) {
        if (amount > 0) {
            this.balance = this.balance + amount;
            console.log(`${this.owner}님이 ${amount}원 입금. 잔액: ${this.balance}원`);
        } else {
            console.log("입금액은 0보다 커야 합니다.");
        }
    }

    // 출금 메서드
    withdraw(amount) {
        if (amount > 0 && amount <= this.balance) {
            this.balance = this.balance - amount;
            console.log(`${this.owner}님이 ${amount}원 출금. 잔액: ${this.balance}원`);
        } else {
            console.log("출금할 수 없습니다. 잔액을 확인하세요.");
        }
    }

    // 잔액 확인 메서드
    getBalance() {
        console.log(`${this.owner}님의 현재 잔액: ${this.balance}원`);
        return this.balance;
    }
}

// 통장 만들고 사용하기
let account = new BankAccount("철수", 1000);
account.deposit(500);
account.withdraw(300);
account.getBalance();

추가 문제 2. 메서드 체이닝이 가능한 TextProcessor 클래스를 만들어보세요.

// 답:
class TextProcessor {
    constructor(text = "") {
        this.text = text;
    }

    // 텍스트 추가 메서드
    append(newText) {
        this.text = this.text + newText;
        return this;  // 체이닝을 위해 자기 자신 반환
    }

    // 대문자 변환 메서드
    toUpperCase() {
        this.text = this.text.toUpperCase();
        return this;  // 체이닝을 위해 자기 자신 반환
    }

    // 소문자 변환 메서드
    toLowerCase() {
        this.text = this.text.toLowerCase();
        return this;  // 체이닝을 위해 자기 자신 반환
    }

    // 결과 가져오기 메서드
    getResult() {
        return this.text;
    }

    // 출력 메서드
    print() {
        console.log("처리된 텍스트:", this.text);
    }
}

// 메서드 체이닝으로 사용하기
let processor = new TextProcessor("Hello ");
processor.append("World!").toLowerCase().append(" JavaScript").toUpperCase();
processor.print();  // "HELLO WORLD! JAVASCRIPT"

📂 마무리 정보

오늘 배운 15.1.3 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미 (0)	2025.07.22
15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구 (0)	2025.07.21

현재글15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

async_await, Export, 코딩교재, ES6모듈, 연산자, setTimeout, 자바스크립트교재, 자바스크립트, JavaScript, 모듈패턴, 중등코딩교육, Promise, 논리연산자, 초등코딩, 비교연산자, 산술연산자, 싱글턴패턴, 비동기, Import, 모듈,

Today :
Yesterday :

초중고등학생 자바스크립트 교재

15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

📘 15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

🧠 새로운 단어들과 친해지기

✨ 인스턴스 메서드가 뭔지 알아보기

재미있는 비유: 스마트폰의 다양한 기능들

🎯 왜 인스턴스 메서드를 배워야 할까요?

⚙️ 기본 사용법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 게임 캐릭터 만들기

🔹 두 번째 예시: 은행 계좌 관리하기

🔹 세 번째 예시: 연속 사용하기 (메서드 체이닝)

🔄 기능 실행 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: find로 특정 조건의 요소 찾기

복습 문제 2: some과 every로 전체 상황 확인하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 기능 안에서 `this` 없이 속성 접근하기

❌ 실수 2: 기능 정의할 때 `function` 키워드 사용하기

❌ 실수 3: 연속 사용하기에서 `this` 반환 안 하기

✏️ 연습문제로 개념 다지기

Ex1) 계산기 만들어서 "더하기 완료!" "빼기 완료!" 메시지를 띄워보자

Ex2) 연속 사용이 가능한 문자 처리기를 만들어서 "처리 완료!" 메시지를 보여주자

Ex3) 전등을 켜고 끄면서 "전등이 켜졌어요!" "전등이 꺼졌어요!" 메시지를 띄워보자

🤔 심화 문제로 실력 확인하기

Q1. 인스턴스 메서드를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

🧚‍♀️ 이야기로 다시 배우기: 로봇 연구소의 특별한 로봇들 대모험

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. BankAccount 클래스를 만들고 입금, 출금 메서드를 추가해보세요.

추가 문제 2. 메서드 체이닝이 가능한 TextProcessor 클래스를 만들어보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

티스토리툴바

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

📘 15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들

🧠 새로운 단어들과 친해지기

✨ 인스턴스 메서드가 뭔지 알아보기

재미있는 비유: 스마트폰의 다양한 기능들

🎯 왜 인스턴스 메서드를 배워야 할까요?

⚙️ 기본 사용법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 게임 캐릭터 만들기

🔹 두 번째 예시: 은행 계좌 관리하기

🔹 세 번째 예시: 연속 사용하기 (메서드 체이닝)

🔄 기능 실행 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: find로 특정 조건의 요소 찾기

복습 문제 2: some과 every로 전체 상황 확인하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 기능 안에서 this 없이 속성 접근하기

❌ 실수 2: 기능 정의할 때 function 키워드 사용하기

❌ 실수 3: 연속 사용하기에서 this 반환 안 하기

✏️ 연습문제로 개념 다지기

Ex1) 계산기 만들어서 "더하기 완료!" "빼기 완료!" 메시지를 띄워보자

Ex2) 연속 사용이 가능한 문자 처리기를 만들어서 "처리 완료!" 메시지를 보여주자

Ex3) 전등을 켜고 끄면서 "전등이 켜졌어요!" "전등이 꺼졌어요!" 메시지를 띄워보자

🤔 심화 문제로 실력 확인하기

Q1. 인스턴스 메서드를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

🧚‍♀️ 이야기로 다시 배우기: 로봇 연구소의 특별한 로봇들 대모험

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. BankAccount 클래스를 만들고 입금, 출금 메서드를 추가해보세요.

추가 문제 2. 메서드 체이닝이 가능한 TextProcessor 클래스를 만들어보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

관련글

티스토리툴바

❌ 실수 1: 기능 안에서 `this` 없이 속성 접근하기

❌ 실수 2: 기능 정의할 때 `function` 키워드 사용하기

❌ 실수 3: 연속 사용하기에서 `this` 반환 안 하기