[Javascript, ES6] var, const, let 차이

var, const, let 차이

var, const, let은 javascript 코드를 보다 보면 자주 보게 되는 변수 선언 방법입니다.

그렇다면, 이 세가지 변수 선언 방법에는 어떤 차이가 있을까요?

const, let은 ES6(ECMAScript6)의 문법이고, 

var는 ES6이전의 문법입니다.

그럼 이 세가지 변수 선언 방법의 차이점에 대해서 더 자세히 알아보죠.

1. var

es6 이전의 변수 선언 방식입니다.

'var'는 매우 유연한 방식으로 변수를 선언할 수 있는 방법입니다.

그렇지만, 몇 가지 문제점을 가지고 있기도 합니다.

(1) scope

function 단위의 scope을 가집니다.

See the Pen js example by anna (@hianna) on CodePen.

위의 예를 보면 'hello'라는 변수의 유효범위가 function 내라는 것을 알수 있죠?

var는 {} 단위의 scope이 아닌 function 단위의 scope을 가집니다.

See the Pen js example by anna (@hianna) on CodePen.

위의 예제를 보면

if절 내부에 hello를 변수를 새로 선언했지만, var로 선언한 변수의 scope은 {}가 아닌 function이기 때문에

hello 변수이 {} 바깥에서도 변경된 것을 볼 수 있습니다.

보통의 프로그래밍 언어들이 가지는 변수 scope과는 좀 달라서 헷갈리죠?

(2) 이런것도 가능합니다.

See the Pen js example by anna (@hianna) on CodePen.

같은 변수를 두번 선언했는데도, 오류가 나지 않고 잘 동작합니다.

이런식의 유연한 변수 선언 방식은 편리하기도 하지만,

많은 오류를 발생시키기도 했습니다.

그래서, ES6에는 다음의 const와 let이라는 변수 선언 방법에 추가되었습니다.

2. const

(1) 상수를 선언합니다.

const는 'constance'의 약자입니다.

한번 선언된 상수는 다시 재정의 할 수 없습니다.

See the Pen js example by anna (@hianna) on CodePen.

상수로 선언한 hello의 값을 변경하려고 하니 에러가 발생하네요.

(2) scope은 {}블록입니다.

See the Pen js example by anna (@hianna) on CodePen.

괄호 안에 hello를 선언했지만, const의 scope은 괄호 블록 안이기 때문에

괄호 바깥에 hello 상수를 또 선언할 수 있습니다.

3. let

(1) 변수를 선언합니다.

let으로 선언하면 값을 재정의 할 수 있습니다.

See the Pen js example by anna (@hianna) on CodePen.

(2) scope은  {}입니다.

const와 마찬가지로 scope은 괄호 변수입니다.

See the Pen js example by anna (@hianna) on CodePen.

(3) var처럼 같은 변수를 두 번 선언하는 것은 불가합니다.

See the Pen js example by anna (@hianna) on CodePen.

ES6에서는 var보다는 const와 let을 사용해서 좀 더 명확한 코드를 만들어 내는 것을 권장합니다.