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

seunghw·2022년 7월 22일
OOPPrototype인스턴스클래스클로저 모듈 패턴
1
post-thumbnail

클로저의 모듈 패턴

클로저 모듈 패턴으로 코드의 재사용성을 높인다.

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

☘️ 메서드 호출방식을 이용할 때 화살표 함수를 쓰지 않는 이유?
화살표 함수는 자신의 this가 없다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용되고 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따르기 때문에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 된다.

클래스 정의

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

생성자 함수(constructor)라고 한다. 인스턴스가 만들어질 때 실행되는 코드

this는 인스턴스 객체를 의미

주의!) 생성자 함수는 return 값을 만들지 않는다.


// es5

function Car(brand, name, color) {
// code 
}

// es6

class Car {
	constructor(brand, name, color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
}

인스턴스 정의

let cart = new Car("hyunai","avante", "black");

비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스라고 한다.

인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

메서드 정의

메서드는 어떤 객체가 가지고 있는 어떤 동작을 말한다. 자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수

class Car {
	constructor(brand, name, color) {
		this.brand = brand;
		this.name = name;
		this.color = color;
	}

	refuel() {
	}

	drive() {
	}

}

메서드 사용

let cart = new Car("hyundai","avante", "black");
cart.brand; // "hyundai"
cart.refuel();

prototype?

💡mdn 메서드 설명에 prototype이라고 적혀있는 이유?
모든 메서드들이 클래스의 원형 객체(prototype)에 정의되어 있기 때문

모델의 청사진을 만들 때 쓰는 원형 객체

모든 객체는 프로토타입 객체에 접근할 수 있다. 프로토타입 객체도 동적으로 런타임에 멤버 추가 가능

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며 이 내부 슬롯의 값은 프로토타입의 참조다. 객체 생성 방식에 의해 결정된다.
즉, 객체가 생성될 때 객체 생성 방식에 따라 프로토 타입이 결정되고 [[Prototype]]에 저장된다.

배열과 프로토타입의 관계

__proto__ 접근자 프로퍼티

모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

__proto__는 접근자 프로퍼티

자바스크립트는 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않지만, 일부 내부 슬롯과 일부 메서드에 한하여 간접적으로 접근할 수 있느 수단을 제공한다. [[Prototype]] 에 직접적으로는 안되지만 __proto__ 접근자 프로퍼티를 통해 간접적으로 접근할 수 있다.

__proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

상호 참조에 의해 프로토타입 체인이 형성되는 것을 방지하기 위함이다.

const obj = {};
const parent = { x: 1 };

// getter 함수인 get __proto__가 호출되어 obj 객체의 프로토타입을 취득
obj.__proto__;
// setter함수인 set __proto__가 호출되어 obj 객체의 프로토타입을 교체
obj.__proto__ = parent;

console.log(obj.x); // 1

__proto__ 접근자 프로퍼티는 상속을 통해 사용된다.

모든 객체는 상속을 통해 Object.prototype.__proto__접근자 프로퍼티를 사용할 수 있다.

const person = { name: 'Lee' };

// person 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(person.hasOwnProperty('__proto__')); // false

// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true

proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문이며 직접 상속을 통해 Object.prototype을 상속받지 않는 객체를 생성할 수도 있기 때문에 __proto__ 접근자 프로퍼티를 사용할 수 없는 경우가 있다.

// obj는 프로토타입 체인의 종점이다. 따라서 Object.__proto__를 상속받을 수 없다.
const obj = Object.create(null);

// obj는 Object.__proto__를 상속받을 수 없다.
console.log(obj.__proto__); // undefined

// 따라서 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.
console.log(Object.getPrototypeOf(obj)); // null

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

// 화살표 함수는 non-constructor다.
const Person = name => {
  this.name = name;
};

// non-constructor는 prototype 프로퍼티를 소유하지 않는다.
console.log(Person.hasOwnProperty('prototype')); // false

// non-constructor는 프로토타입을 생성하지 않는다.
console.log(Person.prototype); // undefined

// ES6의 메서드 축약 표현으로 정의한 메서드는 non-constructor다.
const obj = {
  foo() {}
};

// non-constructor는 prototype 프로퍼티를 소유하지 않는다.
console.log(obj.foo.hasOwnProperty('prototype')); // false

// non-constructor는 프로토타입을 생성하지 않는다.
console.log(obj.foo.prototype); // undefined

생성자 함수로 호출하기 위해 정의하지 않은 일반함수도 prototype 프로퍼티를 소유하지만 객체를 생성하지 않는 일반 함수의 prototype 프로퍼티는 아무런 의미가 없다.

모든 객체가 가지고 있는 __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.
하지만 이들 프로퍼티를 사용하는 주체가 다르다.

구분소유값사용주체사용 목적
__proto__ 접근자 프로퍼티모든 객체프로토타입의 참조모든 객체객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티constructor프로토타입의 참조생성자 함수생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 때문

예를 들어 생성자 함수로 객체를 생성한 후 __proto__ 접근자 프로퍼티와 prototype 프로퍼티로 프로토 타입 객체에 접근하면 다음과 같다.

// 생성자 함수
function Person(name) {
  this.name = name;
}

const me = new Person('Lee');

// 결국 Person.prototype과 me.__proto__는 결국 동일한 프로토타입을 가리킨다.
console.log(Person.prototype === me.__proto__);  // true

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토 타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라고 한다. JS가 객체지향 프로그래밍의 상속을 구현하는 메커니즘!

function Person(name) {
 this.name = name;
}

// 프로토타입 메서드
Person.prototype.sayHello = function () {
 console.log(`Hi! My name is ${this.name}`);
};

const me = new Person('Lee');

// hasOwnProperty는 Object.prototype의 메서드다.
console.log(me.hasOwnProperty('name')); // true

person 생성자 함수에 의해 생성된 me 객체는 Object.prototype의 메서드인 hasOwnProperty를 호출할 수 있다. 이것은 me 객체가 Person.protoype뿐만 아니라 Object.prototype도 상속받았다는 것을 의미한다.

me 객체의 프로토타입은 Person.protype

Object.getPrototypeOf(me) === Person.prototype; // -> true

Object.getPrototypeOf(Person.prototype) === Object.prototype; // -> true

OOP

프로그램 설계 철학 중 하나. 모든 것은 객체로 그룹화된다.
이 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다.
4개가 주요 개념으로 재사용성을 얻을 수 있다.

장,단점

장점

1) 높은 재사용성
남이 만든 클래스를 가져와서 사용할 수 있고 상속을 통해 확장해서 사용할 수도 있으므로

