자바스크립트 var, let, const 차이점

오늘은 자바스크립트에서 변수 선언 방식에 대해서

정리를 해보려고 합니다.

 

javascript에서는 세가지 방법의 변수 선언 방식이 있습니다.

var, let, const

이렇게 3가지 방법이 있습니다.

이 3가지 방법에 대해서 특이점 및 차이점 등

정리를 해보도록 하겠습니다.

 

급하시거나 하셔서 차이점만 간단하게 보고 싶으신 분은

제일 하단으로 가시면 정리한 내용이 있으니

해당 부분을 바로 봐주셔도 되실 것 같습니다.

 

 

 

 

1. var

우선 var로 변수를 선언하는 방법을 정리해보도록 하겠습니다.

 

1-1. var 사용법

var로 변수를 선언하여 사용할 수 있습니다.

var의 경우,

ES6(ES6(ESMAScript6) 이전의 문법으로

예전부터 사용하던 방법입니다.

 

 

기본적인 사용방법을 정리해보도록 하겠습니다.

기본적인 사용 방법은 간단합니다.

그냥 var 명령어를 입력해주고,

그 다음 변수명을 입력해주시면 되십니다.

실제 사용 예제를 확인해보도록 하겠습니다.

 

<script language="JavaScript">
var vartest = "abcd"
console.log(vartest);
</script>

위와 같인 코딩을 하였습니다.

vartest라는 변수를 var 명령어로 선언을 하였습니다.

그리고 abcd라는 값을 할당하였습니다.

그 다음 console.log 명령어를 이용하여

출력하도록 한 것입니다.

 

위와 같이 소스를 작성하였습니다.

그리고 실행을 하게 된다면

결과는 아래처럼 나오게 됩니다.

테스트용 페이지이다보니 다른 에러들이 나오네요.

해당 부분은 숨겨놓았습니다.

콘솔로드만 보시면 되니 해당 부분만 출력을 하게 해놓았습니다.

 

 

 

그리고 var 로 변수를 선언한다면,

var 변수 선언 이전에

사용을 할 수도 있습니다.

이번에는 var 로 선언하기 이전에 먼저 사용을 해보도록 하겠습니다.

<script language="JavaScript">
console.log(vartest);
var vartest = "abcd"
console.log(vartest);
</script>

위와 같이 소스를 작성하였습니다.

vartest를 선언하기 전에 먼저 console.log로 출력을 해주고

그 다음에 선언 및 할당,

출력을 다시 하도록 해놓은 것입니다.

위와 같이 소스를 작성하고

실행을 하게 된다면,

결과는 아래처럼 나오게 됩니다.

 

위처럼 결과가 나오게 됩니다.

변수 선언 전에는 undefined로 나오게 되는 것을

확인할 수 있습니다.

 

 

 

1-2. var 특이점

제 개인적으로 생각하는 var의 제일 특이한 점은

중복 선언이 가능하다는 것입니다.

중복선언이라는게 말만 들으면 잘 이해가 안되실 수 있습니다.

그래서 제가 샘플소스를 만들어 보았습니다.

<script language="JavaScript">
var vartest = "abcd"
console.log(vartest);

var vartest = "aaabbb"
console.log(vartest);
</script>

위와 같이 소스를 작성하였습니다.

var로 vartest라는 변수를 선언하여 console.log로 출력하게 하였습니다.

 

그다음에 다시 var로 선언을 하고,

출력을 하도록 한 것입니다.

 

 

위와 같이 코딩을 한 페이지를

호출하여 실행해 보았습니다.

그랬더니 결과는 아래처럼 나오게 되었습니다.

 

위처럼 에러도 없이 중복선언이 성공하여,

abcd와 aaaabbb가 나와지는 것을

확인할 수 있습니다.

이렇다보니 중복사용을 할 수도 있고,

어디에서 선언, 사용하는 건지 찾기가 힘들 수도 있을 것 같네요.

여러 곳에서 선언을 해도 오류가 발생하지 않으니

유지보수 측면에서 별로 좋지 않을거 같네요.

 

 

 

또한, var의 경우에는 생략도 가능합니다.

별도의 선언 없이 바로 선언, 할당 사용할 수 있습니다.

즉, var 명령어 없이 선언, 할당을 할 수 있다는 것입니다.

실제 사용 예제를 확인해보도록 하겠습니다.

<script language="JavaScript">
vartest = "abcd"
console.log(vartest);

vartest = "aaabbb"
console.log(vartest);
</script>

위와 같이 소스를 작성하였습니다.

var 명령어 없이

vartest라는 변수에 바로 값을 할당한 것입니다.

 

위와 같이 소스를 작성하고

실행을 하게 되면 결과는 아래처럼 나오게 됩니다.

 

위처럼 오류나 에러가 발생하지 않고

정상적으로 실행이 되는 것을

확인할 수 있습니다.

 

 

 

1-3. 사용범위(scope)

저는 주로 사용하는 언어가, 

java, python 등을 주로 사용합니다.

그래서 사용범위라고 할 수 있는 scope는 

대괄호( { } ) 혹은 탭으로 구분을 하여 많이 사용합니다.

그리고 예전에 제가 배웠던, C언어에서도

대괄호( { } ) 기반으로 해서

변수의 사용범위가 선언되었었습니다.

하지만, var의 경우에는 대괄호( { } ) 기준이 아닌, 

function 기준으로 범위가 지정이 되는 것입니다.

이것이 제일 특이하다고 생각을 하게 된 부분이기도 한데

중요한 부분이라서 따로 빼낸 것입니다.

 

이렇게 말로만 하면 뭔가 이해가 잘 안가실 것 같습니다.

그래서 실제 사용 예제를 한번

작성해보았습니다.

<script language="JavaScript">
var vartest = "abcd"
console.log(vartest);

{
	var vartest = "aabbccdd"
	console.log(vartest);
}

console.log(vartest);
consolePrintTest();

function consolePrintTest() {
	var vartest = "aaaabbb"
	console.log(vartest);
}

console.log(vartest);
</script>

위와 같이 소스를 작성하였습니다.

vartest라는 변수를 선언하여 한번 출력하였습니다.

그리고 대괄호( { } ) 안에서 한번 더 선언을 하고,

출력을 해보았습니다.

그 다음 대괄호 이후에 한번 더 출력을 하였습니다.

 

그 다음 consolePrintTest라는 function을 호출하여

그 안에서 vartest라는 변수를 선언, 출력하도록

하였습니다.

 

consolePrintTest라는 함수를 호출한 이후에

한번 더 console.log로 출력하도록 해본 것입니다.

 

제가 기존에 하던 자바의 경우에는

대괄호 안에서는 대괄호 안에서만 사용이 되고,

그 밖으로 나오게 되면 기존 값이 나오게 되는데

javascript에서의 var 로 선언을 했을 때는

어떻게 되는지 확인해보도록 하겠습니다.

 

이렇게 소스를 작성한 것입니다.

그리고 실행을 하게 되면 결과는 아래처럼 나오게 됩니다.

 

위처럼 결과가 나오게 됩니다.

맨 처음에 선언하고 할당한 abcd로 나오게 됩니다.

그리고 대괄호 안에서 새로 선언하고 할당한 값인

aabbccdd로 나오게 됩니다.

대괄호를 나왔는데도 aabbccdd로 나오게 됩니다.

이 부분이 중요한 것입니다.

대괄호를 나왔는데도 값이 유지가 되는 것입니다.

 

그리고 consolePrintTest()라는 function에서

새로 선언을 할당한 값으로 출력이 됩니다.

함수가 종료된 이후에 다시 기존 값으로 출력이 되는 것을

확인할 수 있습니다.

즉, function 안에서 선언한 것은

그 안에서만 사용이 되는 것을 확인할 수 있습니다.

 

 

 

 

 

2. let

이번에는 let에 대해서

정리를 해보도록 하겠습니다.

 

2-1. let 기본 사용방법

let는 ES6(ESMAScript6) 이후에 추가된 변수 선언 방법입니다.

사용 방법은 var와 동일합니다.

var 대신, let로 해서 해주는 것 외에

기본적인 사용방법은 차이가 없습니다.

 

실제 사용 예제를 확인해보도록 하겠습니다.

<script language="JavaScript">
let lettest = "abcd"
console.log(lettest);
</script>

위와 같이 소스를 작성하였습니다.

var 대신 let로 선언을 하였고,

콘솔에 출력하도록만 해 놓은 것입니다.

 

위와 같이 소스를 ㅅ작성하고

실행을 해주면 결과는 아래처럼 나오게 됩니다.

 

위처럼 그냥 나오게 됩니다.

기본적으로는 이렇게 사용을 해주시면 되십니다.

 

 

2-2. 특이점

이번에는 var와의 차이점에 대해서

정리를 해보도록 하겠습니다.

 

2-2-1. 미선언 사용

미선언 사용이란, 선언하지 않고 사용하는 것을 말합니다.

뭐 정식 용어인지는 모르겠고

그냥 제 개인적으로 생각하여 말한 것입니다.

 

아까 var의 경우에는 선언을 하지 않고도

사용을 하였습니다.

undefind로 뜨고, 에러는 발생하지 않았습니다.

하지만 let의 경우에는 에러가 발생합니다.

이 부분을 확인해보도록 하겠습니다.

 

<script language="JavaScript">
console.log(lettest);
let lettest = "abcd"
console.log(lettest);
</script>

위와 같이 작성을 하였습니다.

lettest전에 콘솔로그를 한번

출력하도록 해놓은 것 뿐입니다.

 

 

위처럼 소스를 작성하였고

실행을 하면 결과는 아래처럼 나오게 됩니다.

 

 

에러가 나오는 것을 확인할 수 있습니다.

ReFerenceError가 발생하는 것을

확인할 수 있습니다.

맨 처음에 확인했던 var의 경우에는 에러가 발생하지 않았는데

let로 변수를 선언하는 것이라면,

에러가 발생이 되는 것을 확인할 수 있습니다.

 

at로 더 뒤에 있는데 숨긴건, 제가 개발 테스트용 페이지명입니다.

해당 페이지명이라서 숨겨놓은 것 뿐입니다.

 

 

 

2-2-2. 중복 사용

위 var에서는 중복으로 변수를 선언해서

사용을 할 수 있었습니다.

하지만 let의 경우에는 중복으로 선언을 하게 된다면

Error가 발생하게 됩니다.

 

실제 예제 소스를 한번 확인해보도록 하겠습니다.

<script language="JavaScript">
let lettest = "abcd"
console.log(lettest);

let lettest = "aabbcc"
console.log(lettest);
</script>

위와 같이 소스를 작성하였습니다.

lettest라는 변수를 선언하여 할당, 출력하였습니다.

그리고 다시 선언을 하는 것입니다.

 

 

위처럼 소스를 작성하고 실행을 하게 되면

결과는 아래처럼 나오게 됩니다.

 

 

이번에도 오류가 발생하네요.

이번에는 선언안하고 사용했을 때와는 다른,

SyntaxError가 발생되는 것을 확인할 수 있습니다.

보통 자바나 다른 언어에서와 마찬가지로 보실 수 있을 것 같네요.

이렇게 되어서 중복선언을 막을 수 있습니다.

 

 

 

2-3. 사용범위(scope)

이번에는 사용범위에 대해서

확인을 해보도록 하겠습니다.

var는 function기준으로 나뉘었는데

let은 java나 다른 언어와 마찬가지로 대괄호( { } ) 기준으로

사용범위인 Scope가 정해집니다.

 

실제 사용 예제를 확인해보도록 하겠습니다.

<script language="JavaScript">
let lettest = "abcd"
console.log(lettest);

{
	let lettest = "aabbccdd"
	console.log(lettest);
}

console.log(lettest);
consolePrintTest();

function consolePrintTest() {
	let lettest = "aaaabbb"
	console.log(lettest);
}

console.log(lettest);
</script>

 

아까 위에서 var로 했던 것을

다 let으로 변경한 것 외에는 차이가 없습니다.

 

let로 선언하여 값을 확인하였습니다.

그리고 대괄호( { } ) 안에서 새로 선언 및 할당, 출력하였습니다.

대괄호 밖에서 한번 더 값을 확인하고,

consolePrintTest()라는 함수에서 한번 더 선언, 할당, 출력을 하고

function 종료 후에 한번 더 확인을 하는 것입니다.

 

위와 같이 소스를 작성하였습니다.

그리고 실행을 하게 되면

결과는 아래처럼 나오게 됩니다.

 

위처럼 결과가 나오는 것을

확인할 수 있습니다.

대괄호 안에서 사용을 할 때는, 

대괄호 안에서 할당한 값으로만 되고,

대괄호 밖에서는 기존에 썼던 값으로 되는 것을

확인할 수 있습니다.

그리고 function 안에서도 동일하게 

그 안에서만 사용이 되는 것을

확인할 수 있습니다.

 

 

 

 

 

3. const

이번에는 const에 대해서 정리를 해보도록 하겠습니다.

 

3-1. 사용방법

const는 let과 마찬가지로 ES6(ESMAScript6) 이후에 나온

변수 선언 방식입니다.

그리고 const는 상수를 선언하는 것입니다.

즉, 읽기전용으로 선언하는 것으로

선언을 할 때 할당을 하고

그 이후에는 수정이 안되는 것입니다.

 

실제 사용 예제를 확인해보도록 하겠습니다.

<script language="JavaScript">
const consttest = "abcd"
console.log(consttest);
</script>

위는 consttest라는 변수를 선언하면서 값을 할당하고

console.log에 출력하도록 한 것입니다.

위처럼 소스를 작성하고 실행을 하게 되면

결과는 아래처럼 나오게 됩니다.

위처럼 그냥 abcd라고 할당한 값이 나와지는 것을

확인할 수 있습니다.

 

 

const는 상수로 읽기밖에 안된다고 하였습니다.

변경은 안된다고 하였습니다.

그러면 이번에는 변경을 시도해보도록 하겠습니다.

 

<script language="JavaScript">
const consttest = "abcd"
console.log(consttest);

consttest = "aabbcc"
console.log(consttest);
</script>

위와 같이 소스를 작성하였습니다.

consttest라고 선언하여 할당, 출력하였습니다.

그리고 그 이후에 값을 변경하여 출력하도록 한 것입니다.

 

위와 같이 소스를 작성하고

실행을 하면 결과는 아래처럼 나오게 됩니다.

위처럼 나오게 됩니다.

맨 처음에 abcd로 선언한 값을 정상적으로 나와지는 것을

볼 수 있습니다.

그리고 값변경을 시도하는 과정에서 에러가 발생하게 되는 것을

볼 수 있습니다.

TypeError가 발생이 되는 것을

확인할 수 있습니다.

 

 

 

3-2. 사용범위(scope)

이번에는 사용범위에 대해서 정리를 해보도록 하겠습니다.

const의 scope는 let와 마찬가지로

대괄호( { } ) 기준으로 나뉘어지게 되어있습니다.

 

실제 사용 예제를 확인해보도록 하겠습니다.

<script language="JavaScript">
const consttest = "abcd"
console.log(consttest);

{
	const consttest = "aabbccdd"
	console.log(consttest);
}

console.log(consttest);
consolePrintTest();

function consolePrintTest() {
	const consttest = "aaaabbb"
	console.log(consttest);
}

console.log(consttest);
</script>

위처럼 소스를 작성하였습니다.

let과 동일한데, 변수명과 선언명령어만 변경을 한 것입니다.

 

 

위와 같이 소스를 작성하였습니다.

그리고 실행을 하게되면 결과는 아래처럼 나오게 됩니다.

 

위처럼 나오게 됩니다.

새로 선언을 하여서 할당을 할 때 외에는

변경하는 부분은 없기 때문에

별다른 오류는 없이 위처럼 결과가 나오는 것을

확인할 수 있습니다.

let과 마찬가지로 대괄호 기준으로

변수의 scope가 설정되어서 그 이후에는 기존 값으로 나와지는 것을

확인할 수 있습니다.

 

 

 

 

 

 

4. 정리

이제 맨 위에서도 얘기한 것과 같이

var, let, const에 대해서 

간단하게 정리를 해보도록 하겠습니다.

 

4-1. var

  - 중복선언하여 사용할 수 있다.

  - 선언을 하지 않은 미선언으로도 사용할 수 있다.

  - 사용범위(scope)는 Function 단위이다.

4-2. let

  - 중복 선언 불가하다(단, 사용범위가 겹치지 않을 경우에는 사용이 가능하다)

  - 선언을 하지 않으면 사용할 수 없다.

  - 사용범위(scope)는 대괄호( { } ) 단위이다.

4-3. const

  - 상수로 선언하는 것으로 선언할 때 값을 할당해야 한다.

  - 이후에는 변경이 불가하다.

  - 사용범위(scope)는 대괄호( { } ) 단위이다.

 

 

간단하게 정리를 하면 위처럼 몇주로 요약을 할 수 있을 것 같네요.

간단하게 정리하니 몇줄이 안되는데

상세하게 적으니 말이 엄청 많았네요.

 

 

 

 

제 개인적으로는 var는 쓰지 않는것이 더 좋을 것 같습니다.

제가 알기로는 요즘은 var를 잘 쓰지 않고 있는 것으로 알고있습니다.

그러니 될 수 있으면, let, const로 사용하는 것이 좋을 것 같습니다.

물론, var를 사용하면 안된다. 이것은 잘못된거다라고 할 수는 없습니다.

하지만 var의 경우에는 여러 특이한 사항이 있으니

앞으로의 유지보수 측면에서도 그렇고,

피하는 것이 좋을 것 같다는 생각입니다.

 

 

 

오늘은 자바스크립트에서의 변수 선언 및 사용범위에 대해서

정리를 하였습니다.

javascript에서는 var, let, const로 변수를 선언합니다.

이 3가지의 차이점에 대해서 정리를 하였습니다.

개발을 하시는데 참고하시어 변수를 선언하여 사용해주시면 되실 것 같습니다.

 

 

 

이상으로 javascript에서의 변수선언방식인

var, let, const의 차이점에 대한 정리였습니다~

 

 

 

 

 

 

 

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음