let 과 var의 차이점? 어떤 걸 사용해야 할까요? 🤷‍♀️

안녕하세요, 쁘띠 코딩입니다.

 

C나 Java등과는 다르게 자바스크립트의 경우에는 var 또는 let 을 이용해 다양한 타입의 변수를 선언할 수 있습니다.

그런데 이 변수들은 어떤 차이가 있을까요? 

오늘은 자바스크립트 변수 타입에 대해 한번 알아보겠습니다.

 

var는 function scoped 변수입니다. 즉 주어진 함수 내에서 사용할 수 있는 변수를 의미하는데요,

다음과 같은 함수가 있을 때, 이 함수 내에서 해당 변수를 호출하면 그 위치가 어디가 되었든 오류 없이 변수에 엑세스가 가능합니다.

 

const functionScopedExample = () => {
	valueA = 5;
	console.log("value A: ", valueA);
	var valueA = 6;
	console.log("value A: ", valueA);
}

functionScopedExample();

 

이 코드 실행의 결과는 어떨까요? 네 맞습니다. 다음과 같이 문제 없이 출력이 가능합니다:

value A:  5
value A:  6

 

반면에 let은 block scoped 변수입니다. 그 말인 즉슨, 위의 경우 만약 valueA를 let으로 지정했다면 에러가 발생한다는 뜻이겠죠?

let은 주어진 블록 내에서, 선언이 이루어진 이후에만 유효한 변수입니다.

다음 예제를 보면 이해가 쉬울 거에요.

 

1  const functionScopedExample = () => {
2 
3   	{
4	 	console.log("let A: ", valueA);
5 		let valueA = 10;
6 		console.log("let A: ", valueA);
7 	}
8     
9 	console.log("let A: ", valueA);
10  }
11 
12 functionScopedExample();

 

위의 예제를 실행시키면 Uncaught ReferenceError: a is not defined   라는 에러 메시지가 화면에 나타납니다. 

4번째 라인 - valueA 를 선언하기도 전에 호출하였고 

9번째 라인 - 블록 바깥쪽에서 valueA 를 호출하였기 때문입니다.

 

let으로 변수를 선언하게 되면 우리가 Java나 c등의 언어에서처럼 좀더 엄격한 규칙을 적용해서 변수를 관리할 수 있습니다. var의 경우는 함수 내에서 동일하게 여러 번 선언이 가능하기 때문에 막상 편하다고 생각해서 사용하다 보면 코드의 가독성을 떨어뜨리고 혼란을 야기한다는 단점이 있지요.

 

자세한 내용은 다음 사이트에서 참고하시면 더 좋을것 같습니다 :) 

https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/

Difference between var and let in JavaScript - GeeksforGeeks

https://stackoverflow.com/questions/762011/what-is-the-difference-between-let-and-var

What is the difference between "let" and "var"?

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN