JS로 객체 지향 구현하기

혜삐·2023년 5월 21일

js 객체지향

톺아보기

목록 보기

6/23

객체지향이란?

객체지향프로그래밍이란 객체간의 상호작용을 중심으로 하는 프로그래밍을 의미한다.
객체는 객체의 상태를 나타내는 변수와 객체의 행동을 나타내는 함수로 이루어진다.

즉, 객체지향프로그래밍이란 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것이다.

<-> 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것

JS에서의 객체를 생성하는 법

Object literal이나 Constructor function 같은 방법도 있지만 주로 Class를 이용한 방법을 많이 쓰는 편이다.

class User{
	constructor(name, age){
    	this.name = name;
      	this.age = age;
    }
  	
  	welcome(message){
    	console.log(`message ${this.name}`);
    }
}

const hyevvy = new User('hyevvy', 1);
hyevvy.welcome('hi') // hi hyevvy 출력

객체 지향 프로그래밍의 특성

1. 추상화 (Abstraction)

객체를 만들고 났을 때 사용하는 사람은 객체 내부에 존재하는 복잡한 원리를 모르더라도 객체 외부에 공개된 프로퍼티나 메소드만을 가지고도 객체를 사용할 수 있어야 한다. 이를 위해 주석을 달거나 이해하기 쉬운 프로퍼티명, 메소드명을 짓는 것이 중요하다.

2. 캡슐화 (Encapsulation)

객체 외부에서 함부로 접근하면 안 되는 프로터피나 메소드에 직접 접근할 수 없도록 하는 것이다. 필요한 경우 공개된 메소드를 통해서만 접근할 수 있도록 해야한다.

class User{
	constructor(name, age){
    	this.name = name;
      	this.age = age;
    }
  	
  	get name(){
    	return this._name;
    }
  
  	set name(newName){
    	if(newName.length > 3){
        	this._name = newName;
        } else {
        	throw new Error('이름은 세글자 이상으로 부탁드려요')
        }
    }
}

이 때 user.name 을 실행했을 때 실제로는 name 이라는 getter 메소드가 실행된 것이다

3. 상속 (Inheritance)

상속은 부모 클래스의 프로터피와 메소드를 자식 클래스가 그대로 물려받는 것이다.

	class User {
    	constructor(name, age){
        	this.name = name;
          	this.age = age;
        }
      	welcome(message){
    		console.log(`${message} ${this.name}`);
    	}
    }

	class VipUser extends User {
    	constructor(name, age, grade){
        	super(name, age); // 부모인 User 클래스의 name과 age 프로퍼티를 그대로 물려받고 있음
          	this.grade = grade;
        }
      	welcome(message){
        	console.log(`${message} ${this.name} vip member!`);
        }
    }

	const hyevvy = new VipUser('hyevvy', 1, 'vip');
	hyevvy.welcome('hi'); // message hyevvy vip member!

4. 다형성 (Polymorphism)

다형성은 하나의 변수가 다양한 종류의 클래스로 만든 여러 객체를 가리킬 수 있음을 의미한다.

3번 상속 예시 코드에서

	const otherPerson = new User('anyone', 2);
	const hyevvy = new VipUser('hyevvy', 1, 'vip'); 
    const users = [otherPerson, hyevvy];

	for(let user of users){
    	user.welcome('hi');
    }