JavaScript - 변수와 상수 ( let , const , var 차이 )

변수 ( let )

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’, 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수이다.

 

자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

let message; // 'message'라는 이름을 가진 변수를 선언
message = 'Hello'; // 할당연산자 = 를 사용해 변수 안에 문자열 'Hello' 를 저장

console.log(message); // Hello 출력

message = 'World!'; // message 변수의 값을 World! 로 변경

console.log(message); // World! 츨력

변수에 원하는 값을 넣고 원하는 만큼 값을 변결할 수도 있다. 값이 변경되면, 이전 데이터는 변수에서 제거된다. 

 

변수를 두 번 선언하면 에러가 발생한다.

let message = "This";

// 'let'을 반복하면 에러가 발생한다.
let message = "That"; // SyntaxError: 'message' has already been declared

따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 한다

 

상수 ( const )

변화하지 않는 값을 선언할 땐 const를 사용한다.

const로 선언한 변수를 '상수(constant)'라고 부른다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언해야한다.

 

오래된 변수 ( var )

var로 선언한 변수는 let으로 선언한 변수와 유사하다. 대부분의 경우에 let을 var로, var를 let으로 바꿔도 큰 문제 없이 동작한다.

하지만 var는 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작한다. 근래엔 var를 쓰지 않아서 이를 만나는 건 흔치 않은 일이지만..

 

var 특성 1. var는 블록 스코프가 없다.

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

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

if (true) {
  let test = true; // 'let'으로 변수를 선언함
}

alert(test); // Error: test is not defined

var는 코드 블록을 무시하기 때문에 test는 전역 변수가 된다. 전역 스코프에서 이 변수에 접근할 수 있다.

var test가 아닌 let test를 사용했다면, 변수 test는 if문 안에서만 접근할 수 있다.

 

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

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

반복문에서도 유사한 일이 일어난다. var는 블록이나 루프 수준의 스코프를 형성하지 않기 때문이다.

 

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

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다.

위에서 살펴본 바와 같이, var는 if, for 등의 코드 블록을 관통한다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문이다. 

 

var 특성 2. var 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리 된다.

var 선언은 함수가 시작될 때 처리된다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리된다.

함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용된다).

따라서 아래 두 예제는 동일하게 동작한다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

코드 블록은 무시되기 때문에, 아래 코드 역시 동일하게 동작한다.

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부른다. var로 선언한 모든 변수는 함수의 최상위로 ‘끌어 올려지기(hoisted)’ 때문이다

바로 위 예제에서 if (false) 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않는다. if 내부의 var 는 함수 sayHi의 시작 부분에서 처리되므로 (*)로 표시한 줄에서 phrase는 이미 정의가 된 상태인 것이다.

 

선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다.

function sayHi() {
  alert(phrase); // undefined

  var phrase = "Hello";
}

sayHi();

 

변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용된다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.  ex ) myVeryLongName

달러 기호 '$' 와 밑줄 '_' 은 일반 글자처럼 특별한 의미를 지니진 않는다.

 

변수명에서 대/소문자를 구별하여 apple와 AppLE은 서로 다른 변수이다.

 

예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문이다. ex ) let, class, return, function

 

바람직한 변수명

변수에 관한 매우 중요한 사실이 한 가지 더 있습니다.

변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠.

변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다. 변수명만 슬쩍 봐도 초보자가 코드를 작성했는지, 노련한 개발자가 작성했는지 알 수 있습니다.

실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보냅니다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있습니다. 다시 말해, 변수가 올바른 이름을 가졌을 때 말이죠.

그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 숙고해 주시기 바랍니다.

아래는 변수 명명 시 참고하기 좋은 규칙입니다.

 

• userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요.
• 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요.
• 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
• 자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.

간단해 보이나요? 그렇게 보이긴 합니다. 그러나 실전에서 서술적이고 간결한 변수명을 짓는 것은 간단하지 않습니다. 그럼, 화이팅!

 

* 재사용 아니면 새로 만들기?

개발자 중에는 새로운 변수를 선언하기보다 기존 변수를 재사용 하는 걸 선호하는 게으른 분들이 있습니다.

재사용된 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같습니다. 상자 안에는 무엇이 들어 있을까요? 내용물에 대한 정보를 알고 있는 사람은 누구인가요? 이를 알기 위해선 상자에 가까이 다가가 확인해야만 합니다.

변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 합니다.

변수를 추가하는 것은 악습이 아닙니다. 좋은 습관입니다.

모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다. 변수를 추가한다고 해서 성능 이슈가 생기지 않죠. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있습니다.

요약

var, let, const를 사용해 변수를 선언할 수 있다. 선언된 변수엔 데이터를 저장할 수 있다.

• let – 모던한 변수 선언 키워드이다.
• var – 오래된 변수 선언 키워드이다. 잘 사용하지 않는다. 
• const – let과 비슷하지만, 변수의 값을 변경할 수 없다.

변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.

 

var로 선언한 변수는 let이나 const로 선언한 변수와 다른 두 가지 주요한 특성을 보인다.

1. var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖는다.
2. var 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리된다.

var만의 특성은 대부분의 상황에서 좋지 않은 부작용을 만들어낸다. let이 표준에 도입된 이유가 바로 이런 부작용을 없애기 위해서다. 변수는 블록 레벨 스코프를 갖는 게 좋으므로 이제는 let과 const를 이용해 변수를 선언하는게 대세가 되었다.