javascript

    // Q.
    for(var i = 0; i < 10; i++){
        setTimeout(function(){
            console.log(i);
        }, 100);
    };
    
    
    // 1. var -> let
    for(let i = 0; i < 10; i++){
        setTimeout(function(){
            console.log(i);
        }, 100);
    };
    //var은 재정의가 가능하기때문에 1~10까지 가면서 마지막 10으로 재정의가 되는것.
    //let은 재정의가 불가능하기때문에 처음 값(i=1, 2, 3 ...)으로 가지고있는것.
    //for문에서 let 키워드를 사용하시면 for문이 반복될 때마다 새로운 렉시컬 환경을 생성합니다
    
    // explanation is here
    // https://stackoverflow.com/questions/31285911/why-let-and-var-bindings-behave-differently-using-settimeout-function
    
	// 2. function
    for(var i = 0 ; i < 10; i++){
      (function(x){
        console.log("outer > i=", i, "x=", x)
        setTimeout(function(){
          console.log("inner  > i=", i,"x=", x)
        }, 100);
      })(i);
    }
    
    // 3. arrow function
    for(var i = 0; i < 10; i++){
        ((x)=>{
            setTimeout(function(){
                console.log(x);
            }, 100);
        })(i)
    };
    
    // or this 
    for(var i = 0; i < 10; i++){
        ((x)=>{setTimeout(()=>{console.log(x)}, 1000*x)})(i);
    };
    
    // 4. async await (this is the right way)
    	function resolveAfter2Seconds(x) {
	  return new Promise(resolve => {
	    setTimeout(() => {
	      resolve(x);
	    }, 500);
	  });
	}

	async function f1() {
	    for(let i = 0; i < 10; i++){
	      console.log(await resolveAfter2Seconds(i)); // 10
	    }
	}

	f1();
    

var counter = {
    _count: 0,
    count: function() {
        return this._count += 1;
    }
}

console.log(counter.count()); // 1
console.log(counter.count()); // 2
counter._count = 4; // <= you can change its value

///////////////////////////////////////////////////////

function counterFactory() {
    // this part is only excuted once when declared
    var _count = 0;

    return function() {
        _count += 1;

        return _count;
    };
}

// counter = function() {_count+=1}
// cause it get return fuction of counterFactory
var counter = counterFactory();
var counter2 = counterFactory();

console.log(counter()); //1
console.log(counter()); //2
console.log(counter2()); //1

// you can't access _count variable

//seven(times(five())); // must return 35
//four(plus(nine())); // must return 13
//eight(minus(three())); // must return 5
//six(dividedBy(two())); // must return 3

//function n uses closure, 
var n = function(digit) {
    //to uses values from this scope
  return function(op) {
      //in here
    return op ? op(digit) : digit;
  }
};
var zero = n(0);
var one = n(1);
var two = n(2);
var three = n(3);
var four = n(4);
var five = n(5);
var six = n(6);
var seven = n(7);
var eight = n(8);
var nine = n(9);

function plus(r) { return function(l) { return l + r; }; }
function minus(r) { return function(l) { return l - r; }; }
function times(r) { return function(l) { return l * r; }; }
function dividedBy(r) { return function(l) { return l / r; }; }

(function main() {
    
    
    var x = 4;
    
    function func1(){
        console.log('func1', x);	//by hoisting, this x is new x only existing in this scope, other than global x
        var x = 3;	//lexical scope
    }
    
    function func2(){
        console.log('func2', x);
    }
    
    func1();	// func1 undefined
    func2();	// func2 4
}());

{
    x = 5; // Assign 5 to x

    elem = document.getElementById("demo"); // Find an element
    elem.innerHTML = x;                     // Display x in the element

    var x; // Declare x
}

//this is the same result as below:

{
    var x; // Declare x
    x = 5; // Assign 5 to x

    elem = document.getElementById("demo"); // Find an element
    elem.innerHTML = x;                     // Display x in the element
}