자바스크립트 변수 Var, Let, Const

자바스크립트 변수인 var, let, cont에 대해 좀 더 깊게 알아보겠습니다.

 

1. Var

 

자바스크립트에서 값을 할당하기 위해 사용되는 키워드 중 하나입니다. 자바스크립트를 사용 시 주의해야 할 점은 변수를 선언하고, 값을 할당해야 합니다. 그렇지 않으면, undefined라는 값이 없는 상태의 메시지가 나올 것입니다.

 

아래의 예문과 같이, Name을 선언하고 이후에 "홍길동"이라는 문자열을 Name 변수에 넣어주었습니다. 

마지막 처럼, 변수 선언과 동시에 값을 할당해줘도 됩니다. 필요한 모든 변수는 스크립트 초기에 선언하는 것이 가장 바람직합니다.

var Name;
Name = "홍길동";
var Name = "홍길동;

* 다시 한 번 선언해도 문제가 없습니다!
var Name;

var의 주요 특징은 값의 재선언이 가능하다는 것입니다. 아래와 같이, x에 값을 재할당하면, 값이 최종적으로 0이 되는 것입니다.

var x = "John";
var x = 0;

 

특히 문자열과 숫자가 결합된 값을 할당할 경우, 문자열부터 연산을 시작하여, 결국 결과값이 '문자열'이 된다는 사실에 주의하시기 바랍니다. 아래의 결과 값은 523으로, 타입은 문자열이 됩니다. 숫자 계산에 문자열이 하나 껴있는 경우, 모두 문자열로 취급되기 때문입니다.

var x = "5" + 2 + 3;

하지만, 숫자부터 연산을 시작하고, 문자열이 더해지면, 우선 숫자 먼저 계산이 되고 문자열과 합해집니다. 물론 타입은 문자열입니다. 아래의 결과 값은 55가 됩니다.

var x = 2 + 3 + "5";

var로 변수명을 지을때 시작하는 첫 번째 문자의 규칙은 다음과 같습니다.

1. 영어 A부터 Z까지, a부터 z까지 중 하나

2. $ (문자열로 취급)

3. _(언더스코어)

 

아래처럼, 변수명을 지을 수 있는데, 언더스코어는 잘 사용되지 않지만, 전문 개발자들 사이에서 숨겨진 변수를 처리할 때 변수명으로 주로 사용된다고 합니다.

var hello = "Hello World";
var Hello = "Hello World";
var $ = 2;
var $Money = 5;
var _Name = "John";
var _x = 2;
var _100 = 5;

 

let 키워드에서 나중에 설명하겠지만, let은 블록 스코프이지만, var는 블록 스코프가 아니라는 점을 기억하면 훨씬 쉬울 것입니다. 함수 블록 안에 var를 선언해도, 외부에서 접근이 가능하다는 의미입니다.

{
  var x = "hello";
}

var y = "world";
var word = x + y; //x 변수에 접근이 가능합니다.

블록 밖에서 처음에 값을 선언했다가, 다시 블록 안에서 var 키워드로 변수에 값을 재할당하면, 결국 블록 안의 값으로 최종 값이 결정됩니다. 아래의 예문과 말이죠!

var x = 10;

{
var x = 2;

}

console.log(x) //최종 값은 2입니다.

반응형

2. Let

 

let 변수의 가장 큰 특징은 재선언이 불가하다는 것입니다. 한 번 선언되면 바꿀 수 없기에, 앞으로 바꾸지 않게 될 값인 주민번호, 고유 아이디 값 등에 해당 키워드를 사용하는 것이 좋습니다.

let x = "John";
let x = 0;
// SyntaxError: 'x' has already been declared

자바스크립트(ES6) 이전 까지는, 스코프의 범위가 전역 스코프와 함수 레벨 스코프 밖에 없었습니다. ES7 문법 이후로 새로 도입된 let과 const는 블록 스코프입니다. 블록 스코프는 중괄호{ } 안에 선언된 let, const 변수는 외부에서 접근할 수 없는 스코프입니다.

 

아래와 같이 블록 범위 안에 있는 x변수를 블록 밖에서 사용하지 못합니다.

