#12. 객체 지향 프로그래밍(1)

Object Oriented Programming

자바스크립트는 함수형 프로그래밍과 객체 지향 프로그래밍 둘 다 가능한 멀티 패러다임 언어이다. 이번에는 앞에서 배운 프로토타입 개념을 이용해 어떻게 자바스크립트에서 OOP가 구현되었는지 알아보자.

1. Object(객체)
OOP에 대해 설명하기 전에 먼저, 객체가 무엇인지부터 알고 넘어가자.
객체는 아래처럼 key & value로 구성된 자료구조이며, key는 문자이고 value는 아무거나 올 수 있다.

const student1 = {
  name: 'lee',
  age: 20,
  sayHello: function() {
    return 'Hello!'
  }
}

console.log(student1.sayHello()) // Hello!

프로그래밍을 하다보면 비슷한 객체를 여러개 만들어야하는 경우가 생긴다.
예를 들면 위에서 처럼 name, age, sayHello를 key로 갖는 객체를 30개 만들어야 한다고 생각해보자.

const student1 = {
  name: 'lee',
  age: 20,
  sayHello: function() {
    return 'Hello!'
  }
}

const student2 = {
  name: 'kim',
  age: 21,
  sayHello: function() {
    return 'Hello!'
  }
}

...

const student30 = {
  name: 'park',
  age: 22,
  sayHello: function() {
    return 'Hello!'
  }
}

이런 식으로 객체를 일일이 한개씩 만드는 것이 가장 직관적인 방법이다. 하지만 너무 비효율적이다.

다행히도, 자바스크립트에는 객체를 만드는 더 효율적인 방법이 존재한다.

2. 생성자 함수(constructor function)
생성자 함수란 함수 중에 객체를 생성할 수 있는 함수를 말한다. 생성자 함수를 이용하면 손쉽게 객체를 만들어 낼 수 있다. student 객체들을 생성자 함수로 만들면 다음과 같다.

const Student = function(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    return 'Hello!'
  }
}
// 일반적으로 생성자 함수는 대문자로 시작하게 이름을 짓는다.


const student1 = new Student('lee', 20);
const student2 = new Student('kim', 21);
	...
const student30 = new Student('park', 22);

생성자 함수의 this나 객체를 만들때 new 키워드가 생소할 수 있는데 여기선 일단 넘어간다. 생성자 함수를 이용하면 비슷한 객체를 마구 찍어낼 수 있다. 그래서 흔히 생성자 함수를 붕어빵 기계에 객체를 붕어빵에 비유를 많이 한다.

이번 시간에는 객체가 무엇인지 그리고 객체를 만드는 새로운 방법인 생성자 함수에 대해 살펴보았다. 다음편에는 prototype이 어떻게 활용되는지 알아보자.