• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Let 키워드 ★★★★★ - 변수 블럭범위 설정 (렛키워드) ※ 클로저

370  

ECMAScript 2015

 

1.

ES2015 새 범위 관련 JS 키워드 : let , const

이 두 키워드는 Block Scope (블럭범위)의 변수 (및 상수) 역할.

ES2015 이전엔 Global Scop (전역범위)Function Scope (함수범위) 두 가지 유형의 JS 범위만 존재.

 

2.

let 키워드는 주요 최신 브라우저 모두 지원. 

단, IE11 이하는 완벽하게 지원되지는 않음.

 

 

 

전역범위 (Global Scope) - 함수 밖 var

 

<p id="demo"></p>


<script>

var site = "홈짱닷컴"; // 함수 밖 var 선언 변수는 함수 안팎에서 접근 가능.

hz();


function hz() {

  document.getElementById("demo").innerHTML = site + " Homzzang.com"; 

}

</script>

 

결과보기 


[정리]

 

1.

전역적으로 (= 함수 바깥에) 선언된 변수는 전역범위 (= 함수 안과 밖 모두)에 미침.

2.

전역변수는 JS 프로그램 어디서든 접근 가능.

 

 

 

함수범위 (Function Scope) - 함수 안 var

 

<p id="demo1"></p>

<p id="demo2"></p>


<script>

hz();

function hz() {

  var site = "홈짱닷컴"; // 함수 안 var 선언 변수는 함수 안에서만 유효.

  document.getElementById("demo1").innerHTML = typeof site + " " + site;

}

document.getElementById("demo2").innerHTML = typeof site;

</script>

 

결과보기


[정리]

 

1. 함수 안에서 선언된 변수는 함수 안 어디에서든 유효. 

   (var는 중괄호 위치와는 무관. 즉, 함수 단위로 유효.)

2. 지역변수는 해당 변수가 선언된 함수 안에서만 접근 가능.

 

 

 

블럭범위 (Block Scope) - 중괄호 안 let

 

<p id="demo"></p>


<script>

{

  let site = "홈짱닷컴"; // {} 블럭 안에서 let으로 선언된 변수는 블럭 안에서만 접근 가능. (= 블럭변수)

}

document.getElementById("demo").innerHTML = site;

</script>

 

결과보기


[정리]

 

1. let은 중괄호 단위라, 중괄호 (= 블럭범위) 내에서만 접근 가능.

2. var는 함수 단위라, 함수 안 이라면 중괄호 (= 블럭범위) 밖에서도 접근 가능.

 


cf. 중괄호 안 var - 함수밖 (전역변수) , 함수안 (지역변수) 

 

<p id="demo"></p>


<script>

{

  var site = "홈짱닷컴"; // {} 블럭 안에서 var로 선언된 변수는 블럭 밖에서도 접근 가능. (= 전역변수)

}

document.getElementById("demo").innerHTML = site;

</script>

 

결과보기

 

 

var・let 차이 1 : 변수 재선언 효과

var 키워드 : {} 블럭 안에서 var 키워드로 재선언 시, 블럭 밖에 영향 미침. 

 

<p id="demo"></p>

<script>

var  x = 10; // 10

{  

  var x = 5; // 5

}

document.getElementById("demo").innerHTML = x; // 5

</script>

 

결과보기


let 키워드 : {} 블럭 안에서 let 키워드로 재선언 시, 블럭 밖에 영향 안 미침. 

 

<p id="demo"></p>

<script>

var  x = 10; // 10

{  

  let x = 5; // 5

}

document.getElementById("demo").innerHTML = x; // 10

</script>

 

결과보기

 

var・let 차이 2 : 반복문

var 키워드 : 반복문 안에서 var 키워드 사용 시 변수 재선언 효과 생김.

 

<p id="demo"></p>

<script>

var i = 10;

for (var i = 0; i < 30; i++) {

  // 홈짱닷컴 Homzzang.com

}

document.getElementById("demo").innerHTML = i; // 30

</script>

 

결과보기


let 키워드 : 반복문 안에서 let 키워드 사용 시 변수 재선언 효과 안 생김.

 

<p id="demo"></p>

<script>

var i = 10;

for (let i = 0; i < 30; i++) {

  // 홈짱닷컴 Homzzang.com

}

document.getElementById("demo").innerHTML = i; // 10

</script>

 

결과보기

※ 만약, 반복문 내에서 let이 i변수 재선언에 사용된 경우, i변수는 반복문 내에서만 유효하게 됨.


var・let 차이 3 : 반복문 (※ 클로저 보충 설명)

[var]

 

<button id='btn0'>btn0</button><br>

<button id='btn1'>btn1</button><br>

<button id='btn2'>btn2</button><br>

 

<script>

var btns = [

    document.getElementById('btn0'),

    document.getElementById('btn1'),

    document.getElementById('btn2')

];


function setClick() {

    for (var i = 0; i < 3; i++) {

        btns[i].onclick = function() {

            console.log(i);

        }        

    }

}


setClick();

</script>

 

결과보기  ※ 어떤 버튼을 누르든, 3이 찍힘.


[let]

 

<button id='btn0'>btn0</button><br>

<button id='btn1'>btn1</button><br>

<button id='btn2'>btn2</button><br>

 

<script>

var btns = [

    document.getElementById('btn0'),

    document.getElementById('btn1'),

    document.getElementById('btn2')

];


function setClick() {

    for (let i = 0; i < 3; i++) {

        btns[i].onclick = function() {

            console.log(i);

        }        

    }

}


setClick();

</script>

 

결과보기 ※ 각 버튼 번호에 맞게 잘 찍힘.


[정리]

 

1. 

JS는 함수 실행 전 먼저 각 scope (유효범위) 범위로 변수 테이블을 먼저 생성. 그 결과 let은 var와 달리 각 번호별 중괄호 scope가 추가로 생성됨.

 

2.

JS는 함수 실행 시, 자기 scope에 변수 없으면 상위 scope를 탐색하며 변수 찾음.

이때, 

let은 각 번호별 중괄호 전용 scope가 별도로 생성되어, 실행 코드가 이것을 참고해 정상적으로 값이 찍힘. 

반면, 

var는 몯든 실행코드가 i=3인 상태를 참고하게 되면서 3만 찍힘.

 

3.

let 경우 중괄호 scope 별로 각 i가 모두 다른데 마치 같은 변수처럼 연이어 증가하는 이유는 for 반복문만의 특징인데 별도로 i만 이용해 반복시키는 함수가 내부적으로 존재하기 때문임.  아래 사이트 가서 위 코드 복사해서 확인.

바벨 : https://babeljs.io/ (※ 최신 JS를 구형 JS로 변환)

"use strict";


function setClick() {

  var _loop = function _loop(i) {

    btns[i].onclick = function () {

      console.log(i);

    };

  };


  for (var i = 0; i < 3; i++) {

    _loop(i);

  }

}

 

코드종 님 (180707) https://youtu.be/RZ3gXcI1MZY


PS.

아래 경우엔 정상적으로 0 ~ 4까지 찍히는 이유

 

<scirpt>

for(var i=0; i < 5; i++) { 

    console.log(i); 

}

</scirpt>

 

결과보기


[설명]

 

scope 생성 시점과 함수 실행 시점이 다르냐 같냐 여부에 달림.

즉, 

코드종 님 영상 경우엔 onclick 속성으로 인해서 scope 생성 시점과 함수 실행시점이 다르기 때문에 결과적으로 i=3 상태만 참고하게 됨.

반면,

위 코드는 scope 생성 시 바로 실행코드가 실행되므로 i가 반복될 때마다 실행코드가 바로 i를 참고할 수 있어 정상적으로 0 ~ 4 찍힘.

 

 

 

PS.

 

엘리 님 (var・let・const 차이) 강의

https://youtu.be/OCCpGh4ujb8

 

mdn let 강의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

 

★ 전역변수는 프로그램 시작과 동시에 계속 메모리 차지하므로, 꼭 필요한 것만 전역변수 선언.

★ (클래스, 함수, 조건문, 반복문) 안에서만 사용하는 변수는 반드시 let 이용해 변수 선언할 것.


찾아주셔서 감사합니다. Since 2012