[JAY⌨️JS] 자바스크립트 객체 지향 프로그래밍 예제를 통해 살펴보기

 1️⃣ 객체 지향 프로그래밍이란?

• 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 객체를 데이터 목록으로 보는 시각에서 벗어나 각각 독립적인 기능을 하는 부품과 같이 상호작용하도록 하는 프로그래밍 방법론.
• 추상화 상속 다형성 캡슐화 4가지의 특징을 갖고 있으며, 설계의 이점들을 가장 잘 살릴 수 있는 방향으로 각 객체들의 역할을 정의해 나가는 것에 초점을 맞춰 프로그래밍을 진행한다.
• 객체 지향적 설계를 통해 직관성과 재사용성이 높은 코드를 작성할 수 있으며, 반복 없이 간결하고 변경이 용이한 유연한 프로그램을 만들 수 있다는 장점이 있다.
• 대표적인 객체 지향 설계 요소로 class가 있다. 해당 게시물에서는 객체리터럴 프로토타입 클래스에 대한 예제를 소개하고 간단하게 기능을 비교해 보고자 한다.

 

// 1. jay 객체 생성.
const jay = {
    name: '🙋🏻‍♀️ Jay',
    // cat의  Happiness를 증가시키는 care 함수 선언.
    care: function (cat) {
        cat.upLift();
    }
}

// 2. cat 객체 생성
const cat = {
    name: '🐈‍⬛ 간장이',
    happiness: 30,
    // cat의 Happiness를 10 증가시키는 upLift 함수 선언.
    upLift: function () {
        this.happiness += 10;
        if (this.happiness < 50) {
            console.log(`💖 ${this.name}와 함께 시간을 보내주세요...😿`)
        } else if (this.happiness < 100) {
            console.log(`💖 ${this.name}의 현재 만족도는 ${this.happiness}% 입니다.`)
        } else {
            this.happiness = 100;
            console.log(`💖 ${this.name}는 지금 최고로 행복해요!`)
        }
    }
}

// 3. care 메서드를 호출하면서 cat 객체를 arguments로 전달.
jay.care(cat);
jay.care(cat);
jay.care(cat);
.
.
.

// 4. Console 반환 화면.
💖 🐈‍⬛ 간장이와 함께 시간을 보내주세요...😿
💖 🐈‍⬛ 간장이의 현재 만족도는 50% 입니다.
.
.
.
💖 🐈‍⬛ 간장이는 지금 최고로 행복해요!

 

 

 

 2️⃣ 생성자 함수 Constructor 와 인스턴스 Instance

 

생성자 함수

• 객체를 만들 때 new 연산자와 함께 사용하는 함수. Return 값을 가진 함수라는 것이 중요한 포인트!
• 생성자 함수의 장점은 생성자를 통해 생성된 객체는 같은 property와 Method를 공유할 수 있다는 것.
• 생성자 함수는 암묵적으로 대문자로 시작하는 이름을 가진다

 

인스턴스

• 생성자 함수를 통해 반환되어 생성된 객체를 인스턴스(instance) 라고 한다.
• 객체가 특정 생성자 함수로 생성된 것인지 확인이 필요하면 instanceof 연산자를 활용.
• 원래 함수 안에서의 this는 함수를 호출한 객체를 참조하지만
  생성자 함수 앞에 new 연산자가 사용되면 함수 안의 this는 생성자가 만들어낸 객체 즉, 인스턴스를 참조.

// 1. 생성자 함수 Factory 생성
function Factory(name) { 
    this.name = name;
    console.log(`삐리비리. 제 이름은 ${this.name}입니다.`);
}

// 2. instance 생성
let jayBot = new Factory('🤖JAY'); // = 삐리비리. 제 이름은 🤖JAY입니다. 

// 3. instanceof 연산자를 통해 생성자 함수로 생성된 객체인지 확인
jayBot instanceof Factory; // = true

 

 

 

 

 3️⃣ 프로토타입 (prototype)

• 객체지향 프로그래밍 설계에서 다른 객체의 프로퍼티와 메소드를 상속받을 수 있다.
  상속은 객체의 재사용성을 높이고 코드의 중복을 줄이는 방법 중 하나.
