[기초]JavaScript Object, Class(객체와 클래스)

자바스크립트(JavaScript)는 객체지향 프로그래밍을 지원하는 언어로, 객체와 클래스를 통해 복잡한 데이터 구조와 로직을 표현할 수 있습니다.

 

1. 객체(Object)

객체의 정의

• 자바스크립트에서 객체는 키-값 쌍으로 이루어진 데이터 구조입니다. 객체는 변수나 상수에 할당할 수 있으며, 객체의 각 키는 고유해야 하고, 값은 어떤 자료형이든 가능합니다.

 

객체 생성 방법

• 객체 리터럴을 이용한 생성
  • 여기서 person은 객체이며, name, age, greet는 이 객체의 속성입니다.

const person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello!');
    }
};

 

• Object 생성자 함수를 이용한 생성

const person = new Object();
person.name = 'John';
person.age = 30;
person.greet = function() {
    console.log('Hello!');
};

 

• Object.create를 이용한 생성

const personProto = {
    greet: function() {
        console.log('Hello!');
    }
};
const person = Object.create(personProto);
person.name = 'John';
person.age = 30;

 

 

객체의 속성 접근과 수정

• 점 표기법: 객체의 속성에 접근할 때 많이 사용합니다.

console.log(person.name); // 'John'
person.age = 31;

 

 

• 대괄호 표기법: 속성 이름이 문자열이거나 변수로 동적으로 접근할 때 사용합니다.

console.log(person['name']); // 'John'
const key = 'age';
person[key] = 32;

 

 

객체 메서드

• 객체 내 함수는 메서드라고 부릅니다. 예시에서 greet은 메서드입니다. 

person.greet(); // 'Hello!'

 

 

---

2. 클래스(Class)

클래스의 정의

• ES6(ECMAScript 2015)에서 추가된 기능으로, 클래스는 객체를 생성하기 위한 템플릿입니다. 클래스를 사용하면 객체 지향 프로그래밍을 보다 명확하게 구현할 수 있습니다.

 

클래스 선언

• 클래스 선언문
  • constructor는 객체가 생성될 때 자동으로 호출되는 메서드입니다.
  • greet는 Person 클래스의 메서드입니다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log('Hello, my name is ' + this.name);
    }
}

 

• 클래스 표현식

const Person = class {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log('Hello, my name is ' + this.name);
    }
};

 

 

인스턴스 생성

• 클래스에서 객체(인스턴스)를 생성하려면 new 키워드를 사용합니다.

const john = new Person('John', 30);
john.greet(); // 'Hello, my name is John'

 

 

클래스 상속

• 자바스크립트에서 클래스를 상속받아 새로운 클래스를 만들 수 있습니다. 상속을 통해 기존 클래스의 기능을 확장할 수 있습니다.

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age); // 부모 클래스의 constructor 호출
        this.jobTitle = jobTitle;
    }

    work() {
        console.log(this.name + ' is working as a ' + this.jobTitle);
    }
 }

 const jane = new Employee('Jane', 28, 'Software Developer');
 jane.greet(); // 'Hello, my name is Jane'
 jane.work();  // 'Jane is working as a Software Developer'

 

---

3. 객체와 클래스의 차이점

• 객체는 단일 인스턴스이며, 특정 데이터를 담기 위해 사용됩니다.
• 클래스는 객체를 생성하기 위한 템플릿입니다. 하나의 클래스로 여러 객체를 생성할 수 있습니다.
• 클래스는 상속, 캡슐화, 다형성 등 객체지향 프로그래밍의 특성을 지원하여 더 복잡한 구조와 로직을 구현할 수 있습니다.

 

자바스크립트에서 객체와 클래스는 강력한 기능을 제공하며, 이를 활용해 복잡한 애플리케이션을 체계적으로 설계하고 구현할 수 있습니다.