객체 지향 프로그래밍(OOP, Object-oriented programming) Ch 1. 클래스와 인스턴스

HanSungUk·2022년 5월 25일
JavaScriptTIL

Javascript

목록 보기
13/16
post-thumbnail

객체 지향 프로그래밍(OOP, Object-oriented programming) Ch 1. 클래스와 인스턴스

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

  • 클로저 모듈 패턴에 대해 설명할 수 있다.
  • 클래스와 인스턴스에 대해 설명할 수 있다.
  • 클래스 문법을 이용할 수 있다.

1. 클로저 모듈 패턴

클로저 모듈 패턴을 이용함으로써 같은 코드를 그대로 복사/붙여넣기 하지 않고 재사용할 수 있게 되었습니다. 

function makeAgeCounter() {
	let age = 22;
    return {
    	increase: function(){
        	age++;
        },
      	decrease: function(){
        	age--;
        },
      	getAge: function(){
        	return age;
        }
    }
}

let ageCounter1 = makeAgeCounter();
ageCounter1.decrease();
ageCounter2.getAge(); // 21

let ageCounter2 = makeAgeCounter();
ageCounter1.increase();
ageCounter2.getAge(); // 22

만약 위 코드를 클로저를 활용하지 않고 단순 객체를 사용했다면 재사용성이 떨어지는 단점이 있습니다.

2. 클래스와 인스턴스

객체 지향 프로그램 은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴입니다.
자바스크립트에서는 청사진을 클래스(class)라고 부르고 청사진을 바탕으로 한 객체들을 인스턴스 객체(instance object) 또는 인스턴스(instance)라고 부릅니다.

// ES5 클래스는 함수로 정의할 수 있습니다.
function Car(color){
	// 인스턴스가 만들어질 때 실행되는 코드
}

let sonata = new Car('red');
let genesis = new Car('black');
let santafe = new Car('white');

클래스는 일반적인 함수와 구분하기 위해 보통 대문자로 시작하며, 일반 명사로 만듭니다. 인스턴스는 new 키워드를 사용해서 만듭니다.

// 현재는 ES6 방법을 사용합니다. 
// 클래스는 class라는 키워드를 이용해서 정의할 수 있습니다.
class Car {
	constructor(color){
    	// 인스턴스가 만들어질 때 실행되는 코드
    }
}

위에서 보이는 함수constructor(color)는 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부릅니다. 인스턴스가 만들어질 때 실행되는 코드입니다. 생성자 함수는 return 값을 만들지 않습니다. 

// new 키워드를 통해 클래스의 인스턴스를 만들 수 있습니다.
// 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖습니다.
let sonata = new Car('red');
let genesis = new Car('black');
let santafe = new Car('white');

앞서 언급했듯이 인스턴스를 만들때는 new 키워드를 사용합니다.
인스턴스가 만들어질때 생성자(constructor) 함수가 실행되며, 클래스의 고유한 속성과 메서드를 가진 인스턴스가 변수에 할당됩니다.

여기서 주목해야할 점은 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다는 점입니다.

// ES5
function Car(brand, name, color) {
    	this.brand = brand;
      	this.name = name;
      	this.color = color;
}
// ES6
class Car {
	constructor(brand, name, color){
    	this.brand = brand;
      	this.name = name;
      	this.color = color;
    }
}

여기서 this는 인스턴스 객체(인스턴스)를 의미합니다.
parameter로 넘어온 brand, name, color 는 인스턴스 생성 시 지정하는 값이며, this에 할당한다는 것은 만들어진 인스턴스에 위 brand, name, color 값을 부여하겠다는 의미입니다. 

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

Car.prototype.refuel = function(){
	// 연료 공급을 구현하는 코드
}
Car.prototype.drive = function(){
	// 운전을 구현하는 코드
}
// ES6
class Car {
	constructor(brand, name, color){}
  	
// 자동으로 Car.prototype.refuel 형태로 등록
  	refuel() {
    	
  	}
// 자동으로 Car.prototype.drive 형태로 등록  
  	drive() {
    
  	}
}

ES5에서는 prototype 키워드를 사용해야 메서드를 정의할 수 있습니다.
ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의합니다.
refuel(){}, drive(){}와 같은 형태입니다. 이렇게 메서드를 만들면 자동으로 prototype으로 등록됩니다.

