본문 바로가기
JavaScript

[자바스크립트] 클래스 선언하는 방법 (클래스, 오브젝트, 인스턴스의 차이)

by 메이플 🍁 2022. 3. 29.

1. 클래스(class), 오브젝트(object), 인스턴스(instance)

1.1 클래스란?

  • 클래스는 객체 지향 프로그래밍에서 객체를 생성하기 위한 틀 또는 템플릿이다
  • 클래스의 내부에는 객체를 정의하기 위한 속성(객체에 소속된 변수)와 메서드(객체에 소속된 함수)로 구성된다
  • 클래스에 데이터를 넣어서 만든것이 오브젝트이다
  • 클래스 안에는 데이터가 들어 있지 않기 때문에 메모리에 올라가지 않는다
  • 자바스크립트의 클래스는 ES6부터 사용이 가능하다
  • 클래스가 없었던 ES5에서는 함수를 사용해서 오브젝트를 생성하는 템플릿을 만들었다

1.2 오브젝트란?

  • 프로그램을 짤 때 동일한 목적이나 기능을 하는 변수와 함수들을 각각 하나로 묶는것
  • 여러 속성이나 메소드를 하나의 변수에 저장할 수 있도록 해주는 데이터 타입
  • 오브젝트는 key와 value로 구성된 프로퍼티(property)의 집합체이다
  • 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메서드(method)라고 한다
  • 숫자, 문자열, 불린값, null, undefined 같은 primitive type을 제외한 모든 값은 객체다 (함수, 배열, 정규표현식)
  • 오브젝트를 통해 value에 접근할 수 있는 변수는 key다

1.3 인스턴스란?

  • 인스턴스는 클래스를 이용해 생성된 객체다
  • 인스턴스는 객체와 유사하지만 객체는 포괄적이고 일반적인 반면에 인스턴스는 클래스를 사용하여 만들어진 객체라는 의미가 강하다
  • 인스턴스는 클래스를 사용해 여러번 만들 수 있으며 데이터가 있기 때문에 메모리에 올라간다
  • 클래스를 사용해 만든 오브젝트이기 때문에 클래스가 가지고 있는 프로퍼티와 메소드를 모두 상속받는다

 

2. 클래스 선언

class Cat {
  // 생성자 함수로 초깃값 설정
  constructor(name) {
    this.name = name;
  }
  meow() {
    console.log(`${this.name}: meow! meow! 😾`)
  }
}

// 인스턴스 만들기: 클래스를 사용해 오브젝트 생성
let samsaek = new Cat('samsaek');

samsaek.meow();
// samsaek: meow! meow! 😾

console.log(samsaek);
// Cat {name: 'samsaek'}

코드해석

  • 클래스의 변수명은 대문자로 시작한다
  • constructor는 생성자 함수로 클래스를 초기화시켜준다
  • 클래스 안에 있는 this는 해당 클래스를 가리킨다
  • new라는 키워드를 사용해 Cat이라는 클래스로 새로운 오브젝트를 만들어준다
  • 클래스를 사용해 오브젝트를 생성하므로 samsaek은 Cat이라는 클래스의 인스턴스이다

2.1 속성 vs 메서드

  • 속성(property): 객체에 소속된 변수(variable)
  • 메서드(method): 객체에 소속된 함수(function)

2.2 constructor와 초기화

  • constructor: 생성자 함수로 클래스를 초기화시켜준다
  • 초기화: 클래스로 만든 객체에 기본적으로 들어가야 되는 내용들을 넣어주는 것
  • new: 클래스를 사용해서 인스턴스를 생성하는 키워드

 

댓글