MJS
ES5까지 JS에ㅓ 변수를 선언할 때는
오로지 var키워드를 써서 선언을 해왔습니다.
var 키워드는 변수 중복 선언을 허용하며
함수레벨 스코프도 중복 처리가 가능합니다.
장점도 있지만 여러 문제를 야기했습니다.
- 변수 중복 허용의 문제
var x = 1;
var y = 1;
var x =100;
var y;
console.log(x);
console.log(y);x에 이미 선언된 값이 있는데도
같은 지역 내에서 추가로 var x선언이 가능합니다.
그리고 y를 중복선언하면서 초기화를 하지 않았지만
에러가 발생하진 않았습니다.
- 전역 변수화 문제
var로 선언한 변수도 자신이 속한 지역까지의 영역에서
존재할 줄 알았습니다.
하지만 함수 외부에서 선언한 변수를
내부에서 재선언해도 전역변수로 간주가 됩니다.
var x = 1 ;
if(true) {
// if 영역 외부에 이미 x가 선언 및 초기화
// 다른 언어에서는 전역 x와 if지역x 두 개로
// 이름은 가지만 소속이 다른 x가 2개 남는데
// 자바스크립트에서는 전역변수화 한다.
var x = 10;
}
console.log(x); // 1이 아닌 10출력심지어 for문 내부에서 선언한 변수도
전역변수로 강제 변환 됩니다.
<script>
var i = 10;
// for문 내부에서 선언한 변수도 전역변수로
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i); // 5 출력
</script>
- 변수 호이스팅 문제
변수 호이스팅이란
변수 선언문이 위치와 상관없이
가장 먼저 계산되는 현상을 의미합니다.
var로 선언한 변수는 순서가 역전되어도 작동하는데
이로 인해 프로그램의 논리적 흐름을 방해합니다.
<script>
console.log(foo);
foo = 123;
console.log(foo);
var foo;
</script>var foo가 가장 마지막에 위치해있지만
우선순위에 따라 먼저 선언이 되었습니다.
이런 상황 때문에 이제부터 JS에서
var 대신 let을 사용해보려고 합니다.
let
let 키워드는 var키워드를 보완하기 위해
ES6에서 새로 추가되었고
중복선언금지, 호이스팅 분리 등의 역할을 가지고 있으며
사실상 var를 사장시키고
let만 사용해도 되도록 설계되어 있습니다.
var foo = 123;
var foo = 456;
let bar = 123;
let bar = 456;var에서 문제가 없던 중복 선언이
let에서는 에러입니다.
전역과 지역변수의 경계도 let은 제대로 인식하며
함수, if, for, while, try~catch등의 코드블록을
전부 개별지역으로 인식합니다.
let foo =1;
{
let foo = 2; // 지역변수 foo
let bar = 3; // 지역변수 bar
}
console.log(foo); // 중괄호 내부가 아니므로 전역변수 foo 호출
console.log(bar); // 현 지역에 없는 변수이므로 error.
변수 호이스팅도 없습니다.
let으로 선언된 변수는 순서대로 실행됩니다.
<script>
console.log(foo);
// 밑에서 선언해봐야
// 지금은 콘솔에서 foo를 찾을 수 없습니다.
let foo = 123;
</script>const
const키워드는 상수 (constant)를 선언할 때 사용하는
키워드로 자바의 final과 비슷한 역할을 합니다.
기본적인 지역에 따른 호출 특성은 let과 같으므로
차이점 위주로 살펴보겠습니다.
// 1. 선언과 동시에 초기화
const로 선언한 변수는 반드시 선언과 동시에 초기화를
해주어야 합니다.
<script>
const foo = 1;
const foo2; // 반드시 초기화까지 해주세요.
// 에러 발생!
</script>// 2. 재할당 금지
const로 선언한 변수는 값을 재할당할 수 없습니다.
값이 일단 적용되면 다른 값으로 선언할 수 없고
초기화 선언문을 수정하거나
오로지 호출을 통해서만 사용할 수 있게 됩니다.
<script>
const foo = 1;
foo = 2 ; // 에러 발생!
// 중복 선언할 수 없어요!
</script>이런 상수를 쓰는 이유는 무엇일까요.
반복해서 참조해야 하는 변수나
코드의 가독성을 높이기 위해
Java의 final 변수처럼 사용하면 되는 겁니다.
<script>
// 세전 가격
let preTaxPrice = 100;
// 세율을 나타내는 상수 선언
const TAX_RATE = 0.1;
// 세후 가격의 식
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);
</script>이렇게 코드의 가독성을 높이고
원할 때 호출하여 값을 조회할 수 있게 되었습니다.
일단은 여기까지 입니다.