클래스(class)와 인스턴스(instance) 그리고 객체(object)

프론트엔드 공부/자바스크립트

클래스(class)와 인스턴스(instance) 그리고 객체(object)

디투개 2023. 1. 13. 12:02

클래스와 인스턴스

자바스크립트에서 클래스와 인스턴스? 이건 또 뭔.. 말이야?

객체(Object)란?

객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말한다. 예를 들어 물리적(유형)으로 존재하는 자동차, 컴퓨터, 사람과 추상적(무형)으로 존재하는 강의, 주문 등이 모두 객체가 될 수 있다.

사람이라는 객체는 이름, 나이, 성별 등과 같은 속성과 먹다, 걷다, 자다 등의 동작을 가진다.
이러한 속성들을 필드(field), 동작들을 메소드(method)라고 부른다.

클래스(class)란?

용도 : 객체를 생성하는 데 사용한다.
클래스(Class)란 객체를 생성하기 위한 일종의 설계도이다.
객체가 가지는 속성(필드)과 동작(메소드)으로 이루어져 있다.(클래스를 정의하는 것 자체로는 할 수 있는 일이 많지 않다. 설계도를 구체적인 제품으로 만들어야 한다.)
흔히 붕어빵(객체)을 만들기 위한 붕어빵 틀(클래스)이라고 비유를 한다.
클래스는 필드(Field), 생성자(Constructor), 메소드(Method)로 구성되어 있다. 이들은 생략될 수도 있고 하나 이상 작성될 수도 있다.

필드 : 객체의 데이터가 저장되는 곳이다.
생성자 : 객체가 실제로 생성될 때 초기화 역할을 담당한다.
메소드 : 객체의 동작에 해당하는 실행 블록이다.

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

  eat() {
    console.log("냠냠..");
  }

  walk() {
    console.log("뚜벅뚜벅");
  }

  sleep() {
    console.log("zzz...");
  }
}

인스턴스

실제로 존재하는 것. 사물 또는 개념 / 속성과 기능의 집합.
용도 : 객체가 가지고 있는 기능과 속성에 따라 다르다.
클래스가 붕어빵 틀이라면 그 틀을 통해 생성된 객체(붕어빵) 하나하나를 해당 클래스의 인스턴스(Instance)라고 부른다.
Java 프로그램 실행 시 클래스는 JVM 메모리의 클래스 영역(Class Area)에 로드되고 이 클래스를 사용하여 힙 영역(Heap Area)에 새로운 인스턴스(객체)를 생성할 수 있다.
즉, 인스턴스란 현실의 객체를 소프트웨어 내에서 구현한 실체라고 볼 수 있다.
생성된 인스턴스들은 각자 고유의 특성을 가지고 독립적으로 존재한다.

let p1 = new Person("윤해커", "20", "M");
let p2 = new Person("김코딩", "20", "F");

p1.eat();
p1.walk();
p1.sleep();

p2.eat();
p2.walk();
p2.sleep();

new 연산자와 생성자 함수

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.

함수 이름의 첫 글자는 대문자로 시작합니다.
반드시 'new' 연산자를 붙여 실행합니다.

// 구문
// constructor === 객체 인스턴스의 타입을 기술(명세)하는 함수
// arguments  === constructor와 함께 호출될 값 목록
new constructor[([arguments])]

//예시

//ES6 문법
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false



//ES6 문법
class User {
    constructor(name) {
        this.name = name;
        this.isAdmin = false;
    }
}

let user = new User("보라");

console.log(user.name); // 보라
console.log(user.isAdmin); // false

ES5 클래스 작성 문법

ES2015 이전까지는 비슷한 종류의 객체를 많이 만들어내기 위해 생성자 함수를 사용해왔습니다.

// ES2015이전 생성자 
function Person({name, age}) {
  this.name = name;
  this.age = age;
}
Person.prototype.introduce = function() {
  return `안녕하세요, 제 이름은 ${this.name}입니다.`;
};

const person = new Person({name: '김코딩', age: 13});
console.log(person.introduce()); // 안녕하세요, 제 이름은 김코딩입니다.
console.log(typeof Person); // function
console.log(typeof Person.prototype.constructor); // function
console.log(typeof Person.prototype.introduce); // function
console.log(person instanceof Person); // true

ES6 클래스 작성 문법

ES2015에서 도입된 클래스는 생성자의 기능을 대체합니다. class 표현식을 사용하면, 생성자와 같은 기능을 하는 함수를 훨씬 더 깔끔한 문법으로 정의할 수 있습니다.

// ES2015 새로 도입된 클래스(class)
class Person {
  // 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의합니다.
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }

  // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면, 메소드가 자동으로 `Person.prototype`에 저장됩니다.
  introduce() {
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
  }
}

const person = new Person({name: '김코딩', age: 16});
console.log(person.introduce()); // 안녕하세요, 제 이름은 김코딩입니다.
console.log(typeof Person); // function
console.log(typeof Person.prototype.constructor); // function
console.log(typeof Person.prototype.introduce); // function
console.log(person instanceof Person); // true

ES5, ES6에서 class 차이점

문법이 아니라 동작방식의 측면에서 보면, ES2015 이전의 생성자와 ES2015의 클래스는 다음과 같은 차이점이 있습니다.

클래스는 함수로 호출될 수 없습니다.
클래스 선언은 let과 const처럼 블록 스코프에 선언되며, 호이스팅(hoisting)이 일어나지 않습니다.
클래스의 메소드 안에서 super 키워드를 사용할 수 있습니다.

	ES5	ES6
생성자	일반 함수가 new 연산자와 호출시 생성자 함수로써 동작. 프로토타입 메서드 및 스태딕 메서드도 new 연산자와 함께 생성자 함수로써 사용 가능	class 키워드로 선언된 클래스의 본문 영역 내에 constructor 키워드를 통해 생성자를 정의함. 프로토타입 메서드 및 스태딕 메서드는 new연산자와 함께 생성자 함수로 사용하려고 하면 해당 함수는 constructor가 아니라 TypeError 나온다.
스태딕 메서드	생성자 함수에 바로 정의되는 메서드	static이라는 키워드와 함께 선언되는 메서드
프로토타입 메서드	생성자 함수에 prototype 내부에 할당되는 메서드	클래스 본문 영역내에 function이라는 키워드를 생략하더라도 모두 메서드로 인식 하면서 constructor나 static이라는 키워드가 없다면 자동으로 prototype 객체 내부에 할당됨.

참조 : 신용권, 『이것이 자바다』, 한빛미디어,
https://codybuilder.com/17
https://helloworldjavascript.net/pages/270-class.html
https://typeof-undefined.tistory.com/7
https://ko.javascript.info/constructor-new

저작자표시 비영리 변경금지 (새창열림)