자바스크립트 언어는 전통적으로 var라는 예약어를 통해 컴퓨터 환경에 메모리상에 특정 데이터 값을 저장하고 사용하는 변수할당 문법을 사용해 왔습니다.

먼저 var 변수 선언 및 값 할당 기본방식을 알아보고 어떤 부분에서 문제점들이 있는지 확인후 이를 개선하기 위해
ES2015에서 신규로 제안된 상수와 신규변수 문법인 const,let 상수,변수 사용법과 특징에 대해 코딩을 통해 하나씩 알아가 보도록 하겠습니다.

먼저 여러분의 개발자 컴퓨터에 개발툴로 VSCode를 설치해줍니다.
설치  및 기초 설정법은 아래 링크를 참고바랍니다.

https://mixedcode.com/blog/detail?pid=10

설치가 완료되었다면 여러분 컴퓨터의 특정 드라이브에 작업폴더를 하나 생성합니다.
예시) JAVASCRIPT-DEMO 폴더 생성

VSCode를 가동하고 상단 메뉴 파일> 폴더열기 > 상기 작업폴더를 선택합니다.
VSCode 좌측 메뉴바 탐색기 아이콘을 클릭하고 폴더추가 를 클릭하여 폴더명을 ECMAScript로 지정합니다.
ECMAScript 폴더를 선택하고 var-const-let.html 신규 파일을 생성합니다.


var-const-let.html 문서를 열고 ! 엔터키를 쳐서 html  웹페이지 기본 코드를 자동 생성 합니다.
title태그와 body태그내에 h1태그와 script코드를 아래와 같이 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 변수,상수 문법 다루기</title>
</head>
<body>

    <h1>ECMAScript 변수,상수 문법 다루기</h1>

    <script>
   


</script>
</body>
</html>


var-const-let.html 파일을 저장하고 문서의 오른쪽 마우스 클릭 > Open Width Live Server 메뉴를 클릭하여 
가상서버를 가동하고 해당 웹페이지를 서버를 통해 웹브라우저를 호출하여 그 결과를 확인합니다.



** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. ** 



var 변수 선언 및 할당 방식에는 아래와 같이 세가지 개선이 필요한 사항이 존재합니다.

1) 상수 개념 필요성

프로그램 개발시 변수 선언 및 값을 할당할때 필요시 한번 값이 할당되면 그 값을 변경할수 없어야하는 특성,즉 상수개념이 개발언어에는 필수적으로 필요합니다.
아래 코드에서처럼 기본 배송비는 업무룰이 한번 값이 할당되면 그 값이 변경이 되지 말아야하는 그런값들이 존재하는데요.
 var로는 해당 기능을 강제 할수 없다는 단점이 있었습니다.

이런부분을 개선하기 위해 나온 신규 개념이 상수 개념을 적용한 const 예약어 입니다.
const예약어로 선언하고 할당된 값은 할당 이후 값을 변경할수 없으며 변경시도시 에러를 발생시킵니다.

따라서 변수값들중에 변수가 선언되고 값이 최초 할당된후 그 값이 변경 안되어야하는 변수는 const라는 예약어를 통해 정의하고 값을
아래와 같이 할당하면 됩니다.
cosnt 상수는 반드시 그값을 할당해야하며 기본값을 할당하지않으면 에러가 발생합니다.

var-const-let.html 페이지에 <script></script>블럭 사이에  아래 코드를 코딩합니다.

아래코드는 var 예약어로 상수개념을 지원하지 않음 보여주는 예시이며  페이지를 저장후 Live Server를 통해  웹페이지를 웹브라우저로 오픈합니다.

        //전통적인 자바스크립트 변수선언방식 var...
        var userName = '강창훈';
        var age = 40;

        //기본상품가격
        var price = 5000;
        var isMale = true;

        //기본배송비
        //정책: 기본배송비는 한번 할당/설정해두면 변경되면 안된다.
        //상수개념 적용필요
        var baseDelyFee = 3000;

        console.log("기본배송비1:", baseDelyFee);

        //기본배송비 변경
        baseDelyFee = 13000;

        //전통적인 var 변수선언 방식은 상수(한번할당하면변경불가방식)개념을 지원하지 않는다.
        //언제든지 변경이 가능하다.-var는 상수개념 지원안됨
        console.log("기본배송비2:", baseDelyFee);



