2022-09-28 TIL

김재훈·2022년 10월 4일

TIL

목록 보기

6/7

추가로 배워야 하거나 정리할 내용들

2022-09-20

~~블록 레벨 스코프와 함수 레벨 스코프~~
모던 자바스크립트 Deep Dive의 프로토타입 파트까지 학습 후 프로토타입 기반 프로그래밍에 대한 설명글 작성

2022-09-27

~~DOM 개체 readyState 프로퍼티의 역할~~
~~XMLHTTPRequest의 역할~~
~~popstate 이벤트 발생 시점~~
~~addEventListener()에서 매개변수 false의 역할~~

JS Fundermental

Scope

스코프는 유효 범위를 의미하며 여기서 말하는 유효 범위는 식별자가 유효한 범위를 말합니다.
예제를 통해 살펴보면, foo() 함수 안에서 선언된 x는 함수 안에서만 유효하기 때문에 그 다음에 x를 다시 호출할 때는 전역 스코프에서 유효한 global이 출력됩니다.

var x = 'global';

function foo() {
    var x = 'local';
    console.log(x);
}

foo();               // local
console.log(x);      // global

위와 같이 함수에서 유효 범위가 바뀌는 경우를 함수 레벨 스코프라고 하며, 위 예제에서도 사용된 ES6 이전 변수 선언 방식인 var 키워드는 함수 외부에서 선언된 모든 변수를 전역 변수로 취급합니다. 이 때문에 for문의 변수 선언문에서 선언한 변수도 전역 변수가 됩니다.

var i = 10;

for (var i=0; i<5; i++) {
    console.log(i); // 0 1 2 3 4
}

// 의도치 않게 i의 값이 변경됨
console.log(i); // 5

ES6에서 도입된 let 키워드를 사용하면 블록 레벨 스코프가 적용되어, 함수가 아닌 모든 코드 블록(함수, if문, for문, while문, try/catch문)에도 지역 스코프가 적용됩니다.

let foo = 1; // 전역 변수

{
    let foo = 2; // 지역 변수
    let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

DOM

Document.readyState

document의 로딩 상태를 파악할 때 사용되며, 세 가지 상태로 구분됩니다.

switch (document.readyState) {
  case "loading":
    // document가 아직 로드 중인 경우의 상태입니다.
    break;
  case "interactive":
    // document가 전부 로드되었으며, 이때부터 접근이 가능합니다.
    // 하지만 이미지, 스타일(css), 프레임과 같은 몇 가지 요소들이 아직 로드 중인 경우입니다.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 페이지 자체가 전부 로드된 상태입니다.
    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

popstate 이벤트의 발생 시점

브라우저에서 뒤로 가기/앞으로 가기 행위 시 발생하는 이벤트입니다.

addEventListener()에서 세번째 매개변수 false의 역할

useCapture 프로퍼티로 이벤트가 발생한 개체 대상의 DOM 트리 하위에 위치한 개체로 이벤트가 전달되기 전에 리스너가 먼저 동작해야 하는지 여부를 나타냅니다. 기본값은 false이지만 브라우저에 따라 다르게 동작할 수 있어 명시적으로 사용하는 경우가 있습니다.

위 구분이 필요한 경우가 이벤트 버블링/캡처링 상황의 경우인데, DOM 트리에서 부모-자식 관계인 개체가 동일한 이벤트 리스너에 반응하는 경우 우선순위를 조정하기 위해 사용합니다.

이벤트 버블링: 동일한 이벤트에 대해 자식 개체가 먼저 동작하고, 그 후 부모 개체가 동작합니다.
이벤트 캡처링: 동일한 이벤트에 대해 부모 개체가 먼저 동작하고, 그 후 자식 개체가 동작합니다.

IE는 이벤트 버블링만 지원, Opera 6/iCab 브라우저는 이벤트 캡처링만 지원합니다.

자세한 내용은 이 글을 참고해주세요.

XMLHttpRequest

자바스크립트를 사용하여 HTTP 요청을 전송할 때 사용하는 객체입니다.

브라우저에서 제공하는 Web API이기 때문에 브라우저 환경에서만 동작하며 다양한 프로퍼티와 메서드가 존재하지만, HTTP 요청을 전송하는 간단한 예제로 역할만 알아보겠습니다.

// XHR(XMLHttpRequest) 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open('GET', '/users');

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader('content-type', 'application/json');

// HTTP 요청 전송
xhr.send();