leesche blog

자바스크립트 클래스 안에서 이벤트리스너를 등록하고, 그 콜백 함수 안에서 this를 사용하려면 주의해야 한다. 아래는 board 엘리먼트의 자식 엘리먼트를 모두 선택해 각각에 이벤트리스너를 등록하는 메서드를 구현한 것이다. export default class BoardHandler{ #gameManager; /* ... */ #CLASS_NAME_BOARD_CHILD= ".board__child"; $allChildren = document.querySelectorAll(this.#CLASS_NAME_BOARD_CHILD); #initializeBoardElement() { this.$allChildren.forEach(($child) => ($child.textContent = "")); this.$..

콜백 함수가 뭐에요? 콜백(callback) 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨 받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행합니다. 예를 들면, 어떤 함수 X를 실행합니다. 함수 X는 다음과 "특정 조건이 되면 함수 Y를 호출"과 같은 명령을 실행합니다. 함수 X는 특정 조건이 됐는지 스스로 판단하고 Y를 호출합니다. 다시 말해, Y 함수를 제어할 권리는 X 함수에게 있습니다. 이때 적절한 시점에 호출되는 Y 함수가 콜백 함수입니다. '제어할 권리'을 구체적으로 살펴보기 var count = 0; var countFunction = function () { console.log(count); if (++count > 4) { // count에 먼저 1이 더해..

전역 공간에서 this 배경지식으로, 자바스크립트의 모든 변수는 특정 객체(실행컨텍스트의 LexicalEnvironment)의 프로퍼티로서 동작합니다. 실행컨텍스트는 변수를 수집해 LE의 프로퍼티로 저장합니다. 이후 어떤 변수를 호출하면 (스코프 체인에서 이를 검색) LE를 조회해서 일치하는 프로퍼티가 있을 경우 그 값을 반환합니다. 처음부터 전역 객체의 프로퍼티로 할당한 경우, 삭제가 가능합니다. 하지만 전역변수로 선언한 경우 삭제가 되지 않습니다. 즉, 전역변수로 선언하면 자바스크립트 엔진이 이를 자동으로 전역 객체의 프로퍼티로 할당하면서 추가적으로, 해당 프로퍼티의 configurable 속성(변경 및 삭제 가능성)을 false로 정의합니다. 메서드를 호출할 때 메서드 내부에서 this '메..