[JS] OOP란? (function, class, new)

 

객체를 사용하여 개체를 표현하는 방식을 
객체 지향 프로그래밍(object-oriented programming, OOP)
 이라 부른다. - 위키피디아

제세한건 참고 링크 확인

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

 

JS는 멀티패러다임 언어로써 함수형, 개체지향형 프로그래밍 둘 다 사용할 수 있다.

 

개체 생성 방법 1 (ES5 이전)

 function 사용 : https://ko.javascript.info/constructor-new

 

객체 틀 생성

function Song(singer, title, release) {
  //프로퍼티
  this.singer = singer
  this.title = title
  this.release = new Date(release)
  //메서드
  this.getReleaseDay = function () {
    return this.release.getDay()
  }
  this.getInfo = function () {
    return `이 노래는 ${this.singer}의 노래이고 제목은 ${this.title} 입니다.`
  }
  console.log(this)
}

값 확인

const song1 = Song() // Window
// 인스턴스 화 (틀만 만들고 값을 넣어 사용하겠다는 뜻)
const song2 = new Song() // Song {singer: undefined, title: undefined, release: undefined}
const song3 = new Song('BTS', 'DNA', '2017-01-01') // Song {singer: 'BTS', title: 'DNA', release: Sun Jan 01 2017 09:00:00 GMT+0900 (한국 표준시)}
const song4 = new Song('BLACKPINK', 'GOOD', '2022-06-13') // Song {singer: 'BLACKPINK', title: 'GOOD', release: Sat Jan 01 2022 09:00:00 GMT+0900 (한국 표준시)}


//프로퍼티 값 확인하기
console.log(song4.release.getDate()) // 13

//메서드 사용하기
console.log(song4.getReleaseDay()) // 1 (월요일)
console.log(song3.getInfo()) // 이 노래는 BTS의 노래이고 제목은 DNA 입니다.

console.log(song3)
// Song {singer: 'BTS', title: 'DNA', release: Sun Jan 01 2017 09:00:00 GMT+0900 (한국 표준시), getReleaseDay: ƒ, getInfo: ƒ}
// getInfo: ƒ ()
// getReleaseDay: ƒ ()
// release: Sun Jan 01 2017 09:00:00 GMT+0900 (한국 표준시) {}
// singer: "BTS"
// title: "DNA"
// [[Prototype]]: Object
//     constructor: ƒ Song(singer, title, release)
//     [[Prototype]]: Object

 

객체 틀에 prototype으롤 메서드 추가하기

Song.prototype.getInfo2 = function () {
  return `노래: ${this.singer}, 제목: ${this.title}`
}

추가된 메서드 확인하기

console.log(song3)
// Song {singer: 'BTS', title: 'DNA', release: Sun Jan 01 2017 09:00:00 GMT+0900 (한국 표준시), getReleaseDay: ƒ, getInfo: ƒ}
// getInfo: ƒ ()
// getReleaseDay: ƒ ()
// release: Sun Jan 01 2017 09:00:00 GMT+0900 (한국 표준시) {}
// singer: "BTS"
// title: "DNA"
// [[Prototype]]: Object
//     getInfo2: ƒ ()         		 <<= 여기에 메서드가 추가됨.
//     constructor: ƒ Song(singer, title, release)
//         arguments: null
//         caller: null
//         length: 3
//         name: "Song"
//         prototype: {getInfo2: ƒ, constructor: ƒ}
//         [[FunctionLocation]]: main.js:4
//         [[Prototype]]: ƒ ()
//         [[Scopes]]: Scopes[2]
//     [[Prototype]]: Object

prototype으로 추가된 메서드 확인하기

console.log(song3.getInfo2()) // 노래: BTS, 제목: DNA

 

개체 생성 방법 2 (ES6 이후)

class 사용 : https://ko.javascript.info/class

function으로 개체를 찍어내는 방식과는 같은데, 모양만 달라졌다고 해서 syntatic sugar라고 한다.

 

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. - 위키백과

 

객체 틀

class Song2 {
  constructor(singer, title, release) {
    this.singer = singer
    this.title = title
    this.release = new Date(release)
  }
  getReleaseDay() {
    return this.release.getDay()
  }
  getInfo() {
    return `노래: ${this.singer}, 제목: ${this.title}`
  }
}

개체 만들어 내고 값 확인하기

const song10 = new Song('LISA', 'BOY', '2022-01-01')
const song20 = new Song('ELLA', 'GIRL', '2023-01-01')

console.log(song10) // Song {singer: 'LISA', title: 'BOY', release: Sat Jan 01 2022 09:00:00 GMT+0900 (한국 표준시), getReleaseDay: ƒ, getInfo: ƒ}
console.log(song20) // Song {singer: 'ELLA', title: 'GIRL', release: Sun Jan 01 2023 09:00:00 GMT+0900 (한국 표준시), getReleaseDay: ƒ, getInfo: ƒ}