차이

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

--- typescript:variable [2018/08/03 15:10] – 만듦 taekgu
+++ typescript:variable [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 36: / 줄 36: @@
 하지만 JavaScript의 var 변수 scope는 좀 다릅니다. outerFunc() 함수의 호출이 끝났음에도 불구하고 a 변수값이 유지됩니다. 즉, outerFunc()에 대한 참조가 남아있는 한 메모리에 계속 유지하게 되는 구조입니다. ( outerFunc() 함수가 실행중인 상태로 간주한다는 의미이기도 합니다. ) 그렇기 때문에 위에서 myFunc()를 호출했을 때 a 변수를 이용할 수 있는 것입니다.
+<code javascript>
+function myFunc(init) {
+    if (init) {
+        var x = 10;
+    }
+    return x;
+}
+console.log(myFunc(true));  // 10 출력
+</code>
+위의 코드는 JavaScript 코드입니다. var 변수는 if block 안에서 선언되었음에도 불구하고 block 외부에서도 사용이 가능합니다. 위에서 언급했듯이 JavaScript의 var 변수 scope가 좀 독특해서 그렇습니다. var로 선언된 변수는 block에 상관없이 function 내에서 사용이 가능합니다.
+> 이런 특성을 var은 function-scoping을 가진다 라고 표현합니다.
+=== setTimeout ===
+<code javascript>
+for (var i = 0; i < 10; i++) {
+    setTimeout(
+        function() { console.log(i); },
+    );
+}
+</code>
+결과는
+<code javascript>
+</code>
+JavaScript를 알고 있는 사람들에게는 꽤나 익숙한 코드형태이자 결과일겁니다. setTimeout은 두번째 인자로 들어가는 시간을 delay로 첫번째 인자의 함수를 호출해 주는 역할을 하는 함수입니다. (내부 Thread로 동작하겠죠)
+그러면 0부터 9까지 순차적으로 출력하려면 어떻게 해야 할까요? 이 작업을 수행하기 위해 IIFE을 이용합니다.
+> IIFE는 Immediately Invoked Function Expression을 의미합니다.
+코드를 아래와 같이 수정합니다.
+<code javascript>
+for (var i = 0; i < 10; i++) {
+    (function(tmp) {
+        setTimeout(
+            function() { console.log(tmp); },
+        );
+    })(i);
+}
+</code>
+즉시 실행되는 함수 표현법(IIFE)를 이용하여 새로운 function scope를 생성해서 i값을 capture하는 방식으로 처리하면 될 듯 합니다.
+이 부분을 정확히 이해하기 위해서는 free variable, scope chain, Closure에 대한 이해가 있어야 합니다.
+==== let ====
+위에서 언급한 var의 모호성을 let을 이용해 해결할 수 있습니다. 변수를 선언할 때 단순히 var대신 let을 이용하면 됩니다.
+let myVar: string = "Hello World!!";
+let은 우리에게 친숙한 block-scoping을 가집니다. ( lexical-scoping 이라고도 합니다. )
+<code javascript>
+function myFunc(input: boolean) {
+    let a = 100;
+    if (input) {
+        let b = a + 1;   // a에 접근이 가능합니다.
+        return b;
+    }
+    return b;            // 코드 에러( b에 접근할 수 없습니다. )
+}
+</code>
+let의 또 다른 특징은 변수의 중복 선언이 안된다는 것입니다. 사실 프로그래밍 언어에서는 거의 당연시 여겨지는 것이지만 var는 중복선언이 가능합니다. 다음과 같이 말이죠.
+<code javascript>
+function f() {
+    var x;
+    var x;          // JavaScript의 var은 같은 변수를 중복선언할 수 있습니다.
+    if (true) {
+        var x;
+    }
+}
+</code>
+자 그럼 아까 var로 선언했을 때 이상하게 동작했던 setTimeout을 이번에는 let을 이용해서 처리하면 어떻게 될까요?
+<code javascript>
+for (let i = 0; i < 10; i++) {
+    setTimeout(
+        function() { console.log(i); },
+    );
+}
+---- 결과
+</code>
+var로 선언했을 때와 다른 결과를 볼 수 있습니다.
+결론적으로 let은 우리가 익히 알던 (다른 언어의) 변수 특징을 가지는
+변수를 선언하기 위한 keyword라고 생각하시면 됩니다.
+==== const ====
+변수를 선언하기 위한 또 다른 방법은 const를 이용하는 것입니다. 하지만 const로 선언된 변수에는 재 할당(re-assign)이 불가능 합니다. 아래의 예처럼 말이죠.
+<code javascript>
+const myName: string = "홍길동";
+myName = "강감찬";   // 코드 에러
+</code>
+const를 사용할 때 한가지만 주의하시면 됩니다. 만약 const 변수가 객체를 지칭하게 되면 다른 객체로 reference를 바꾸지는 못하지만 현재 reference하고 있는 객체의 속성에 대해서는 값을 변경할 수 있습니다. 아래의 예처럼 말이죠.
+<code javascript>
+const count: number = 100;
+const myProfile = {
+    myName: "홍길동",
+    myAddress: "서울",
+    myCount: count
+};
+myProfile = {                  // 코드 에러 ( re-assign 안됨 )
+    myName: "강감찬",
+    myAddress: "인천",
+};
+myProfile.myName = "강감찬";   // 가능
+myProfile.myAddress = "인천";
+myProfile.myCount = 10;
+</code>

GaramX

사용자 도구

사이트 도구

차이

문서 도구