웹브라우저는 크롬 브라우저를 기본으로 사용합니다.
크롬 웹브라우저에 해당 페이지가 아래와 같이 오픈되었다면 F12키를 눌러 개발자도구 영역을 활성화합니다.
웹브라우저 개발자도구는 프론트엔드 환경에서 웹페이지 개발/디버깅이나 결과물을 확인하기 개발자를 위해 제공하는 SW도구 입니다.

개발자도구의  콘솔탭을 클릭하면  사용자 메시지 목록에  기본배송비1, 기본배송비2가 출력되며 
var 예약어로 선언된 기본배송비의 값은 언제든지 변경될수 있음을 확인할수 있습니다.
(개발자 의도는 기본배송비값이 최초 할당 이후 변경안되게 하는것입니다.)

** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. ** 


var-const-let.html 페이지에 하기 코드를 추가 코딩합니다.
const 예약어를 통해 새로운 기본 배송비 값을 선언하고 초기값을 할당합니다.

        //const 를 통한 상수개념 사용하기
        const newBaseDelyFee = 5000;
        console.log("상수로 표현하는 기본배송비:", newBaseDelyFee);

        //상수로 선언된 배송비 값을 변경해보자.
        //상수값을 변경하려해서 아래 라인에서 에러가 발생함
        //에러확인 이후 주석처리하세요!!!
        newBaseDelyFee = 10000; //<---에러발생



초기값 할당 이후  변경시도하면 에러가 남을 개발자도구 >콘솔에서 확인할수 있습니다.
Assignment to constant variable. 에러 내용을 확인합니다.
에러 발생부분을 다시 주석처리하고 저장합니다.
//newBaseDelyFee = 10000; //<---에러발생



2) var를 대체하는 신규변수 개념 let

var 예약어는 상수 개념과 변수 개념을 혼합해서 사용할수 있기 때문에 순수하게 상수가 아닌 변수의 역할을 새롭게 정의하고 사용할수 있는 예약어가 새롭게 도입되었습니다.
let이란 예약어는 기존의 var 변수처럼 변수를 정의하고 값을 할당하고 최초 할당이후 그 값을 언제나 변경할수 있는 신규 변수 정의 예역어입니다.
var와의 차이가 있다면 아래에서 다루는 blockscope 개념을 준수한다는것에 큰 차이가 있습니다.

//총결제 금액 초기값 할당
        //let으로 선언된 변수는 초기할당이후 변수값 변경이 가능하다
        let totalPayPrice = 0;

        console.log("총결제 금액,기본배송비", totalPayPrice, newBaseDelyFee);

        //let으로 선언된 변수값을 변경해봅니다.
        //총결제비용 = 총결제비용 + 기본배송비 추가
        totalPayPrice += newBaseDelyFee;
        totalPayPrice += price;

        console.log("변경된 총결제금액:", totalPayPrice);


3) block scope 이슈 해결책

block scope(블록스코프)란 개념은 여러분들이 프로그래밍을 진행시 특정 조건이나 프로세스를 구현시 특정 코딩 블럭을 정의하고
해당 블럭 내에서 프로그래밍을 구현하는것으로 주로 블록스코프는 조건문(if),제어문(for,switch,each...)등의 특정 코딩블럭(영역/범위)를 뜻합니다.

예를들면 아래와 같은 두개의 조건문과 제어문이 있다고 가정하면

...

//성별구분변수가 1이면

if(gender == '1'){

    var genderName = "남자";

}else{

    var genderName = "여자";

}


위 코드에서 분홍색으로 표기된 영역이 블록스코프입니다. { ..참인 조건문 블록스코프... }  else {  ...else 블록스코프... }

