<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>

<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>

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

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

<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+자바스크립트 웹 표준의 정석' ]