작성완료가 조금 늦었지만 8월 3일 TIL!

🤔ES6 가 도대체 뭘까?

자바스크립트면 자바스크립트지 ES6 자바스크립트는 무엇인가?
[링크]에서 자바스크립트의 역사를 간단히 살펴본 결과 답을 알 수 있었다.

ECMAScript 2015는 Java와 하등 관련이 없는 JavaScript 의 두 번째 수정 버전이고, ES6 또는 ECMAScript 6 로 알려져 있다.

그러니까 뭔가 자바스크립트에 변화가 있었다는 것이로군 땅땅땅!

👀그러면 JavaScript 문법엔 어떤 영향이 있나?

ES6의 새로운 기능들[링크]
을 구경해 보자니 눈에 익는 몇 가지 키워드들과 매서드들이 있다.
대표적으로 블록 레벨 스코프로 변수를 선언할 수 있게 지원해주는 let 키워드가 생겼다.

ES5에서 var로 변수선언을 하는 것은 알고 있었는데, let키워드는 처음이다. 둘의 차이는 흔히 호이스팅이라고(let은 호이스팅이 안되고, var만) 하는데, [링크]를 보니 꼭 그런 것만은 아닌 것 같다. 시간 날 때 자세히 살펴봐야겠다.

😱스코프와 클로저?

[링크]에 게시된 예시 코드를 나 스스로 뜯어보며 클로저에 대한 이해를 시도했다.

이 코드에서의 bar 함수는 클로저가 아닌데(함수 안에서 정의된 함수 bar가 그 함수 안에서 호출되었기 때문에),

function foo() {
    var color = 'blue';
    function bar() {
        console.log(color);
    }
    bar();
}
foo();

이 코드에서의 bar 함수는 클로저다! 내가 이해한 바대로 이야기 하면 foo()가 리턴하는 bar함수는 이미 bar함수 외부에 있는 foo를 outer lexical environment(직역하면 외부 언어 환경)으로 결정했기 때문에, 이 바깥으로는 변수 탐사를 갈 수 없다는 것! 마치 진격의 거인에서 월 마리아 안에 갇혀 사는 사람들( bar()함수로 대표되는)이 바깥 세상을 모르고 사는 것처럼?

var color = 'red';
function foo() {
    var color = 'blue';
    function bar() {
        console.log(color);
    }
    return bar;
}
var baz = foo();
baz();

어, 그러면 이 경우도 생각해 볼 수 있겠다.

var color2 = 'red';
function foo2() {
    function bar() {
        console.log(color2);
    }
    return bar;
}
var baz = foo2();
baz();

결과는 red이다. 그 이유는 한 번 생각해 보도록 하자.