독도갈매기의 개발 블로그

[JS] 자바스크립트가 어려운 이유 Prototype 편 -1- 본문

Javascript

[JS] 자바스크립트가 어려운 이유 Prototype 편 -1-

독도갈매기 2020. 9. 12. 02:17

JS는 쉬운 언어가 아닌가?

처음 어떤 언어를 배우면 좋을까요? 할때는 많은 언어를 추천받습니다.
예를 들면, "객체 지향 언어를 배울거면 Java를 배워야지!"라던가 "뭔소리야 Java보다 더 좋은 언어인 C#이 있는데!"라던가 "C# 배울거면 기초가 되는 C/C++ 배워야지!"라던가 "처음 배우는거면 쉽게 쉽게 Python이나 Js는 어때?"이런 식으로 많이 얘기하지만 자바스크립트를 깊게 파려고 한다면 뭐랄까 엉켜있는 느낌이랄까 쉬운 언어라고는 느껴지지가 않는 언어입니다.

그럼 뭐 때문에 어려울까?

자바스크립트에서는 Prototype, DOM, 호출스택 등등 많은 개념들이 있지만 오늘은 Prototype을 알아보는 시간을 가져 보겠습니다.

Prototype

흔히 말하는 객체 지향 언어에서는 Java, C#, C++, Python 등등이 있지만 모두 Class를 사용하여 객체를 사용하죠
하지만 Javascript는 객체 지향 언어지만 Class를 선언하고 사용하는 것을 봤나요?

네 맞습니다. JS에서는 Class 대신 존재하는 것이 Prototype의 개념이죠
그렇기 때문에 자바스크립트는 프로토타입 기반 언어라고도 불린답니다.

let Person = (name, height) => {
    this.name = name;
    this.height = height;
}

let Hong = new Person("홍길동", 180);
let Kim = new Person("김영희", 160);

console.log(Hong.name); // 홍길동
console.log(Kim.name); // 김영희

Class기반 객체 지향과 Prototype기반의 객체 지향의 큰 차이라면 Class기반(Java, C# 등)은 Class라는 껍데기를 정의한 뒤 객체를 생성할 수 있지만 Prototype기반 객체 지향은 Class정의 없이 객체를 생성할 수 있습니다.
위 코드에서 알 수 있듯이 Person은 Class가 아닌 함수이지만 Constructor(생성자)역할을 하는 것을 볼 수 있죠
ES6이후 JS에서도 Class가 생겼답니다.
그럼 Prototype은 왜 쓰일까요?

Prototype은 왜 쓸까?

만약 객체를 여러개 생성해야 하는 상황이 있다면 어떻게 될까요?

let Person = () => {
    this.eyes = 2;
    this.nose = 1;
}

let Hong = new Person();
let Kim = new Person();

console.log(Hong.eyes); // 2
console.log(Hong.nose); // 1

위 코드라면 객체가 생성될 때마다 메모리에는 eyes와 nose가 계속 할당되고 쓸모 없이 메모리가 소모 될 것입니다.

let Person() {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

let Hong = new Person();
let Kim = new Person();

console.log(Hong.eyes);
console.log(Hong.nose);

하지만 Prototype을 사용한다면 Prototype메모리에 올라와 있고 그 데이터를 가져다 써서

메모리를 계속 할당하지 않기 때문에 쓸모 없는 메모리 소모를 방지 할 수 있습니다.

더 깊은 내용은 다음에 다뤄보는 것으로 하고 이번 포스팅도 읽어주셔서 감사하고 다음에도 더욱 더 정제된, 정리된 글로 뵙겠습니다. 그리고 항상 쓰지만 제가 아는 개념을 제 식대로 풀어서 쓰는 포스팅이기 때문에 틀린점이 존재 할 수도 있습니다. 지적할 점이 있다면 댓글로 알려주시면 감사하겠습니다.

Comments