• JavaScript에서는 객체의 상속을 위해 prototype을 사용.
• 위(2) 예제와 같이 Object literal을 활용하면 손쉽게 객체를 생산할 수 있지만, instance를 생성할 때마다 새로운 함수를 생성한다.
• 함수 중복 선언으로 발생되는 낭비를 해결하기 위해 특정 객체의 함수를 상속시키는 prototype 속성을 활용할 수 있다.
• 생성자 함수는 instance를 생성하게 되면 숨겨진 속성인 Prototype이 추가되어 연결된다.
• 즉, 생성자 함수는 부모 역할을 하는 객체 prototype이 되며 공통적으로 사용할 수 있는 속성을 추가해서 자식역할을 하는 객체 instance 에 상속할 수 있다.
• 생성자 함수는 함수명.prototype 을 통해서, instance 는 인스턴스명.__proto__ 코드를 통해서 prototype을 제어한다.
• 아래 예제 코드와 프로토타입 로직을 비교해서 확인하면 구조를 쉽게 이해할 수 있을 것이다.

 

// 1. GetProtoLv 객체 생성
const GetProtoLv = {
    name: 'JAY',
    job: 'Frontend Developer',
    level: 1,
    levelUp: function () {
        this.level++;
        console.log(`🎉 ${this.name} 레벨${this.level} 달성!`);
    }
};

// 2. GetProtoLv의 속성을 상속받을 빈 생성자 함수 getLearn() 생성
function getLearn(name) {
    this.name = name
}

// 3. Object.create() 메소드를 통해 GetProtoLv를 연결해서 속성을 상속받을 수 있도록 설정
getLearn.prototype = Object.create(GetProtoLv);
getLearn.prototype.code = function (lang) {
    console.log(`📝 ${this.name}는 지금 ${lang} 공부 중...`);
    this.levelUp();
};
getLearn.prototype.read = function (book) {
    console.log(`📚 ${this.name}는 지금 ${book} 읽는 중...`);
    this.levelUp();
};

// 4. Instance 생성
const paul = new getLearn('Paul')
paul.code('React')
// 📝 Paul는 지금 React 공부 중... 🎉 Paul 레벨2 달성!
paul.read('Modern JavaScript')
// 📚 Paul는 지금 Modern JavaScript 읽는 중... 🎉 Paul 레벨3 달성!

 

Instance Paul 생성 로직

 

 

 

4️⃣ Class

• class + 이름 + { constructor ... } 로 구성.
• 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수.
• 객체를 생산하는 생산 도면 혹은 청사진이란 표현을 자주 사용.
• 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것.
• 이처럼 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가신텍스 (Syntactic sugar) 라고 부른다.
• class의 자세한 기능과 메소드에 대한 내용은 따로 기술할 예정!
  아래 예제 코드와 로직을 비교해서 확인하면 class의 구조는 쉽게 이해할 수 있는데
  기존 자바스크립트의 프로토타입(3) 패턴보다 훨씬 직관적이고 간결한 로직을 갖고 있는 것을 알 수 있다.

 

class GetClassLv {
    constructor(name) {
        this.name = name;
        this.job = 'Frontend Developer';
        this.level = 1;
    }
    code(lang) {
        if (typeof lang !== 'string') {
            throw new Error('Please pass in a string')
        }
        console.log(`📝 ${this.name}는 지금 ${lang} 공부 중...`);
        this.levelUp()
    }
    read(book) {
        if (typeof book !== 'string') {
            throw new Error('Please pass in a string')
        }
        console.log(`📚 ${this.name}는 지금 ${book} 읽는 중...`);
        this.levelUp()
    }
    levelUp() {
        this.level += 1;
        console.log(`🎉 ${this.name} 레벨${this.level} 달성!`);
    }
}

// instance 생성
const jay = new GetClassLv('JAY');

// instance method 호출
jay.code('JavaScript')
jay.read('Modern JavaScript')
// = 📝 JAY는 지금 JavaScript 공부 중... 🎉 JAY 레벨2 달성!
// = 📚 JAY는 지금 core JavaScript 읽는 중... 🎉 👩🏻‍💻 JAY 레벨3 달성!

Instance Jay 생성 로직

 

 

5️⃣ Prototype 과 Class 코드 비교

 

 

 

Prototype 과 Class 코드 비교

 

 

 

 

👩🏻‍💻 요약

• 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 객체를 데이터 목록으로 보는 시각에서 벗어나 각각 독립적인 기능을 하는 부품과 같이 상호작용하도록 하는 프로그래밍 방법론.
• 객체 지향 설계를 통해 프로그램을 유연하고 변경이 용이하게 만들 수 있다.
• 생성자 함수는 객체를 만들 때 new 연산자와 함께 사용하는 함수. 리턴 값을 가진 함수라는 것이 중요한 포인트!
• 생성자 함수는 부모 역할을 하는 객체 prototype이 되며 공통적으로 사용할 수 있는 속성을 추가해서 자식역할을 하는 객체 instance 에 상속할 수 있다.
• 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수 Class는 기존 JavaScript의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 Class 문법처럼 바꿔준 것. constructor() 메소드를 통해 클래스의 생성자 함수를 정의한다.