test

👉 const와 let, var의 차이점은?

var은 함수 레벨 스코프를 따르기 때문에 전역에서 참조할 수 있고, let은 블록 레벨 스코프를 따르기 때문에 코드 블럭 내의 지역변수로만 참조할 수 있습니다.
var로 선언한 선언문을 선언전에 참조해도 에러를 반환하지 않고 undefined를 반환하지만, let은 선언문전에 참조하면 reference error가 반환됩니다. 이러한 이유를 실행 컨텍스트 관점에서 설명하자면, var은 변수의 선언과 초기화가 동시에 일어나기 때문입니다. 즉, 스코프에 변수가 등록이 되고 변수를 위한 메모리를 할당하고 undefined로 초기화가 되기 때문에 에러가 나지 않는 것입니다. 하지만, let같은 경우에는 스코프에 변수가 등록이 되지만, 변수를 위한 메모리는 할당이 되지 않기 때문에 reference error가 발생하게 되는 것이고 let을 사용한 변수의 선언문을 만날그 때에 변수의 초기화 과정이 일어납니다. 이러한 스코프의 최 상단부터 변수의 선언문의 만나기전까지의 공간을 TDZ(일시적 사각지대)라고 합니다. const는 변수의 선언과 동시에 할당이 이루어져야 합니다. 즉, let과 var처럼 재할당이 불가능합니다.

👉 호이스팅이란

호이스팅이란 개념적으로 코드를 해석하기 쉽게 코드를 끌어올린다고 해석할 수 있습니다. 여기서 변수의 선언만 호이스팅이 이루어지고 할당문은 그대로 그 자리에 위치하게 됩니다. 그리고 여기서 함수 선언문과 함수 표현식의 차이를 알 수 있는데 함수 선언문은 식이 아니기 때문에 함수 자체를 호이스팅하지만, 함수 표현식은 선언과 할당문이 따로 존재하기 때문에 함수 표현식은 선언부만 호이스팅이 이루어지고 할당부는 그자리에 유지하게 됩니다.

👉 실행 컨텍스트

var a = 1;
var outer = function () {
  var inner = function () {
    console.log(a);
    var a = 3;
  }

  inner();
  console.log(a);
}

outer();
console.log(a);

실행 컨텍스트는 실행할 코드의 환경 정보를 가지고 있는 객체로 보통 전역 공간에서 생성되는 전역 컨텍스트와 함수에 실행에 의한 컨텍스트가 있습니다.
실행 컨텍스트 객체는 실행할 시점의 VariableEnvironment, LexicalEnvironment, thisBinding이 세 가지 정보를 수집합니다.
실행 컨텍스트 객체가 처음 실행될 시점에 VariableEnvironment와 LexicalEnvironment은 동일하지만, VariableEnvironment은 초기의 상태을 유지합니다.
VariableEnvironment와 LexicalEnvironment는 변수의 식별자, 함수의 함수명, 매개변수 명에 대한 정보를 가지고 있는 environmentRecord와 바로 직전 컨텍스트의 LexicalEnvironment를 참조하는 outerEnvironmentReference를 가지고 있습니다. outerEnvironmentReference는 해당 함수가 선언된 위치의 LexicalEnvironment를 참조하는데, 만약 어떤 변수에 대한 정보를 찾는다하면, 해당 컨텍스트의 LexicalEnvironment에서 해당 변수의 정보를 먼저 찾은 다음 만약 존재하지 않으면, 바로 직전 컨텍스트의 LexicalEnvironment 정보를 가지고 있는 outerEnvironmentReference에서 다시 해당 변수의 정보를 찾습니다. 만약 찾으면 해당 변수에 대한 정보를 사용할 것이고, 만약 이 과정을 반복해서 전역 컨텍스트까지의 LexicalEnvironment에도 해당 정보를 찾지 못하면 undefined를 반환하게 됩니다. 이러한 과정을 스코프 체이닝이라고 하며, 이러한 구조적인 원리 덕분에 여러 스코프에서 동일한 변수가 존재할 때 가장 가까이, 가장 먼저 만나는 변수의 식별자를 찾을 수 있게 됩니다. thisBinding은 this로 지정된 객체가 존재하는데, this가 지정되지 않았다면 this는 전역 객체가 저장되고, 그 외에는 함수의 호출 방법에 따라 this에 저장되는 객체가 달라집니다.

👉 this

