Javascript-10 (OOP 객체지향 프로그래밍)

OOP라는 이야기를 너무 많이 듣게 되어서 공부를 조금 해보았고 정리를 해두려고 한다.

---

OOP라는 것은 Object Oriented Programming의 약자이며 객체지향 프로그래밍을 말한다.
이는 프로그래밍을 하는 여러가지 스타일 중 하나이다.

객체지향? 그렇다면 객체가 무엇일까?
객체는 Object를 말하며 연관성 있는 혹은 관련 있는 데이터나 코드 등을 함께 묶은 것을 말한다.

이렇게 OOP를 사용하게 되면 관련 있는 것끼리 묶어서 프로그래밍 하므로 문제가 생긴다면 관련이 있는 이 object만 이해하고 수정하면 될 것이며, 재사용을 필요로 하는 부분에 있어서도 관련된 Object를 재사용 할 수 있다.
그렇기 때문에 생상선, 퀄리티, 구현속도 면에서 장점을 볼 수 있는 것이다.

우선 함수를 활용한 구버전에 대한 것을 조금 보자면

function Song(title, writer, singer, released) {
  this.title = title;
  this.writer = writer;
  this.singer = singer;
  this.released = released;
}

const song1 = new Song();

이렇게 만들어질 수 있다.

이를 'constructor function' 이라고 말한다.

그런데 여기서 this는 무엇을 가리킬까?
function 안에서 console.log를 찍어보면 알겠지만, this는 Song()안에 들어가는 title, writer, singer, released를 가리킨다.

그런데 new Song() 이라고 하지 않고, 그냥 Song만 해놓으면?
그러면 this는 window를 가리키게 된다.
그러므로 new를 꼭 붙혀주도록 하자!

이 외에도 함수 또한 만들 수 있다.

function Song(title, writer, singer, released) {
  this.title = title;
  this.writer = writer;
  this.singer = singer;
  this.released = new Date(released);
  this.getReleasedDay = function() {
    return this.released.getDay();
  }
  this.getSongInfo = function(){
    return `제목: ${this.title}, 작곡: ${this.writer}, 가수: ${this.singer}`;
  }
}

const song1 = new Song('love yourself', 'eminem', 'Patrick', '1991-06-09');
const song2 = new Song('hater', 'Joe', 'Daniel', '1995-05-18');

console.log(song2.getReleasedDay());
console.log(song2.getSongInfo());

이렇게 하면 함수를 만들 수 있는데 검사창을 들어가보면 제일 아래에 __proto__ 라는 것이있다.
이를 눌러보면 constructor라는 곳이 있는데 우리가 만든 constructor function안이 무엇으로 구성되어있는지 알 수 있다.

이 __proto__의 constructor 안에 function을 넣어보자!

function Song(title, writer, singer, released) {
  this.title = title;
  this.writer = writer;
  this.singer = singer;
  this.released = new Date(released);
  this.getSongInfo = function(){
    return `제목: ${this.title}, 작곡: ${this.writer}, 가수: ${this.singer}`;
  }
}

Song.prototype.getReleasedDay = function() {
  this.getReleasedDay = function() {
    return this.released.getDay();
  }
}

const song1 = new Song('love yourself', 'eminem', 'Patrick', '1991-06-09');
const song2 = new Song('hater', 'Joe', 'Daniel', '1995-05-18');

console.log(song1);

이렇게 Song.prototype.getReleasedDay 라고 해서 만들 수 있다.

ES6부터는 Class를 사용하는데, 같은 것이지만 Syntax Sugar라고 하여 더 깔끔하게 만들어진 것을 말한다.

class Song {
  constructor(title, writer, singer, released) {
    this.title = title;
    this.writer = writer;
    this.singer = singer;
    this.released = new Date(released);
  }
  getReleasedDay() {
    return this.released.getDay();
  }
  getSongInfo() {
    return  `제목: ${this.title}, 작곡: ${this.writer}, 가수: ${this.singer}`;
  }
}

// 인스턴스
const song1 = new Song('love yourself', 'eminem', 'Patrick', '1991-06-09');
const song2 = new Song('hater', 'Joe', 'Daniel', '1995-05-18');

console.log(song2.getSongInfo());

이는 동일 하게 사용 할 수 있는데 다만 class를 사용하며 constructor라는 것을 사용해서 만들게 된다.
나머지는 모두 같다!