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 이용해 변수 선언할 것.
