typescript:variable
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| typescript:variable [2018/08/03 15:24] – [setTimeout] taekgu | typescript:variable [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1 | ||
|---|---|---|---|
| 줄 51: | 줄 51: | ||
| > 이런 특성을 var은 function-scoping을 가진다 라고 표현합니다. | > 이런 특성을 var은 function-scoping을 가진다 라고 표현합니다. | ||
| - | ==== setTimeout | + | === setTimeout === |
| <code javascript> | <code javascript> | ||
| for (var i = 0; i < 10; i++) { | for (var i = 0; i < 10; i++) { | ||
| 줄 89: | 줄 89: | ||
| })(i); | })(i); | ||
| } | } | ||
| + | </ | ||
| + | 즉시 실행되는 함수 표현법(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: | ||
| + | | ||
| + | let a = 100; | ||
| + | |||
| + | if (input) { | ||
| + | let b = a + 1; // a에 접근이 가능합니다. | ||
| + | return b; | ||
| + | } | ||
| + | |||
| + | return b; // 코드 에러( b에 접근할 수 없습니다. ) | ||
| + | } | ||
| + | </ | ||
| + | let의 또 다른 특징은 변수의 중복 선언이 안된다는 것입니다. 사실 프로그래밍 언어에서는 거의 당연시 여겨지는 것이지만 var는 중복선언이 가능합니다. 다음과 같이 말이죠. | ||
| + | |||
| + | <code javascript> | ||
| + | function f() { | ||
| + | | ||
| + | var x; | ||
| + | var x; // JavaScript의 var은 같은 변수를 중복선언할 수 있습니다. | ||
| + | | ||
| + | if (true) { | ||
| + | var x; | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | 자 그럼 아까 var로 선언했을 때 이상하게 동작했던 setTimeout을 이번에는 let을 이용해서 처리하면 어떻게 될까요? | ||
| + | <code javascript> | ||
| + | for (let i = 0; i < 10; i++) { | ||
| + | setTimeout( | ||
| + | function() { console.log(i); | ||
| + | 1000 | ||
| + | ); | ||
| + | } | ||
| + | ---- 결과 | ||
| + | 0 | ||
| + | 1 | ||
| + | 2 | ||
| + | 3 | ||
| + | 4 | ||
| + | 5 | ||
| + | 6 | ||
| + | 7 | ||
| + | 8 | ||
| + | 9 | ||
| + | </ | ||
| + | |||
| + | var로 선언했을 때와 다른 결과를 볼 수 있습니다. | ||
| + | |||
| + | 결론적으로 let은 우리가 익히 알던 (다른 언어의) 변수 특징을 가지는 | ||
| + | 변수를 선언하기 위한 keyword라고 생각하시면 됩니다. | ||
| + | |||
| + | ==== const ==== | ||
| + | 변수를 선언하기 위한 또 다른 방법은 const를 이용하는 것입니다. 하지만 const로 선언된 변수에는 재 할당(re-assign)이 불가능 합니다. 아래의 예처럼 말이죠. | ||
| + | <code javascript> | ||
| + | const myName: string = " | ||
| + | |||
| + | myName = " | ||
| + | </ | ||
| + | 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; | ||
| </ | </ | ||
typescript/variable.1533309854.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)