this는 실행 컨텍스트가 생성될 때 함께 결정됩니다. 실행 컨텍스트는 함수가 실행될 때 결정되기 때문에 this또한 함수가 실행될 때 결정된다고 할 수 있습니다. 그렇기 때문에 this가 결정되는 방법은 여러가지가 존재하는데,
어떤 함수가 메서드로써 호출될 떄 this는 이 메서드를 호출한 주체 객체가 this가 됩니다. 즉, this는 . 앞에 있는 객체가 됩니다.
어떤 함수가 함수로써 호출될 때는 this는 기본적으로 전역 객체가 저장됩니다. 이는 메서드의 내부 함수도 마찬가지로 전역 객체가 저장이 되는데 this를 변경할 방법으로는 함수의 상위 스코프에 self라는 변수를 만들어 해당 상위 스코프로 this를 우회시키는 방법이 존재하고, 명시적으로 apply, call, bind를 사용하여 this를 변경할 수도 있을 뿐만 아니라, 간단하게 this를 바인딩하지 않는 화살표함수를 사용하면 쉽게 해결할 수 있습니다.
콜백 함수내에서의 this는 그 콜백 함수의 제어권을 넘겨받은 주체가 this를 정하는데, 만약 정해지지 않는다면 이또한 this는 전역 객체를 바라보게 됩니다.
생성자에서의 this는 생성할 인스턴스를 참조하게 됩니다.
이 밖에도 명시적으로 apply, call, bind를 사용하여 this를 결정할 수가 있는데 apply와 call의 차이라 한다면 call은 두번째 인자부터 차례대로 받는반면, apply는 두번째 인자에 배열로 받게 됩니다.
ES5에 나온 bind는 call과 유사하지만, call은 함수를 호출하는 반면 bind는 받은 인자의 정보를 바탕으로 새롭게 생성된 함수를 반환하기만 할 뿐입니다. 그렇기 떄문에 bind는 부분 함수로써 활용도 가능합니다. 또한, bind로 새롭게 생성된 함수는 name 프로퍼티에 bound라는 접두어가 붙기때문에 apply와 call보다 코드를 추적하는데 더 수월합니다.

👉 클로저

클로저는 예를 들겠습니다.

function outer() {
  var x = 2;

  function inner () {
    console.log(x);
  }

  return inner;
}

var innerFunc = outer();
innerFunc();

간단하게 실행컨텍스트 관점에서 본다면, inner의 실행컨텍스트의 LexicalEnvironment에는 x라는 식별자를 찾지 못하여 outerEnvironmentReference에서 바로 직전 컨텍스트인 outer의 LexicalEnvironment에서 x의 정보를 찾습니다. 존재하니 inner의 x는 2가 출력이 됩니다.
outer가 호출되면 실행 컨텍스트가 생성되고 inner라는 내부 함수를 리턴을 한 뒤 함수가 종료가 됩니다. 그렇게 되면 실행컨텍스트는 콜스택에서 제외게 될것이고 가비지컬렉터의 수집대상이 됩니다. 그렇게 되면 하지만, innerFunc을 호출하면 Reference Erorr를 반환할거 같은데 정상적으로 x는 2를 반환하고 있습니다. 가비지 컬렉터는 한개라도 참조하고 있는게 있으면 수집대상에서 제외가 됩니다. 즉, 내부 함수인 inner가 아직 외부에서 호출될 가능성이 존재하기 때문에 가비지 컬렉터는 outer를 수집대상에서 제외시킨것입니다. 이처럼 클로저란 외부 함수 outer안에 x라는 변수가 존재하고 이 x를 참조하는 내부 함수가 외부로 전달된 경우 outer의 실행 컨텍스트가 종료된 이후에도 외부함수 outer의 변수 x가 사라지지 않는 현상이라고 할 수 있습니다.

👉 스코프

스코프란 어떤 대상을 다른 대상과 비교하여 유일하게 식별할 수 있는 유일한 이름으로 찾아낼 수 있는 규칙으로 이 식별자는 자신이 어디에 선언되어 있는지에 의해 자신의 유효한 범위를 찾습니다. 예로

var x = 'global';

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

foo();
console.log(x);

전역에 선언된 x는 어디에서든 참조가 가능하지만, foo라는 함수 안에 위치한 지역 변수인 x는 전역에서 참조할 수 없으며, 함수 내부에서만 참조가 가능합니다. 이러한 규칙을 스코프라고하며 전역에 선언된 x를 전역 스코프라고하며 foo를 지역스코프라고 합니다.
자바스크립트는 기본적으로 함수 스코프를 따르며 위 예처럼 함수안에서의 변수는 함수 안에서만 참조가능합니다. let을 사용하면 q블록 레벨 스코프로도 사용할 수 있습니다.
자바스크립트는 렉시컬 스코프를 따르는데 렉시컬 스코프란 함수가 실행됬을 위치에 그 스코프를 결정짓는것이 아니라 함수가 선언된 위치에 스코프가 결정되는 것을 말합니다.

