TIL20⎟JavaScript : Class vs Object

itssweetrain·2021년 1월 27일

JavaScript TIL

JavaScript

목록 보기

16/25

Class는 객체지향 프로그래밍의 핵심

객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법이다.

croissasnt,scone,macaroon 이라는 객체를 생성한다고 했을 때,
해당 객체들은 공통된 프로퍼티인 name,price,ingredient 을 가질 수 있다.

이 속성을 가지고 각각의 객체를 만든다면 비효율적일 것이다. 객체를 매번 만들어 사용하는 대신 class로 원하는 구조의 객체 틀을 짜놓고, 공통된 속성을 넣어 비슷한 모양의 객체를 계속해서 만들어낼 수 있다.

Class

Classes are a template for creating objects. They encapsulate data with code to work on that data

-template
-declare once
-no data in


class Person 
   name;
   age;      
   speak();

class는 ES6가 추가되면서 나타난 개념, 조금 더 연관있는 데이터를 한 데 묶어놓는 컨테이너와 같은 역할. Person이라는 컨테이너 안에는 name과 age라는 properties 가 들어있고 speak이라는 function이 들어있다.

name, age -> 속성(fields)
speak -> 행동(method)

class는 fields와 methods가 종합적으로 묶여있는 것을 의미한다. 간혹 데이터만(fields)만 들어있는 경우는 data class라고 불린다.

class를 이용해서 실제로 data를 넣는 것이 object이다.

Object

-instance of a class
-created many times
-data in

two ways of making object

const obj1 = {};
// 'object literal' syntax
const obj2 = new Object();
// 'object constructor' syntax

object는 class를 이용해서 만들 수 있다.

let croissant = {
    name : 'Croissant',
    price : 3300,
    getName : function() {
    	return this.name;
    },
    getPrice : function() {
    	return this.price;
    },
    applyDiscount: function(discount) { return this.price * discount;
    }
  }

객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 this라는 키워드를 사용할 수 있다.
그래서 getPrice 메서드에서 this.price로 price키에 접근할 수 있고, 3300이라는 값을 리턴해준다.

위의 코드가 빵집에서 쓰는 코드로 사용된다면, 새로운 빵이 나올 때마다 객체를 추가해야 하는데 프로퍼티는 같게 구성되어야 한다.
이 때, 빵 하나씩 객체를 추가하는 것이 아닌, 프로퍼티를 담은 Bread라는 클래스를 생성하여 관리할 수 있는 것이다.

class Bread {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "분당지점";
    this.salesAmount = 0;
  }
  
   applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const scone = new Bread('Scone', 2000);
console.log(scone);
//{
  Bread {
    name = Scone;
    price = 2000;
    department = "분당지점";
    salesAmount = 0;
  }

console.log(scone.name); 
//Scone
console.log(scone.price); 
//2000

위와 같이, new라는 키워드를 통해 클래스를 이용하여 객체를 생성하는 과정을 인스턴스화라고 한다.

Bread 라는 이름을 가진 Class를 이용하여 Bread가 가진 공통된 프로퍼티를 가진 scone이라는 객체를 생성하고, macaroom 이라는 객체를 생성하고..이런 과정이다!

객체의 위대함을 느낄 수 있는 부분이고, 이것이 객체지향의 유용성이다

인스턴스화

const sonce = new Bread('Scone',2000);

new 키워드를 통해 클래스-> 객체를 생성하는 과정

이 과정에서 클래스를 통해 생성된 객체를 인스턴스(instance)라고 한다. class는 새로운 instance를 생성할 때마다, constructor() 메서드를 호출한다.

생성자(constructor)

class Bread {
 constructor(name, price) {
    this.name = name;
    this.price = price;
    }
   }

constructor() 메서드는 argument(인자)를 받는다.
constructor() 메서드의 this키워드는 해당 instance를 의미한다.
constructor() 에서 인자로 받는 name과 price를 사용해 Bread instance의 name, price 프로퍼티에 값을 할당했다.

1. class declarations

getter and setter
The get syntax binds an object property to a function that will be called when that property is looked up.

우리가 좀더 방어적인 자세로 만들 수 있게 해주는 것이 getter와 setter.

get이라는 keyword를 이용해서 값을 return하고 set이라는 keyword를 이용해서 값을 설정할 수 있다. 대신 set은 값을 설정하기 때문에 우리가 value를 받아와야한다.

get age() 을 정의하는 순간 this.age, 메모리에 올라가 있는 데이터를 읽어오는 것이 아니라 바로 getter를 호출하게 된다. 그리고 setter를 정의하는 순간, 바로 setter를 호출한다. 즉 우리가 setter안에서 전달된 value를 this.age에 할당할 때 메모리의 값을 업데이트하는 것이 아니라 setter를 호출하게 된다.

무한정 호출하게 되므로 call stack exceeded라고 뜨고, 따라서 this._age;와 같이 변수를 변경해준다.