S2 . 객체지향 프로그래밍

객체 지향 프로그래밍

---

“ 객체 지향 프로그래밍” 은 절차 지향 프로그래밍과 다르게 “데이터와 기능을 한 곳에 묶어서 처리한다”

속성과 메서드가 → 하나의 “객체”라는 개념에 포함되며, 자바스크립트의 객체(object)대신 클래스로 부른다.

Capter1. 클로저와 모듈패턴

메서드 호출하기

---

• 객체.메서드() 과 같이 객체 내에 메서드를 호출하는 방법을 의미한다.
• 다만 메서드 호출 방식엔 화살표 함수를 쓰지 않는다. → MDN을 살펴보면 this에 대한 바인딩이 없고, 메서드로 사용할 수 없다고 나온다.

let counter1 = {
 value : 0;      //초기 값
 increase : function() {
  this.value ++ //메서드를 호출하면 -> this는 counter1을 가리킨다.
  } , 
  decrease : function() {
   this.value --
  },
  getValue : function() {
   return this.value 
   }
}

counter1.increase() // 1
counter1.increase() // 2
counter1.increase() // 3
counter1.decrease() // 2
counter1.getValue() // 2

클로저 모듈 패턴으로 매번 새로운 객체 생성하기 → 재사용성

---

function makeCounter() {
 let value = 0;
  return {
   increase : function() {
    value++;
   },
   decrease : function() {
    value--;
   },  
   getValue : function() {
    return value;
   }
  }
}

//변수에 함수를 할당해 -> 매번 새로운 객체를 형성할 수 있다.
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

chapter2. 클래스와 인스턴스란?

---

**//여기서 function makeCounter() : 청사진(class) -> class는 보통 대문자로 만든다**
function makeCounter() {
 let value = 0;
  return {
   increase : function() {
    value++;
   },
   decrease : function() {
    value--;
   },  
   getValue : function() {
    return value;
   }
  }
}

**//청사진(class)를 바탕으로 한 객체 : 인스턴스 객체(인스턴스, instance)
//**
//변수에 함수를 할당해 -> 매번 새로운 객체를 형성할 수 있다.
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

클래스를 만드는 새로운 문법, ES6

---

//ES5에선 클래스를 함수로 정의했다
 //여기 function Car 함수는 인스턴스가 만들어질때 실행되는 코드로 
  // -> 객체지향 프로그래밍에서 **'생성자함수**'라고 부른다.
function Car(brand, name, color) {
  //인스턴스가 만들어질 때 실행되는 코드
 }

//**ES6에서는 class 키워드를 이용해 정의할수 있다
class Car {
 constructor(brand, name, color) {**
  //인스턴스가 만들어질 때 실행되는 코드
  }

인스턴스를 만들 땐 → new 키워드를 사용한다.
즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 인스턴스(객체)가 할당된다.
각각의 인스턴스는 클래스의 고유한 속성과 메서드를 가진다.

let anvante = **new Car**('bmw', 'mini', 'white');
...

객체지향 프로그래밍에 빠질 수 없는 키워드, this

---

• this는 인스턴스 객체를 의미한다.

//ES6

class Car {
 constructor(brand, name, color) {
//this에 할당한다는 것은 만들어진 인스턴스에 -> 해당 브랜드, 이름, 생상을 부여하겠다는 의미
  this.brand = brand;
  this.name = name;
  this.color = color;
  }
 }

메서드를 정의하고 인스턴스에서 사용하는 방법

---

**//생산자 함수 :** 
function Car(brand, name, color) { ...}

**//ES5 : 'prototype'키워드를 이용해 메서드를 정의한다.
C**ar.prototype.refuel = function() {
 //연료 공급을 구현하는 코드
 }
Car.prototype.drive = function() {
 //운전을 구현하는 코드
 }

**//ES6 : 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의 ->`refuel() {}`, 'drive() {}'**
Class Car {
 constructor(brand, name, color) { ... } //생산자함수
  refuel() {
  }
  drive() {
  }
 }

// **인스턴스에서 사용**
let mini = new Car('bmw', 'mini', 'white)'
mini.brand // 'bmw'
mini.refuel() //미니에 연료를 공급합니다

용어정리 : prototype, constructor, this 그리고 속성과 메소드

---

• prototype : 모델의 청사진을 만들때 쓰는 원형 객체, 클래스가 일종의 프로토타입이다.

• constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수

• this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context

           : new 키워드로 인스턴스를 생성했을 때 → 해당 인스턴스가 바로 this의 값이 된다.

속성과 메서드

---

• 클래스에서 ‘속성과 메소드’를 정의 → 인스턴스에서 이용
• 속성(property또는attribute) : brand, name, color 등 → 키-값의 쌍을 의미
• 메소드 : 객체에 딸린 함수로, 연료주입, 속력설정, 운전 등

❓ 속성을 의미하는 property와 attribute의 차이는?

• attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고,
• property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미한다.

클래스 문법 실습

---

//객체지향프로그래밍(OOP)패턴으로 구현한 counter
class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

객체지향 프로그래밍(OOP)의 주요개념

캡슐화 상속화 추상화 다형성

---

1️⃣ 캡슐화

• 데이터와 기능을 하나의 단위로 묶는 것
• ‘은닉화’ 특징 : 구현은 숨기고, 동작은 노출시킨다.
• 느슨한 결합에 유리해 : 언제든 구현을 수정할 수 있다.
  • 느슨한 결합 : 절차적으로 코드를 작성하지 않고 → 코드만 보고도 인스턴트 객체 기능을 알 수 있겠금 결합
• 장점 : 코드가 복잡하지 않게 하고, 재사용성을 높인다

2️⃣ 추상화

• 복잡한 내부구현은 숨기고, 인터페이스는 단순하게 만드는 것
• 불필요 정보인 코드나 메서드 등은 숨기고, 단순한 이름으로 정의하는 것에 초점
• 클래스 정의 시, 메서드와 속성만 정의하는 것 : 인터페이스 ⇒ 추상화의 본질
• 장점 : 코드의 복잡성을 줄이고, 단순화된 사용으로 변화에 대한 영향을 최소화한다.

3️⃣ 상속

• 부모 클래스의 특징을 → 자녀 클래스가 물려받는다
• ‘은닉화’ 특징 : 구현은 숨기고, 동작은 노출시킨다.
• 느슨한 결합에 유리해 : 언제든 구현을 수정할 수 있다.
  • 느슨한 결합 : 절차적으로 코드를 작성하지 않고 → 코드만 보고도 인스턴트 객체 기능을 알 수 있겠금 결합
• 장점 : 불필요한 코드를 줄여 재사용성을 높인다

4️⃣ 다형성

• 이름은 같지만 엘리먼트(HTML) 마다 특성을 갖게 한다.
• 장점 : 동일한 메서드에 대해 조건문을 달지 않아도 → 객체의 특성에 맞게 달리 작성 가능하다