자바스크립트 JavaScript

OOP (Object Oriented Programming)

leexx 2023. 1. 23. 08:00

들어가며

Object(Instance), Class에 대해 감이 오지 않는다면 이 글 을 참고해주세요.

내용

OOP가 뭐야?

Object Oriented Programming으로, 객체 지향 프로그래밍을 말한다.

즉 어떤 개념에 대해서 추상화한 (속성과 행위를 가진) 객체로 만들어, 그들 사이에서 상호작용을 하며 프로그래밍하는 것을 말한다.

예시

철수와 영희, 경아와 상아를 추상화하여 객체로 만들어보자.

이들은 모두 이름과 나이, 직업이라는 속성 을 갖고 잠을 자고, 숨을 쉰다 (행동).

const cheolsu = {
    name: '철수',
    age: 28,
    job: '대학원생'

  sleep: function() {
        console.log("zzz...")
    },
    breath: function() {
        console.log("들숨날숨");
    },
}

const yeonghee = {
    name: '영희',
    age: 28,
    job: '대학원생',

  sleep: function() {
        console.log("zzz...")
    },
    breath: function() {
        console.log("들숨날숨");
    },
}

const sanga = {
    name: '상아',
    age: 26,
    job: '무직',

  sleep: function() {
        console.log("zzz...")
    },
    breath: function() {
        console.log("들숨날숨");
    },
}

const kyeonga = {
    name: '경아',
    age: 23,
    job: '학부생',

  sleep: function() {
        console.log("zzz...")
    },
    breath: function() {
        console.log("들숨날숨");
    },
}

대충 보기에도 겹치는 코드가 많다 는 것을 알 수 있다.

왜냐하면 철수와 영희, 상아와 경아가 갖는 특성과 행동의 종류가 같기 때문이다.

이런 코드는 작성하기도 번거롭고, 보기에도 좋지 않다.

그렇다면 어떻게 해야 간단하게 객체를(인스턴스를) 만들어낼 수 있을까?

바로 클래스 를 이용하면 된다.

class Human() {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job
  }

  eat() {
    console.log("밥을 먹는다");
  }

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

  breath() {
    console.log("들숨날숨");
  }
}

const cheolsu = new Human('철수', 28, '대학원생');
const yeonghee = new Human('영희', 28, '대학원생');
const sanga = new Human('상아', 26, '무직');
const kyeonga = new Human('경아', 23, '학부생');

OOP의 장점과 단점

앞서 봤듯이, OOP를 따르면 코드가 간결 해지고, 재사용이 용이 해진다.

다만 처리가 오래 걸리고, 용량이 커 질 수 있으며, 객체가 갖는 것들(속성, 행위)에 대해 고민이 필요하기 때문에 시간과 노력이 필요 하다.

(그래서 최근에는 함수의 행위에만 집중하는 FP가 인기를 끌고 있다는 이야기를 듣기도 했다)

OOP의 특징

OOP는 네 가지의 특징을 가진다.

캡슐화 (Encapsulation)

캡슐화의 목적은 코드의 재사용이다.

관련된 속성과 행위를 하나의 클래스에 넣어 관리하기 때문에 재사용이 용이하다.

class Human {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job
  }

  eat() {
    console.log("밥을 먹는다");
  }

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

  breath() {
    console.log("들숨날숨");
  }
}

추상화 (Abstraction)

추상은 사물을 정확하게 이해하기 위해 사물이 지니고 있는 여러 가지 측면 가운데서 특정한 측면만을 가려내어 포착하는 것이다.
-위키백과

즉 목적에 따라 필요한 것들은 살리고, 필요없는 것들을 무시하는 것을 말한다.

따라서 클래스를 정의하는 것 자체가 추상화 라고 할 수 있다.

상속 (Inheritance)

상속은 부모 클래스의 속성과 행위를 이어받아 사용할 수 있게 하는 것을 말한다.

따라서 상속의 목적은 코드의 재사용재활용 이라고 생각할 수 있다.

별 다른 처리(?) 없이 재사용을 하는 경우에는 아래 코드처럼, 부모의 함수를 호출하는 것을 말한다.

class Human {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job
  }

  eat() {
    console.log("밥을 먹는다");
  }

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

  breath() {
    console.log("들숨날숨");
  }
}

class Adult extends Human {
  constructor(name, age, job) {
    super(name, age, job); // 부모의 생성자를 호출하였다.
    super.breath(); // 부모의 클래스에 있는 breath 함수를 호출하였다.
  }

}

그리고 매개변수나 구현부가 다른 경우는 오버라이딩 이라고 한다. 이는 아래에 있는 다형성에서 더 자세히 다룬다.

다형성 (Polymorphism)

다형성이란 하나의 메소드나 클래스가 있을 때 이것들이 다양한 방법으로 동작하는 것을 의미한다.

-생활코딩

다형성에는 오버라이딩과 오버로딩이 있다.

  1. 오버라이딩 (Overriding)
    • 부모 클래스에 있는 메서드와 이름과 매개변수가 같고, 내용만 다른 함수를 구현하는 것을 말한다.
class Human {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job
  }

  eat() {
    console.log("밥을 먹는다");
  }

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

  breath() {
    console.log("들숨날숨");
  }
}

class Student extends Human {
  constructor(name, age) {
    super(name, age);
    this.job = '학생'
  }

  sleep(time) { // overriding 한 함수이다.
    if(time < 23)
      console.log("조금만 더 하다 자자!")
    else
      console.log("이제 자야지!")
    }
}
  1. 오버로딩 (Overloading)
    • 하나의 클래스에서 이름만 같은 메소드를 여러개를 구현하는 것을 말한다.
    • 자바스크립트의 경우, 제일 아래에 선언된 함수가 위의 함수를 덮어씌우기 때문에 자바스크립트에서는 없는 개념이다.