var 와 let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 내가 모르고 중복 선언을 해버렸을 때 가정
        // => 문제 발생
        // => 새로운 변수 키워드 let이 등장해서 해결

        // var : 재선언 O, 재할당 O 
        var name = "회먹고싶다"
        console.log(name);

        // 많은 변수 선언으로 name을 변수로 사용한 것을 까먹었을 때
        var name = "고기도 좋아"
        console.log(name);

        // let : 재선언 X, 재할당 O
        let name1 = "회랑 고기 둘 다는 안됨?";
        console.log(name1);
        let name2 = "회랑 고기 둘 다 가능^^";
        console.log(name2);

        // const : 재선언 X, 재할당 X
        // 활용 : html객체 저장, 클래스/함수 정의할 때
        const name3 = "샌드위치? 랩?";
        // name3 = "뭐 먹을텨?"; => 오류남

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

예제)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 문제 1
        // 사용자가 이름을 입력하면 대화상자에 출력하는 프로그램을 구현
        // - 변수, prompt(), alert()
        // 결과
        // [이름을 입력해주세요] -> (사용자가 입력) -> [저는 OO입니다. 반갑습니다.]
       
        // let name1 = prompt("이름을 입력해주세요 : ");
        // alert(name1);
        // document.write("저는 " , name1, "입니다. 반갑습니다.")

        // let name2 = prompt("이름을 입력해주세요");
        // console.log(name2);
        // alert("저는 "+name2+"입니다. 반갑습니다.")


        // 문제 2
        // 1. 사용자에게 이름을 입력받기
        // 2. 사용자에게 노래 제목을 입력받기
        // 3. OO님이 신청하신 노래는 OOO입니다.
        let name3 = prompt("이름을 입력해주세요.")
        console.log(name3);
        let song = prompt("노래를 입력해주세요.")
        console.log(song);
        alert(name3+"님이 신청하신 노래는 "+song+"입니다.")

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