[JavaScript] var 변수, let과 const

 

---

1. var 를 사용한 변수 특징

 

var를 이용한 변수 선언의 문제점 

    기존의 자바스크립트에서는 var를 이용해 변수를 선언
    그러나 var로 변수를 선언하는 것은 몇 가지 문제점이 있어서 모던 자바스크립트 개발에서는 거의 이용되지 않는다.
    문제점은 1) 변수를 덮어 쓸 수 있다는 점과 2) 다시 선언 (재선언) 할 수 있다는 점

<script>
    // var로 선언한 변수를 덮어 쓰거나 재선언하는 예.
    var val1 = 'var 변수';
    console.log(val1); // var 변수

    // var 변수는 덮어쓰기 가능
    val1 = 'var 변수 덮어 쓰기';
    console.log(val1); // var 변수 덮어 쓰기

    // var 변수는 재선언 가능
    var val1 = 'var 변수를 재선언';
    console.log(val1); // var 변수를 재선언
</script>

 

📌  덮어 쓰기 ▶️ 한 번 정의한 변수에 다른 값을 대입할 수 있음
📌  재선언  ▶️ 완전히 같은 변수명을 여러 위치에서 변수로 정의할 수 있음

✔️  변수 선언에 var만 사용하는 경우 프로젝트 규모가 커짐에 따라 의도치 않은 시점에 변수를 덮어 쓰거나 재선언하는 등의 문제가 발생

✔️  ES2015에서는 새로운 변수 선언 방법으로 const(덮어쓰는 것이 불가능한 변수)와 let(덮어쓰는 것이 가능한 변수)이 추가 

---

2.  let과 const

(1) let을 사용한 변수 특징

🐰  let은 재선언 ❌  덮어 쓰기 ⭕️

🐰  함수 {} 안에 선언할 시 블록({})을 벗어나면 사용할 수 없다.

<script>
  // let으로 변수 덮어 쓰기
  let val2 = 'let 변수';
  console.log(val2);

  val2 = 'let 변수 덮어 쓰기';
  console.log(val2);

  // 재선언 실행
  let val3 = 'let 변수';
  console.log(val3);

  // let은 재선언 불가능
  let val3 = 'let 변수 재선언'; // 에러
  // Uncaught SyntaxError: Identifier 'val3' has already been declared
  // '이미 선언되어 재선언 할 수 없다'는 메시지

  // 이렇게 let은 var를 이용했을 때 문제가 되었던 재선언을 개선한 변수 정의 방법.
  // 덮어 쓰기를 허가할 변수는 let을 이용해야 함.
  console.log(val3);
</script>

 

---

(2) const 를 사용한 변수 특징

 

🐰  const는 재선언, 덮어쓰기가 모두 불가능한 가장 엄격한 변수 선언 방법 < 상수 변수 constant variable >
🐰  const를 이용한 변수 선언은 덮어 쓰기를 사전에 감지해서 알려줌
🐰  let와 마찬가지로 재선언을 해도 에러가 발생

💡 변수 종류에 따라 const로 정의해도 변수값을 변경할 수 있는 경우가 있으므로 주의

<script>
    /* 다음은 const로 정의한 변수를 덮어 쓰려고 할 경우 */
    const val1 = 'const 변수';
    console.log(val1);

    // const 변수를 덮어 쓰기 불가능
    val1 = 'const 변수 덮어 쓰기';
    // Uncaught TypeError: Assignment to constant variable.
</script>

 

 

---

(3) const로 정의한 변수를 변경할 수 있는 예

 

🐰  문자열이나 수치 등 primitive type 이라 불리는 종류의 데이터는 const를 이용해 정의한 경우 덮어 쓸 수 없음
🐰  하지만 객체나 배열 등 object type 이라 불리는 데이터들은 const로 정의해도 도중에 값을 변경할 수 있음

 

🌻  pirmitive type
      논리값 Boolean : true / false
      수치 Number : 1, 2.5
      문자열 String
      undefined : 미정의
      null : 값 없음
      Symbol : 유일하면 바꿀 수 없는 값

🌻  object type
      객체
      배열
      함수 등 primitive type 이외의 것

 

<script>
    // const를 이용해 정의한 객체의 속성값을 변경, 추가 하는 예
    // 객체 정의
    const obj1 = {
        name: '길동',
        age: 24
    };
    console.log(obj1);

    // 속성값 변경
    obj1.name = 'tom';
    console.log(obj1);

    // 속성 추가
    obj1.address = 'daegu';
    console.log(obj1);
    // const로 정의해도 객체 내용은 자유롭게 변경할 수 있음
    // 즉, 객체를 정의할 때는 기본적으로 const를 이용.

    // 재할당은 에러가 남.
    //obj1 = {
    //    name: '길동',
    //    age: 24
    //}

    // const를 이용해 정의한 배열 값을 변경, 추가하는 예
    // 배열 정의
    const arr1 = ['dog', 'cat'];
    console.log(arr1);

    // 값 변경
    arr1[0] = 'bird';
    console.log(arr1);

    // 값 추가
    arr1.push('monkey');
    console.log(arr1);
    // 배열도 const를 이용해 정의했어도 값은 자유롭게 변경할 수 있음
    // 따라서 배열 역시 기본적으로 const를 이용해 정의

</script>

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]