TypeScript[3] - 변수 선언

- 변수 선언

---

그전 글에서 let 과 const 에 대해서 간단하게 얘기만 하고 넘어갔다.

ECMAScript6에서는 let 과 const 두개의 새로운 타입의 변수가 생겨났다.

let은 var와 유사하지만 Javascript로 실행하는 일반적인 '결함을 피할수 있게 한다.

const는 변수의 재할당을 방지한다는 점에서 let 을 보완해주는 변수이다. ( const > let > var )

Typescript 는 Javascript 의 상위 집합이기에 let과 const를 지원한다.

먼저 기존에 사용해 왔던 var 변수에 대해 집고 넘어가면서 let 과 const 를 공부해보자.

- var 선언자

---

function f(){
    var a=10;
    return function g(){
        var b = a+1;
        return b;
    }
}
var g = f();
g(); // 11 출력

다른 프로그래밍 언어와는 다르게 참 신기한 모습이다.

f() 라는 함수안에 g()라는 함수가 선언이 되어있다. 이렇게 JavaScript는 함수 내부의 다른 함수(중첩 함수)을 하게 되며 외부 함수가 가지고 있는 변수를 내부함수가 참조할수 있다.

a 라는 변수가 g() 함수안에 참조되어 사용되어지는 모습이다.

JavaScript에서 함수를 1급 객체(first-class citizen)로 지원한다. 이말은 JavaScript의 함수는 값의 의미로 사용된다는 뜻이다.

함수가 값의 역할을 하게 되어 

• 함수를 변수에 저장
• 함수를 다른 함수의 인자로 전달
• 함수를 다른 함수의 리턴값으로 사용

이 가능하게 된다. ( 자바스크립트의 함수는 메소드의 역할을 할수 있지만, 객체지향 언어의 메소드는 자바스크립트의 함수 역할을 함수 없다.)

또 다른 예제를 살펴 보면

function myFunc(init : boolean){
    if(init){
        var a : number =10;
    }
    return a;
}
console.log(myFunc(true)); // 10 출력

a 는 if 문 block 안에 있는 지역 변수이다. 하지만  block 외부에서 사용이 가능하게 되어 10이 출력이 되어진다.

다른 프로그래밍 언어를 공부하던 나에게는 머리가 아픈 scope 방식이었다.

var의 선언은 포함 함수,모듈,네임 스페이스 또는 전역 범위에서 엑세스가 가능하며 이러한 특성을 Function-scoping 이라고 한다.

이러한 scope 규칙은 익숙하지 않은 개발자들에게 여러 실수및 버그를 유발하기에 충분하다.

한번 더 var에 대해서 살펴보자.

setTimeout(실행함수 ,지연 시간)를 이용한 예제이다.

for(var i:number=0;i<10;i++){
    setTimeout(function() {console.log(i)},i*1000);

}

// 10 10 10 10 10 10 10 10 10 10 

출력값이 0,1,2,3,4,5,6,7,8,9 로 나올것이다라고 생각하는 사람도 있을것이다.(나처럼...)

하지만 setTimeout() 함수를 보게 되면 두번째 파라미터에 정의된 시간만큼 지연된후 첫번째 파라미터의 실행 함수가 출력이 된다.

지연되는 시간보다 for문의 loop 속도가 훨씬 빠르기 때문에 이미 i 의 값은 10이 대입되어 있을것이다.

그렇기 때문에 출력값이 10이 10번 출력되는 결과값을 얻는다.

closure와 IIFE 개념을 통해 이 문제를 해결할수 있다.

for(var i=0;i<10;i++){
    (function(i){
    setTimeout(function() {console.log(i)},i*1000)
    })(i);
}

// 0 1 2 3 4 5 6 7 8 9 

IIFE 로 setTimeout 함수를 클로저로 만들었다. 클로저는 만들어진 환경을 기억한다. 각기 다른 i의 변수값을 가지고 다른 환경을 가지게 된다. 여기서는 i의 변수값에 따라 10개의 환경을 가지게 되어 0,1,2,3,4,5,6,7,8,9 순으로 출력이 되는 것을 확인할 수 있다.

- let 선언자

---

let 의 선언은 Block-scope 로 불리는 Scope를 사용한다.

function f(input : boolean){
    let a=100;

    if(input){
        let b = a+1; // var 에러 발생하지 않은
        return b;
    }
    
    return b; // error - b 는 if문 블록안에 제한
}

////////////////////////////////////////////////////////////////////////////////////////////////////

a++;
let a; // error -  선언전에 할당 불가 , var 에러 발생하지 않음


/////////////////////////////////////////////////////////////////////////////////////////////////////

let x;
let x; // error - 변수 재선언 불가 , var 에러 발생하지 않음

코딩의 혼란과 에러를 유발하는 var 변수와는 달리 우리에게 친숙한 다른 언어의 변수 특징을 가지는 let 이다.

위에서 setTimeout 함수를 쓴 예제의 변수 선언을 let 으로 바꾸면

for(let i:number=0;i<10;i++){
    setTimeout(function() {console.log(i)},i*1000);

}

// 0 1 2 3 4 5 6 7 8 9

let 선언문은 loop문의 조건식에 사용하면 var 와 다르게 동작한다. loop 자체의 새로운 환경을 도입하기보다는 이러한 선언은 반복마다 새로운 범위를 만들어준다.

- const 선언자

---

const 선언은 let 선언과는 달리 그 이름이 암시 하듯이 값이 초기화 되면 값을 변경할수 없다.

하지만 주의 할점 const 변수가 객체를 할당받게 되면 객체의 주소값,참조값이 불변인 상태이다. 즉 객체 자체는 가변상태이기에 그안에 프로퍼티,속성 값은 변화가 가능하다.

const count: number =100;

const myProfile = {
    myName : "홍길동",
    myAddress : "서울",
    myCount : count
};

/*
myProfile= {
    myName="홍길동",
    myAddress="서울"
}*/ // 에러 발생

myProfile.myName="이민우";
myProfile.myAddress="인천";
myProfile.myCount=10;

    console.log(myProfile); // {myName : '인천' , myAddress : '의정부', myCount : 10}

https://infoscis.github.io/2017/05/14/TypeScript-handbook-variable-declarations/

https://moon9342.github.io/typescript-variable