TIL23: [JS/Node] 객체 지향 JavaScript

객체 지향 언어(Object Oriented Programming)란?

객체 지향 언어와 대비 되는 것이 절차적 언어입니다.

절차적 언어는 순차적으로 명령을 조합한 언어로 초기에 이런 형식의 프로그래밍 언어가 사용됐습니다.

이와 달리 객체지향 언어는 순차적으로 명령을 조합하지 않고 여러 클래스와 인스턴스를 사용해서 명령을 만듭니다.

클래스는 데이터 모델의 청사진입니다.

인스턴스는 클래스를 활용한 사례라고 생각하면 됩니다.

 

클래스와 인스턴스에 대해 자세히 알아보기 전에 먼저 객체에 대해 복습해보겠습니다.

객체의 메소드를 호출하기 위해서는 객체.메소드()를 사용하면 됩니다.

아래와 같이 코드를 사용할 수 있습니다.

let counter = {
  value: 0,
  increase: function() {
    this.value++
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}
counter.increase() // value = 1
counter.increase() // value = 2
counter.increase() // value = 3
counter.decrease() // value = 2
counter.getValue() // print 2

 

또한 클래스를 만들면 똑같은 기능을 하는 인스턴스를 여러 개 만들 수 있기 때문에 재사용성이 높아집니다.

let counter = {
  value: 0,
  increase: function() {
    this.value++
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

let counter1 = counter()
counter1.increase() //value = 1
counter1.getValue() //print 1

let counter2 = counter()
counter2.decrease() // value = -1
counter2.decrease() // value = -2
counter2.getValue() // print -2

 

객체와 비슷하게 클래스와 인스턴스를 사용할 수 있습니다. 

인스턴스를 만들 때에는 new 키워드를 사용합니다. 즉시 생성자(constructor) 함수가 실행되며, 변수에 인스턴스가 할당됩니다.

class Car {
  consturctor(brand, name, color) {
    this.brand = brand; // this 객체: 이 코드에서는 x3 === this
    this.name = name;
    this.color = color;
  } // 생성자 함수

  refuel( ) {
    console.log('Start fuelling');
  }
    
  drive( ) {
    console.log('Start driving');
  }
}


let x3 = new Car ('bmw', 'x3', 'white'); // 인스턴스 생성
x3.color(); // 'white'
x3.drive(); // 'Start driving'

 

OOP 의 핵심 개념

캡슐화 (Encapsulation)

데이터(속성)와 기능(메소드)을 따로따로 정의하는 것이 아니라, 객체 안에 데이터와 기능들을 넣어 느슨하게 결합시킨다는 뜻입니다.

 

캡슐화 개념에는 은닉화의 특징도 포함하고 있습니다. 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것입니다.

이 특징의 장점은 은닉화되어있는 메소드만 수정하고, 노출되어있는 메소드는 코드 흐름을 변경하지 않아도 된다는 것입니다.이 덕분에, 코드를 복잡하지 않게 만들고, 재사용성을 높입니다. 또한 유지보수가 더 용이해집니다.

 

 

추상화 (Abstraction)

우리는 핸드폰을 이용해서 전화하고, 노래를 듣고, 사진을 찍을 수 있습니다. 하지만 안에 어떤 장비가 어떻게 동작해서 되는지는 잘 알지 못합니다. 이런 것을 추상화라고 합니다. 즉, 사용자와 기계 사이의 인터페이스를 단순화하는 걸 말합니다.

이러한 개념 덕분에 코드가 복잡해지지 않도록 할 수 있고, 유지보수가 쉬워집니다.

 

cf) 캡슐화와 추상화는 다소 비슷한 개념입니다. 둘의 주요 차이점은 캡슐화가 코드나 데이터의 은닉에 중점을 두었다면, 추상화는 복잡한 부분을 보여주지 않고 단순하게 해주는 것에 중점이 맞추어져 있습니다.

 

 

상속 (Inheritance)

부모 클래스의 특징을 자식 클래스가 물려받는 것을 말합니다.

상속 역시 코드를 반복하지 않아도 되게 재사용성을 높입니다.

 

 

다형성 (Polymorphism)

같은 부모 메서드를 자식 엘리먼트가 사용해도 각각 조금씩 다르게 작동하는 것을 말합니다.

다형성 덕분에 객체의 특성이 달라도 같은 메서드를 사용할 수 있게되어 효율성이 높아집니다.

 

 

 

 

프로토타입 (Prototype)과 상속 (Inheritance)

프로토타입

여기서 먼저 프로토타입이란 원형객체를 의미합니다. 프로토타입을 이용해서 메소드와 속성을 상속받을 수도 있고, 이러한 일련의 상속을 프로토타입 체인이라고 부릅니다. 

__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할수 있습니다.

 

 

상속

extends와 super()를 사용해서 클래스를 상속할 수 있습니다.

아래 코드는 MDN에 있는 예시를 사용해보았습니다.

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_%ED%81%B4%EB%9E%98%EC%8A%A4

Inheritance in JavaScript - Web 개발 학습하기 | MDN

class Person {
  constructor(first, last, age, gender,i nterests) {
    this.name = {first, last};
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  };
  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`)
  }
}

class Teacher extends Person {
//extends를 사용해서 상속받을 클래스(Person) 명시
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    //super를 사용해서 상위클래스의 생성자 호출 
    this.subject = subject;
    this.grade = grade;
  }
}

 

 

오늘은 페어분과 함께 객체 지향 언어의 특징을 공부했습니다. 객체지향언어의 특징 중 하나인 상속이 코드의 효율성을 매우 높여준다는 생각이 들었습니다. 또한 지난 Section 1에서의 React를 공부할 때 extends가 무엇인지에 대해 많이 궁금했었는데, 이번 기회에 궁금증이 해결되어서 좋았습니다.

페어 프로그래밍은 생각보다 많이 빨리 과제를 해결해서 다른 방법을 문제를 풀어보기도 하고, 이삼십분정도는 서로의 팁을 공유하기도 하고, 코딩 공부 동기에 대해 이야기 나누기도 했습니다. 항상 생각하지만 코드스테이츠의 장점은 다양한 사람들을 만날 수 있는 기회를 제공해준다는 점 같습니다😊