FE

[스터디] 8주차 자바스크립 (모던 자바스크립트 deep dive)

올바른생활부터 2025. 1. 28. 23:38
728x90
반응형
SMALL

클래스

질문 1. class에 대해 설명해주세요.

  • 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 틀로, 어떤 사물들의 공통 속성을 모은 추상적인 개념입니다. 또한, 클래스는 상태(멤버 변수)와 메서드(함수)를 통해 객체를 정의합니다.

※ 상태(멤버 변수) = 인스턴스 변수

// 클래스 정의
class Dog {
    // 생성자 메서드 (클래스로부터 객체가 생성될 때 호출됨)
    constructor(name, age) {
        this.name = name;  // 인스턴스 변수
        this.age = age;    // 인스턴스 변수
    }

    // 메서드 정의
    bark() {
        console.log(`${this.name} says woof!`);
    }

    // 또 다른 메서드
    getAge() {
        return this.age;
    }

    // 인스턴스 변수 업데이트 메서드
    haveBirthday() {
        this.age += 1;
    }
}

// 클래스의 인스턴스 생성
const myDog = new Dog('Buddy', 3);

// 메서드 호출
myDog.bark();  // 출력: Buddy says woof!

console.log(`Age: ${myDog.getAge()}`);  // 출력: Age: 3

// 인스턴스 변수 업데이트
myDog.haveBirthday();

console.log(`New Age: ${myDog.getAge()}`);  // 출력: New Age: 4

// 생성자 메서드: `constructor` 메서드는 클래스의 인스턴스가 생성될 때 호출되며, 인스턴스 변수 `name`과 `age`를 초기화합니다.
// 인스턴스 생성: `new`** 키워드를 사용하여 `Dog` 클래스의 인스턴스를 생성합니다.
// 메서드 정의: `bark`, `getAge`, `haveBirthday`와 같은 메서드를 정의합니다.

질문 2. 인스턴스를 생성한다는 것은 어떤 것 인가요?

  • 인스턴스를 생성한다는 것은 해당 클래스 또는 생성자 함수로부터 구체적인 객체를 생성하는 것입니다.
  • 인스턴스 생성: const myDog = new Dog('Buddy', 3); 코드를 통해 Dog 클래스의 인스턴스인 **myDog**를 생성합니다. 이 과정에서 constructor 메서드가 호출되어 **name**과 age 인스턴스 변수가 초기화됩니다.
// 붕어빵: 인스턴스
// 붕어빵 틀: 클래스

// 클래스 정의
class Dog {
    // 생성자 메서드 (클래스로부터 객체가 생성될 때 호출됨)
    constructor(name, age) {
        this.name = name;  // 인스턴스 변수
        this.age = age;    // 인스턴스 변수
    }
    // 메서드 정의
    bark() {
        console.log(`${this.name} says woof!`);
    }
    // 또 다른 메서드
    getAge() {
        return this.age;
    }
    // 인스턴스 변수 업데이트 메서드
    haveBirthday() {
        this.age += 1;
    }
}

// 클래스의 인스턴스 생성
const myDog = new Dog('Buddy', 3); // Dog class의 인스턴스는 myDog이다. 

// 메서드 호출
myDog.bark();  // 출력: Buddy says woof!
console.log(`Age: ${myDog.getAge()}`);  // 출력: Age: 3

// 인스턴스 변수 업데이트
myDog.haveBirthday();
console.log(`New Age: ${myDog.getAge()}`);  // 출력: New Age: 4

질문 3. 클래스에서 constructor 키워드에 대해 설명해주세요.

  • constructor는 클래스의 인스턴스를 생성하고, 초기화 하는 메서드입니다.
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
// 새로운 Person 인스턴스를 생성합니다.
const person1 = new Person('Alice', 30);
person1.greet(); // "Hello, my name is Alice and I am 30 years old."

const person2 = new Person('Bob', 25);
person2.greet(); // "Hello, my name is Bob and I am 25 years old."

질문 4. 생성자 함수에 대해서 설명해주세요.

  • 자바스크립트에서 생성자 함수는 new 연산자를 사용하여 새로운 인스턴스를 생성할 수 있도록 하는 함수입니다.
// 생성자 함수 
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 새로운 인스턴스를 생성합니다.
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

console.log(person1.name); // "Alice"
console.log(person2.age);  // 25

질문 5. 클래스에서 instance of는 어떤 상황일때 사용하게 될까요?

  • instanceof 연산자는 객체가 특정 클래스의 인스턴스인지 확인하는 데 사용됩니다.
class Animal { }

class Dog extends Animal { }

public class Main {
    public static void main(String[] args) {
        Animal animal = new Animal();
        Dog dog = new Dog();

        System.out.println(animal instanceof Animal); // true
        System.out.println(animal instanceof Dog);    // false
        System.out.println(dog instanceof Animal);    // true
        System.out.println(dog instanceof Dog);       // true

    }
}

질문 6. 클래스의 정적 프로퍼티(static properties)에 관해 설명해주세요.

  • 정적 프로퍼티는 static 키워드를 사용하여 클래스 선언부에 정의되며, 개별 인스턴스가 아닌 클래스 자체에 속하는 데이터를 저장하는 데 사용됩니다.
  • 정적 메서드와 정적 프로퍼티는 인스턴스를 생성하지 않고, 클래스 내부에서만 생성해서 사용할 수 있다. ex. class(=붕어빵 틀)에서만 사용할 수 있다.
class MyClass {
  static staticProperty = 'I am a static property'; // staic 프로퍼티

  static staticMethod() {// static 메서드
    return 'I am a static method'; // 
  }

  instanceMethod() { // 인스턴스 메서드
    return 'I am an instance method';
  }
}

console.log(MyClass.staticProperty); // 'I am a static property'
console.log(MyClass.staticMethod()); // 'I am a static method'

const instance = new MyClass();
console.log(instance.instanceMethod()); // 'I am an instance method'
728x90
반응형
LIST