230209 30분 TIL

1. 브라우저 렌더링 시 script태그를 만날때마다 파싱이 중단되는 문제는
script 태그 뒤에 async 혹은 defer를 붙여줌으로써 해결할 수 있다.

async: HTML 파싱, JS 파일 로드가 동시에 진행
defer: DOM 생성이 완료된 직후, JS의 파싱과 실행이 진행된다.

 

 

2. 호이스팅이란 모든 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.

호이스팅 시 변수의 선언과 초기화(undefined)으로 같이 시켜버린다.

var를 쓸 때 함수만 지역변수로 사용하고 모두 전역변수로 올려버림(예시 반복문 i)

var를 쓰면 재선언도 가능하는 문제가 있다.

var a = 1;

var a = 2;

 

let도 호이스팅이 되지만 TDZ(TemporallyDeadZone)에 있다(a 선언문이 나오기 전까지 a에 접근할 수 없어, 일시적으로 죽은 zone이야 )

var는 선언, 초기화가 동시에 이루어지고,
let,const는 선언단계만 호이스팅 되기때문에 실행 결과가 다름을 확인할 수 있다.

 

3. 클로저 : 자신이 생성될 때 환경을 기억하는 함수 

자바스크립트는 함수 안에서도 함수를 선언 할 수 있다. 전자를 외부함수라 정의하고 후자를 내부함수라 정의해보면 기본적으로 내부함수는 외부함수의 요소에 접근이 가능한데 외부함수에서 그 함수의 수명이 다 하여 외부함수가 종료된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 메커니즘을 클로져라고 한다.

function outer() {
  var a = 1;
  var b = 'B'; 
  
  function inner() {
  var a =2 ;
  console.log(b);
  }
  return inner 
}

var someFun = outer();
someFun();

다른 언어의 경우 outer 내부에 선언된 변수는 outer가 실행된 순간, 리턴되면 b의 변수는 사라진다고 생각 하지만 자바스크립트에서는 클로저의 기능으로 생성한 시점의 스코프를 들고 있음

아래 예제를 하나 더 보자 

 

let cnt = 0;
function cntPlus(
 cnt = cnt + 1;
}

console.log(cnt);
cntPlus();
console.log(cnt);

//1억개의 코드 
cnt = 100;
cntPlus()
console.log(cnt);

전역변수인 cnt와 cnt를 변경시킬 수 있는 유일한 함수인 cntPlus가 있다. 

하지만 1억개의 코드가 생기고 어딘가에서 cnt를 다시 할당했다고 하자. 마지막 콘솔에 찍힌 cnt는 느닷없이 101이 된 것이다. 

 

이 것을 못하게 하려면 이 변수에 접근하지 못하게 하면 된다(은닉). 이것을 가능하게 하는 것이 클로저이다.

 

function closure() {
    let cnt = 0;
    function cntPlus() {
    	 cnt = cnt + 1;
    };
    function printCnt() {
 	   console.log(cnt)
	};
    return {
        cntPlus,
        printCnt,
    }
}

const cntClosure = closure();
cntClosure.printCnt(); //0
cntClosure.cntPlus(); 
cntClosure.printCnt(); // 1