객체 지향

객체지향 프로그래밍

---

객체 지향 프로그래밍은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.

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

속성과 메서드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름으로 부른다.

 

 

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

Four fundamental concepts of Object-oriented programming:
캡슐화(Encapsulation), 추상화(Abstraction), 상속(Inheritance), 다형성(Polymorphism)

• 캡슐화: 코드가 복잡하지 않게 만들고 재사용성을 높임
• 추상화: 코드가 복잡하지 않게 만들고 단순화된 사용으로 변화에 대한 영향을 최소화
• 상속: 불필요한 코드를 줄여 재사용성을 높임
• 다형성: 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다. 객체지향 프로그래밍은 사람이 세계를 보고 이해하는 방식과 매우 흡사함. 하나의 요소를 객체 단위로 구분시켜 생각하면 이해하기 쉬운 코드를 작성할 수 있음

 

 

 

 

객체지향 프로그래밍에서 자바스크립트의 한계와 차이점

---

자바스크립트는 완전히 객체지향적이지 않다. java나 Typescript는 보다 객체 지향적으로 디자인됨.

 

1. 은닉화(private 키워드)의 한계
Java나 TypeScript라는 프로그래밍 언어는 클래스 내부에서만 쓰이는 속성 및 메서드를 구분시키기 위해 private이라는 키워드를 제공. JavaScript에서는 은닉화를 돕기 위해서 일반적으로 클로저 모듈 패턴을 사용합니다. 클래스/인스턴스 형태로 만들 때에는 ES2019부터 #이라는 키워드가 도입되었습니다.

2. 추상화(interface 키워드) 기능의 부재

객체 지향 프로그래밍의 주요 키워드 중 하나인 추상화는, 속성과 메서드의 이름만 노출시켜서 사용을 단순화한다는 의미를 갖고 있습니다. 즉, 인터페이스(interface)의 단순화. Java나 TypeScript는 interface를 구현해 놓았으며 이 인터페이스가 일종의 규약처럼 간주되어, 클래스를 구현하는 사람들이 이에 맞게 작성할 수 있게 돕습니다.

 

 

 

 

 

 

 

클로저 모듈 패턴

---

메서드 호출(객체 내에 메서드를 호출하는 방법) / 객체.메서드()

+ 메서드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다.

객체 안의 메서드를 사용해 특정 기능을 수행할 수 있다.

하지만 단순 객체를 사용한 메서드는 여러번 사용할 수 없다. 하나의 객체만 만들 수 있음.

같은 기능을 하는 코드의 재사용성을 높이기 위해 클로저 모듈패턴을 이용할 수 있다.

아래가 클로저 모듈 패턴의 예시이다. 함수 안의 리턴값으로 키-함수 값을 넣어 메서드로 만들어주고, 바깥 함수를 여러 변수에 할당에 사용하면 각 변수(함수) 사이에 영향을 미치지 않으며, 손쉽게 여러번 사용할 수 있다.

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

 

아래는 단순한 객체를 사용한 예시

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.decrease()
counter1.getValue() // -1

 

 

 

 

 

 

 

 

클래스와 인스턴스

---

 

객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 이 청사진을 class라고 하며, 이를 바탕으로 만든 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance)라고 한다. 

 

 

class 만드는 방법 (ES6)

class는 인스턴스가 만들어질 때 실행되는 코드이다. 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부른다.

• 일반 함수와 구분하기 위해 class는 대문자로 시작하며 일반명사로 만든다.
• function 대신 class 키워드를 사용한다.
• 생성자 함수는 return 값을 만들지 않는다.

class Car {
	constructor(friend, name, color){
	//인스턴스가 만들어질 때 실행되는 코드
  }
}

 

 

instance 만드는 방법 (객체 만드는 방법)

일반 함수 정의와 비슷하다. 표현식에서 function 대신 new 키워드를 사용하여 새로운 인스턴스를 만든다.

만들어진 인스턴스는 class의 고유한 속성과 메서드를 갖게된다.

아래의 인스턴스들은 class Car의 소유한 속성과 메서드를 갖고 있다.

let avante = new Car('HH', 'ppal-gang', 'white');
let mini = new Car('YZ', 'mini', 'green');

 

 

 

 

 

속성과 메서드

클래스에 속성과 메서드를 틀을 정의하고, 인스턴스에서 이용하는 것
속성은 정보, 메서드는 기능

메서드는 "객체에 딸린 함수"이다. 속성과 메서드처럼, 객체지향 프로그래밍은 현실세계를 지각하는 방식과 비슷하다.

class 정의에서 속성 정의와 메소드 정의를 따로 볼 수 있다. 아래 코드는 class Car 정의. 속성과 메서드 정의 차이를 보자.

class Car {
    ////속성 정의 시작
constructor(friend, name, color){ 
	this.friend = friend;
    this.name = name;
    this.color = color;
    }
    //// 메서드 정의 시작
    refule(){
    }
    drive(){
    }
 }

class 속성 부분에서 this가 보인다. this가 뭘까.

 

 

 

 

this

실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며,
엄격 모드에서는 어떠한 값이든 될 수 있습니다.
-
함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context. new 키워드로 인스턴스를 생성했을 때에는,
해당 인스턴스가 바로 this의 값이 됨.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this 는 인스턴스 객체를 의미한다. parameter로 넘어온 속성은 인스턴스 생성 시 지정하는 값이며,
this에 할당한다는 것은 만들어진 인스턴스에 해당 속성 값을 부여하겠다는 의미.. (맞는지 모르겠다)

내가 이해한 바로는, "인스턴스를 만들 때, class에서 정의한 속성과 인스턴스의 속성을 짝지어 주는 것. 참고하라고 쥐어주는 것. 인스턴스의 속성 class의 생성자라고 참고하도록 쥐어주는 것"

 

 

 

 

 

 

class와 instance 구성

ES5 class와 instance

• prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(origin fiem)
• constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수
• this: 함수가 실행될 떄, 해당 scope마다 생성되는 고유한 실행 context. new 키워드로 인스턴스를 생성했을 떄에는, 해당 인스턴스가 바로 this의 값이 됨

 

 

 

 

ES5, ES6 클래스 작성문법의 차이

5는 class를 function 키워드, 함수로 만들 수 있었고, 6에서는 class라는 키워드를 사용한다.

5는 메서드정의를 위해 prototype이라는 키워드를 사용해야 한다.

예를 들어, Car 클래스에 메서드를 추가하기 위해서는 `Car.prototype.refuel`과 같이 `prototype`을 이용해야 한다.

6에서는 그냥 class를 만들 때 생성자 함수 안에 메서드명(){실행코드} 로 적어주면 된다.

// ES5
function Car(brand, name, color) { //속성 넣기
	this.brand = brand;
	this.name = name;
	this.color = color;

	Car.prototype.refuel = function() { // 메소드 넣기
	}
	Car.prototype.drive = function() {
	}
}

// ES6
class Car {
	constructor(brand, name, color) {//속성 넣기
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
	refuel() { // 메소드 넣기
	}
	drive() {
	}
}