var, let, const를 설명하기 (모던 자바스크립트)

변수와 상수 (JAVASCRIPT.INFO)

변수와 상수

 

var, let, const ─ 변수와 상수

 

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작합니다.

 

예를 들어,

 

1. 온라인 쇼핑몰 ─ 판매 중인 상품이나 장바구니 등의 정보

2. 채팅 애플리케이션 ─ 사용자 정보, 메시지 등의 정보

 

변수는 이러한 정보를 저장하는 용도로 사용됩니다.

 

---

 

▶ 변수 :

데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'

 

온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용합니다.

 

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

 

아래 문 (statement)는 'message'라는 이름을 가진 변수를 생성(선언) 합니다.

let message; // 변수 선언

 

 

이제 할당 연산자 `=`를 사용해 변수 안에 데이터를 저장해 봅시다.

let message; // 변수 선언

message = 'Hello'; // 문자열을 저장합니다.

 

 

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에,

변수명을 이용해 문자열에 접근할 수 있게 되었습니다.

let message;
message = 'Hello!';

alert(message); // 변수에 저장된 값을 보여줍니다.

 

 

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있습니다.

let message = 'Hello'; // 변수를 정의하고 값을 할당합니다.

alert(message); // Hello!

 

 

한 줄에 여러 변수를 선언하는 것도 가능합니다.

let user = 'John', age = 25, message = 'Hello'; // 한 줄에 여러 변수를 선언

 

 

이렇게 작성하면 코드가 좀 더 짧아 보이긴 하지만 권장하는 방법은 아닙니다,

가독성을 위해 한 줄에는 하나의 변수를 작성합니다.

 

한 줄에 한 개의 변수를 작성하면 코드가 길어 보이지만 읽기엔 편합니다.

 

-- 어떤 사람들은 이런 방식으로도 변수를 정의합니다.

let user = 'John';
let age = 25;
let message = 'Hello';


-- '쉼표가 먼저 오는' 방식으로 작성하는 사람도 있습니다.

let user = 'John'
  , age = 25
  , message = 'Hello';
  
  
-- 위에서 소개한 방식들에 기술적인 차이가 있지는 않습니다.
-- 개인의 취향과 미적 감각에 따라 원하는 방식으로 코드를 작성하세요.

 

---

 

let 대신 var ?

 

만들어진 지 오래된 스크립트에서 `let` 대신 `var` 라는 키워드를 발견하는 경우가 있습니다.

var message = 'Hello';

 

 

`var`는 `let`과 거의 동일하게 동작합니다.

`var` 도 `let` 처럼 변수를 선언하는데 쓰입니다.

다만, `var` 는 '오래된' 방식입니다.

 

---

 

`var`로 선언한 변수는 `let`으로 선언한 변수와 유사합니다.

대부분의 경우에 `let`을 `var`로, `var`를 `let`으로 바꿔도 큰 문제 없이 동작합니다.

 

var message = "안녕하세요.";
alert(message); // 안녕하세요.

 

 

하지만 `var` 는 초기 자바스크립트 구현 방식 때문에 `let`과 `const`로 선언한 변수와는 다른 방식으로 동작합니다.

근래엔 `var`를 쓰지 않아서 이를 만나는 건 흔치 않은 일이지만 학습해두면 예상치 못한 에러에 대처할 수 있을 것입니다.

 

---

 

─ 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`는 블록이나 루프 수준의 스코프를 형성하지 않기 때문이죠.

 

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`는 `if`, `for` 등의 코드 블록을 관통합니다.

아주 오래전의 자바스크립트에서는 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다.

 

`var`는 구식 자바스크립트의 잔재입니다.

 

---

 

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

 

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

 

let user;
let user; // SyntaxError: 'user' has already been declared

 

 

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

 

var user = "Pete";

var user = "John"; // 이 "var"는 아무것도 하지 않습니다(이전에 이미 선언됨).
// ...에러 또한 발생하지 않습니다.

alert(user); // John

 

내용이 더 많지만 `var`에 관한 이야기는 여기서 줄입니다...

 

`오래된 var`의 더 많은 정보는 아래 링크에서 확인해주세요.

오래된 var

오래된 var

 

---

 

상수, const

 

변화하지 않는 변수를 선언할 땐, `let` 대신 `const`를 사용합니다.

 

const myBirthday = '18.04.1982';

 

 

이렇게 `const`로 선언한 변수를 '상수 (constant)' 라고 부릅니다.

상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생합니다.

const myBirthday = '18.04.1982';

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

 

 

변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서

다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 `const`를 사용해 변수를 선언합니다.

 

---

 

─ 대문자 상수 ─

 

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습입니다.

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명합니다.

 

예시로 웹에서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수를 한번 만들어보겠습니다.

 

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"보다 훨씬 유의미하므로, 코드 가독성이 증가합니다.

 

 

'상수'는 변수의 값이 절대 변하지 않음을 의미합니다.

그중에는 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고,

런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있습니다.

 

-- 예시

const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

 

 

`pageLoadTime`의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에

일반적인 방식으로 변수명을 지었습니다.

 

하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수입니다.

 

정리하자면,

 

대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용하면 됩니다.

 

---

 

▶ 요약 :

 

`var`, `let`, `const` 를 사용해 변수를 선언할 수 있습니다.

 

선언된 변수엔 데이터를 저장할 수 있습니다.

 

let – 모던한 변수 선언 키워드입니다.
var – 오래된 변수 선언 키워드입니다. 오래된 var 문서 참고
const – let과 비슷하지만, 변수의 값을 변경할 수 없습니다.

 

---

ko.javascript.info 문서에 따라 요약한 내용입니다.

https://ko.javascript.info/variables