penetrate the world

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

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

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

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