Development/Javascript

[Javascript/ES6+] for문에서의 let과 var

레오나르도 다빈츠 2021. 7. 7. 21:07

출처

 

자바스크립트 ES6+ 기본 - 인프런 | 강의

4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트

www.inflearn.com

 

 

🚀 for문에서의 let과 var

 

◽ for문에서의 let과 var의 차이점

for문에서 반복할 때 마다 var는 스코프를 갖지 않으나 let은 스코프를 가진다.

 

[코드1: var의 경우]

<html>
    <ul class="sports">
        <li>축구</li>
        <li>농구</li>
        <li>야구</li>
    </ul>
</html>

var node = document.querySelector(".sports");
// var i는 전체를 scope로 갖게 된다.
for(var i=0; i<node.children.length; i++) {
    node.children[i].onClick = function(event) {
        event.target.style.backgroundColor = "yellow";
        console.log(i);
    }
}

[실행결과]

3

3

3



[코드2: let의 경우]

<html>
    <ul class="sports">
        <li>축구</li>
        <li>농구</li>
        <li>야구</li>
    </ul>
</html>

var node = document.querySelector(".sports");
// let은 블록 스코프로, 블록 단위로 스코프를 가져간다.
for(let i=0; i<node.children.length; i++) {
    node.children[i].onClick = function(event) {
        event.target.style.backgroundColor = "yellow";
        console.log(i);
    }
}

[실행결과]

0

1

2