독도갈매기의 개발 블로그
[JS] 자바스크립트가 어려운 이유 Prototype 편 -1- 본문
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
메모리에 올라와 있고 그 데이터를 가져다 써서
메모리를 계속 할당하지 않기 때문에 쓸모 없는 메모리 소모를 방지 할 수 있습니다.
더 깊은 내용은 다음에 다뤄보는 것으로 하고 이번 포스팅도 읽어주셔서 감사하고 다음에도 더욱 더 정제된, 정리된 글로 뵙겠습니다. 그리고 항상 쓰지만 제가 아는 개념을 제 식대로 풀어서 쓰는 포스팅이기 때문에 틀린점이 존재 할 수도 있습니다. 지적할 점이 있다면 댓글로 알려주시면 감사하겠습니다.
'Javascript' 카테고리의 다른 글
[JS] 객체지향프로그래밍(OOP)의 핵심 개념 인스턴스와 객체 (0) | 2020.09.29 |
---|---|
[JS] 알아두면 좋은 JS개념 spread와 rest 전개구문 (0) | 2020.09.27 |
[JS] 프레임워크에서 많이 쓰는 JS개념 구조분해할당 (0) | 2020.09.26 |
[JS] 자바스크립트가 어려운 이유 Prototype 편 -끝- (0) | 2020.09.24 |
[JS] '=' '==' '===' 의 차이점은? 5초안에 떠오르지 않는다면 들어오세요. (0) | 2020.08.16 |