▶ Var의 문제점
1
2
3
4
5
|
var name = 'html';
console.log(name);
var name = 'javascript';
console.log(name);
|
cs |
- name = 'html'
- name = 'javascript'
이렇게 name이라는 이름으로 var함수에 각각 다른 값을 입력하였으나 js는 오류를 출력하지않는다.
이는 개발자의 실수로 인하여 값이 바뀔 가능성이 몹시 높다. 그래서 ES6이후, 이를 위해 추가된 변수 let, const 가 새로 나왔으며 현재는 let과 const를 사용하는 것으로 많이 바뀌고 있는 추세이다.
▶ let 선언방법
1
2
3
4
5
|
let name = 'html';
console.log(name);
let name = 'javascript';
console.log(name);
|
cs |
▶ const 선언방법
1
2
3
4
5
|
const name = 'html';
console.log(name);
const name = 'javascript';
console.log(name);
|
cs |
▶ let 과 const의 차이점
let과 const 모두 var에서 잡아주지못한 동일한 변수명이라는 에러를 잡아준다.
그럼 이 둘의 차이점은 무엇일까?
let은 변수에 재할당이 가능하나, const는 변수의 재선언이나 재할당 모두 불가능하다.
그래서 const는 재할당이 필요없는 상수 혹은 객체에 선언하는 것을 권장한다.
▶ var, let, const의 유효범위
-. var: function 레벨의 유효범위
-. let, const: block 레벨의 유효범위
*Var의 함수 유효범위: 함수
1
2
3
4
5
6
7
8
9
10
11
12
|
//-----------------------
function scope(){
console.log(a); //undefined
if(true){
var a =123;
console.log(a); //123
}
console.log(a); //123
} //-----------------------
|
cs |
var은 --- 안의 영역에서 모두 적용이 가능하다.
3행의 console.log는 if밖에 있고 var가 선언 전 에러가 아닌 undefined(값이 할당되지않음)
7행의 console.log는 당연히 123 출력
9행의 console.log 역시 undefined(값이 할당되지않음) 메시지만 출력된다.
*const,let의 유효범위: 블럭
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function scope(){
console.log(a); //error
//-----------------------
if(true){
const a =123;
console.log(a); //123
}
//-----------------------
console.log(a); //error
}
|
cs |
블럭 외부에서 출력되는 console에는 모두 error가 뜬다.
Var 은 const와 let보다 유효범위가 더 넓다.
즉, 의도하지 않는 범위에서 변수가 사용이 될 수있고 그만큼 메모리를 차지하며 에러의 이유가 될 수 있다.
그래서 const와 let을 사용하는 것이 더욱 더 권장된다.
'국비필기노트 > HTML & CSS & JS' 카테고리의 다른 글
JS_주요 내장 함수 (0) | 2022.05.10 |
---|---|
JS_배열 (0) | 2022.05.10 |
JS_함수(function) 호출방법 (0) | 2022.05.10 |
JS_함수의 유효범위(Scope) (0) | 2022.05.10 |
HTML_기본 태그 (0) | 2022.05.03 |