이미지09
Coding Story/JAVASCRIPT

[ JavaScript ] 자바스크립트 var, let, const 의 차이

반응형

 

 

보통 JavaScript 에서 변수를 선언할 때 "var" 로 선언하곤 한다.

 

이 외에도 "let" 이나 "const" 가 존재하는데, 이 세 가지의 변수 선언 방법의 차이에 대해 알아보자.

 

 

1. "var"는 함수 단위, "let"과 "const"는 블럭 단위의 스코프(범위)를 가진다.

무슨 말인가 하니, 먼저 var 를 아래처럼 선언해놨다고 가정하자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var/let/const</title>
</head>
<body>
    <script type="text/javascript">

        var a = 20;
        console.log("1번 a: "+a);
        {
            var a = 50;
            console.log("2번 a: "+a);
            {
                var a = 100;
                console.log("3번 a: "+a);
            }
            console.log("4번 a: "+a);
        }
        console.log("5번 a: "+a);
        
    </script>
</body>
</html>

 

이를 실행해 콘솔에 찍히는 1~5번 a를 확인해보면,

포스팅 이미지 01

 

3번 a에서 var a = 100 ; 을 선언했더니 4번 a와 5번 a도 100으로 바뀌어 찍히는 걸 확인할 수 있다.

 

이는 1번 a에서 var 변수를 이미 할당해놓았고, 하위의 모든 블럭내에서 a를 재선언하면,

 

최초 선언된 a변수가 전역변수로써 기능을 수행하기에 새로 만들어내는 것이 아니라 이 a를 덮어쓰기 때문이다.

 

그렇기에 3번 a부터는 바뀐 a가 콘솔에 찍히는 것.

 

 

 

 

 

 

그럼 이번엔 블럭 스코프 단위인 "let"의 예제를 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var/let/const</title>
</head>
<body>
    <script type="text/javascript">

        let a = 20;
        console.log("1번 a: "+a);
        {
            let a = 50;
            console.log("2번 a: "+a);
            {
                let a = 100;
                console.log("3번 a: "+a);
            }
            console.log("4번 a: "+a);
        }
        console.log("5번 a: "+a);

    </script>
</body>
</html>

 

이를 실행하면 콘솔은 아래와 같이 찍힌다.

포스팅 이미지 02

 

이전의 var 와 동일하게 3번째에서 a에 100을 집어넣었지만 4번 a와 5번 a는 영향을 받지 않았다.

 

이는 let 이 블럭 스코프 단위를 가지기 때문인데 3번 a에 100을 넣었더라도

 

3번 a의 { } 블록 내부에서 값을 다르게 설정했다 한들 { } 블록 밖의 a 들에게는 영향을 안끼치는 것이다.

 

 

그리고 const 도 let 과 같이 블록 스코프 단위 변수이므로 동일하니 

 

const 의 블록 스코프 단위 예제는 넘어가도록 하겠다.

 

 

2. "var"와 "let"은 변수의 값을 변경할 수 있지만, "const"는 변경할 수 없다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var/let/const</title>
</head>
<body>
    <script type="text/javascript">
        
        var testVar = 1;
        let testLet = 1;
        const testConst = 1;

        testVar = 2;
        console.log("var: " + testVar);

        testLet = 2;
        console.log("let: " + testLet);

        testConst = 2;
        console.log("const: " + testConst);

    </script>
</body>
</html>

 

var, let, const 변수를 각각 1을 넣어 선언한 후 각 변수들의 값을 2로 바꾸고 이를 콘솔에 찍어보았다.

 

결과는 다음과 같다.

포스팅 이미지 03

 

var 와 let 은 정상적으로 값이 2로 바뀌었지만 const 는 에러가 나게 된다.

 

 

지금까지 var, let, const 의 차이점을 다뤄보았으며 아래의 요약글을 남기며 포스팅을 마칩니당.

1. var 와 달리 let, const 는 { } 블록 내의 범위를 가진다.
2. var, let 은 값을 변경할 수 있지만 const 는 불가능하다.

 

 

 

반응형
저작자표시

'Coding Story > JAVASCRIPT' 카테고리의 다른 글

[ JavaScript ] 자바스크립트 map( ) 함수  (2) 2020.11.20
[ JavaScript ] 자바스크립트 배열 concat  (0) 2020.11.20
[ JavaScript ] 자바스크립트 화살표 함수  (0) 2020.11.20
[ JavaScript ] 자바스크립트 삼항 연산자, && 연산자, || 연산자  (0) 2020.11.19
[ JavaScript ] 자바스크립트 템플릿 리터럴(Template Literal)  (0) 2020.11.19
이미지10
AeCo
애코.