바닥코딩

프로토 타입 본문

JavaScript/vanilla js

프로토 타입

개발공부개발공부 2021. 3. 17. 10:20

 JS를 처음으로 접하신 분들에게는 생소한 개념일 수도 있지만 c++, c#., java, 파이썬 등등 여러 언어를 학교나 학원 또는 개인공부를 통해 해보신 분들에게는 class(클래스) 것이 굉장히 익숙한 단어일겁니다. 

 객체지향언어의 핵심적인 역할을 하는 class는 개발에서 굉장히 중요한 요소입니다.  물론, JS도 class 라는 개념이 존재합니다. ES6(ECMAScript6) 문법이 처음으로 등장하게 되면서 JS에서도 class라는 개념을 활용할 수 는 있습니다. 그렇지만 JS에서의 class의 중요도는 위에 언급한 언어들과는 사뭇 차이를 보입니다

 

객체지향언어 ,프로토타입 기반 언어

 객체지향언어는 말그대로 class - 객체 방식의 패러다임을 지향하는 언어 입니다. 실제로  java와 같은 언어는 전체적인 프렘임워크들의 구조가 class와 객체지향언어의 개념인 상속으로 이루어져 있습니다. 그렇지만 class와 객체를 생성하지 않고 절차적으로 프로그래밍을 하는 것이 불가능한 언어일까요? 프로그래밍을 공부해보신 분들은 그렇지 않다는 점을 아실겁니다. 다만,  굳이 class - 객체 방식을 지향하는 특성을 가진 언어에서 그런 삽질을 할 이유가 없는 것이죠

 다시 본론으로 돌아와보면 JS와 같은 경우 프로토타입(원형) 기반의 언어입니다.  일단 프로토 타입의 기본 구조부터 아래 코드를 통해 살펴 보겠습니다.

function Person(){};

Person.prototype.age = 27;
Person.prototype.gender = "male";

var Kim = new Person();
var Lee = new Person();

console.log(Kim.age);   //27
console.log(Lee.gender);  //male

  처음 function Person(){} 이라는 생성자 함수를 작성 했습니다  이 예제에서 생성자 함수 안 내용이 필요 없을 뿐 안에 내용이 있어도 상관 없습니다. 이 함수의 prototype에 값을 할당하고 마치 class처럼 이를 작성하여 사용하면 프로토타입에 넣은 내용을 사용할 수 있습니다.

 여기서 한가지 의문이 생길 것입니다

function Person(){
    this.age = 27;
    this.gender = "male";
}

var Kim = new Person();
var Lee = new Person();

console.log(Kim.age); //27
console.log(Lee.gender) //male

 위와 같이 코드를 작서하여도 결과는 위와 동일 합니다. 그런데  굳이 prototype이라는 개념을 사용해서 작성할 필요를 못느낄 수도 있습니다 하지만 둘 사이에는 보이지 않는 메모리 참조 방식의 차이가 있습니다. 먼저 처음 작성한 코드에서는 Kim, Lee 두가지 변수가 따로 메모리를 가지고 있는 것처럼 보이지만 이 두 변수는 Person의 프로퍼티의 메모리를 참조하게 됩니다. 그렇지만  두번째 코드는 Kim, Lee,Person이 모두 다른메모리를 참조하게 됩니다.

 정리하자면 이런 메모리 참조 방식 때문에 JS 에서는 prototype을 지향합니다. 객체지향의 하나의 갈래라고 볼 수 있지만, 상속이라는 개념이 없기 때문에 프로토타입을 복사한다 등등 여러 차이는 있습니다.  객체지향언어와는 사소한 차이들이 존재하지만 결론적으로 중요한 것은 아까 처음에도 언급했던 자바스크립트는 prototype을 지향한다는 점입니다. JAVA에서 객체 지향 패러다임을 지향하기 떄문에 이러한 방식에 대한 이해가 중요하듯 저같이 JS를 공부하는 사람이라면 이 언어가 지향하는 개발 방식에 대한 이해가 우선이라고 생각합니다(프로토타입에 대한 개념은 확실하 하고 넘어갑시다).

'JavaScript > vanilla js' 카테고리의 다른 글

Map 오브젝트  (0) 2021.03.17
Arrow function  (0) 2021.03.17
클로저  (0) 2021.03.15
자바스크립트 스코프(scope)  (0) 2020.07.25
var, let, const  (0) 2020.07.12