본문 바로가기

국비필기노트/HTML & CSS & JS

JS_변수의 종류

▶ 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