[JS] 자바스크립트 변수와 상수- var, let, const

 

​

 

 

가장 기본이 되는 자바스크립트의 변수 별 특징과 식별자 명명 규칙에 대해 정리하자.

​

​

암시적선언

: 자바스크립트에서 제공하는 변수 선언 키워드인 var, let, const 키워드를 사용하지 않고 변수를 선언함.

아래와 같이 그냥 변수와 할당값을 선언해버린다.

(자바스크립트에서 권장하는 방식은 아님.)

 

암시적 선언

명시적선언

:  const, let, var 키워드를 사용하여 변수를 선언함.

 

명시적 선언​

​

---

 

​

 변수

 

:변하는 수

 

- 변수의 식별자를 지정하는 행위 = '변수를 선언한다.' 라고 한다.

- = 우변에 있는 값을 변수 공간에 대입하는 것 = '값을 할당한다.'

 

var num = 10 + 20 ; 

키워드 식별자 연산자 표현식 예시

​

 

 

​

 변수선언키워드

 

자주 사용되는 키워드에는 let , const , var 가 있다.

각각의 키워드는 각각 다른 유효범위와 호이스팅의 특징을 가지기 때문에 키워드 별로 특징을 명확하게 이해하는 것이 중요하다.

 

 

먼저 let 키워드부터 알아보자.

 

 

1. let

 

- 변수의 중복 선언 불가 (var 키워드는 중복선언 가능)

- 변수에 할당된 데이터값을 변경할 수 있음.

- 호이스팅 되지않음.

 

let은 중복선언이 불가능하기 때문에, 코드를 이용하는 개발자의 입장에선 안정성있는 변수선언키워드이다.

다음에 var키워드를 정리할 때 언급하겠지만, let 키워드와 달리 var키워드는 같은 변수 num을 계속해서 선언할 수 있다.

ex) var num = 10 + 20;

var num = 50;

​

let을 중복 선언하자 오류뜸

 

'호이스팅 되지 않음'

 

호이스팅(hoisting)

: var 키워드로 변수 선언하고 할당했을 때 (어디에 선언했느냐에 상관없이 항상)

변수 선언을 자바스크립트의 스코프 맨 위로 올려 실행하는 것.

​

---

​

​ 2. var

 

- ​var 키워드는 자바스크립트의 초창기 변수 선언 키워드이다. 

- 변수 중복 선언 가능 (이미 같은 이름의 변수가 선언되었어도 다시 그 변수의 값을 재할당 할 수 있음.)

- 따라서 다른 개발자들과 협업할 때 오류가 발생할 수 있음. . 

​

---

 

3. const

- 재할당 안되는 특징 때문에 상수 변수를 선언할 때 사용하는 키워드라고도 함.

- 변수의 중복 선언 불가

- 변수에 할당된 데이터값 변경 불가 (선언을 먼저하고 나중에 해도 오류남.)

 

​

const 에 중복 선언하자 오류뜬 모습

 

Q. 그렇다면 const 키워드와 let 키워드는 중복 선언이 불가한 키워드라는 점에서 같은 키워드일까?

A. 아니다. 

 

+ A. 기존에 변수를 선언하고, 해당 변수에 다른 데이터값을 재할당 할 수 있는 let과 달리,

const 키워드는 상수 변수에는 할당할 수 없다는 에러가 뜬다.

let키워드 예시

중복 선언 가능한 let (다른 데이터값을 재할당 ㅇ)

 

 

​

---

​

​

식별자 명명규칙

 

1. 카멜 케이스(camelcase)

- 단어의 첫 글자는 소문자, 연결된 단어의 첫 글자는 대문자로 작성함.

ex) firstName, lastName

​

2. 변수 이름

- 숫자로 시작 ( x )

-  _ , $ , 문자로만 시작함 ( ㅇ )

​

3. 상수나 축약어는 대문자와 스네이크 방식으로 작성함

- 스네이크 방식 : _ 언더바로 연결

ex) const HTML = "Hyper Text Markup Language";

const MAX_LEVEL = "99";

​

4. 몇몇 식별자는 예약어여서 변수나 함수 이름으로 사용할 수 없다.

- var, let, const, typeof, name, class, extends, import, super 등등...

​

ex) Const var = 10; ( x )

​

abstract arguments boolean break byte case catch char class*

const continue debugger default delete do double else enum*

eval export* extends* false final finally float for function goto

if implements import* in instanceof int interface let long native

new null package private protected public return short static super*

switch synchronized this throw throws transient true try typeof var

void volatile while with yield

: // *는 ES6에서 추가된 예약어

​

​

​

​

​

​