penetrate the world

JavaScript 프로토타입 상속 구현하기: class 문법의 내부 동작 원리

1. 설명JavaScript에서 class 문법을 사용하면 객체지향 프로그래밍을 직관적으로 구현할 수 있다. 하지만 class는 ES6에서 도입된 문법적 설탕(syntactic sugar)일 뿐이고, 내부적으로는 여전히 프로토타입 기반으로 동작한다. 실제 프로덕션 환경에서 레거시 코드를 다루거나, 프레임워크의 내부 구조를 이해하거나, 메모리 최적화가 필요한 상황에서는 프로토타입의 동작 원리를 정확히 알아야 한다. 프로토타입 체인을 제대로 이해하지 못하면 예상치 못한 버그를 만날 수 있고, 특히 상속 관계에서 메서드가 어디에서 호출되는지 추적하기 어렵다.2. 개념 정의프로토타입은 JavaScript에서 효율적인 코드 재사용을 위해 존재하는 메커니즘이다. 모든 함수는 prototype 속성을 가지며, new..

자바스크립트 프로토타입: 플라톤과 아리스토텔레스의 싸움

자바스크립트는 클래스 기반이 아닌 프로토타입 기반 언어다.이는 단순한 구현 차이가 아니라, 객체지향 프로그래밍에 대한 근본적으로 다른 철학적 접근이다.ES6의 class 문법이 등장했지만, 그 아래에는 여전히 프로토타입이 작동하고 있다. 프로토타입은 추상적인 청사진이 아닌 구체적인 예시 객체를 통한 위임(delegation) 메커니즘이며, 이는 클래스 기반 상속보다 더 유연하고 강력하다. 1995년 브렌든 아이크가 단 10일 만에 자바스크립트를 설계할 때 Self 언어에서 영감을 받아 프로토타입을 선택한 이 결정은,오늘날 전 세계에서 가장 많이 사용되는 프로그래밍 언어의 핵심 특성이 되었다. 이 선택의 배경에는 2,000년 이상 이어져 온 철학적 논쟁이 있다. 플라톤은 이데아(idea, 그리스어 ἰδέα..

왜 실행 컨텍스트를 알아야 할까?디버깅하다 보면 예상과 다른 변수 값을 마주칠 때가 있다.console.log()로 찍어보니 undefined가 나오거나, 분명히 함수 안에서 선언했는데 바깥에서 접근이 안 되는 상황 말이다.이런 현상의 근본 원인이 바로 실행 컨텍스트다. 실제로 프로덕션에서 "메모리 사용량이 계속 늘어난다"는 제보를 받고 조사해본 적이 있다.원인은 이벤트 리스너 내부의 클로저가 DOM 요소를 계속 참조하고 있어서 가비지 컬렉션이 되지 않는 것이었다.Chrome DevTools의 Memory 탭에서 Heap Snapshot을 비교하니 쉽게 찾을 수 있었다. 클로저, this 바인딩, 호이스팅 같은 자바스크립트의 핵심 개념들이 모두 실행 컨텍스트에서 출발한다.이를 제대로 이해하면 성능 최적화..

기본적인 연산자 + - * / ** 등은 패스 '=='는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.) '==='는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. '==='는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

Html에 어떤 action이 발생했을때 수행하는 코드. Event를 감지하는 event listener 코드가 있다. Ex) addEventListener, mouseenter, onmouseleave listener를 찾는 가장 좋은 방법은 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색. javascript의 element를 찾으려면 링크에 Web APIs라는 문장이 포함된 페이지를 본다. 왜냐면 이건 JS관점의 HTML Heading Element란 의미. 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 찾아보면 됨. 특정 Element 조회 querySelector("#hello") == getElementById("..

인수를 받기위해 함수를 선언할 때 기본 구조 function funcName(){ // code }; JS 객체 선언하기 const objectName = { // 매개변수 작성 }; 오브젝트 내부 매개변수가 argument를 받고자 할때 아래와 같이 사용한다. const player = { name: "albert", hello: function () { console.log("hello"); }, }; console.log(player.name);// albert player.hello("Kong");// hello