let 변수, const 변수

let 변수 개요

• let book = "책";
• 블록 스코프를 가진 변수로, 변수가 선언된 블록이 스코프
• 스코프 적용 기준: 블록{}, 문, 표현식
• 블록{} 안과 밖의 스코프가 다름
• 변수 이름이 같아도 값이 대체되지 않음

 

let 변수 선언

Syntax

• let name1 [= value1] [, name2 [= value2]]
• name1, name2에 변수 이름 작성
• 식별자로 사용
• []는 생략 가능을 나타냄
• 값을 할당하지 않아도 됨

let book;    // 값을 할당하지 않고 변수만 선언할 수 있음
let one, two;    // 콤마로 구분하여 다수를 선언할 수 있음

 

• value1, value2에 초깃값 작성
• 표현식 작성  가능, 평가 결과 사용

let book = "책";
let one = 1, two = (10 + 20);

let five = 5, let six = 6;    // SyntaxError 발생. let은 처음에 한 번만 작성
let five = 5, var six = 6;    // let과 var를 같이 사용할 수없음

 

 

블록 스코프

블록 기준

• 중괄호 { 코드 }
• function name(){ 코드 }
• if (a === 1){  코드 }

 

• 블록 안과 밖의 스코프가 다름
• 변수 이름이 같아도 값이 대체되지 않음
• 블록 안에서 블록 밖의 변수는 접근할 수 있지만, 블록 밖에서 블록 안의 변수는 접근할 수 없음

let sports = "축구";
sports = "농구";    // 바로 앞에 sports가 있으므로 값을 할당
log(sports);
// let sports = "배구";    // let을 사용하여 같은 스코프에 같은 이름의 변수를 선언할 수 없음
{
    let sports = "탁구";    // 블록을 사용, 스코프가 다르므로 let을 사용하여 변수 선언할 수 있음
    log(sports);
);

[실행 결과]

농구

탁구

 

• 스코프에 같은 이름 사용 불가

 

 

let 변수와 var 변수 차이

• for() 문에서 반복할 때 마다 var 변수는 스코프를 갖지 않지만, let 변수는 스코프를 가짐

 

var 변수와 스코프

var node = document.querySelector(".sports");
for (var k = 0; k < node.children.length; k++){    // var k = 0; 에서 k 변수의 스코프는 함수임
    event.target.style.backgroundColor = "yellow";
    log(k);    // 어떤 것을 클릭하더라도 항상 for문이 끝났을 때의 스코프 함수
    };
};


** html 파일 **
<ul class=sports>
  <li>축구</li>
  <li>농구</li>
  <li>야구</li>
</ul>

 

let 변수와 스코프

var node = document.querySelector(".sports");
for (let k = 0; k < node.children.length; k++){    // let k = 0; 로 변경
    event.target.style.backgroundColor = "yellow";
    log(k);    // 블록 단위로 연산되므로 0부터 1씩 증가함
    };
};


** html 파일 **
<ul class=sports>
  <li>축구</li>
  <li>농구</li>
  <li>야구</li>
</ul>

 

 

let 변수와 this

• 글로벌 오브젝트에서 let 변수를 this로 참조 불가

// 현재 위치는 글로벌 오브젝트
var music = "음악";    // window 오브젝트에 설정됨
let sports = "축구";    // window 오브젝트에 설정되지 않음
log(this.music, this.sports);    // this가 window 오브젝트 참조하여 음악이 출력, sports가 window에 설정되지 않으므로 undefined가 출력됨

[실행 결과]

음악, undefined

 

• 글로벌 오브젝트에서 var과 let 변수가 설정되는 위치 구조

 

 

다수의 JS 파일 사용

• 모든 JS 파일에서 글로벌 오브젝트에 작성한 var 변수와 let 변수를 공유
• 블록 안에 작성하면 공유하지 않음
•  

글로벌 오브젝트에 작성

• var 변수: window에 설정, 공유
• let 변수: Script에 설정, 공유
  • window.sports = {} 처럼 의도적으로 작성하지 않아도 됨
• { let 변수 }: Block에 설정, 공유하지 않음
  • 글로벌 오브젝트에서만 사용하는 로컬 변수로 사용

var globalVar = "var 변수";
let globalLet = "let 변수";
{
    let globalBlock = "block 변수";
}

 

함수에 작성

• var 변수, let 변수: Local
• { let 변수 }: Block

function showLocal(){
    var globalVar = "var 변수";
	let globalLet = "let 변수";
	{
    	let globalBlock = "block 변수";
	};
};

 

 

호이스팅

ES5의 실행 콘텍스트 처리 순서

1. 함수 선언문 설정
2. 변수 이름을 바인딩(변숫값은 undefined)
3. 소스 코드 실행

 

• let 변수는 호이스팅 되지 않음

 

 

const 변수

• 구문: name1 [= value1] [, name2 [= value2]]
• 값을 바꿀 수 없는 변수 선언
• name1에 변수 이름 작성, 식별자로 사용

const sports = "축구";    // sports가 const 변수이므로 에러 발생
try {
    sports = "농구";    // try 블록도 별도의 스코프이지만 const, let을 작성하지 않았으므로 sports 변수에 값을 할당
} catch (e) {
    log("const 할당 불가");
};

[실행 결과]

const 할당 불가

 

• value1, value2에 초깃값 작성
  • 반드시 값을 작성, 변수 선언만 불가
  • 표현식 작성 가능, 평가 결과 사용

 

• JS에서 상수는 대문자 사용이 관례

const bonus = 100;    // const가 상수이지만 값 형태에 따라 바꿀 수도 있음
const POINT = 200;    // 대문자 사용이 코딩 관례

 

• 우선 let이 아닌 const 사용 가능을 검토
  • 우선 순위: const > let > var

 

• const 변수 전체를 바꿀수는 없지만 Object의 프로퍼티 값을 바꿀 수 있음

const book = {title: "책"};
try {
    book = {title: "음악 책"};    // book에 값을 할당하면 에러 발생
} catch(e) {
    log("const 전체 할당 불가");
};
book.title = "미술 책";    // 프로퍼티 값은 변경할 수 있음
log(book.title);    // const 변수의 변경 불가는 book에 값을 할당하는 것을 뜻함

[실행 결과]

const 전체 할당 불가

 

• 배열의 엘리먼트 값도 바꿀 수 있음

const book = ["책"];
try {
    book = ["음악 책"];    // book에 값을 할당하면 에러 발생
} catch(e) {
    log("const 전체 할당 불가");
};
book[0] = "미술 책";    // 엘리먼트 값은 변경할 수 있음
log(book[0])

[실행 결과]

const 전체 할당 불가

미술 책