ES6-Const&Let

Const&Let

let

let 예약어는 한번 선언시 다시 선언할 수 없다.
똑같은 변수를 재선언시 오류발생

let a = 1;
let a = 2;  // Uncaught SyntaxError: Identifier 'a' has already been declared

const

const 예약어는 한번 할당한 값을 변경할 수 없다.
단!! 객체 {} 또는 배열[] 로 선언했을 때는 객체의 속성(property)과 배열의 요소(element)는 변경이 가능하다

const b = {
	num: 10,
    text: 'hi'
};
console.log(b.num); // 10

b.num = 20;
console.log(b.num); // 20 객체로 선언후 속성 값을 변경

const c = [];
console.log(c); // []

c.push(10);
console.log(c) // [10] 배열로 선언하고 배열 요소를 추가

TIP

배열을 조작할 때에는 인덱스에 직접 접근하는 방법보다 자바스크립트 내장 API를 사용하는것이 좋다.

▶push() (opens new window): 배열에 데이터 추가 (맨 끝 인덱스부터 추가됨)
▶slice() (opens new window): 배열의 특정 인덱스에 있는 값을 반환 (배열의 내용이 변환되지 않음)
▶splice() (opens new window): 배열의 특정 인덱스에 있는 값을 변경 또는 삭제 (배열의 내용이 변경됨)
▶pop() (opens new window): 배열의 마지막 인덱스의 값을 꺼냄 (배열의 내용이 변경됨)
▶shift() (opens new window): 배열의 첫번째 인덱스의 값을 꺼냄 (배열의 내용이 변경됨)

블록 유효범위

var의 유효 범위

var의 유효 범위는 함수의 블록 단위로 제한된다.
흔히 함수 스코프(function scope)라고 표현한다

var a = 100;
function print() {
	var a = 10;
    console.log(a);
}
print(); // 10

print 함수 앞에 선언한 a와 print 함수 안에 선언한 a는 각자 다른 유효 범위를 가지고있다.
var a = 100; 는 자바스크립트 전역 객체인 window에 추가가 되고
var a = 10; 은 print() 함수 안에서만 유효한 범위를 가진다.

for 반복문에서 var의 유효범위

var a = 10;
for (var a = 0; a < 5; a++) {
	console.log(a) // 0~5
}
console.log(a); // 6

var a = 10; 로 변수 a를 선언한 상태에서 for반복문에 동일한 변수 이름 a를 사용할 경우
{} 로 변수의 유효 범위가 제한되지 않기 때문에 for반복문이 끝나고 나서 console.log(a); 를 출력하면 for 반복문의 마지막 결과 값이 출력된다.

const와 let의 블록 유효범위

var a = 10;
for (let a = 0; a < 5; a++) {
	console.log(a); // 0 1 2 3 4 5
}
console.log(a) // 10

반복문의 조건 변수 a를 let으로 선언하니 변수의 유효 범위가 for 반복문의 {} 블록 안으로 제한되었다.

출처 : [https://joshua1988.github.io/vue-camp/es6/const-let.html#let]