집 > 기사 > 웹 프론트엔드 > JavaScript에서 var와 let의 차이점(코드 예)

JavaScript에서 var와 let의 차이점(코드 예)

藏色散人원래의: 2019-03-23 11:02:493442검색

Var와 let은 둘 다 JavaScript에서 함수 선언에 사용됩니다. 차이점은 var가 함수 범위이고 let이 블록 범위라는 것입니다.

let에 비해 var로 선언된 변수는 프로그램 전체에 정의되어 있다고 할 수 있습니다.

예제는 다음과 같이이 차이를 더 명확하게 설명 할 것입니다. var :

输入:
console.log(x);
var x=5;
console.log(x);
输出:
undefined
5

JavaScript에서 var와 let의 차이점(코드 예) examplame let :

输入:
console.log(x);
let x=5;
console.log(x);
输出:
Error

JavaScript에서 var와 let의 차이점(코드 예)

let 's javaScript 코드를 살펴보십시오.

코드 예시 1:

<html> 
  
<body> 
    <script> 
        // 定义后调用x
        var x = 5; 
        document.write(x, "\n"); 
  
        // 定义后调用y 
        let y = 10; 
        document.write(y, "\n"); 
  
        // 在定义之前调用var z将返回undefined
        document.write(z, "\n"); 
        var z = 2; 
  
        // 在定义前调用let a会产生错误
        document.write(a); 
        let a = 3; 
    </script> 
</body> 
  
</html>

출력:

코드 예시 2:

JavaScript에서 var와 let의 차이점(코드 예)

아래 코드에서 시작을 클릭하면 0.5초마다 두 헤더의 색상을 변경하는 함수가 호출됩니다. 첫 번째 제목의 색상은 var에 저장되고 두 번째 제목은 let을 사용하여 선언됩니다.

그런 다음 기능 블록 외부에서 액세스하세요. Var는 작동하지만 let을 사용하여 선언된 변수는 블록 범위이므로 오류를 표시합니다.

<!DOCTYPE html>
<html>
<head>
    <title>js教程</title>
    <meta charset="UTF-8">
</head>

<body>

<h1 id="var" style="color:black;">javascript教程</h1>
<h1 id="let" style="color:black;">javascript教程</h1>
<button id="btn" onclick="colour()">Start</button>

<script type="text/javascript">
    function colour() {

        setInterval(function() {

            if (document.getElementById(&#39;var&#39;).style.color == &#39;black&#39;)
                var col1 = &#39;blue&#39;;
            else
                col1 = &#39;black&#39;;

            // 通过var设置color 1的值

            if (document.getElementById(&#39;let&#39;).style.color == &#39;black&#39;) {
                let col2 = &#39;red&#39;;
            } else {
                col2 = &#39;black&#39;;
            }

            // 通过let设置color 2的值

            document.getElementById(&#39;var&#39;).style.color = col1;

            document.getElementById(&#39;let&#39;).style.color = col2;

            // 在html中改变h1的颜色
        }, 500);

    }
</script>
</body>

</html>

출력:

JavaScript에서 var와 let의 차이점(코드 예)

관련 기사