JavaScript 기초 5 (class, 프로토타입, Object 객체)

JavaScript에서 class

class 클래스명 {
    constructor(매개변수1, 매개변수2, ...) {
        속성 정의
    }
    메서드명(매개변수1, 매개변수2, ...){
        객체가 할 수 있는 동작 정의
    }
}

클래스 기본 구조와 인스턴스 생성

클래스는 객체를 만들기 위한 '템플릿'이다. constructor를 통해 초기 속성을 정의하고, 객체가 할 수 있는 동작을 메서드로 정의한다.

class Animal {
    constructor(type) {
        this.type = type; // 속성 정의
    }
    bark() {
        console.log(`${this.type} 멍멍!`); // 메서드 정의
    }
    speak() {
        console.log("동물이 소리를 냅니다");
    }
}

const dog = new Animal("강아지");
console.log(dog.type); // 강아지
dog.bark();            // 강아지 멍멍!

클래스 상속

상속을 사용하면 기존 클래스(부모)의 속성과 메서드를 물려받아 새로운 클래스(자식)를 확장할 수 있다. 부모 생성자를 호출할 때는 super()를 사용하며, 부모의 메서드를 자식 클래스에서 재정의하는 것을 메서드 오버라이딩이라 한다.

class Dog extends Animal {
    constructor(type, color) {
        super(type); // 부모(Animal)의 constructor 호출
        this.color = color;
    }
    // 부모의 speak 메서드를 재정의 (오버라이딩)
    speak() {
        console.log("멍멍!");
    }
    showInfo() {
        console.log(`${this.type}는 ${this.color} 입니다`);
    }
}

const rucy = new Dog("강아지", "흰색");
rucy.speak();    // 멍멍! (오버라이딩된 메서드 호출)
rucy.bark();     // 강아지 멍멍! (부모에게 물려받은 메서드 호출)
rucy.showInfo(); // 강아지는 흰색 입니다

정적 메서드와 필드

인스턴스(객체)를 생성하지 않고, 클래스 이름으로 직접 호출하는 메서드와 속성이다. 전역적인 유틸리티 기능을 만들거나 전체 인스턴스를 관리할 때 유용하다.

class Mathtool {
    static add(a, b) {
        return a + b;
    }
}
console.log(Mathtool.add(3, 4)); // 7 (new 없이 바로 호출 가능)

get / set / private 필드

• get과 set은 같은 이름을 공유해야 한다.
• 내부에서 값을 저장할 땐 보통 _name처럼 언더스코어를 붙여서 구분한다.
• get만 정의하면 읽기 전용 속성이 된다.
• private은 클래스 내부에서만 접근 가능한 비공개 속성이다.
• #을 붙이면 반드시 동일한 클래스 안에서만 접근 가능하다.

class User {
    #password = ""; // 클래스 내부에서만 접근 가능한 비공개 속성

    constructor(name, password) {
        this._name = name;
        this.#password = password;
    }

    // getter: 값을 읽을 때 호출
    get name() {
        return this._name;
    }

    // setter: 값을 변경할 때 호출 (유효성 검사 기능 추가)
    set name(newName) {
        if (newName.length < 2) {
            console.log("이름은 두 글자 이상이어야 합니다.");
        } else {
            this._name = newName;
        }
    }

    checkPassword(input) {
        return this.#password === input; // 비공개 필드는 내부 메서드로만 확인 가능
    }
}

const user = new User("김사과", "1111");
user.name = "반"; // 메시지 출력: 이름은 두 글자 이상이어야 합니다.
// console.log(user.#password); // 외부 접근 불가능

프로토타입

프로토타입이란?

• 자바스크립트에서 객체가 공통된 속성과 메서드를 공유하도록 해주는 메커니즘이다.
• 모든 객체는 내부에 prototype이라는 숨겨진 연결을 가지며, 자신에게 없는 속성이나 메서드를 요청받으면 이 연결을 따라 프로토타입 객체에서 찾아오게 된다.
• 여러 객체가 동일한 메서드를 각각 따로 가지지 않고, 하나의 원본을 공유할 수 있어 메모리를 절약하고 구조적인 코드 작성이 가능하다.

function Person(name) {
    this.name = name;
}

// 공용 객체 공간(Prototype)에 메서드 등록
Person.prototype.study = function() {
    console.log(`${this.name} 열심히 공부합니다.`);
};

const p1 = new Person("김사과");
const p2 = new Person("반하나");

p1.study(); // 김사과 열심히 공부합니다.
p2.study(); // 반하나 열심히 공부합니다.
/*
    - person 생성자로 만든 객체 p1, p2는 study()라는 메서드를 직접 가지고 있지 않았음
    - person.prototype이라는 공용 객체에 저장된 메서드를 참조해서 사용
        p1 -> Person.prototype -> Object.prototype -> null (프로토타입 체인)
*/

Object 객체

Object 객체란?

• 자바스크립트의 내장 객체인 Object는 모든 객체의 최상위 부모(프로토타입의 기반)이자, 객체를 생성하고 조작하기 위한 기본 도구이다.
• Object는 객체를 만들 수 있는 생성자이면서, 객체의 속성을 다루기 위한 다양한 메서드를 제공한다.
• 모든 객체는 Object에서 출발하며, 공통 기능은 Object.prototype에 정의한다.

Object의 주요 메서드

Object.keys(obj)

객체의 모든 키(속성 이름)를 배열로 반환한다.

const user = { name: "김사과", age: 20 }
console.log(Object.keys(user)) // ['name', 'age']

 

Object.values(obj)

객체의 모든 값(속성 값)을 배열로 반환한다.

console.log(Object.values(user)) // ['김사과', 20]

 

Object.entries(obj)

객체의 키와 값 쌍을 [key, value] 형태의 배열로 반환한다.

console.log(Object.entries(user)) // [['name', '김사과'], ['age', 20]]

 

Object.assign(obj)

객체를 복사하거나 병합할 때 사용한다.

 

Object.hasOwn(obj, key)

객체가 특정 속성을 직접 가지고 있는지 확인

console.log(Object.hasOwn(user, "name")) // true
console.log(Object.hasOwn(user, "job")) // false

 

Object.freeze(obj)

객체를 동결시켜 속성을 변경 / 추가 / 삭제할 수 없게 만듦

const config = { debug: true }
Object.freeze(config)
config.debug = false
console.log(config.debug)  // true (변경 안됨)