WEB/JavaScript

[JavaScript] JS 변수 키워드 let 과 var 알아보기

2021-03-21

자바스크립트 내부에서 변수를 선언하는 키워드 let과 var 이 존재한다. 해당 두 키워드는 변수를 선언하는 측면에서는 비슷하다. 때문에 둘을 비교하는 경우가 많은데, 오늘은 이둘의 기능적인 측면에서의 차이점을 비교하면서 알아보자.

- 선언

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">		

	var num1 = 10
	let num2 = 20
	
	console.log(num1)
	console.log(num2)
	
</script>
</head>

<body>

</body>
</html>

변수 선언은 두 키워드 차이가 없다. 또한 var 와 let으로 선언된 변수는 호이스팅이 적용되기 때문에 아래와 같이 변수명만 선언하는 것도 가능하다.

	var num1
	let num2
	
	console.log(num1)
	console.log(num2)
	
	num1 = 10
	num2 = 20

- 블록스코프(Block Scope)

블록 스코프에서는 조금에 차이가 있다. 아래의 코드를 보자.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">		

	var num1 = 10
	let num2 = 20
	
{
	var num1 = 100
	let num2 = 200
}	
	console.log(num1) // 출력값 100
	console.log(num2) // 출력값 20
	
</script>
</head>

<body>

</body>
</html>

위와 같이 블록 내부에서 각 키워드 변수들을 100 / 200으로 값을 초기화하였다. 하지만 결과를 확인해보면 var 키워드 변수의 값은 100으로 변경된 것을 확인할 수 있으며, let 키워드 변수는 여전히 20의 값을 유지하고 있는 것을 확인할 수 있다.

이를 통해 var 키워드 변수는 블록 내부에서의 변수의 초기화가 블록 외부의 영역까지 영향을 미치는 것을 확인할 수 있으며, 블록내부에서 선언한 let 키워드 변수는 블록 내부에서만 그 영향력이 있을 뿐 외부에 영역에는 영향을 미치지 않는 것을 알 수 있다.

- 변수 재선언

변수의 재선언 측면에서도 다소 차이가 발생한다. 아래의 코드를 살펴보자.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">		

	var num1 = 10
	let num2 = 20
	
	var num1 = 100
	let num2 = 200	// 에러 발생
	
	console.log(num1) 
	console.log(num2) 
	
</script>
</head>

<body>

</body>
</html>

동일한 변수명을 사용하여 두 번의 변수 초기화를 각 키워드 별로 수행해 보았다. var의 경우 문제없이 변수의 재선언을 받아들이지만, let의 경우에는 서버 실행 시 Uncaught SyntaxError: Identifier 'num2' has already been declared 오류가 발생한다. let의 경우 한번 초기화된 변수명을 재사용하여 다시 선언하는 것이 불가하다. 때문에 아래와 같이 let 키워드를 붙이지 않고 변수명만 사용하여 데이터를 변경해 주어야 한다.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">		

	var num1 = 10
	let num2 = 20
	
	var num1 = 100
	num2 = 200 // let 키워드 삭제
	
	console.log(num1) 
	console.log(num2) 
	
</script>
</head>

<body>

</body>
</html>

결과를 확인해보면 위의 코드로 변수 값 변경 시 오류 없이 데이터가 변경되는 것을 확인할 수 있다.

저작자표시 비영리

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법 (0)	2021.04.05
[JavaScript] JS String(문자열) 메소드 알아보기. (0)	2021.04.04
[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기 (0)	2021.04.03
[JavaScript] JS Arrays 배열에 대하여 알아보기 (0)	2021.04.02
[JavaScript] JS 변수 키워드 const 알아보기 (0)	2021.03.20

Contents

새소식

인기 검색어