패스트캠퍼스 환급챌린지 34일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250803(일) 34일차

문법 - 프로토타입

 

프로토타입 체이닝

객체의 유전자를 따라가는 흐름

객체를 생성하고 __proto__를 활용해 다른 객체를 연결했을 때 해당 객체에 없는 속성을 참조하면 연결된 상위 객체에서 탐색이 이루워진다는 원리는 직관적이면서도 강령

const c1 = { name: 'c1' };
const c2 = { width: 300 };
c1.__proto__ = c2;

console.log(c1.width); // 300

속성이 없을 경우 상위 객체로 탐색이 이어지는 흐름은 기존 클래스 기반 언어에서의 상속 개념과는 또 다른 자바스크립트만의 유연한 설계 철학

 

toString

객체에 명시적으로 존재하지 않는 toString() 메서드가 호출 가능한 이유도, 이 체이닝 구조 덕분

최상위 객체인 Object.prototype에 모든 객체가 암묵적으로 연결되어 있다는 사실은 자바스크립트의 설계 철학

 

함수와 prototype

상속 구조를 내장한 생성자 함수

함수 객체가 prototype 속성을 갖고 있으며, new 연산자를 통해 인스턴스를 생성할 때 자동으로 이 프로토타입 객체가 연결된다

function Foo(name) {
  this.name = name;
}
Foo.prototype.lastName = 'Kim';

const f = new Foo('Min');
console.log(f.lastName); // 'Kim'

단순한 함수였던 Foo가 상속 기능을 내장한 생성자가 되는 순간

 

클래스 문법과의 연결 고리

ES6 이후 클래스 문법이 도입되었지만, 그 내부 구조는 여전히 이 프로토타입 기반 구조 위에 설계되었다는 점이 인상적이었다

즉, 문법은 간소화되었지만 동작 원리는 동일하기 때문에, 프로토타입 체이닝의 작동 방식을 아는 것이 여전히 중요하다

 

이번 강의를 통해 자바스크립트의 객체 시스템은 그저 데이터를 담는 그릇이 아니라 재사용과 연결, 상속을 염두에 둔 설계 구조라는 점을 깊이 이해할 수 있었다

객체지향적 사고와 프로토타입 기반 메커니즘의 차이점도 비교해볼 수 있었고, 무엇보다 __proto__, prototype, new의 관계를 명확히 체감한 것이 좋았던 강의