바닥코딩

var, let, const 본문

JavaScript/vanilla js

var, let, const

개발공부개발공부 2020. 7. 12. 13:32

 JS의 변수 선언 방식

  먼저 블로그 바닐라 js 포스팅에서는 별도의 문법(일반적인 조건문 , 반목문, 객체 예외처리 ... 등등) 에 대한 내용은 다루지 않을 것입니다.  js 의 문법체계는 다른 언어와 큰 차이가 없습니다 (물론 다른 언어도 마찬가지 이긴 하지만요) 하지만 다른 언어와 차별이 되는 독작적인 특성들과 같은 경우에는 특정 언어를 사용하는데 있어 중요한 요소로 작용하기 떄문에 이와 같은 내용들에 대해선 내용을 다뤄보려고 합니다.

 보통 우리가 알고 있는 익숙한 언어들과 같은경우 변수를 선언하는데 있어 자료형으로 변수의 특성을 구분해 줍니다 예를 들어 정수형은 int , 문자열은 String  이런식으로 말이죠 그렇지만 JS와 같은 경우 변수를 선언하는데 있어교적 익숙하지 않은 자료형을 선언합니다. var, const, let 이런 자료형이 이에 해당하죠 

 이런식으로 변수를 사용하는 이유를 살펴보자면 먼저 , 타입과 언어의 동장방식의 상관간계에 대해서 이해가 필요합니다 일반적으로 우리가 많이 알고 있는 c/c++/java/c# 이러한  컴파일 언어들은 컴파일 시 변수의 타입을 지정합니다. 그렇기 때문에 타입에 대한 명시가 제대로 이루어져 있지 않다면 에러를 방생시킵니다 그와 반대로 JS/Ruby/python 과 같은 동적 인터프리터 방식과 같은 경우 프로그램의 실행단계에서 이를 결정하기 때문에 별도의 타입 결정을 해준다거나 에러를 발생 시키지 않습니다.

 

https://dkkim2318.tistory.com/65

 

컴파일 언어 vs 인터프리터 언어

컴파일 언어   개발을 하거나 공부를 하답면 다들 컴파일이라는 말을 많이 들어 봤을 것입니다 컴파일은 사전적인 의미로는 프로그밍 언어로 작성된 문서를 다른 프로그래밍 언어로 바꾸는 과�

dkkim2318.tistory.com

 

 하지만 이와 같은 경우 치명적인 단점들이 잇는데 실행도중 타입 에러를 발생시키는 경우와 스코프 문제로 인해 다른 변수를 참조하는 경우가 존재합니다(스코프 관련해서는 다음 포스팅에 상세하게 표현 하겠습니다) 이런한 문제들을 어느정도 해소하기 위해(특히 스코프) js와 같은경우 타입을 명시 하지 않아도 변수 선언이 가능하지만 변수 선언시 키워들를 붙이는 것을 권장하고 있습니다. 그 키워드가 위에서 언급했던 var, const, let 과 같은 경우 입니다

 

var

 var 과 같은경우 JS에서 가장 많이 사용하는 변수의 선언방식입니다. 예제를 통해 알아 보겠습니다

var name="kim-dong-kyu";
console.log(name);

 이러한 코드가 있다고 가정했을 때 해당 코드는 kim-dong-kyu 라는 문자열을 콘솔에 출력해줍니다. 타입을 String으로 명시해 주지 않아도 자동으로 name이라는 변수에 문자열이 들어왔기 때문에 문자열 타입의 변수 지정이 가능합니다. 하지만 var과 같은 경우 아래와 같은 특징이 있습니다

var name="kim-dong-kyu";
console.log(name);

var name = "dkkim";
console.log(name);

 위와 같은 코드는 다른 언어들과 같은 경우엔 일반적으로 에러를 발생시킵니다. name이라는 변수를 재 선언 했기 때문에 변수에대한 정의가 모호해지기 땜문이죠, 그렇지만 var과 같은경우 에러를 발생기키지 않습니다 이것이 var이 가진 특성입니다 

이 특징은  유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있습니다. 같은 이름의 변수가 어떤 영역에서 어떻게 사용되는지 정확히 파악하기가 힘들기 때문에 var과 같은 경우에 단점이 발생하게 되는데 ES6 표준에서 이를 보안하기 위해 만든 키워드가 바로 let, const 입니다

 

let

 

let name= "kim-dong-kyu";
console.log(name);

let name ="dkkim"
console.log(name);

 위와 같은 예제에서 var 키워드만 let으로 바꿔 보았습니다 해당 코드는 var과 달리 에러를 발생시킵니다 그렇지만 다른 언어들과 같이 재할당은 가능합니다 

let name ="dkkim"
console.log(name);

name = "dk";
console.log(name);

 해당코드와 같은 경우에는 에러를 발생시키지 않습니다 name 이라는 변수에 dk라는 새로운 문자열이 할당 됩니다 

 

const

const는 let과 유사합니다 하지만 다른점이 하나 있는데 const와 같은 경우는 재할당 또한 불가능하다는 점에 있습니다

const name = "kim-dong-kyu";
console.log(name);


const name ="dkkim";
console.log(name);

name="dk";
console.log(name);

let과 마찬가지로 name에 대한 재정의가 이루어 졌을 때 var와 달리 에러를 발생시킵니다 그렇지만 let 과 달리 name에 대한 재정의를 했을 경우 에러를 발생시킨다 const와 같은경우 상수에 의미로 단 한번만 정의가 가능하며 이후에 이를 재할당 하거나 재정의가 불가능 하다는 특성이 있다.

'JavaScript > vanilla js' 카테고리의 다른 글

클로저  (0) 2021.03.15
자바스크립트 스코프(scope)  (0) 2020.07.25
바닐라 JS란 무엇인가  (2) 2020.06.06
컴파일 언어 vs 인터프리터 언어  (0) 2020.05.25
자바 스크립트  (0) 2020.05.25