본문 바로가기
Front-end/Vanilla JS

JS 근본 공부 - class & object(객체지향)

by devraphy 2020. 10. 31.

1. class란 무엇일까?

- 클래스는 현실의 대상을 데이터화 시키기 위해 연관된 정보 또는 데이터를 하나의 그룹으로 묶는 것을 의미한다. 

- 클래스는 속성(= fields, 변수)행동(= method, 함수)으로 구성되어 있다.

- 그러므로 클래스는 어떤 현실의 대상을 데이터화 시키기 위한 설계도 또는 청사진이다. 

- 속성만으로 구성되어있는 클래스가 있는데, 이를 데이터 클래스라고 부른다. 

 

[Class 선언방법]

class Person {
 // construcor: 해당 클래스를 이용하여 객체를 생성할 때 
 // 객체의 초기값을 설정하기 위해서 사용되는 생성자 함수이다. 
 constructor(name, age) {
  // fields
  this.name = name; 
  this.age = age;
  // 여기서 this.name은 클래스 내부에 존재하는 name속성을 가리키는 것이고
  // 그냥 name은 사용자가 매개변수로 입력한 값을 의미한다. 

 }
 
 get age() {
  return this._age;  
 }
 
 set age(value) {
  this._age = value < 0 ? 0 : value; // 삼항연산자를 사용하여 오류검증
 }
  
 // methods
 speack() {
  console.log(`${this.name}: hello!`);
 }
}

 

  • constructor는 해당 클래스를 이용하여 객체를 생성할 때, 객체의 초기값을 설정하기 위해서 사용되는 생성자 함수이다. 
  • getter와 setter는 외부에서 함부로 객체 내부의 속성값을 변경할 수 없게 하기 위해서 사용한다.
    ex) 사용자가 객체를 생성할 때 age 속성의 초기값을 -1로 입력하여 발생할 수 있는 오류를 초기에 방지 및 통제하기 위해 사용하는 것이다. 

  • getter와 setter에서 사용되는 변수이름에는 언더바(_)를 추가하여 분별할 수 있게 한다. 

 

 

[접근 지정자(added in ES6) - private, static]

- constructor를 사용하지 않고 필드를 선언하면 public 상태로 클래스의 외부에서의 접근이 가능해진다. 만약 constructor를 사용하지 않는다면 private 접근지정자를 이용하여 선언하는 것을 권장한다.(변수명 앞에 #을 붙이면 된다.)

 

- 클래스의 fields와 methods는 새로운 object가 생성될 때마다, 초기화에 따른 값만 변경되고 그대로 복제되는데, object에 상관없이 클래스 자체가 갖는 고유한 값 또는 동일하고 반복적으로 사용되는 method 필요한 순간이 있다. 이 경우 static 접근지정자를 사용하여 해당 고유값 또는 method를 선언하면 object와 상관없이 해당 클래스를 통해서 바로 고유값 또는 method를 호출하여 사용할 수 있다.   

 

- private과 static 모두 최근에 적용된 개념이기 때문에 사용하려면 TS와 BABEL이 필요하다. 

 

 

 

2. Object란 무엇일까? 

- object는 클래스라는 설계도를 이용해 만들어진 결과물(instance)을 의미한다.

- 자바스크립트에서 생성된 모든 object는 Object라는 클래스를 상속받는다. 

- 더 자세한 내용은 다음 포스팅에서 다루도록 하겠다. 

 

[Object 생성방법]

// class를 이용한 객체생성
const Raphael = new Person('Raphael', 20);

 

 

 

3. 객체지향이란?

- 객체지향이란, class와 object로 인해 발생하는 5가지 규칙 또는 특성을 말한다.

  • 캡슐화(Encapsulation): 클래스가 갖고있는 데이터(속성과 행동) 중 어떤 것은 외부에서도 접근이 가능하고 어떤 것은 내부에서만 접근이 가능하다. 이렇게 클래스가 갖는 데이터에대한 접근권한을 설정하는 것

  • 정보은닉(Information hiding): 캡슐화의 가장 중요한 개념으로, 클래스가 갖고있는 특정 데이터는 내부에서만 접근이 가능한 것을 의미한다. 

  • 추상화(Abstraction): 현실의 대상을 데이터화 시키기위해 모델링하는 것을 의미하며, 가장 중요한 속성만을 중심으로 대략적인 설계를 하는 것을 의미한다. 
  • 상속(Inheritance): 상위 클래스가 갖는 속성과 행동을 하위 클래스가 물려받는 것을 의미한다. 상속을 이용하면 상위 클래스가 갖고있는 모든 속성과 행동을 하위 클래스에서 선언이나 정의하지 않고 사용할 수 있다.

  • 다형성(Polymorphism): 하나의 메소드나 클래스가 object에 맞게 다양한 방법으로 동작하는 것을 의미한다. 여기에서 overide(재정의)와 overload(매개변수 변경)의 개념이 파생된다. 

    ex) 자판기라는 클래스가 있고 '제품이 나온다'라는 메소드가 있다고 해보자. 자판기 클래스를 이용하여 커피자판기, 캔음료 자판기, 과자 자판기라는 object를 생성하였고 각 object에서 '제품이 나온다'라는 메소드를 사용한다면, 커피자판기에서는 커피가 나오고 캔음료 자판기에서는 캔음료가 나오고 과자 자판기에서는 과자가 나올 것이다. 이처럼, 동일한 메소드이지만 각 object에 따라서 다양한 방법으로 동작되는 특성을 다형성이라고 한다.  

 

 

4. instanceof 연산자

- instanceof 연산자는 해당 object가 특정 class를 기반으로 만들졌는지 판단하는 연산자이다.

- 결과는 true/false로 출력된다.

- 사용방법은 아래 코드를 참고하자. 

console.log(rectangle instanceof Rectangle);

- 위의 코드는 rectangle이라는 객체(object)가 Rectangle이라는 클래스를 기반으로 만들어졌는지 확인하는 코드이다. 

 

 

 

 

[정보출처]

www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6

 

'Front-end > Vanilla JS' 카테고리의 다른 글

JS 근본 공부 - 배열(Array)  (0) 2020.11.02
JS 근본 공부 - Object  (0) 2020.11.01
JS 근본 공부 - function  (0) 2020.10.30
JS 근본 공부 - 연산자  (0) 2020.10.25
JS 근본 공부 - 데이터 타입  (0) 2020.10.24

댓글