Javascript를 이해하는 데 필요한 가장 핵심 개념 중 하나가 객체 지향 프로그래밍이다.
사실 단순히 '객체 지향 프로그래밍' 이란 단어를 들으면 직관적으로 잘 이해가 잘 되질 않아서, 이것저것 찾아보며 정리를 해 보았다.
개발을 하다보면, 프로그램의 규모와 기능이 복잡해질수록 여러 기능들을 단순화하고 싶어지게 된다. 계속해서 반복하게 쓰게 될 비슷한 기능들을 쓸 때마다 새로 만들지 않고, 기능별로 묶고 분류하여 필요할 때마다 사용할 순 없을까, 생각해보게 된다. 이미 만들어 둔 로직의 기능을 사용하면 굳이 비슷한 기능들을 계속해서 새로 만들 필요가 없으니 말이다.
Javascript에서 모든 것은 객체(Object)로 이루어져 있고, 객체를 그룹핑하여 그 로직을 재사용하게 된다면 작업이 한결 수월해질 것이다. 그렇게 해서 나오게 된 게 바로 객체 지향 모델이다. 서로 연관된 변수와 함수를 그룹핑한 객체라는 그릇을 만들고, 그 로직을 재활용 가능하도록 하는 것이다. 결국 객체 지향 프로그래밍이란, 좋은 부품의 로직을 만드는 것이라고 할 수 있다.
객체 지향 프로그래밍의 특징
1. 추상화(abstraction)
- 객체 내부 내용을 자세히 모르더라도 필요한 정보만을 이용해서 객체를 사용할 수 있게 됨
2. 캡슐화(Encapsulation)
- 데이터와 그 데이터를 다루는 메서드를 하나로 묶어서 객체를 생성
- 객체 내부의 세부 구현은 외부에 은폐되어 있고, 외부에서는 객체의 메서드를 통해서만 데이터에 접근 가능
3. 상속(Inheritance)
- 이미 정의된 클래스(부모 클래스)를 기반으로 새로운 클래스(자식 클래스) 생성 가능
- 상속을 통해 코드를 재사용하고, 부모 클래스의 속성과 메서드를 자식 클래스가 상속받아 사용 가능함
4. 다형성(Polymorphism)
- 여러 개체(객체 또는 클래스)가 동일한 메서드를 호출할 때 각 개체가 자신에 맞게 메서드를 수행하도록 함
- 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있음
*인스턴스란? 클래스나 프로토타입을 통해 생성된 객체(아래에서 설명)
프로토타입(Prototype)
정의
- 모든 객체는 다른 객체를 참조하거나 연결할 수 있는 체인형 객체를 가지고 있다, 이를 프로토타입이라고 한다.
- 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말하기도 하며, 이를 프로토타입 체인(Prototype chain)이라고도 함
기능
- 모든 객체가 공유할 수 있는 속성과 메소드 보유
=> 모든 인스턴스가 메모리에 별도로 메소드를 저장하지 않고도 동일한 메소드에 접근
=> 더 적은 메모리를 사용하며 코드를 재사용 가능
따라서, 모든 객체는 global object prototype을 가진다. 아래와 같이 콘솔에 아무 객체(배열)나 생성하고 속성을 보면 Prototype이라는 전역 객체가 들어 있는 것을 알 수 있다. 다른 일반적인 메소드와 마찬가지로, 직접 메소드를 추가하게 되면 이 프로토타입 객체에 메소드가 새로 생성된다.
클래스(Class)
js에서 객체를 생성하는 가장 일반적인 방법은 객체 리터럴을 사용하는 것이다.
객체 리터럴(Object literal)
리터럴: 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법
일반적으로 우리가 객체를 생성할 때 { } 중괄호 내에 요소를 정의하는 그 방법
그러나 ES6(ES2015)부터 JavaScript에서 클래스 문법이 도입되어 객체를 직접 만들지 않고 클래스(class)를 사용하여 객체를 생성할 수 있게 되었다. 따라서 객체를 보다 간결하고 직관적인 방법으로 생성할 수 있게 되었다.
정의
- 클래스(Class)는 OOP에서 객체를 만드는 또다른 방법이다.
- 객체를 생성하기 위한 템플릿이자 객체의 설계도라고 말할 수 있다.
- 해당 클래스를 기반으로 생성된 객체들은 클래스의 속성과 메서드를 공유한다.
- 실제로 메모리에 할당된 객체는 클래스의 인스턴스(Instance)라고 부른다.
특징
1) 생성자 함수: 생성자 함수(constructor function)라는 것을 사용하여 객체를 생성하고 초기화한다.
2) 메소드 정의: 클래스 내에서 메서드를 정의할 때는 일반적인 함수 문법을 사용한다.
3) 상속: 다른 클래스를 기반으로 새로운 클래스를 생성하고 그 메소드를 참조할 수 있다.
// 객체 리터럴을 이용
const objLiteral = {
property1: value1,
property2: value2,
// ...
};
// 클래스(class)를 이용
class MyClass {
constructor(property1, property2) {
this.property1 = property1;
this.property2 = property2;
}
}
const myObject = new MyClass(value1, value2);
즉 클래스는 기존의 생성자 함수와 프로토타입을 보다 세련된 문법으로 표현하는 방식이라고 할 수 있다. 클래스의 메소드는 클래스의 prototype 속성에 추가되고, 생성자 함수는 클래스의 constructor 메소드로 표현된다.
그러나 클래스 구문을 사용하더라도 JavaScript 엔진은 내부적으로 생성자 함수와 프로토타입을 사용하여 객체를 생성하고 상속을 구현하며, 프로토타입 체인을 통해 상호 작용한다. 즉 클래스를 쓰더라도 내부적으로는 여전히 프로토타입 기반 상속이 작동한다는 것이다. 이를 구문적 설탕(syntatic sugar)이라고 표현하기도 한다.
생성자 함수(Constructor Function)
정의
- 객체를 생성하고 초기화하기 위한 함수로 객체 지향 프로그래밍에서 클래스를 통해 생성된 인스턴스를 만들 때 사용
- 해당 인스턴스에 초기값을 설정하거나 다양한 작업을 수행
특징
1) 이름이 대문자로 시작
- 관례적으로 생성자 함수의 이름은 대문자로 시작하여 일반 함수와 구별합니다.
2) new 키워드와 함께 호출
- new 키워드를 사용하면 빈 객체가 생성되고, 생성자 함수 내에서 this를 통해 해당 객체를 참조 가능
3) 프로퍼티와 메서드 정의
- 생성자 함수 내에서 this를 사용하여 객체의 프로퍼티와 메서드를 정의
- 생성자 함수를 통해 생성된 모든 인스턴스는 클래스 내 프로퍼티와 메서드를 공유
// 생성자 함수 정의
function Person(name, age) {
this.name = name; *this로 써야 본 객체를 파생된 인스턴스 객체들이 참조하니까.
this.age = age;
// 메서드 정의
this.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
}
// 생성자 함수를 이용한 인스턴스 생성
const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);
// 인스턴스의 메서드 호출
person1.sayHello(); // 출력: Hello, my name is John and I am 30 years old.
person2.sayHello(); // 출력: Hello, my name is Alice and I am 25 years old.
인스턴스(Instance)
- 클래스에 의해 생성된 객체
- 클래스는 객체를 생성하기 위한 템플릿이며, 클래스를 기반으로 실제로 메모리에 할당된 개체가 인스턴스
- 붕어빵 틀(클래스)에서 찍어낸 붕어빵(인스턴스)들은 모두 같은 모양과 특징을 가지지만, 각각은 별개의 개체이다.
Sub class
- 부모클래스의 속성과 메서드를 상속받아 재사용하면서 필요에 맞게 새로운 속성이나 메소드를 추가할 수 있음
- extends 키워드로 부모 클래스를 자식 클래스에 확장할 수 있으며, 자식클래스에 부모클래스의 속성을 불러올 때 super 키워드를 씀
class Person {
constructor(name, email) {
this.name = name;
this.email = email;
}
introduce() {
return `Hello my name is ${this.name}`;
}
}
class Client extends Person {
constructor(name, email, phone, address) {
super(name, email)
this.phone = phone;
this.address = address;
}
}
const john = new Client('John', 'john@abc.com', '010-0000-0000', '서울');
john.introduce();
// output: 'Hello my name is john'
