Execute context, closure, var VS let VS const

 

Execute context

출처: https://www.youtube.com/watch?v=QtOF0uMBy7k&list=WL&index=23 

자바스크립트의 코드가 실행되는 원리인 execute context에 대한 수업입니다.

이 수업을 들으면

1. debugger의 고급 사용법을 익힐 수 있습니다.

2. 변수의 유효범위에 대해서 이해할 수 있습니다.

3. var, let, const의 차이점에 대해서 알 수 있습니다.

4. closure, hosting과 같은 주제에 대한 이해를 얻는 발판을 마련할 수 있습니다.

자료: https://gist.github.com/egoing/7e8bce3f04542e061629166be91598cc

exmaple1

<script>
n0='n0';
var v0='v0';
let l0='l0';
const c0 = 'c0';
console.log(v0, n0, l0, c0);
console.log(window.v0, window.n0, window.l0, window.c0);
function fn2(){
    n2='n2';
    console.log(n0, n1, n2);
    var v2='v2';
    console.log(v0, v2);
    // console.log(v1)
    let l2='l2'; 
    console.log(l0, l2);
    // console.log(l1);
    const c2='c2;';
    console.log(c0, c2);
    // console.log(c1);
}
function fn1(){
    n1='n1';
    var v1='v1';
    let l1='l1';
    const c1='c1';
    fn2();
}
fn1();
console.log(n2);
// console.log(v2, l2, c2);
</script>

 

 

exmaple2

<script>
n0='n0';
var v0='v0';
let l0='l0';
const c0 = 'c0';
console.log(v0, n0, l0, c0);
console.log(window.v0, window.n0, window.l0, window.c0);

function fn1(){
    n1='n1';
    var v1='v1';
    let l1='l1';
    const c1='c1';
    function fn2(){
        n2='n2';
        console.log(n0, n1, n2);
        var v2='v2';
        console.log(v0, v2);
        console.log(v1)
        let l2='l2'; 
        console.log(l0, l2);
        console.log(l1);
        const c2='c2;';
        console.log(c0, c2);
        console.log(c1);
    }
    fn2();
}
fn1();
console.log(n2);
// console.log(v2, l2, c2);
</script>

 

example3

 

<script>
n0='n0';
var v0='v0';
let l0='l0';
const c0 = 'c0';
{
    n1='n1';
    var v1='v1';
    let l1='l1';
    const c1='c1';
    {
        n2='n2';
        var v2='v2';
        let l2='l2'; 
        const c2='c2;';
    }
}
</script>

 

Closure

출처: https://www.youtube.com/watch?v=bwwaSwf7vkE&list=WL&index=23 

부모 함수 안에서 자식 함수를 선언하면 자식함수를 어디에서 호출하더라도 자식함수 안에서 부모함수의 변수에 접근할 수 있습니다

 

function 더하기함수공장(초기값) {
    function 덧셈(숫자) {
        return 초기값 + 숫자;
    }
    return 덧셈;
}

let 더하기1 = 더하기함수공장(1);

console.log(더하기1); // function 덧셈(숫자) {return 초기값 + 숫자;}
console.log(더하기1()); // NaN;
console.log(더하기1(1)); // 2

 

 var VS let VS const

출처: https://www.youtube.com/watch?v=61iolhWgQt0&list=WL&index=24 

자료:https://gist.github.com/egoing/2641675b55e33caf6ae8cc9c08c83a45

 

 

<script>
let 가격 = 10000;
const 부가가치세율 = 0.1;
let 부가가치세 = 가격 * 부가가치세율;
console.log(부가가치세);
</script>

 

<script>
// console.log(v0, l0); 선언 전에 접근 할 수 없다.
var v0 = 'v0';
let l0 = 'l0';
console.log(v0, l0);

// var v0 = 'v00';
// let l0 = 'l00';

function fn1(){
    v0 = 'fn1-v0';
    l0 = 'fn1-l0';
    console.log(v0, l0);
}
fn1();
console.log(v0, l0);

function fn2(){
    var v0 = 'fn2-v0';
    let l0 = 'fn2-l0';
    console.log(v0, l0);
}
fn2();
console.log(v0, l0);

{
    var v0 = 'block-v0';
    let l0 = 'block-l0';
    console.log(v0, l0);
}
console.log(v0, l0);

var i = 'I';
for(var i=0; i<1; i++){
    console.log(i);
}
console.log(i);

let j = 'J';
for(let j=0; j<1; j++){
    console.log(j);
}
console.log(j);

</script>