JS) 변수와 상수 선언 (let, var, const)

내용 및 코드 레퍼런스
1. <초보자를 위한 JavaScript 200제>
2. MDN
https://developer.mozilla.org/ko/
3. JAVASCRIPT.INFO
https://ko.javascript.info/

🔍 변수와 상수

변수: 변경할 수 있는 값
상수: 변경할 수 없는 값


변수를 선언할 때 쓰이는 키워드 -> var , let
상수를 선언할 때 쓰이는 키워드 -> const


이제 1. 변수(var, let)와 2. 상수(const)에 대해 정리해보자.

1. 변수

변수는 var 와 let이 있다.

ES6(ECMAScript6) 이전에 나온 키워드는 var
ES6(ECMAScript6) 이후에 나온 키워드는 let이다.
둘 중 사용을 권장하는 키워드는 let 이다.

그러니 let을 먼저 정리해보자.

let

let message; //message 변수 생성=선언

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

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

위의 방식 외에 변수 let을 선언하는 방법은 여러가지가 있다.

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

alert(message); // Hello!

//user, age, message를 선언하는 방식

//1.
let user = 'John', age = 25, message = 'Hello';

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

//2.
let user = 'John',
  age = 25,
  message = 'Hello';

//3.
let user = 'John'
  , age = 25
  , message = 'Hello';

아래의 코드에서 let의 스코프를 확인할 수 있다.

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

var

var는 여기_javascript.info/var를 참고하자.

2. 상수

변하지 않는 값 상수를 선언할 때 쓰이는 키워드는 const가 있다.

const

const는 블록 단위 스코프의 상수를 선언=정의할 수 있다.
let과의 큰 차이점은 선언 시 값을 할당해야 하고 이후에 재할당을 할 수 없다는 점이다.
아래의 코드를 통해 const의 선언 방법과 스코프를 확인할 수 있으며,
const를 사용해 선언한 배열에 아이템을 추가하는 것도 함께 확인할 수 있다.

// 주의: 상수 선언에는 대소문자 모두 사용할 수 있지만,
// 일반적인 관습은 모두 대문자를 사용하는 것입니다.

// MY_FAV를 상수로 정의하고 그 값을 7로 함
const MY_FAV = 7;

console.log(MY_FAV) //7


// 에러가 발생함
MY_FAV = 20;

console.log(MY_FAV) //7
console.log("my favorite number is: " + MY_FAV);
//my favorite number is: 7


// 상수를 재선언하려는 시도는 오류 발생
//Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;

// MY_FAV라는 이름은 위에서 상수로 예약되어 있어서 역시 실패함.
var MY_FAV = 20;

// 역시 오류가 발생함
let MY_FAV = 20;



// 블록 범위의 특성을 아는게 중요
if (MY_FAV === 7) {
    // 블록 범위로 지정된 MY_FAV 라는 변수를 만드므로 괜찮습니다
    // (let으로 const 변수가 아닌 블록 범위를 선언하는 것과 똑같이 동작합니다)
    let MY_FAV = 20;

    // MY_FAV는 이제 20입니다
    console.log('my favorite number is ' + MY_FAV);

    // 이 선언은 전역으로 호이스트되고 에러가 발생합니다.
    var MY_FAV = 20;
}

// MY_FAV는 여전히 7
console.log('my favorite number is ' + MY_FAV);

// const 선언시에 초기값을 생략해서 오류 발생
const FOO;

// const는 오브젝트에도 잘 동작합니다
const MY_OBJECT = {'key': 'value'};

// 오브젝트를 덮어쓰면 오류가 발생합니다
MY_OBJECT = {'OTHER_KEY': 'value'};

// 하지만 오브젝트의 키는 보호되지 않습니다.
// 그러므로 아래 문장은 문제없이 실행됩니다
MY_OBJECT.key = 'otherValue'; // 오브젝트를 변경할 수 없게 하려면 Object.freeze() 를 사용해야 합니다

// 배열에도 똑같이 적용됩니다
const MY_ARRAY = [];
// 배열에 아이템을 삽입하는 건 가능합니다
MY_ARRAY.push('A'); // ["A"]
// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다
MY_ARRAY = ['B']