[웹 개발 기초 자바스크립트] 1. var, let, const

Shy·2023년 8월 21일

NodeJS(Express&Next.js)

목록 보기

1/39

Go Live

시작 전에
VScode에서 Extension인

를 설치하자.

밑에 클릭하면 바로 페이지를 볼 수 있다.

script에 관하여

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello</p>
    <script>
        var A = 1;
        console.log(A); //화면이 아닌 콘솔창에서 출력된다.
    </script>
</body>
</html>

위처럼 html파일에 script까지 한꺼번에 넣을 수 있지만, 스크립트 파일 자체도 분리가 가능하다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello</p>
    <script src="script.js"></script>
</body>
</html>

var A = 1;
console.log(A);

1. var, let, const

var	let(ES6)	const(ES6)
중복 선언과 재할당이 가능하다.	중복 선언은 불가하며 재할당은 가능하다.	중복 선언과 재할당 둘다 불가하다.

var

함수 레벨 스코프(function-level scope)를 가진다. 즉, var로 선언된 변수는 함수 내에서 어디서든지 접근할 수 있다. 그러나 if 블록, for 루프 등과 같은 블록 레벨에서는 var로 선언된 변수가 블록 밖에서도 접근할 수 있다.
변수가 선언되기 전에 접근하려고 하면, undefined 값이 반환된다. 이를 변수 호이스팅(variable hoisting)이라고 합니다.
재선언이 가능하다.
이런 특징으로 인해 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재 할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어지게 될 수 있다.

function example() {
    if (true) {
        var x = 5;
    }
    console.log(x); // 5
}

// 재할당 문제
var greeting = 'hello';
console.log(greeting); //hello

var greeting = 'hi';
console.log(greeting); //hi

greeting = 'how are you?';
console.log(greeting); //how are you?

let

블록 레벨 스코프(block-level scope)를 가집니다. 즉, {} 블록 안에서 선언된 let 변수는 블록 밖에서 접근할 수 없다.
변수 호이스팅은 발생하지만, 변수가 선언되기 전에 접근하려고 하면 ReferenceError가 발생한다.
재선언이 불가능하다.

if (true) {
    let y = 10;
}
// console.log(y); // ReferenceError

아래와 같이 중복 선언은 불가하며, 재할당은 가능하다.

let greeting = 'hello';
console.log(greeting); //hello

let greeting = 'hi';
console.log(greeting) //Uncaught SyntaxError: Identifier 'greeting' has already been declared

greeting = 'how are you';
console.log(greeting); //how are you

const

블록 레벨 스코프를 가진다.
변수 호이스팅은 발생하지만, 변수가 선언되기 전에 접근하려고 하면 ReferenceError가 발생한다.
재선언 및 재할당이 불가능하다. 즉, 한 번 값을 할당하면 그 값을 변경할 수 없다. 하지만 const로 - 선언된 객체나 배열의 내부 속성이나 요소는 변경할 수 있다.

const z = 20;
// z = 30; // TypeError

const obj = { name: "ChatGPT" };
obj.name = "OpenAI"; // 가능

아래와 같이 중복 선언과 재할당이 모두 불가능하다.

const greeting = 'hello';
console.log(greeting); //hello

const greeting = 'hi';
console.log(greeting);
//Uncaught SyntaxError: Identifier 'greeting' has already been 

greeting = 'how are you?';
console.log(greeting);
//Uncaught TypeError: Assignment to constant variable

var보다는 let과 const...

현대의 자바스크립트 코드에서는 var보다 let과 const를 더 선호하는 경향이 있다. const는 값을 한 번만 할당할 수 있는 변수를 정의할 때 사용되며, 그 외의 경우에는 let을 사용하는 것이 좋다.

var의 주요 문제점들은 다음과 같다.

함수 레벨 스코프(Function-level scope)
- var는 함수 레벨 스코프를 가지기 때문에, 블록 내부에서 선언되어도 블록 밖에서 접근할 수 있다. 이로 인해 예상치 못한 결과나 버그를 유발할 수 있다.
변수 호이스팅(Variable hoisting)
- var로 선언된 변수는 호이스팅되어 코드의 맨 위로 끌어올려진다. 따라서 변수 선언 전에 그 변수를 사용할 수 있게 된다. 이는 코드의 가독성과 예측 가능성을 저해하며, 의도치 않은 결과를 초래할 수 있다.

console.log(name); // undefined
var name = "ChatGPT";

재선언(Re-declaration)
- var로 선언된 변수는 같은 스코프 내에서 재선언할 수 있다. 이는 실수로 같은 이름의 변수를 다시 선언할 가능성이 있으며, 이렇게 되면 원래 변수의 값이 덮어쓰여 버릴 수 있다.

var name = "ChatGPT";
var name = "OpenAI"; // 문제 없이 재선언됨

이러한 문제점들로 인해, ES6(ES2015)에서는 블록 레벨 스코프를 지원하는 let과 const가 도입되었고, 이 두 키워드는 var의 대안으로 권장되기 시작했다. let과 const를 사용하면 위에서 언급한 var의 문제점들을 대부분 피할 수 있기 때문에, 현대의 자바스크립트 개발에서는 var보다 let과 const를 더 선호하게 되었다.

Shy

초보개발자. 백엔드 지망. 2024년 9월 취업 예정

다음 포스트