Javascript const, let, var

📖 const | 상수

✍

const address = "Yongsan-gu, Seoul";

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

🧐 대문자 상수

변수를 별칭으로 사용할 수 있으며 이런 상수는 대문자와 밑줄로 구성된 이름을 사용한다.
✍

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용
let color = COLOR_ORANGE;
alert(color); // #FF7F00

대문자로 상수를 만들어 사용하면 다음과 같은 장점이 있다.

COLOR_ORANGE는 "#FF7F00"보다 기억하기 쉽다.
COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률 낮다.
COLOR_ORANGE가 #FF7F00보다 유의미하므로, 코드 가독성이 증가헌다.

그렇다면 언제 일반적인 상수를 사용하고, 언제 대문자를 사용 하는 걸까?

'상수’는 변수의 값이 절대 변하지 않음을 의미한다.
그중에는 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.
쉽게 말해 대문자 상수는 ‘하드 코딩’ 값의 별칭을 만들 때 사용하면 된다.

---

📖 let | 변수

✍

let message = "Hello";
alert(message);	// Hello

let 키워드를 사용해 변수(variable)를 생성하고
이는 데이터를 저장할 때 쓰이는 ‘이름 붙은 저장소’ 가 된다.

한 줄에 여러 변수를 선언하는 방법
✍

let user = 'Kazama', age = 21, message = 'Hello';

이렇게 작성하면 코드가 좀 더 짧아 보이지만 권장하는 방법은 아니고
가독성을 위해 한 줄 하나의 변수를 작성하는 것이 좋다.
✍

let user = 'Kazama';
let age = 21;
let message = 'Hello';

🧐 변수 명명 규칙

Javascript에선 변수 명명 시 두 가지 제약 사항이 있다.
첫째. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
둘째. 첫 글자는 숫자가 될 수 없다.

✍

let userName;
let test123;
let $ = 1;
let _ = 2;

여러 단어를 조합하여 변수명을 만들 경우 카멜 표기법(camelCase)이 흔히 사용되는데 각 단어의 첫 글자를 대문자로 작성하는 것이다. ex)userLongName

📌 대·소문자 구별 : apple와 AppLE은 서로 다른 변수이다.
📌 비 라틴계 언어도 변수명에 사용할 수 있지만 권장하지 않는다.
📌 예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없다.
📌 use strict 없이 할당하기. 변수는 대개 정의되어 있어야 사용할 수 있다.

---

📖 var | 변수

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

var message = "Hello";
alert(message);	// Hello

하지만 var는 초기 Javascript 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작한다.

🧐 var는 블록 스코프가 없다.

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

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

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

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

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

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

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

🧐 var는 변수의 중복 선언을 허용합니다

let은 한 스코프에서 같은 변수를 두 번 선언하면 에러가 발생한다.
✍

let name;
let name;	// Uncaught SyntaxError: Identifier 'name' has already been declared

var는 같은 변수를 여러 번 중복으로 선언할 수 있다. 하지만 이미 선언된 변수에 var를 사용하면 두 번째 선언문은 무시된다.
✍

var name = "Peter";
var name = "Ted";	// 이 행의 var 는 아무것도 하지 않는다
					// ...에러 또한 발생하지 않습니다.
alert(user);	// Ted

🧐 선언하기 전 사용할 수 있는 var

var 선언은 함수가 시작될 때 처리되고 전역에서 선언한 변수라면 스크립트가 시작될 때 처리된다.
함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됨)
✍

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

  alert(phrase);
}
sayHi();

아래와 같은 방식도 위와 동일하게 인식한다.
✍

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

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

🧐 즉시 실행 함수 표현식

과거엔 var만 사용할 수 있었는데 var의 스코프는 블록 레벨 수준이 아니다.
그래서 개발자들은 var도 블록 레벨 스코프를 가질 수 있게 여러가지 방안을 고려하게 되고 이때 만들어진 것이 📌'즉시 실행 함수 표현식(immediately-invoked function expressions)'이다. 즉시 실행 함수 표현식은 IIFE 라고 부르기도 한다.
✍

// IIFE를 만드는 방법
(function() {
  alert("함수를 괄호로 둘러싸기");
})();

(function() {
  alert("전체를 괄호로 둘러싸기");
}());

!function() {
  alert("표현식 앞에 비트 NOT 연산자 붙이기");
}();

+function() {
  alert("표현식 앞에 단항 덧셈 연산자 붙이기");
}();

위와 같은 방법을 사용하면 함수 표현식처럼 인식되어 바로 실행이 가능하다. 하지만 일반적인 Javascript 에서는 이렇게 코드를 작성할 필요가 없다.
var만의 특성은 대부분의 상황에서 좋지 않은 부작용을 만들어 부작용을 없애기 위해 let이 표준에 도입이 되었다.
변수는 블록 레벨 스코프를 갖는 게 좋으므로 이제는 let과 const를 이용해 변수를 선언하는 게 대세가 되었다.

---

📖 정리

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

const – let과 비슷하지만, 변수의 값을 변경할 수 없다.
let – 일반적인 변수 선언 키워드.
var – 오래된 변수 선언 키워드. 지금은 잘 사용하지 않는 추세이다.

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