특정 조건에 해당하는 전체 코딩영역을 블록스코프 영역이라고 말합니다.


for (let i = 1; i <= 10; i++) {

    //for구문 블록스코프 영역
    console.log(i);

}


블록스코프 개념이 이해가 되었다면 일반적으로 프로그래밍을 구현시 변수의 정의는 변수정의를 어느 위치에서 하느냐에 따라 그 사용에 제약이 발생합니다.

전체 프로그램 소스 상단에서 변수를 정의하여 사용하는 경우 전역변수라 말하며 해당 소스 어느 영역에서나 그 사용이 가능이 가능하지만 블록스코프 영역(각종제어문)내에서 정의된 변수(const,let)은 해당 영역내에서만 그 사용이 제한되는 특징이 있습니다.

이렇게 블록스코프내에서 정의하는 변수는 원래 의도가 해당 범위내에서만 사용하기 위한것이기 때문에서 해당 범위 밖에서 사용하려면 에러를 발생시키는것입니다. 해당 블록스코프 범위 밖에서도 사용하는 변수로 사용하려면 전역위치에 해당변수를 정의하여 전역변수를 정의해 사용하는것이 바람직한 방법입니다.

전역변수는 해당하는 프로그래밍 영역 전체 영역에서 사용이 가능하지만 특정 블록 스코프영역내에서 정의된 변수의 경우 해당 영역내에서만 사용하기 위해 정의한 변수이기때문에 정의된 영역 밖에서 사용시 다양한 문제점들을 발생시키는 원인이 되곤합니다.


그런데 var 예약어는 특정 영역(블록스코프)내에서 정의를 했더라도 전역변수처럼 사용이 가능하다는 문제가 있습니다.
아럐 예시 코드에서 문제점을 확인해봅니다.

        //var변수선언방식은 블록스코프 개념이 없어서
        //특정 블록안에서 선언된 변수값을 블록범위 밖에서 언제든지 변경이 가능하다.
        //이런 var 변수선언방식은 다양한 문제를 초래했다.

        const region = "제주도";

        //가정문을 통한 블록스코프 기반 var 예약어의 문제점 확인
        if (region == "제주도") {
            //상기 조건에 해당하는 현재 범위를 블록스코프라고함
            //프로그래밍적으로 특정범위내(블록스코프)에서 선언된 변수나 상수는
            //해당 범위내에서만 사용이 되어야하고 변경이 되어야하지만....
            var msg = "도서지역";
            console.log("if블록스코프내에서 선언된 msg 변수값 정상 사용확인:", msg);
        }

        msg = "일반지역";
        console.log("if블록스코프안에서 선언된 msg 변수값을 밖에서 사용해도 문제가 안된다.", msg);



var 예약어는 블록스코프 개념이 없어 사용가능하기에 각종 잠재적 에러 발생 요인을 제공하지만 const 와 let 명령어는 둘다 철저히 block scope개념을 준수하기 때문에 특정 범위내에서 정의된 변수/상수는 해당 범위내에서만 사용이 가능하고 범위 밖에서 사용할때는 에러를 발생시킵니다.
** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. ** 

        //var는 위와 같이 블록스코프 개념준수가 안되지만
        //이를 개선하기 위해 let,const 는 블록스코프 개념을 준수하고 위배시 에러를 발생시켜줌.
        if (region == "제주도") {
            const addDelyFee = 2000;
            let addMsg = "도서 배송비가 추가되었습니다.";
            console.log(addMsg);

            totalPayPrice += addDelyFee;
            console.log("if블록스코프내에서 선언된 변수/상수는 그안에서 사용이 가능함", addDelyFee, totalPayPrice);
        }

        //특정 블록스코프 내에서 선언된 let,const값은 범위밖에서 사용시 에러가발생..사용불가
        //블록스코프내에서 선언된 let,const값은 그안에서만 사용 및 변경이 가능하다.

        console.log("if구문내에서 선언된 메시지변수 호출시 에러가 발생합니다.");
        addMsg = "에러발생코드"; //블록스코프 에러 발생