[Javascript ES6] 1. ES6 (let, closure)

JavaScript ES6(ES2015)

모던 JavaScript 개발을 위한 ES6 

ES6 == ES2015

1. 개선된 JavaScript 문법으로 ES5 이후 많은 변화가 반영되었다. (신규 syntax 지원, 반복적인 코드 감소)

IE 비중이 높은 국내에 비해 해외는 이미 ES6의 점유율이 높다.

2.  ES6 Browser compatibility 의 훌륭한 지원

3. ES6 를 기반으로 하는 JavaScript 생태계의 확산

ES6 이후의 모든 버전에 대한 호환성 확인 

참고) https://kangax.github.io/compat-table/es6/

jsBin 에서 개발 

참고) https://jsbin.com/?js,console

ES6 (let, closure)

let

var name = "global var";
function home() {
    var homevar = "homevar";
    for (var i = 0 ; i < 100 ; i++) {
        
    }
    console.log(i);
}
home();

출력 : 100 

위 코드에서 for 문에 var -> let 으로 변경할 경우

var name = "global var";
function home() {
    var homevar = "homevar";
    for (let i = 0 ; i < 100 ; i++) {
        
    }
    console.log(i);
}
home();

error

"ReferenceError: i is not defined
    at home (qolinimubi.js:9:39)
    at qolinimubi.js:11:1
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"

> if 문 또는 for 문이라는 block 단위의 scope 에서만 let 은 지원된다. 

let 과 closure

HTML 에 각 <ul> 태그 아래 <li> 태그에 4개의 리스트를 미리 넣어준다. 

  <ul>
    <li>javascript</li>
    <li>java</li>
    <li>python</li>
    <li>django</li>
  </ul>

JavaScript 화면

var list = document.querySelectorAll("li");
for(var i = 0 ; i < list.length ; i++) {
  list[i].addEventListener("click", function() {
    console.log(i + "번째 리스트 입니다.");
  });
}

출력 : "4번째 리스트 입니다."

어떤 li  태그를 클릭하든지 위와 같이 출력된다. (closure 때문에 발생)

i 값은 closure 변수라고 할 수 있는데 i이 변경이 되면서 4가지 event callback 함수가 모두 밖에 존재하는 값을

참조하여 서로 share 하기 때문에 "4"가 모두 공유하며 생기는 현상이다. 

이 문제를 해결하는 방법은 아주 간단하다.

for 문의 var i 를 let i 변경해주면 끝! 

var list = document.querySelectorAll("li");
for(let i = 0 ; i < list.length ; i++) {
  list[i].addEventListener("click", function() {
    console.log(i + "번째 리스트 입니다.");
  });
}

출력 : 

• "0번째 리스트 입니다."
• "1번째 리스트 입니다."
• "2번째 리스트 입니다."
• "3번째 리스트 입니다."

block scope 가 존재하기 때문에 그 사이에서 지역변수화 시킨 것과 비슷한 개념으로 볼 수 있다.

block 이 가지고 있는 특정 변수를 기억하고 있다가 그 변수를 참조한다.

Closure

function outFunction(name) {
  var outVar = 'my name is... ';
  function innerFunction() {
    return outVar + name
  }
  return innerFunction;
}
 
var result = outFunction('miffy');
console.log('result : ' + result());
 
// result : my name is... miffy

여기서 내부함수인 innerFunction() 에서 outFunction 함수의 인자와 지역변수에 접근이 가능하다. 

outFunction()의 return 값 (var result 에 할당됨) 은 innerFunction() 라는 내부함수이다. 

outFunction() 함수가 실행될 경우 outFunction() 의 Scope 는 끝나기 때문에, outFunction 인자인 name 과 지역번수인 outVar 는 메모리에서 정리되어야 할 것이다. 

하지만 실제로 console 로 찍어보면 result에 내부함수가 호출되고, 내부 함수 innerFunction() 이 선언되었을 때 outFunction() 함수의 인자와 outVar() 지역변수를 innerFunction() 의 클로저 객체로 남아서 실제로 innerFunction() 이 호출될 때 클로저 객체를 통하여 outFunction() 의 인자와 변수에 접근이 가능하다. 

이것이 바로 closure 가 하는 일이다. 

> 클로저는 함수 외부의 변수에 접근이 가능한 내부함수가 아니라 함수가 선언되는 그 순간에 함수가 실행될 때 실제 외부변수에 접근하기 위한 객체이다. 클로저를 무자비하게 사용할 경우 가비지컬렉션 대상이 될 객체들이 메모리상에 존재하게 되므로, 클로저를 남발하게 되면 Overflow 가 발생할 수 있으니 유의해야한다. 

출처)

https://blueshw.github.io/2017/04/12/javascript-closure/

https://www.inflearn.com/