클로저(Closer)

: 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 종료된 외부 함수의 변수를 참조할 수 있는 것

const x = 1;

function outer()
{
    const x = 10;
    const inner = function() { console.log(x); };
    return inner;
}

const innerFunc = outer();
innerFunc();

• outer 종료 시 inner를 반환하고 종료된다.
• 하지만 마지막 줄 innerFunc() 에서는 반환된 x의 값이 출력된다.
• 반환된 중첩 함수 inner가 클로저 로써 외부 함수의 x를 참조하여 사용된다.
  -> 자바스크립트의 모든 함수는 자신의 상위 스코프를 기억하고 있기에 가능
  -> 그러하여 outer의 실행 컨텍스트는 종료되어 삭제되었지만 렉시컬 환경까지 제거되지 않아
  inner에서 outer 참조가 가능

클로저의 활용

: 상태를 안전하게 변경(은닉)하고 특정 함수에게만 상태 변경을 허용시킬 수 있음

const counter = (function () {
    let num = 0;

    return {
        increase() {
            return ++num;
        },
        decrease() {
            return 0 < num ? --num : 0;
        }
    };
}());

console.log(counter.increase()); //1
console.log(counter.increase()); //2
console.log(counter.increase()); //3

MSN 공식 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심

: 자바스크립트가 스코프를 기반으로 식별자와 바인딩 값을 관리하는 방식 및 호이스팅, 클로저 등의 동작 방식 이해가 가능하다.

• 소스코드의 타입

• 실행 컨텍스트의 실행 순서(스택)

1. 전역 코드 평가

2. 전역 코드 실행

3. 함수 코드 평가

4. 함수 코드 실행

const x = 1;

function foo()
{
	const y = 2;
    console.log('foo');
    
    function bar()
    {
    	const z = 3;
        console.log('bar');
    }
    bar();
}

foo();

위 코드를 기준으로 실행 컨텍스트 스택은 다음과 같다.

1. 전역 실행 컨텍스트

: x, foo() 등록 및 foo 호출

2. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트

: foo 함수 실행 및 전역 실행 중지

-> 지역변수 y와 중첩함수 bar()가 foo() 함수 실행 컨텍스트에 등록

-> y값 할당, console.log 호출 후 bar() 호출

3. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트 -> bar 함수 실행 컨텍스트

: bar 호출 및 foo 함수 실행 중지

-> z가 bar 함수 실행 컨텍스트에 등록

-> z 할당, console.log 호출

4. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트

: bar() 종료 . 후다시 foo()로 제어권 이동

5. 전역 실행 컨텍스트

: foo() 종료, 전역 실행 컨텍스트로 제어권 이동

6. end

사용관련

터미널 여는 법

Control + `(₩)

Js Build (확장 프로그램 Code Runner 필요)

Window: Control + Alt + N

Mac: Control + Option + N

확장 프로그램

Code Runner

: 자바 스크립트 뿐만이 아니라 여러 프로그래밍 언어를 실행 할 수 있게 도와줌

VSCode Setting에서 'Save File Before Run' 클릭하여 빌드 시 자동 저장 설정가능

Live Server

: Web API가 포함된 자바스크립트 실행 시 브라우저에서 실행이 필요함
빌드 시 브라우저에 자동으로 반영 및 실행이 되어 편리함

Auto Rename Tag

태그 작성 시 자동으로 닫힘 태그 작성

Import Cost

import 하려는 모듈의 크기를 알아볼 수 있는 익스텐션으로

우측 용량이 표기됨