문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » javascript_note » js_let
wiki:javascript:javascript_note:js_let

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:javascript:javascript_note:js_let [2021/04/13 15:26]
emblim98 [JavaScript Block Scope] 		wiki:javascript:javascript_note:js_let [2023/01/13 18:44] (현재)
줄 69: 줄 69:
 블록 {} 내부에서 선언된 변수는 블록 외부에서 액세스 할 수 있습니다.\\ 블록 {} 내부에서 선언된 변수는 블록 외부에서 액세스 할 수 있습니다.\\
 <code javascript> <code javascript>
 +{
 +  var x = 2;
 +}
 +// x CAN be used here
 +</code>
 +\\
 +ES2015 이전에는 %%JavaScript%%에 블록 범위가 없었습니다.\\
 +\\
 +''%%let%%'' 키워드로 선언된 변수는 블록 범위를 가질 수 있습니다.\\
 +\\
 +블록 {} 내부에서 선언된 변수는 블록 외부에서 액세스 할 수 없습니다.\\
 +<code javascript>
 +{
 +  let x = 2;
 +}
 +// x can Not be used here.
 +</code>
  
 +=====Redeclaring Variables=====
 +''%%var%%'' 키워드를 사용하여 변수를 다시 선언하면 문제가 발생할 수 있습니다.\\
 +\\
 +블록 내부의 변수를 다시 선언하면 블록 외부의 변수도 다시 선언됩니다:\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html lang="en">
 +<body>
 +
 +    <h2>Declaring a Variable Using var</h2>
 +    <p id="demo"></p>
 +    <script>
 +        var x = 10;  // Here x is 10
 +        {
 +            var x = 2;   // Here x is 2
 +        }
 +        document.getElementById("demo").innerHTML = x;   // Here x is 2
 +    </script>
 +</body>
 +</html>
 </code> </code>
 +\\
 +''%%let%%'' 키워드를 사용하여 변수를 다시 선언하면, 이 문제를 해결할 수 있습니다.\\
 +\\
 +블록 내부의 변수를 다시 선언해도 블록 외부의 변수는 다시 선언되지 않습니다.\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html lang="en">
 +<body>
 +  <h2>Declaring a Variable Using let</h2>
 +  <p id="demo"></p>
 +  <script>
 +    var x = 10;
 +    {
 +      let x = 2;
 +    }
 +    document.getElementById("demo").innerHTML = x;  // Here x is 10
 +  </script>
 +</body>
 +</html>
 +</code>
 +\\
 +''%%let%%'' 키워드는 Internet Explorer 11 이하에서 완전히 지원되지 않습니다.\\
 +
 +=====Loop Scope=====
 +loop에서 ''%%var%%''를 사용하는 것.
 +<code javascript>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +    <h2>JavaScript var</h2>
 +    <p id="demo"></p> <!-- Here i is 10 -->
 +    <script>
 +        var i = 5;
 +        for (var i = 0; i < 10; i++) {
 +            // some statements
 +        }
 +        document.getElementById("demo").innerHTML = i;
 +    </script>
 +</body>
 +</html>
 +</code>
 +\\
 +loop에서 ''%%let%%''를 사용하는 것.
 +<code javascript>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +    <h2>JavaScript let</h2>
 +    <p id="demo"></p> <!-- Here i is 5 -->
 +    <script>
 +        let i = 5;
 +        for (let i = 0; i < 10; i++) {
 +            // some statements
 +        }
 +        document.getElementById("demo").innerHTML = i;
 +    </script>
 +</body>
 +</html>
 +</code>
 +\\
 +첫 번째 예제에서는, ''%%var%%''를 사용하여 루프에서 선언된 변수가 루프 외부의 변수를 다시 선언합니다.\\
 +\\
 +두 번째 예제에서는, ''%%let%%''을 사용하면 루프에서 선언된 변수가 루프 외부에서 변수를 다시 선언하지 않습니다.\\
 +\\
 +''%%let%%''이 루프에서 i 변수를 선언하는 데 사용되면, i 변수는 루프 내부에서만 볼 수 있습니다.\\
 +
 +=====Function Scope=====
 +''%%var%%'' 및 ''%%let%%''으로 선언된 변수들은 함수 내에서 선언될 때 매우 유사합니다.\\
 +\\
 +둘 다 **함수 범위(Function Scope)**를 가집니다.\\
 +<code javascript>
 +function myFunction() {
 +  var carName = "Volvo";  // Function Scope
 +</code>
 +<code javascript>
 +function myFunction() {
 +  let carName = "Volvo";  // Function Scope
 +</code>
 +
 +=====Global Scope=====
 +''%%var%%'' 및 ''%%let%%''으로 선언된 변수는 블록 외부에서 선언될 때 매우 유사합니다.\\
 +\\
 +둘 다 **전역 범위(Global Scope)**를 갖습니다.\\
 +<code javascript>
 + var x = 2;   // Global scope
 +</code>
 +<code javascript>
 + let x = 2;   // Global scope
 +</code>
 +
 +=====Global Variables in HTML=====
 +%%JavaScript%%에서 전역 범위는 %%JavaScript%% 환경입니다.\\
 +\\
 +%%HTML%%에서, 전역 범위는 window 오브젝트입니다.\\
 +\\
 +''%%var%%'' 키워드로 정의된 전역 변수는 window 오브젝트에 속합니다.\\
 +\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +    <h2>JavaScript Global Variables</h2>
 +    <p>In HTML, global variables defined with <b>var</b> will become window variables.</p>
 +    <p id="demo"></p>   <!-- I can display Carnival -->
 +    <script>
 +        var carName = "Carnival";
 +        // code here can use window.carName
 +        document.getElementById("demo").innerHTML = "I can display " + window.carName;
 +    </script>
 +</body>
 +</html>
 +</code>
 +\\
 +''%%let%%'' 키워드로 정의된 전역 변수는 window 오브젝트에 속하지 않습니다.\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html lang="en">
 +<body>
 +    <h2>JavaScript Global Variables</h2>
 +    <p>In HTML, global variables defined with <b>let</b> will not become window variables.</p>
 +    <p id="demo"></p>    <!-- I can not display undefined -->
 +    <script>
 +        let carName = "Tusan";
 +        // code here can not use window.carName
 +        document.getElementById("demo").innerHTML = "I can not display " + window.carName;
 +    </script>
 +</body>
 +</html>
 +</code>
 +
 +=====Redeclaring=====
 +''%%var%%''로 %%JavaScript%% 변수를 다시 선언하는 것은 프로그램의 모든 위치에서 허용됩니다.\\
 +<code javascript>
 +
 +</code>
 +\\
 +동일한 범위 또는 동일한 블록에서 let을 사용하여 var 변수를 다시 선언하는 것은 허용되지 않습니다.\\
 +<code javascript>
 +var x = 2;     // Allowed
 +let x = 3;     // Not allowed
 +
 +{
 +  var x = 4;   // Allowed
 +  let x = 5;   // Not Allowed
 +}
 +</code>
 +\\
 +동일한 범위 또는 동일한 블록에서 let을 사용하여 let 변수를 다시 선언하는 것은 허용되지 않습니다.\\
 +<code javascript>
 +let x = 2;     // Allowed
 +let x = 3;     // Not allowed
 +
 +{
 +  let x = 4;   // Allowed
 +  let x = 5;   // Not allowed
 +}
 +</code>
 +\\
 +let을 사용하여 다른 범위 또는 다른 블록에서 변수를 다시 선언하는 것은 허용됩니다.\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html lang="en">
 +<body>
 +    <h2>JavaScript let</h2>
 +    <p>Reclaring a variable with <b>let</b> in another scope or in another block is allowed.</p>
 +    <p id="demo"></p>
 +    <script>
 +        let x = 2;  // Allowed
 +
 +        {
 +            let x = 3;  // Allowed
 +        }
 +
 +        {
 +            let x = 4;   // Allowed
 +        }
 +        document.getElementById("demo").innerHTML = x;
 +    </script>
 +</body>
 +</html>
 +</code>
 +
 +=====Hoisting=====
 +''%%var%%''로 정의된 변수는 맨 위로 올라 와서 언제든지 초기화 될 수 있습니다.\\ 
 +\\
 +hositing: 끌어 올리기, 들어올려 나르기\\
 +의미: 변수를 선언하기 전에 사용할 수 있습니다:\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +    <h2>JavaScript Hoisting</h2>
 +    <p>With <b>var</b>, you can use a variable before it is declared:</p>
 +    <p id="demo"></p>
 +    <script>
 +        carName = "Avante";
 +        document.getElementById("demo").innerHTML = carName;
 +        var carName;
 +    </script>
 +</body>
 +</html>
 +</code>
 +\\
 +''%%let%%''으로 정의된 변수는 블록의 맨 위에 올려지지만, 초기화되지는 않습니다.\\
 +\\
 +의미 : 코드 블록은 변수를 인식하지만, 선언될 때까지 사용할 수 없습니다.\\
 +\\
 +선언하기 전에 ''%%let%%'' 변수를 사용하면 ''%%ReferenceError%%''가 발생합니다.\\
 +\\
 +변수는 선언될 때까지 블록이 시작하는 곳에 있는 "TDZ(Temporal Dead Zone)"에 있습니다.\\
 +
 +====예제====
 +다음은 ''%%ReferenceError%%''을 발생시킵니다.\\
 +<code javascript>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +    <h2>JavaScript Hoisting</h2>
 +    <p>With <b>let</b>, you can use a variable before it is declared:</p>
 +    <p id="demo"></p>
 +    <script>
 +        try {
 +            carName = "Avante";
 +            let carName;
 +            document.getElementById("demo").innerHTML = carName;
 +        }
 +        catch (err) {
 +            document.getElementById("demo").innerHTML = err.name + " : " + err.message;
 +        }
 +    </script>
 +</body>
 +</html>
 +</code>
 +
 +
 +
 +
 +
  
  
  
 {{tag>오션, Javascript Let}} {{tag>오션, Javascript Let}}
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/js_let.1618295218.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki