Javascript | var, let, const 알아보기

 

1. 들어가기 

이번에 새롭게 오픈하는 파일럿 서비스에서 같이 일하는 개발자 분과 JQuery를 걷어내자고 이야기가 나와서 순수 스크립트인 '바닐라스크립트'에대해서 공부하면서 프로젝트를 진행해보려고 한다. 아마 전체적으로 프로젝트가 제이쿼리를 사용 중이지만 몇 군대 걷어내고 있어서 조만간 대체가 될 것 같다. 아마 부분적으로는 제이쿼리를 사용하지만 나머지 걷어낼 수 있는 부분들은 걷어내기로 했다. 

 

처음으로 마주한게 var를 대체할 const, let이라는 개념인데 ECMA6부터 사용되고 있는 변수이다. 

 

2. var

ECMA6 전 const와 let의 개념이 생기기전에는 우리는 변수를 선언할 때 var를 사용했다. var에서 가장 큰 특징은 중복 선언이 가능하다는 점이다.  var는 유연한 변수 선언이라고 볼 수 있지만, 무분별한 중복 선언은 데이터의 변질의 위험성이 켜서 단점으로 여겨졌다. 이를 보안하기 위해서 나온 개념이 const, let이다. 

var num = 100;
console.log(a) // 결과값 100

var num = 200;
console.log(a) // 결과값 200

var num = 300;
console.log(a); // 결과값 300;

 

3.const

const는 상수를 선언하는 키워드이다. 변수명을 중복으로 선언할 경우 에러가 발생되고, 선언된 변수에 값을 재 할당을 해도 에러가 발생한다. 처음에 선언하고 나서는 다른 값으로 변경이 불가능 하다. 그래서 보통은 변경되지 말아야 하는 값을 const로 선언을 하면 된다. 

const num = 100;
console.log(num); // 결과값 100

const num = 200; // 중복선언 불가 : 에러발생
console.log(num); // Uncaught SyntaxError: Identifier 'num' has already been declared 

num = 300; // 값을 재할당 하는것 불가 :  에러발생
//VM565:3 Uncaught TypeError: Assignment to constant variable.

 

4. let

let은 const와 달리 변수명을 중복으로 선언은 불가하지만, 값의 재할당은 가능하다. 

let num = 100;
console.log(num); // 결과값 100

let num = 200; // 중복선언 불가 : 에러발생
console.log(num); // Uncaught SyntaxError: Identifier 'num' has already been declared 

num = 300; // 값을 재할당 가능 : 결과값 300

 

5. var, let, const 차이점 

var는 함수 레벨 스코프, let과 const는 블록레벨스코프라고한다. 

함수 레벨 스코프(Function-level Scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

블록 레벨 스코프(Block-level Scope)
모든 코드 블록(함수,if문,for문,while문,try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

참고

https://velog.io/@hyoniii_log/%ED%95%A8%EC%88%98-%EB%A0%88%EB%B2%A8%EB%B8%94%EB%A1%9D-%EB%A0%88%EB%B2%A8-%EC%8A%A4%EC%BD%94%ED%94%84

[JavaScript] 함수 레벨,블록 레벨 스코프

 

 

6. 마무리 

 var를 지금까지 편하게 써왔던 나인데.. const와 let의 개념을 접하고 나서부터 확실히 용도가 분리되니, 코드도 데이터 사용도 깔끔하게 바뀌었다. 간혹 중복된 변수명으로 데이터 값이 덮어 씌워지기도 하고 그랬는데, 그런 중복의 위험성이 사라지니 한결 안정한 코딩이 되었다.  

let -  변수의 값을 재할당 해야 된다면 사용 
const - 변수의 값을 재할당이 있으면 안 된다면 사용 

 

 

---

참고

https://heinafantasy.com/153

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