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

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

    Coding BasicsWeb ProgrammingFront-End Development

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

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

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

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

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


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

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


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

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



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


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

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


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


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

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


    예를 들어:

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



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

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


    용어 정리


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


    핵심 용어:

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


    기억하기 쉽게:

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



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

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


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

    구조 분석:

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


    특징:

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



    전통적인 문법 (참고용)


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

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


    일반 함수와의 비교

    일반 함수:


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


    객체 안의 메서드:


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


    차이점:

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



    실제 예제로 이해하기

    예제 1: 기본 메서드


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

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


    중요한 점:

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



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


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

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

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


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


    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

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



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

    잘못된 호출 방법


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

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

    왜 안 될까요?

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



    올바른 호출 방법


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

    단계별 분석:

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



    속성 접근과 비교하기


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

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

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

    차이점:

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



    메서드의 다양한 형태

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


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

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


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


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

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


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


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

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


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


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

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

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


    실전 예제: 종합 활용

    예제 1: 사용자 객체


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

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

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


    예제 2: 계산기 객체


    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: 게임 캐릭터


    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 메서드: 언제 무엇을 사용하나요?

    속성을 사용해야 할 때

    데이터를 저장해야 할 때:


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


    메서드를 사용해야 할 때

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


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

    원칙:

    1. 값을 저장 → 속성
    2. 작업을 수행 → 메서드



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

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

    문자열 메서드


    let text = "Hello World";

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

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


    배열 메서드


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

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

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


    Math 객체의 메서드


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

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

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


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

    사례 1: 검증 기능


    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: 상태 관리


    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: 포맷팅


    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. 메서드도 일반 함수의 규칙을 따릅니다


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


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


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

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


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


    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. 일반 함수와 같지만 객체의 일부로 존재합니다


    ✅ 메서드 vs 속성

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


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


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


    ✅ 전통적인 문법 (참고)


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


    ✅ 메서드 호출 방법


    objectName.methodName(arguments);
    1. 점(.) 표기법으로 접근
    2. 괄호 ()로 실행


    ✅ 메서드의 특징

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


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

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


    ✅ 메서드를 사용하는 이유

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


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