[JavaScript] 클래스(Class)와 인스턴스(Instance)

Sieun·2023년 1월 13일
1

Javascript

목록 보기
16/21
post-thumbnail

클래스와 인스턴스를 설명하기 전, 객체 지향 프로그래밍이 무엇인지 아는 것이 중요하다. 개념을 먼저 살펴보도록 한다.

객체 지향 프로그래밍이란?

객체 지향 프로그래밍 (Object Oriented Programming) 은 컴퓨터 프로그래밍 패러다임 중 하나로 프로그래밍에서 필요한 데이터를 하나로 모아 추상화시켜 상태와 행위를 가진 객체를 생성하고, 그 객체들 간의 협력과 유기적인 상호작용을 통해 특정 기능을 구성하는 것을 말한다.

객체 지향 프로그래밍(OOP)은 절차 지향 프로그래밍(PP)과 다르게 데이터와 기능을 한 곳에 묶어서 처리한다.

  • OOP는 프로그램 설계 철학이다
  • OOP의 모든 것은 객체로 그룹화 된다.
  • OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다.

객체 지향 프로그래밍의 특징

객체 지향 프로그래밍의 주요 특징으로는 크게 네 가지가 있다.

1. 캡슐화 (Encapsulation)

  • 데이터와 기능을 하나의 단위로 묶는 것
  • 은닉(hiding) => 구현은 숨기고, 동작은 노출시킨다.
  • 느슨한 결합(Loose Coupling)에 유리 => 언제든 구현을 수정할 수 있다.

느슨한 결합 은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미한다.

은닉화 는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것이다.

2. 상속 (Inheritace)

상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것이다.

부모/자식으로 이야기하기도 하지만, 보다 그 특징을 자세하게 설명하는 용어는 "기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속받는다"로 표현하는 것이 적합하다.

3. 추상화 (Abstraction)

추상화는 내부 구현은 아주 복잡하지만, 실제로 노출되는 부분을 단순하게 만드는 개념이다.

예를 들어, 전화라는 객체가 있다면 스피커와 마이크가 존재하고 서킷 보드 등이 존재하는 여러 내부 구현이 되어 있지만, 우리는 이러한 존재에 생각하지 않고 수화기를 들고 버튼을 눌러서 해결하는 것처럼 추상화는 인터페이스를 단순화 할 수 있다.

"많은 사람들이 추상화와 캡슐화를 헷갈려 한다"

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

클래스 정의 시, 메서드와 속성만 정의한 것을 인터페이스 라고 부른다. 이것이 추상화의 본질

4. 다형성 (Polymorphism)

다형성은 하나의 객체가 여러 가지 타입을 가질 수 있는 것을 의미한다.

각기 다른 동물들이 말할 때 제 각각의 소리를 내는 것처럼, 객체 역시 똑같은 메서드라도 다른 방식으로 구현될 수 있다.


OOP 정리

  • 캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.
  • 추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화한다.
  • 상속도 역시 불필요한 코드를 줄여 재사용성을 높입니다.
  • 다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.


JavaScript에서 객체 지향이란?

다음은 하나의 모델이 되는 청사진(blueprint)를 만드는 것을 클래스(class), 그 청 사진을 바탕으로 한 객체(object)를 만드는 것이 인스턴스(instance) 라고 부른다.

본격적으로 들어가기 전, 기본적으로 알아두어야 할 단어를 숙지하고 넘어가야 이해할 수 있다.

여기에 있는 용어는 오직 JavaScript에서만 유효하다.

  • prototype : 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
  • constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수다.
  • this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값이 된다.

클래스(Class)

클래스에서 속성과 메소드를 정의하고, 인스턴스에서 이용한다.

예를 들어, 자동차의 속성은 브랜드, 차 이름, 색상을 의미하고, 메서드는 "객체에 딸린 함수" 를 뜻하며, 연료 주입, 속력 설정, 최고 속력 등을 의미한다.

class 생성 문법 (ES5 vs. ES6)

기본적으로 class를 생성하기 위해서 사용할 수 있는 ES5 방법과 ES6 방법이 있다.

// ES5
function Car(brand, name, color) {
	// 인스턴스가 만들어질 때 실행되는 코드
}

기존에 ES5 방식은 클래스를 함수로 정의할 수 있었다.

// ES6
class Car {
	constructor(brand, name, color) {
    	// 인스턴스가 만들어질 때 실행되는 코드
    }
}

현재 ES6 에서는 class라는 키워드를 이용해서 정의하는 방법이 추가되었고, 제일 많이 사용한다. 그래서 포스팅에서는 ES6 문법을 사용하여 다룰 예정이다.

1. 속성의 정의

class Car {
	constructor(brand, name, color) {
    	this.brand = brand;
      	this.name = name;
      	this.color = color;
    }
}

이와 같이 this에 할당한다는 것은 생성되는 인스턴스에 해당 브랜드, 이름, 색상을 인스턴스에 부여하겠다는 의미다.

2. 메소드의 정의

class Car {
	constructor(brand, name, color) {
    	/* 위에 속성 정의 코드와 동일 */
    }
  	refuel() {
    	console.log(this.name + '에 연료를 공급합니다.');
    }
  	drive() {
    	console.log(this.name + '가 운전을 시작합니다.');
    }
}

생성자 함수와 함께 class 키워드 안쪽에refuel() {}, drive() {} 와 같이 작성하여 묶어서 정의한다.

인스턴스(Instance)

위에서 설정한 속성과 메서드를 인스턴스에서는 다음 같이 사용한다.

인스턴스를 생성할 때 new 키워드를 사용한다.

// 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖고 있다.
let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');

avante.color;  // 'black'
avante.drive();  // avante가 운전을 시작합니다.

mini.brand;  // 'bmw'
mini.refuel();  // mini에 연료를 공급합니다.

new 키워드를 사용해서 인스턴스를 생성한다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체(인스턴스)가 할당된다.


Reference

CODESTATES (SEB_FE_43)

profile
👩🏻‍💻 블로그 이전했습니당 ! https://sinetlsl.github.io/

0개의 댓글