-
왜 생성자함수가 있는 걸까?Javascript | Typescript 2022. 9. 30. 21:06
생성자 함수란
재사용할 수 있는 객체 생성 코드를 구현 하는 기술이다.
문법 규칙이 있다.
1. 반드시 new 연산자를 붙여 실행한다.
2. 첫 글자는 대문자로 시작한다.
new 연산자를 사용하면 빈 객체를 만들어 this를 할당한다. this를 반환한다.
function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isAdmin = false; // return this; (this가 암시적으로 반환됨) }
하지만 생성자 함수가 굳이 필요한가 라는 생각이 들었다.
기술적인 차이도 없거니와 일반 함수로도 충분히 인자를 넘겨 받은 리턴 값을 사용 할 수 있다.
function test() { const values = {}; values.name = ""; values.age = 0; values.hello = () => `hello ${values.name}`; values.set = (newName) => values.name = newName; return values; } const 테스트 = test(); 테스트.name = "유시진"; 테스트.age = 29; console.log(테스트.hello()); // hello 유시진 console.log(테스트.set("김시진")); console.log(테스트.name) // 김시진 console.log(테스트.age) // 29 const 테스트2 = test(); 테스트2.name = "시진이"; console.log(테스트2.name); // 시진이
그렇다면 왜 생성자 함수가 생겨 난게 된걸까 생각해본 결과 그건 목적성에 차이가 있다고 생각한다.
함수는 일급객체로서 변수에 할당, 다른 함수로 인자 전달, 다른 함수의 결과로 리턴 이를 활용하여 고차함수, 콜백 등 굉장히 범용적으로 사용할 수 있다. 그렇기에 생성자 함수는 ES2015 이전에 없던 Class의 문법을 카피하여, 인스턴스 객체를 생성하는 목적성을 띤 함수이다.
이제야 난 생성자 함수와 일반 함수에 대해 불편한 시점으로 바라보게 되었는지 알았다.
더 이상은 생성자 함수를 사용하지 않기로 했다. Class보다 나은 점이 없다고 생각 했기 때문이다. 왜냐하면 생성자함수에서 get을 하기 위해선 prototype을 직접적으로 할당하여야한다. 그렇다면 이 함수는 javascript object의 내부 속성인 Enumerable을 True로 만들어 열거 가능한 객체가 되어버린다. 즉 for in문으로 인해 get function까지 가져오기 때문에 따로 분기처리를 해줘야 한다. 반면에 Class로는 객체 인스턴스 자신에게만 있는 값만 순회한다. 따로 신경을 써주지 않아도 되는 것이다. 또한 호출 시 Class는 명확하게 new를 사용하여야 에러가 뜨지 않는다. 반면에 함수는 생성자 함수 로직으로 구성을 해도 new 없이도 호출이 가능하다.
생성자 함수는 목적성이 분명한가? 명확한가?의 대답은 No이다.
결국은 남들이 보기에 파악하기 쉬운 코드인가를 봤을 때 재사용 가능한 객체 명세서를 구성할 때 Class를 사용하지 않을 이유가 없다. 그렇기에 생성자 함수는 더는 사용 하지 않기로 했다.
마지막으로 웹이 단순한 문서 전달에 그치지 않아 서버사이드스크립트 언어로도 충분히 서버에서 감수할 수 있는 자원 소비 였다. 하지만 웹이 점점 발전하여 돔 객체를 다룰 일이 잦아지고 사용자와 상호작용하는 모든 인터페이스 즉 상태라고 불리는 이 데이터들을 관리하는 일이 많아졌다. 이에 맞춰 UX, DX 보완을 위해 Flux패턴,CSR, MV*, SPA 등이 생겨 났듯이 javascript 또한 정적 타입을 추구한 typescript, es2015 Class등 최신 javascript는 최대한 자율성을 가지도록 만들어진 이전에서 벗어나 영역을 좁히고 안정성을 기반으로 틀을 구축하는 언어가 되어 가는 것 같다.
'Javascript | Typescript' 카테고리의 다른 글
브라우저 미지원 시 requestIdleCallback 직접 구현하기 (1) 2024.11.14 jwt 어떤 방식으로 컨트롤 해야하지? (0) 2022.08.10 함수 매개변수대신 객체구조화를 사용하자 (0) 2022.08.05 [javascript] scope 란 , 예제 (0) 2022.07.26