{
  let x = "hello";
}

let y = "world";
let word = x + y; //x 변수에 접근하지 못하므로 에러입니다.

var와는 반대로 블록 안에 let 키워드로 변수 값을 재할당해도, 블록 밖의 변수 값에 영향을 주지 않습니다. 아래와 같이, 블록 안에 선언된 값 2는 해당 블록 내에서만 유효합니다.

let x = 10;

{
let x = 2;
}

console.log(x) //값은 10입니다.

let은 재선언이 불가능한 변수입니다. 블록 안팎에서 모두 불가하며, var로도 재선언이 불가능합니다.

let x = 2;    //가능
let x = 3;    //불가능

let x = 2;    //가능
var x = 3;    //불가능

{
let y = 2;    //가능
let y = 3;     //불가능
}

{
let z = 2;     //가능
var z = 3;     //불가능
}

let을 블록 밖에서 한 번 선언하고, 같은 변수를 또 다른 여러 블록 안에서 재선언 하는 것은 가능합니다. 하지만, 해당 변수들은 해당 블록 내에서만 유효합니다.

let x = 2;    //블록 밖에서만 유효한 변수

{
let x = 3;    //블록1 안에서만 유효
}

{
let x = 4;    //블록2 안에서만 유효
}

 

코틀린에서 호이스팅에 대한 개념을 배운적이 있었습니다.

호이스팅은 변수에 값을 먼저 할당하고, 선언을 나중에 하는 것입니다.

var는 가능하지만, let은 불가능합니다.

Name = "홍길동";
var Name;

변수에 값을 먼저 할당하고, 변수를 나중에 선언해도 잘 동작함.

Name = "아무개";
let Name;

ReferenceError: Cannot access 'Name' before initialization

 

let 키워드가 작동하는 브라우저는 다음과 같습니다. 인터넷 익스플로러11 이전에는 작동되지 않으니 이점에 유의하시기 바랍니다.

3. Const

 

ES6부터 도입된 const 키워드에 대해 알아야 할 것은 우선, 값의 재할당이 안된다는 부분입니다. 아래 예문과 같이, 한 번 선언되면 그걸로 끝입니다!

const x = 5;
x = 14;      //불가
x = x + 10;   //불가

또한 const는 선언과 동시에 값이 할당되어야 합니다. 선언 후에 값을 할당할 수 없습니다!

const price = 5000; //가능

//불가능
const price;
price = 5000;

const는 언제 사용하는 것이 좋을까요? 일반적으로 값이 변경될지 모르는 경우에는 const를 사용해서 변수를 선언합니다. 객체와 배열에서도 const 키워드를 사용할 수 있습니다. 이때, 요소의 값을 변경하거나 추가할 수 있으나, 새로운 객체나 배열로 재선언할 수는 없습니다.

//const 배열
const fruits = ["apple", "banana", "pear"];
fruits[0] = "orange";
fruits.push("strawberry");

//const 객체
const car = {type:"Fiat", model:"500", color:"white"};
car.color = "red";
car.owner = "Johnson";

const의 스코프는 let과 동일하게 블록 스코프입니다. 이와 관련된 내용은 let부분을 다시 살펴보시기 바랍니다.

const를 var, let 등과 혼용해서 선언이 불가능하며, 같은 블록 내에서 재선언 또한 불가능합니다.

var x = 2;     //가능
const x = 2;   //불가능

{
let x = 2;     //가능
const x = 2;   //불가능
}

{
const x = 2;   //가능
const x = 2;   //불가능
}

블록 밖에서 const를 선언하고, 새로운 블록들 내에서 새로운 const를 선언하는 것은 가능합니다.

const x = 2;       //가능

{
  const x = 3;   //가능
}

{
  const x = 4;   //가능
}

호이스팅의 경우, 먼저 값을 할당하거나 사용한 다음에 const를 선언하는 것이 불가능합니다.

//불가능
alert (Name);
const Name = "홍길동";

이렇게 세 종류의 자바스크립트 변수 선언 키워드에 대한 설명을 마치겠습니다.