let sonata = new Car('hyundai', 'sonata', 'black');
sonata.color; // 'black'
sonata.drive();
  • 용어 개념
    아래의 용어들은 Javascript에서만 유효한 용어입니다.
    prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form)입니다.
    constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수
    this: 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context) new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값이 됨.
// let arr = new Array('name', 'age', 'gender')
let arr = ['name', 'age', 'gender']

arr.length; // 3
arr.push('hobby'); // 새 element를 추가합니다.

위 예제는 Array의 인스턴스입니다.
우리가 배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일합니다.

3. 객체 지향 프로그래밍

객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작합니다. 실체는 특징이나 성질을 나타내는 속성(attribute/ property)을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있습니다.

  • 객체 지향 언어의 특징
    데이터와 기능이 별개로 취급되지 않고 한 번에 묶어서 처리할 수 있습니다.

    • "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성합니다.
    • 현대의 언어들은 대부분 객체 지향의 특징을 갖고 있습니다. (대표적인 예: Java, C#, C++ 등)
    • 클래스의 생성자(constructor) 함수를 이용해 데이터와 기능을 하나의 객체(인스턴스 객체)로 묶어 생성해서 사용합니다.

  • 클래스와 인스턴스

    • 클래스는 일종의 원형(original form)으로 객체를 생성하기 위한 아이디어나 청사진입니다.
    • 인스턴스는 클래스를 통해 만들어진 객체를 뜻하는 인스턴스 객체의 줄임말입니다.
    • 클래스는 객체를 만들기 위한 생성자(constructor)함수를 포함합니다.

  • OOP(Object Oriented Programming)의 특징

    • 프로그램 설계 철학 중 하나입니다.
    • OOP의 모든 것은 "객체"로 그룹화됩니다.
    • OOP의 4가지 주요 개념을 통해서 코드 재사용성과 유지 보수의 장점을 얻을 수 있습니다.

  • OPP의 4가지 주요 개념

    • 캡슐화(Encapsulation)
    • 상속(Inheritance)
    • 추상화(Abstraction)
    • 다형성(Polumorphism)

  1. 캡슐화(Encapsulation)
    데이터(속성)와 기능(메서드)을 하나의 객체 안에 넣어서 묶는 것입니다.
    코드가 복잡하지 않게 만들고, 재사용성을 높힌다는 장점이 있습니다.
    데이터(속성)와 기능(메서드)를 하나의 단위로 느슨하게 결합 합니다.
    여기서 느슨한 결합이란 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미합니다.
    예를 들어, 마우스 구동을 위한 코드라면 마우스의 상태를 속성(property)으로 정하고, 클릭 및 이동을 메서드(method)로 정해서 코드만 봐도 인스턴스 객체의 기능을 상상할 수 있도록 작성하는 것을 의미합니다.
    캡슐화라는 개념은 은닉화의 특징도 포함하고 있습니다.
    은닉화란 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것입니다.

  2. 추상화(Abstraction)
    객체의 공통적인 속성과 기능을 간추려서 표현하는 것을 말합니다.
    클래스는 객체들이 어떤 특징들이 있어야 한다고 정의하는 추상화된 개념입니다.
    캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 객체들의 공통된 특징을 파악해 정의해 놓은 설계 기법이라고 할 수 있습니다.

  3. 상속(Inheritance)
    부모 클래스(기본 클래스(basic class))의 특징을 자식 클래스(derived class)가 물려 받는 것입니다. 상속 역시 불필요한 코드를 줄여서 재사용성을 높인다는 장점이 있습니다.

  4. 다형성(Polymorphism)
    다형성이란 상속과 연관있는 개념으로 한 객체가 상속을 통해 기능을 확장하거나 변경하여 다른 여러형태(객체)로 재구성 되는 것을 말합니다.

    예를 들어 HTML ELement라는 부모 클래스에 render라는 메서드를 만들고 상속을 받으면 자식 클래스인 TextBox, Select, CheckBox는 render 메서드를 사용할 수 있습니다. 다형성의 의미는 각각의 클래스에서 render 메서드가 조금씩 다르게 작동한다는 것 입니다.

profile
HanSungUk
이전 포스트

고차 함수(higher-order function)

다음 포스트

객체 지향 프로그래밍(OOP, Object-oriented programming) Ch 02. 프로토타입

1개의 댓글

comment-user-thumbnail
onecyn
2022년 5월 26일

와 이해엄청잘되네요..!!!!

답글 달기