문제의 코드 update() { missiles.forEach(missile => { if (missile.direction === "vertical") { this.vy = 1; this.position.y += this.vy; } else if (missile.direction === "horizontal") { this.vx = 1; this.position.x += this.vx; } }); this.blockCollisionCheck(); } 일정한 속도로 미사일을 쐈으면 좋겠는데 의도치 않게 가속도가 붙었다. 뭐지... 혹시 또 forEach문 때문일까 했는데 역시나였다!!^^ 편하다는 이유로 for문 대신 forEach문 정말 많이 썼는데 아래 코드 때문에 문제가 생긴 것이었다. functi..

for…in object에 사용 객체의 속성 확인용 → 디버깅 enumerable한 것만 출력 부모의 prototype에 저장된 것도 출력 특정 값을 가진 키가 있는지 확인 for…of array, 문자, arguments, NodeList, Map, Set에 사용 Nodelist에 사용 가능 class Object { constructor({ imgSrc, position, splitFrames = { x: 1, y: 1 } }) { // default value object 설정 obj[key] when you want to use a value as the property key that is determined at runtime dynamic key name 런타임 실행시 사용 const key..

keyboard event KeyboardEvent.key The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout. KeyboardEvent.code The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key)..

자바스크립트는 기본적으로 함수 레벨 스코프를 따름 모든 선언(var, let, const, function, class)를 호이스팅함 호이스팅 변수를 선언하기 전에 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올림 초기화를 제외한 선언만 호이스팅 블록레벨 → let, var, const 다시 정리 → 함수 스코프, 블록 스코프 const, let → block scope 굳이 함수로 작성 안 해도 됨 var → function scope 전체 문서: 전역 변수(global scope) 함수, 변수: 지역 변수(local sc..

노마드코더 강의 듣고 이해했다고 생각한 나 ... 반성하자 📍목표 구매 버튼 클릭시 상품 개수 저장하기 /** * 'cart' string이 반복되므로 오타 방지를 위해 변수에 담음 * 노마드코더 바닐라 자바스크립트 강의에서 배운 꿀팁 */ const CART = 'cart'; /** 모든 '.buy' 버튼 찾기 */ let buyBtn = document.querySelectorAll('.buy'); /** forEach로 각각의 buyBtn에 대해 아래 함수 실행 */ buyBtn.forEach((item) => { /** buyBtn 전전 위치에 있는 title 텍스트 값 추출 * @todo 보기에 지저분하니 property 반복시 좀 더 효율적인 방법이 있는지 확인해보기 */ let title =..

innerHTML value: string 모든 자손를 삭제하고 innterHTML의 value 값으로 들어온 string 타입의 HTML 노드로 대체 페이지를 처음 로딩했을 때 발생한 변화를 비롯해 페이지의 최신 HTML 소스를 검사하는 데 사용 가능 용도 1.요소의 HTML 콘텐츠를 읽음 let contents = myElement.innerHTML; // string 요소 반환 2.요소의 콘텐츠 대체 innerHTML에 값을 부여하면 원래 있던 요소의 콘텐츠를 새롭게 대체 도큐먼트 안의 바디 속성을 모두 지우고 싶을 때 document.body.innerHTML = ‘’; 값을 추가할 때 element.innerHTML += `${element.children.length + 1}` cross-si..