var, let, const에 대해 알아보자.

목차
1. var란 무엇일까?
2. let이란 무엇일까?
3. const란 무엇일까?
4. var, let, const의 차이점

변수의 범위란 무엇일까?

프로그래밍에서 변수는 데이터를 저장하고 조작하는 데 사용된다. 변수는 그 범위에 따라 접근할 수 있는 곳이 다르다. 변수의 범위는 크게 두 가지로 나뉜다.1. 전역 범위(Global Scope) : 함수 밖에서 선언된 변수로, 어디서든지 접근이 가능하다.2. 지역 범위(Local Scope) : 특정 함수 안에서 선언된 변수로, 해당 함수 안에서만 접근이 가능하다.

1. var

var 변수는 재선언이 된고, 업데이트를 할 수 있다.var 변수는 값을 지정해주지 않으면 undefined(정의되지 않음)으로 초기화가 된다. 의도적으로 재정의한 것이라면 괜찮겠지만, 변수가 이미 정의되어 있다는 사실을 인식하지 못하는 경우에는 문제가 될 수 있다.코드로 예를 들어보겠습니다!

var data = "hey hi";
var data = "hello world";
console.log(data); // hello world

var str;
console.log(str); // undefined
str = "bhark Good!"

 

위 코드를 보면 같은 이름을 가진 변수를 2번 선언한 것처럼 var 변수는 재선언이 가능하지만, var 변수의 초기값을 지정해주지 않으면 변수는'undefined'로 초기화를 한다. 이는 변수가 아직 어떤 값도 가지고 있지 않다는 것을 의미한다. 따라서 변수를 사용하려고 할 때에 초기값을 지정해주지 않았다면, 'undefined'가 반환이 될 것이다.

이러한 상황을 방지하려면 변수를 선언할 때는 초기값을 지정해주는 것이 좋다.

var data1 = "hello world";
data1 = "hey hey hey";
console.log(data1); // hey hey hey

 

여기서 var data1 = "hello world";는 "hello world"라는 값을 가지고 있는 data1이라는 변수를 만든다는 것인데,  data1 변수에 "hey hey hey"라는 값으로 업데이트를 했기 때문에 출력값이 "hey hey hey"가 나오게 된 것이다.

이처럼 var 변수는 업데이트가 가능해서 편한 점은 변수의 값을 언제든지 변경할 수 있다는 것이다.

 

예를 들어, 친구의 이름을 변수에 저장해놓고 있다가, 친구의 이름이 바뀌었을 때 쉽게 업데이트를 할 수 있다고 생각해보면, 만약 변수를 사용하지 않고 친구의 이름을 바로 사용한다면 친구의 이름이 바뀌었을 때 모든 곳에서 일일이 변경해야 할 것이다. 하지만 변수를 사용하면, 변수의 값을 한 곳에서만 변경하면 모든 곳에서 새로운 값을 사용할 수 있다.

이렇게 변수를 업데이트, 재선언을 할 수 있는 것은 코드를 관리하고 수정하기가 훨씬 편리하다. 변수를 업데이트할 때는 변수를 다른 값으로 바꾸기만 하면 되니까 엄청 편리하다.

 

오늘도 PPT와 함께ㅎㅎ😅

 

2. let

let은 업데이트는 할 수 있지만, 재선언은 불가능하다.

let 변수는 var와 마찬가지로 해당 범위 내에서 업데이트를 할 수 있다. 하지만, var와 달리 let 변수는 범위 내에서 다시 선언할 수는 없다.

let bye = "say bye"
let bye = "say hello" // error : Identifier 'bye' has already been declared

 

let 변수를 재선언을 했더니, 이와 같은 에러가 발생했다. 이 에러는 bye라는 식별자, 즉 변수가 이미 선언되어 있다.라는 에러이다. 

 

JavaScript에서 'let'으로 변수를 선언하면 블록 범위를 가지게 된다.

자! 여기서 블록 범위란?

블록은 {}로 바인딩된 코드 청크이다. 하나의 블록은 중괄호 속에서 존재하며, 중괄호 안에 있는 것은 모두 블록 범위이다.

let으로 선언된 변수는 해당 블록 내에서만 사용 가능하다.

코드로 예를 들어보겠습니다!

let times = 4;

if(times > 3) {
	let hello = "say hello say bye";
    	console.log(hello); // say hello say bye
}
console.log(hello); // hello is not defined

 

 

이렇게 중괄호로 감싸진 hello 변수가 정의된 블록 외부에서 hello를 사용했더니 에러가 반환되는 것을 확인할 수 있다. let 변수는 if문 블록 안에 있지만, 출력은 블록 밖에서 하고 있기 때문에 hello라는 변수를 찾을 수 없다고 반환하는 것이다.

 

그러나 동일한 변수가 다른 범위 내에서 정의된다면, 에러는 더 이상 발생하지 않는다.

let bye = "say bye";
if(true) {
	let bye = "say hello";
    	console.log(bye); // say hello
}
console.log(bye); // say bye

 

에러가 나지 않는 이유는 무엇일까? 두 변수가 서로 다른 범위를 가지므로 서로 다른 변수로 취급되기 때문이다. let 변수는 변수가 범위 내에서만 존재하기 때문에 이전에 이미 사용한 적이 있는 변수 명에 대해서 더 이상 신경쓰지 않아도 된다. 또한 번위 내에서 동일한 변수를 2번 이상 선언할 수 없기 때문에 앞서 설명한 var의 문제가 발생하지 않는다. 

 

3. const

const는 업데이트도, 재선언도 불가능하다. 

const로 선언된 변수의 값은 해당 범위 내에서 동일하게 유지됨을 의미한다. 업데이트하거나 다시 선언할 수가 없고, let 선언처럼 const 선언도 선언된 블록 범위 내에서만 접근이 가능하다. const로 변수를 선언한 경우에는 다음과 같은 두 작업을 수행할 수 없다.

const str = "no"
str = "yes" // error : Assignment to constant variable.

const str = "say hi"
const str = "say bye" // error : Identifier 'str' has already been declared

 

따라서 모든 const 선언은 선언하는 당시에 초기화가 되어야한다. 하지만, const 변수는 변하지 않는 값을 나타내는 상수로 사용되므로, 코드를 읽을 때 어떤 값이 변하지 않는지 쉽게 파악할 수 있다. 이는 코드의 가독성을 높여주고, 유지보수를 쉽게 만든다.

 

4. var, let, const의 차이점

• var 선언은 전역 범위이며, let과 const는 블록 범위이다.
• var 변수는 범위 내에서 업데이트 및 재선언을 할 수 있다. 하지만 let 변수는 업데이트는 할 수 있지만, 재선언은 할 수 없고, const 변수는 업데이트, 재선언 둘 다 불가능하다.
• var와 let은 초기화하지 않은 상태에서 선언은 할 수 있지만, const는 선언 중에 초기화를 해야한다.

이처럼 차이점을 고려하여 변수를 선언할 때 적절한 키워드를 선택해야 한다. 변수의 범위와 특성을 명확히 이해하고 사용하면 코드의 가독성과 유지보수성을 향상시킬 수 있을 것이다.