'javascript' 태그의 글 목록

Web/JavaScript

[JavaScript] this

2022.08.13

this 키워드 객체 : 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 한다. → 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. this 바인딩 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. (this와 this가 가리킬 객체를 바인딩) 전역에서 this는 전역 객체 window를 가리킨다. (기본값) 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. 메서드 내부에서 this는 메서드..

Web/JavaScript

[JavaScript] 변수 호이스팅

2022.07.29

Hoisting(호이스팅)? 스코프 내부에서 변수 선언이 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특징 변수의 종류 var ➡️ 함수 레벨 스코프 let(ES6) ➡️ 블록 레벨 스코프 const(ES6) ➡️ 블록 레벨 스코프 함수 레벨 스코프 : 변수의 유효범위가 함수 내로 제한 블록 레벨 스코프 : 변수의 유효범위가 블록(함수, if, for, while, try/catch 등) 내로 제한 변수의 생성 과정 자바스크립트의 변수는 다음 3단계의 과정을 통해 생성된다. 선언 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비(변수 이름 등록) 변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점(런타임)이 아닌 ..

Web/JavaScript

[JavaScript] HTML 파일에서 JavaScript 파일 효과적으로 로드하기

2022.07.29

브라우저의 렌더링 엔진은 HTML 문서를 파싱할 때 순차적으로 읽어들인다. 예를 들어, 아래와 같은 HTML 문서를 파싱한다하면 버튼 위에서 아래로 파싱을 진행하는데 중간에 script 태그를 만나면 파싱을 멈추고 script 파일을 로드하고 실행시킨다. script 파일이 다음과 같다면, 아직 button 요소를 파싱하기 전에 button DOM 요소에 접근하게 되어 문제가 발생한다. console.log("Hello World"); let btn = document.querySelector("#btn"); btn.addEventListener("click", function () { alert("Hello Wolrd"); }); 전체 흐름을 정리하면 다음과 같다. HTML parsing script ..

[JavaScript] this

[JavaScript] 변수 호이스팅

[JavaScript] HTML 파일에서 JavaScript 파일 효과적으로 로드하기

티스토리툴바