프론트엔드 로드맵 20 - 자바스크립트의 모든 것 (호이스팅, 이벤트 핸들링, 버블링, 스코프, 프로토타입, shadow DOM, strict mode)

자바스크립트 개념 정리

<호이스팅이란 ?>

변수가 선언되기도 전에 변수와 함수 실행 코드가 입력되어도 에러가 나지 않는데, 이는 코드가 호이스팅 되기 때문이다.

num = 6 ; // 변수 num이 선언되지 않은 상태에서 입력값이 입력됨 var num; // 나중에 변수 선언 num; // 6 에러없이 정상 출력된다.

호이스팅(끌어올림)은 보통 선언 코드가 최상단으로 끌려 올라가지는 현상이라 이해하는데, 실제로 메모리 상에선 위치의 변화가 없다. 자바스크립트 Parser에서 내부적으로 끌어올려 처리되는 것 뿐이다.

Parser는 함수가 실행되기 전 함수를 쭉 훑은 뒤 필요한 변수 값들을 모아 최상단으로 끌어올린다. 이후 이 변수 또는 함수가 등장할 때 이에 대한 선언을 실행시킨다.

 

호이스팅은 변수 선언문, 함수 선언문에서만 일어나며, let/const 선언과 함수 표현식에서는 일어나지 않는다.

 

function myfunction(){   var name;   console.log(name); // undefined   var result = name();  // TypeError : name is not a function 함수 표현식은 호이스팅이 일어나지 않는다.   console.log("name is " + result);     name = function(){  //함수 표현식     return "bomango";   } } myfunction(); // TypeError : name is not a function

- 호이스팅 사용시 주의 사항 : 코드의 가독성과 유지보수를 위해 가급적 호이스팅이 일어나지 않도록 자제한다.

 var보다는 let/const 위주로 사용하는 것이 좋다(하지만 아직 ES6 공용화는 때가 아니므로...)

 값이 할당되지 않은 변수에는 함수 선언문보다 변수 선언문이 더 우위에 있다. (변수 선언으로 입력된 값이 호이스팅된다)

 

 

<이벤트 핸들링이란 ?>

addEventListener : 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 불러온다.

removeEventListener : 등록한 이벤트 리스너를 제거한다. 

stopPropagation 이벤트가 버블링되지 않게 하기 위해 사용하는 메소드. (이와 유사한 메소드에는 preventDefault()가 있다. 하지만 preventDefault는 전파를 막는 것이 아니라 이벤트 자체를 취소한다)

target.addEventListener("click", function(e){   e.stopPropagation(); }

IE 하위버전에서는 addEventListener가 작동하지 않을 수 있다. 대신 attachEvent/detachEvent를 사용한다.

 

- addEventListener 사용하는 이유 : 

 1. 이벤트에 하나 이상의 핸들러를 추가한다.

 2. 캡쳐링과 버블링의 세밀한 제어가 가능하다

 3. HTML 요소뿐만 아니라 모든 DOM 요소에서 작동한다.

 

<버블링이란 ?>

이벤트가 부모에서 발생해서 자식으로 전파되는 것을 캡쳐링 capturing이라고 한다. ie 하위 버전에서는 작동하지 않기 때문에 많이 사용하지는 않는다. 반대로 자식부터 부모로 이벤트 전파되는 것을 버블링 bubbling 이라고 한다. 실제 이벤트가 발생하는 요소 타겟 Target이 있다.

캡쳐링과 버블링의 차이는 방향성에 있다. 하위>상위 냐, 상위>하위 냐.

 

target.addEventListener(type, listener[, useCapture]);

useCapture는 이벤트 전송여부를 나타내는 Boolean. "버블링"할래? "캡쳐링"할래?를 불리언 값으로 설정하는 것이다.

default값이 false이기 때문에 인자 값을 입력 안하면 그냥 버블링으로 작동한다.

 

 

<스코프 프로토타입이란 scope prototype ?>

스코프Scope 란?

변수에 접근할 수 있는 범위 정도로 이해하면 된다. 자바스크립트에는 스코프가 2가지 타입으로 나뉘는데, 하나는 전역global 스코프와 지역local 스코프다. 전역 스코프로 선언된 변수는 어디서든 접근이 가능하며, 지역 스코프로 선언된 변수는 선언된 특정 범위에서만 접근이 가능하다.

 

var a = "dog"; //  (전역 스코프)   function animal(){   var a = "cat"; // (지역 스코프)   console.log(a); // "cat"이 반환된다 } animal(); console.log(a); // "dog"가 반환된다

 

프로토타입 prototype 이란?

자바스크립트의 모든 객체에는 프로토타입(prototype)이라는 객체가 있다. 모든 객체는 프로토타입으로부터 프로퍼티(객체를 규정하는 특징, 키와 값으로 구성된다)와 메소드(프로퍼티 값이 함수일 경우 이를 메소드라 부름. 객체의 동작)를 상속받는다. 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

 

<shadow DOM이란?>

shadow DOM은 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일 가진 DOM 트리다. 

먼저 DOM의 일반 HTML요소에 shadow host를 생성한다. shadow host에 shadow DOM을 붙이기 위해 attachShadow() 메서드를 사용한다. 

const shadowE1 = document.querySelector(".shadow-host"); const shadow = shadowE1.attachShadow({mode: 'open'});

이 코드를 통해 shadow host의 자식 요소로 shadow root가 생성된다. shadow root는 shadow DOM의 시작점 역할을 한다. 이 다음 콘텐츠를 생성해 shadow tree를 만든다. appendChild() 메서드를 사용해 shadow DOM에 새로운 요소를 추가한다.

shadow.appendChild(link);

마지막으로 <style>에 shadow root에 다양한 스타일을 적용한다.

 

<strict mode 란?>

Strict Mode 엄격모드 란, 자바스크립트의 암묵적인 느슨한 모드 sloppy mode를 해제하기 위해 고안된 방법이다. 고의적으로 일반 코드와 다른 시멘틱을 가진다. 엄격모드는 지원되지 않는 브라우저에선 다른 방식으로 동작된다. 때문에 피쳐 테스트 없이 엄격 모드에 의존해선 안된다. 

 

- strict mode를 통해 일어날 변화 : 

 1. 기존에 조용히 무시되던 에러들을 수면 위로 올린다 (eval과 arguments를 단순화하고 안전하게 사용되도록 돕는다.)

 2. 자바스크립트 엔진의 최적화 작업을 방해하는 실수들을 바로 잡는다. (더 빨라진다)

 3. ECMAscript의 차기 버전들에서 정의될 문법을 금지한다.

 

엄격 모드 사용 방법

- {} 괄호로 묶인 블럭문을 제외한 전체 스크립트 또는 부분 함수에 적용 가능하다.

- 전체 스크립트 적용시 구문 작성 전에 "use strict;"를 삽입한다.

- 엄격-비 엄격 스크립트가 만나면 충돌할 수 있으니 주의하라.

function strict() { // 함수-레벨 strict mode 문법   'use strict';   function nested() { return "And so am I!"; }   return "Hi! I'm a strict mode function! " + nested(); }   function notStrict() { return "I'm not strict."; }

 

참고 사이트 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

http://tcpschool.com/javascript/js_object_prototype

https://wit.nts-corp.com/2019/03/27/5552

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode (strict mode)