👉 IIFE (Immediately-Invoked Function Expression, 즉시 실행 함수)

즉시 실행 함수를 사용하는 이유는 초기화로 단 한번만 실행될 환경이 있는 경우 사용할 수 있습니다. 또한, 변수를 전역으로 선언하는 것을 피함으로써 변수 사용의 충돌을 막을 수도 있습니다.

👉 이벤트 버블링, 캡처링, 위임

<div>
  <ul>
    <li>안녕하세요</li>
  </ul>
</div>

위와 같은 예가 있고 각자의 엘리먼트 태그마다 클릭 이벤트를 설정하겠습니다.

document.querySelector('div').addEventListener(() => console.log('div'));

그런다음 가장 하위 엘리먼트인 li을 클릭하면 li, ui, div 순으로 클릭이벤트가 일어나게 됩니다. 이처럼 이벤틑 버블링은 하위 엘리먼트의 이벤트가 상위 엘리먼트의 이벤트까지 전달되는 방식으로 기본적인 이벤트 동작 방식은 이벤트 버블링입니다.
이벤트 캡처링은 사용할 일은 거의 존재하지 않고, 반대로 캡처링된 엘리먼트가 먼저 아벤트가 발생하는 것을 말하는데, addEventListener의 마지막 인자에 capture true를 넣어주면 됩니다. 여기서 ul 태그에 capture을 적용하면 적용된 ul 태그부터 이벤트가 발생되고 그다음 다시 하위 엘리먼트부터 이벤트가 발생하게 됩니다. 즉, ul -> li -> div 순입니다.
이벤트 위임은 제가 사용을 해본경험이 있었는데요. 바닐라자바스크립트로 구현할 때 사용해본 경험이 있었습니다. 이벤트 위임은 하위 엘리먼트의 이벤트의 역할이 동일할 때 일일히 각자 이벤트를 등록해주는 것이아니라 상위 엘리먼트 테크 하나에만 이벤트를 등록해주는 것입니다. 이 이벤트 위임을 사용했을 때의 장점으로는 각자마다 이벤트를 달때는 그만큼의 코드가 더 많이 작성하게되지만, 하나의 이벤트를 달때는 그만큼 코드의 양이 줄어듭니다. 또한, 하나의 이벤트만이 존재하니 그만큼의 메모리도 절약할 수 있게 됩니다. 단점으로는 항상 이벤트 버블링상태여야 한다는 점이 있습니다.

👉 콜 스택과 힙

자바스크립트 엔진은 자바스크립트를 실행할 때 원시 타입과 참조타입을 저장할 메모리 구조로 콜 스택과 힙을 사용합니다.
콜 스택은 원시 타입과 함수가 실행될 실행 컨텍스트 저장합니다. 힙은 객체, 배열, 함수등 동적으로 변화하는 참조 타입을 저장합니다.

👉 프로토타입

어떤 생성자 함수를 new와 함께 생성하면 Constructor에 정의된 바탕으로 인스턴스를 생성하게 됩니다. 이 인스턴스에는 __proto__라는 constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여되게 됩니다.
이 __proto__는 생략이 가능하기 때문에 constructor의 prototype을 자신의 메서드인것처럼 호출할 수 있습니다. __proto__ 방향으로 계속 나아가다보면 최종적으로는 Object.prototype에 도달하게 됩니다. 이러한 __proto__안의 __proto__로 계속 찾아나가는 방식을 프로토타입 체이닝이라고 합니다. 이러한 구조적인 원리 때문에 저희는 다른 데이터 타입의 constructor의 prototype의 메서드를 자신의 메서드처럼 호출이 가능한 것입니다. 이때의 접근 방식은 호출한 주체부터 가장 가까운 대상에서부터 먼 대상으로 나아가며, 원하는 값을 찾으면 중단되게 됩니다.
Object.prototype이 최 상단이라고 했었는데, 그래서 Object.prototype은 모든 데이터 타입이 사용할 수 있는 범용적인 메서드로 구성되어있으며, 객체만을 위한 메서드는 Object의 생성자안에 스태틱하게 들어있습니다.