[React] Javascript 기본 - 변수와 상수

과거의 자바스크립트에서는 var를 이용해 변수를 선언하였다. 그러나 var를 사용하게 되면 몇가지 문제 상황이 발생하여 let, const 사용을 권하고 있다. 그렇다면, let과 const는 각각 어떠한 역할을 하는지 알아보자.

let

값이 변할 수 있는 데이터 공간. 즉, 변수를 저장할 수 있게 한다.

let age = 25;
console.log(age);

age = 30;
console.log(age);

const

일정한 값을 저장하는 데이터 공간. 즉, 변하지 않는 상수를 의미한다.

상수는 한번 선언된 이후, 새롭게 할당할 수 없다. 할당하고자 한다면 에러가 발생한다.

const name = '희원';
name = '예지'; // -> TypeError: "name is read-only"

그러나 객체 내에서의 변수값 변경은 가능하다. 이 내용은 이후 글에서 다루도록 하겠다.

변수명 규칙

이러한 변수를 지정하는 그 명칭에는 몇가지 규칙이 존재한다.

1. 변수에는 기호를 사용할 수 없다. (_$ 제외)
2. 반드시 숫자가 아닌 문자로 시작해야한다.
3. 예약어로 변수를 만들 수 없다. (if, for ...)

let v.s. var v.s const

그렇다면 이전에 사용되었던 var과는 어떤 차이점이 있을까?

	let	const	var
재선언	X	X	O
재할당	O	X	O
스코프	블록-레벨	블록-레벨	함수-레벨
호이스팅	불가능	불가능	가능

Problem1. var는 재선언이 가능해요!

만약 재선언이 가능하다면,
1000줄이 넘는 코드에서 똑같은 이름을 가진 변수가 다시 선언되었을 경우, 에러를 보여주지 않아 문제가 발생할 수 있다.

var height = 160;
console.log(height);

var height = 180;
console.log(height);

-> 동일한 변수를 두번 선언했음에도 해당 코드는 잘 동작한다! :(

Problem2. var는 함수-레벨 스코프예요!

const, let은 블록-레벨 스코프이다.

그러나 var는 함수-레벨 스코프이기 때문에, if문 안에서 선언된 변수도 if문 밖(블록스코프 밖)에서 접근할 수 있다.

if (true) {
  var test = true;
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

뿐만 아니라, for문에도 동일하게 작용된다.

for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.

이런 var의 특징은 특정 지역변수를 전역변수화시키는 문제가 발생하게 한다.

Problem3. var는 호이스팅이 가능해요!

Hoisting(호이스팅) 이란, 변수가 최상단으로 끌어올려지는 현상을 의미한다. (hoist는 끌어올리다라는 뜻이 있다.)
var로 변수를 선언할 경우, 선언이 호이스팅이 되어 에러를 발생시키지 않는다.

function sayHi() {
  phrase = "Hello";
  alert(phrase);
  var phrase;
}
sayHi();

그러나, 할당은 호이스팅되지 않기 때문에 만약 할당되기 전이라면 undefined가 변수에 담길 것이다.

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

참고 페이지

오래된 var