Programing/JavaScript

javascript var, let, const 의 차이, 차이점

리커니 2017. 12. 4.
반응형

javascript var, let, const 의 차이, 변수선언 방법

 

 

이전의 javascript 에서는 var 를 사용하여서만 변수를 선언했습니다.

하지만 이는

 

1. 변수의 재선언 시에나

2. 호이스팅과 같은 자바스크립트의 특성에서

 

몇몇 문제점을 야기했죠.

 

그래서 이러한 문제점을 보완하기 위해 ECMAScript 6 에서 나온 것이

 

constlet 입니다.

 

이것은 둘다 재선언이 불가능 합니다.

간단한 예를 보도록 하죠.

 

1
2
3
4
5
6
var name = '이건'
console.log(name);
var name = 'Geon Lee';
console.log(name);
name = '';
console.log(name);
cs

 

위와 같이 var로 선언된 경우 아무 문제 없이 console이 실행됩니다.

하지만 하나를 const, let으로 변경할 경우 아래와 같은 에러가 발생하게 됩니다.

 

SyntaxError: Identifier 'name' has already been declared

 

이미 'name' 은 선언되었다 이죠.

이처럼 const와 let은 재선언이 불가능 하기 때문에 변수의 중복으로 인한 문제를 원천적으로 막아줍니다.

 

그럼 const 와 let 의 차이는 무엇일까요?

앞에서 말씀드린데로 우선 둘은 재선언이 불가합니다.

하지만 let은 재할당은 가능합니다. const는 이조차도 안돼죠.

 

예를 들어,

 

1
2
3
4
let name = '이건'
console.log(name);
name = 'Geon Lee';
console.log(name);
cs

 

이렇게는 가능하지만,

 

1
2
3
4
const name = '이건'
console.log(name);
name = 'Geon Lee';
console.log(name);
cs

 

이렇게 작성 시

 

TypeError: Assignment to constant variable.

 

이런 에러가 발생하게 됩니다.

const는 이처럼 값의 변경이 없는 상수값에 사용하게 됩니다.

당연히 const는 선언과 동시에 할당을 해주어야겠죠?

 

 

 

그럼 var와 let, const의 또다른 차이점을 보도록 하죠.

그것은  scope의 차이 입니다.

기존에 var만 사용할 때에 변수의 scope를 정할 때는 function을 사용하였습니다.

 

1
2
3
4
5
6
7
8
var name = '이건';
 
(function(){
  var name = 'Geon Lee';
  console.log(name);
})();
 
console.log(name);
cs

 

위의 코드의 결과는

Geon Lee

이건

 

입니다.

 

즉시 실행함수가 먼저 실행되어 함수 내에 var로 선언된 name이 실행되고

그 다음 전역변수로 선언된 name이 실행되게 되죠.(line 8)

 

이처럼 변수의 유효범위가 함수가 되는 것을 Function-scope라 합니다.

 

 

하지만 let과 const의 유효범위는 block이 됩니다.

 

1
2
3
4
5
6
7
8
let name = '이건';
 
{
  let name = 'Geon Lee';
  console.log(name);
}
 
console.log(name);
cs

 

위에서 let은 재선언이 불가능 하다고 했었죠? 하지만 위와 같이 block을 지정해주면

이는 각각의 scope를 갖게 됩니다. 이를 block-scope라 합니다.

 

참고로 const의 경우 상수의 경우만 사용이 가능하지만,

배열이나, 객체, 함수의 경우 해당 요소내의 값들을 수정할 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
const numArray = [1,2,3];
numArray.push(4);
console.log(numArray); //[1,2,3,4]
 
const obj = {
  name : "node.js",
  version : "8.9.1"
}
obj.esVersion = 6;
console.log(obj);   //{ name: 'node.js', version: '8.9.1', esVersion: 6 }
cs

 

var, let, const 는 같은 변수를 선언하는 명령어이지만,

차이점이 존재합니다.

var는 let과 const 보다 속도적인 면에서도 많이 느리다고 하더군요.

 

var는 왠만하면 사용하지 말고, let과 const를 각각의 용도에 맞게 사용하는 것이

어플리케이션의 품질을 향상 시킬 수 있을 것 같습니다.

 

반응형

댓글

💲 추천 글