[OOP] JavaScript 객체 지향 프로그래밍 - 6. constructor

 

들어가며

어느 정도 개발에 대한 감을 익혔다고 생각했습니다. 코드를 순서에 맞게 작성하는 능력들을 아주 조금이지만 쌓아 올릴 수 있었습니다. 하지만 시간이 지나면서 제 코드를 봤을 때 너무 더럽다고 느껴졌습니다. 중복되는 코드가 많았고, 비효율적인 코드들도 많이 볼 수 있었습니다. 코드를 조금 더 재사용성이 높게 작성한다면 더 효율적으로 시스템이 동작할 수 있었을 텐데, 아쉬움이 남았습니다. 이런 고민을 하면서 객체지향 프로그래밍에 대해 배워야겠다고 생각했습니다. 앞으로 객체지향을 배우면서 공부하고 느낀 점들을 정리해나가고자 합니다. 아래 내용은 생활코딩의 OOP 수업을 듣고 정리한 내용입니다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

constructor의 필요성

지금까지 객체를 어떻게 만들고 어떻게 쓸 수 있는가를 충분히 배웠습니다. 지금까지 객체를 만드는 방식은 수작업으로 이루어졌습니다. 

 

 

 

 

하지만 1억 개의 객체를 생산해야 한다면, 우리는 1억 개의 객체를 모두 작성할 수 없을 것입니다. 그렇다면, 객체를 찍어내는 공장이 있다면 우리는 조금 더 객체를 쉽게 생성할 수 있을 것입니다. 그리고 만약 객체에서 똑같이 추가되거나 변경되어야 할 데이터가 있다면, 수작업으로 진행한다면 1억 개의 객체를 모두 한 번에 변경해줘야 할 것입니다. 이런 작업을 객체 모두에게 적용할 수 있도록 하는 것이 필요합니다. 

 

그럼 지금부터 객체를 찍어내는 공장을 어떻게 만들 수 있는지 알아보겠습니다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

constructor의 사례

자바스크립트를 사용한다면, Date 객체에 대해 사용해본 적이 있을 겁니다. 이 Date를 이용할 땐 앞에다 new를 붙이고, Date 괄호 안에다 현재 날짜를 입력해줘야 동작합니다. 그리고 이 값을 변수에 할당하면, 내부적으로 현재 날짜의 데이터를 갖고 있는 새로운 객체가 만들어져서 d1이 됩니다. 

 

 

 

 

우리가 new Date를 실행했을 땐, 최종적으로 만들어지는 객체가 어떤 설계도를 갖고 있는지 알 수 없습니다. 사실 우리는 객체가 어떻게 생겼는지는 알 필요가 없습니다. 하지만 우리가 생성했던 객체들의 설계도는 외부에 다 노출되는 환경을 갖고 있습니다.

 

만약 우리도 new Date와 같은 공장을 만든다면, 코드가 훨씬 깨끗해지지 않을까요?  앞으로 공장을 어떻게 설계하느냐에 대해 배워보겠습니다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

constructor 만들기

객체를 만드는 공장을 만들어봅시다. 먼저 Date라고 하는 걸 살펴보겠습니다. 이는 함수를 호출하는 것과 비슷합니다. 왜냐면 Date는 함수이기 때문입니다. 만약 console.log('Date', Date)라고 하고 실행시키면 어떤 결과가 나올까요?

 

 

Date는 함수라고 나옵니다. 그리고 함수 안의 내용은 네이티브 코드. 즉 내장된 코드다라고 나옵니다. 그렇다면, 우리도 Date처럼 객체를 찍어내는 함수를 만들어보겠습니다.

 

 

 

 

Person 함수를 이용해서 만들어진 객체의 name은 kim이고, first는 10, second는 20, third는 30이다라고 하고 해 보겠습니다. 그리고 함수를 호출해보겠습니다. 결과는 undefined가 나옵니다. 왜냐하면 함수에서 어떠한 값도 리턴하고 있지 않고 있기에 undefined가 추력 됩니다. 그런데 Person 앞에 new라는 키워드를 붙인다면 어떻게 될까요? 결과는 Person이라는 함수는 완전히 다른 존재가 됩니다.

 

 

 

 

 

new Person으로 콘솔에 입력했더니, Person이라는 객체가 만들어졌다는 것을 알 수 있었습니다. 심지어 객체의 속성까지도 나오고 있는 것을 볼 수 있었습니다. 즉 new는 객체를 생성하는 생성자이며, new라고 붙어 있으면 생성자 함수라고 부른다는 것을 기억해야 합니다. 

 

 

 

 

 

생성자 함수를 kim과 lee에 값을 할당했습니다. 그 결과를 콘솔에 출력해본 결과, new Person 모두가 내부적으로 같으니까, 결괏값이 같게 나오는 것을 볼 수 있었습니다. 그렇다면, 출력되는 값을 어떻게 바꿀 수 있을까요? 

 

 

 

 

함수에 매개변수를 설정하고, kim과 lee에서 함수에 인자 값을 넣어줍니다. 그리고 다시 콘솔 값에 출력하면 값이 달라지는 것을 볼 수 있습니다. 이것이 바로 객체를 찍어내는 공장을 만드는 방법이었습니다. 

 

정리해보면, new를 사용함으로써 실행할 때마다 객체가 양산되는 것을 살펴볼 수 있었습니다. 그리고 constructor function을 변경하면 이 함수를 활용하는 모든 곳들이 바뀌는 것 또한 볼 수 있었습니다. 

 

즉 constructor function은 객체를 찍어내는 작은 공장, 공장의 시스템이며, 공장의 시스템을 바꾸면 객체도 한 번에 바뀝니다. 이 함수를 사용하면 코드가 간결해질 수 있고, 재사용성이 높아집니다. 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

인스턴스란?

지금까지 constructor function을 이용해서 객체를 찍어내는 방법에 대해 공부했습니다. 그렇다면, 객체와 인스턴스는 어떤 차이가 있을까요? 이에 대해 알아보겠습니다.

 

일단 인스턴스는 객체와 상당히 유사합니다. 하지만 다른 점이 있다면, 인스턴스는 현재 생성된 바로 그 객체라는 뉘앙스라면, 객체는 좀 더 일반적인 의미입니다. 인스턴스를 생성하는데 사용하는 함수를 특별히 constructor라고 합니다. 

 

function add(x, y) {
	return x + y;
}

 

예를 들어, 만약 add 함수가 실행되면, add라는 함수 인스턴스가 생성됩니다. 가끔 객체지향 공부를 하다 보면, 인스턴스와 객체라는 단어가 나올 텐데, 자세하진 않더라도 간단하게나마 알고 넘어가야겠다고 생각해서 정리했습니다. 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

마치며

객체지향에 대한 기본을 쌓아가고 있습니다. 앞으로 포기하지 않고, 하나씩 지식을 쌓아 가다 보면 언젠가는 기초가 튼튼한 개발자가 될 수 있을 것이라 믿습니다. 제대로 된 방향으로 하나씩 공부하고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

출처

 

 

Function 생성자 및 인스턴스(instance)