본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq
250802(토) 33일차
문법 - 인스턴스
함수 기반 인스턴스
함수를 new 키워드와 함께 사용해 인스턴스를 만드는 방식은 고전
이 방식에는 숨겨진 암묵적 동작 세 가지가 따른다
1. new 키워드가 붙으면 빈 객체가 자동 생성되고
2. 함수 내부의 this가 그 객체로 자동 바인딩되며
3. 함수의 return이 없더라도 그 객체가 자동 반환된다
또한, 이 객체는 __proto__를 통해 함수의 prototype과 연결되며, 프로토타입 체인을 따라 메서드 접근이 가능해진다
하지만 이런 과정이 명시적으로 드러나지 않고, this의 동작도 컨텍스트에 따라 달라지기 때문에
코드를 처음 접하는 개발자에게는 상당히 헷갈리고 위험한 방식이 될 수 있다
실수로 new 없이 호출할 경우, this가 전역 객체(window)에 바인딩되어 전혀 의도치 않은 동작을 하게 된다
이런 오류를 방지하기 위해 생성자 함수의 이름을 대문자로 시작하는 비공식 컨벤션을 사용하는 등 우회적인 규약에 의존한다
클래스 기반 인스턴스
ES6 이후 등장한 클래스 문법은 위에서 언급한 불편함과 오류 가능성을 크게 줄여준다
- constructor를 통해 인스턴스 초기화 로직을 명시적으로 작성할 수 있고
- prototype 메서드와 정적 메서드(static)를 클래스 내부에 깔끔하게 선언할 수 있으며
- new 없이 클래스를 호출하면 바로 에러를 발생시켜 실수를 원천 차단한다
또한 코드 작성 측면에서도 모든 구성 요소가 클래스 내부에 깔끔하게 모여 있어
코드의 가독성과 유지보수성이 뛰어나고, 객체지향적 설계도 보다 자연스럽게 구현할 수 있다
프로토타입 연결
기존 함수 기반에서는 Cart.prototype.addItem = function() {} 처럼 메서드를 따로 연결해줘야 했다면
클래스 방식에서는 단순히 클래스 내부에 메서드를 작성하면 자동으로 프로토타입 체인에 연결된다
이처럼 개발자가 일일이 하지 않아도 되는 일들이 많아졌고, 문법 자체로 그 구조가 드러나기 때문에 협업 시에도 훨씬 직관적이다
이번 강의를 통해 자바스크립트가 객체 지향 프로그래밍을 함수 기반으로 어떻게 흉내 냈는지,
클래스 문법을 도입하면서 그 과정을 어떻게 단순화하고 안전하게 개선했는지를 한 눈에 비교할 수 있었다
