본문 바로가기
개발/TypeScript

[TypeScript] 타입스크립트 변수선언 & Destructuring :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 23.

javascript에서 전통적으로 var을 사용해서 변수선언을 한다.

es6부터는 let과 const도 사용이 가능하다.


이 3가지 변수선언 방식을 비교하고 Destructuring에 대해 알아본다.


typeScript Documentation을 확인해보면 var은 사용하지 않고 let과 const를 사용한다.

필자도 javascript보다는 Java언어에 익숙하다보니, var을 사용할때의 모호성이 느껴진다.

var 과 let을 사용한 코드 예시를 보면 필자가하는 말이 이해가 될것이다.


1.var

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function sumMatrix1(matrix: number[][]){
    var sum = 0;
    for(var i=0; i<matrix.length; i++){
        var currentRow = matrix[i];
        for(var i=0; i<currentRow.length; i++){
            sum += currentRow[i];
        }
    }
    return sum;
}
console.log(sumMatrix1([[1,2,3,4],[5,5,5,5]])); //10
 
 
for(var i=0; i<10; i++){
    setTimeout(function(){console.log(i);},100 * i);
}
 
/*
10
10
10
10
10
10
10
10
10
10
*/
 

cs


위 코드에서 sumMatrix1 함수의 결과로는 30이 나올것이 예상이 되지만 결과는 10이된다.


코드 아래 for문의 출력결과는 0 부터 9가 나올것을 예상하지만, 10이 10번출력이된다.


javascript개발자들은 당연하게 여기겠지만, 필자와 같이 javascript를 많이 다뤄보지 못한 사람들은 의문이 생길것이다.

왜 이렇게 결과가 나오는것인가?

답은 javascript의 closure의 특성때문이다.

closure는 독립적인 변수를 가리키는 함수라고 정의된다. 


for문의 예시를 보면 내부함수는 setTimeouts이 되고, 외부함수는 for문으로 가정하자(실행시 function안에 for문을 넣어서 실행하는 것과 같으니까).

for문에서 10번 도는동안 i가 1씩 되면서 setTimeout함수를 호출한다. 이때 i가 10이 되면 for문을 빠져나간다.

for문 실행이 끝났지만, setTimeout에 의해 여전히 참조되고 있어 closure가 형성된다.

이렇게 하여 내부함수가 closure의 i를참조하는데 i는 이미 10이되어 있다.




2.let

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let sumMatrix2 = (matrix: number[][]) => {
    let sum = 0;
    for(let i=0; i<matrix.length; i++){
        let currentRow = matrix[i];
        for(let i=0; i<currentRow.length; i++){
            sum += currentRow[i];
        }
    }
    return sum;
}
console.log(sumMatrix2([[1,2,3,4],[5,5,5,5]])); //30
 
 
for(let i=0; i<10; i++){
    setTimeout(()=>{console.log(i);}, 100 * i);
}
 
/*
0
1
2
3
4
5
6
7
8
9
*/
cs


let으로 선언을 해주면, 다른 언어들에서와 같이 코드실행이된다.

위에서 언급했던 var의 모호성을 해결해준다.



3.const

1
2
3
4
5
const numLivesForCat = 9;
const kitty = {
    name : "Aurora",
    numLives : numLivesForCat,
}
cs


const는 java에서 final 상수로 선언해주는 것과 같다.

한번 선언하면 변경이 불가능하다.




4.destructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
let input = [1,2];
let [first, second] = input;
console.log(first);     //1
console.log(second);    //2
 
first = input[0];
second = input[1];
console.log(first);     //1
console.log(second);    //2
 
[first, second] = [second, first];
console.log(first);     //2
console.log(second);    //1
 
const des1 = ([first, second]: [number, number]) =>{
    console.log(first);
    console.log(second);
}
des1([3,4]);
/*
3
4
*/
 
let [start, ...rest] = [1,2,3,4];
console.log(start);     //1
console.log(rest);      //[2,3,4]
 
let[fir] = [2,3,4];
console.log(fir);       //2
 
let[,b,,d] = [1,2,3,4];
console.log(b);     //2
console.log(d);     //4
 
let o = {
    o1:'foo',
    o2:12,
    o3:'bar'
};
let{o1,o2} = o;
console.log(o1);    //foo
console.log(o2);    //12
 
({o1, o2} = {o1 : 'baz', o2 :101})
console.log(o1);    //baz
console.log(o2);    //101
 
let {o1: newName1, o2: newName2} = o;
console.log(newName1);  //foo
console.log(newName2);  //12
 
let newName3 = o.o1;
let newName4 = o.o2;
console.log(newName3);  //foo
console.log(newName4);  //12
 
 
let p = {
    p1:'foo0000',
    p2:122222,
    p3:'bar'
};
let {p1,p2}: {p1: string, p2:number} = p;
 console.log(p1);   //foo0000
 console.log(p2);   //122222
 
 const keepWholeObject = (wholeObject: {a:string, b?: number}) => {
     let {a, b = 1001= wholeObject;
     return a + b;
 }
 console.log(keepWholeObject({a : 'my'}));  //my1001
 
 type C = {a : string, b?: number};
 const desf2 = ({a, b = 12}: C) : void => {
    console.log(a + b);
 }
 desf2({a:'자몽자몽'});   //자몽자몽12
 
 const desf3 = ({a="자몽", b=0= {}): void => {
     console.log(a + b);
 }
 desf3();   //자몽0
 
 const desf4 = ({a,b = 0= {a: "123"}): void => {
     console.log(a + b);    
 }
desf4({a: "yes"});  //yes0
desf4();    //1230
//desf4({});    //error a is required
 
 
cs


destructuring은 배열의 형태나 구조를 할당 및 변경해주는 기법이다.

위 코드예제를 보고 학습을 하면 좀더 쉽게 코드작성을 할 수 있을것이다.



필자는 TypeScript 공식 홈페이지를 참조하여 글을 작성했다.

자세한 내용을 확인하고 싶으면 아래 링크를 참조한다.

https://www.typescriptlang.org/index.html

태그

댓글0