2) 유지보수가 쉽다
프로그램 수정시 추가, 수정을 하더라도 캡슐화를 통해 주변 영향이 적기때문에 유지보수가 쉬움

3) 생산성 향상
독립적인 객체를 사용하고 클래스 단위로 모듈화시켜 개발할 수 있어서 여러 사람이 개발에 참여하는 대형 프로젝트에 적합하며 생산성 향상

단점

1) 개발 속도가 상대적으로 느리고 어렵다.

객체를 많이 만들어 놓기도하고 객체 처리에 대한 이해가 필요해서 설계부터 많은 시간과 노력이 필요하다.

2) 실행 속도가 느리다.
절차지향언어에 비해 실행 속도가 상대적으로 느리다. 절차지향 언어는 초기 프로그래밍 언어로 컴퓨터의 처리 구조와 비슷해 실행속도가 빠르다.

상속

상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것.

  • 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거
  • 상속은 코드의 재사용이라는 관점에서 굉장히 유용하다.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true

console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

  1. Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 부모 객체 역할을 하는 circle.prototype의 모든 프로퍼티와 메서드를 상속받는다.

  2. getArea 메서드는 단 하나만 생성되어 프로토타입인 Circle.prototype의 메서드로 할당되어 있다.
    즉, 자신의 상태를 나타내는 radius 프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용하는 것.

추상화

프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 한다.
필요한 기능만 노출되기때문에 예기치 못한 사용상의 변화가 적다.
클래스의 정의 시, 메서드와 속성만 정의한 것을 인터페이스라고 하는데 이것이 추상화의 본질.

다형성

한 객체가 상속을 통해 기능을 확장하거나 변경하여 다른 여러형태(객체)로 재구성 되는 것

즉, 하나의 객체에 여러가지 타입을 대입할 수 있다는 것.

ex) cat과 dog는 Animal이라는 타입으로 대입하여 사용할 수 있다.

캡슐화

데이터와 기능을 하나의 단위로 묶는 것.

캡슐화는 외부에서 앞서 말했던 데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것.
데이터(속성)와 기능(메서드)들이 느슨하게 결합

1) 은닉
구현은 숨기고, 동작은 노출

2) 느슨한 결합에 유리
언제든 구현을 수정할 수 있다.

💡 느슨한결합이란?
코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미

profile
seunghw
Lumos
이전 포스트

프로젝트 디자인에 유용한 사이트 모음집(디자인,컬러,CSS)

다음 포스트

REST API란?

4개의 댓글

comment-user-thumbnail
Jeong Ha Seung
2022년 7월 22일

정리 깔끔하게 잘하셨네요!

1개의 답글
comment-user-thumbnail
dev_log
2022년 7월 22일

정리 잘하셨네요! 참고문헌이 있다면 무엇인지 궁금합니다!

1개의 답글