penetrate the world

왜 실행 컨텍스트를 알아야 할까?디버깅하다 보면 예상과 다른 변수 값을 마주칠 때가 있다.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