TypeScript 변수선언 (feat. var, const, let)

 

var score1 = 0;
var score2 = 200;
const defaultScore = 0;

우선 var의 scope단위는 함수다. 그래서 함수안에서 선언된 var 변수들은 함수 밖에서는 사용할수가 없어.

예)

function outer() {
    function inner() {
        var score = 0;
    }
    inner()
    console.log(score);
}

var score는 inner 함수 안에서만 사용할수 있기에  console.log(score);는 이용할수가 없어...

안에서 밖으론 못쓴다는거야...하지만 밖에서 안으로는 가능해

 

만약 if 블록에서 변수사 선언되면?

출력이 되네??!?!?  --> var는 블록 스코프 단위가 아니고 함수 단위스코프 라서 outer()안에서 통용이 가능해!!!

(scope 모르면 그냥 영역이라고 생각하셈)

 

 

for루프 안에서도 변수를 선언 할때가 있는데..

1, 2, 3 나와야 되는거 아니냐구!!! 와 3, 3, 3이 나오지;;;

처음의 0은 if문에 변수에서 추출해서 출력한것, var는 함수단위라고했지? if블록 단위가 아냐 명심!

그리고 i 값이 마지막에 다 증가된 3이 출력되는걸 볼수 있어. 

setTimeout() 100지나고난후 for 문의 var i 는 이미 증가가 되어있기에....

어떻게 보면 개별적을 i에게 메모리 공간을 부여하는게 아닌 outer()함수 단위로 부여가 되기에...

이미 콘솔 찍을때 증가가 다 되어진거.... 그래도 자꾸 강조하는게 var는 함수 스코프단위라는거!! 명심해야해

 

근데 es6쓰면서 var 쓴적이 없지!ㅋㅋㅋ

 

let은 블록 단위의 스코프를 써.... 아까 if문경우 var로 선언했을때랑은 달라 let은 if문 블록 안에서만 유효해...

-> 결국 let은 블록 단위 스코프라는거!!!

score 정의안되있다고 승질내는거봐 ㅎㅎ

 

그럼 블록안에다가 선언좀 해보자

function outer() {
    if(true) {
        let score = 0;
        score = 30;
        score = "30";
    };
}
 
outer();

이렇게 하면 승질을 낸다....(컴파일시키면)

-->

score 초기화 시킬때 0 으로서 타입이 number가 된것이기에 score에 "30" 문자열이 들어가는 순간 타입에러가 나는것.

 

만약 초기값을 안주고 선언만한다면 어떻게 될까...?

--> 아주 자알 돌아간다~~   그리고 마우스를 살며시 가져다 데면 이런 작은 창이뜬다

let score의 타입이 any?  --> 스트링이건 넘버건 뭐든 다 드루와!! 포용하는 타입

하지만 우리가 이렇게 쓰려고 사용하는게 아니자누?? 해당 어노테이션을 써보자 ㅎㅎ

 

let score : 하고 해당 지정하려는 타입을 기입하면 타입을 걸러낼수가 있다.

 

그럼 아까 setTimeout 을 적용해서 해볼까?? 함수 스코프 단위의 var 말고 블락 단위의 let을 이용해봐?!?

0, 1, 2... 우리가 생각하는 데로 왔어.....ㅎㅎ

 

const 를 써볼것이다.. const는 상수라고한다 상수(변하지 않는값)

그래서 const 는 선언시 초기값을 무조건 주어야한다. let과 다른점은 상수인점과 ... 상수인점!! ㅋㅋ 그래서

재할당을 할수 없어요~

 

변수를 다룰려면 클로저 , 호이스팅 등등 쓸것이 많은데 그것은 뒤쪽에 서술하겠다.. 여기는 타입스크립트 공부시간이 이니까~~

 

정리를 하자면

 

ES5까지는 변수선언 방법은 유일하게 var키워드였다. 그래서 위에서 tsc 컴파일할때 ES버전에따라 let으로 바뀌고 var로 바뀐게 이런거야....

그래서 신경을 안쓰면 다음과 같은 문제가 발생했어

 

1. 함수 레벨 스코프(Function-level scope)
   • 함수의 코드 블록만을 스코프로 인정한다. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다.
   • for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다.
2. var 키워드 생략 허용
   • 암묵적 전역 변수를 양산할 가능성이 크다.
3. 변수 중복 선언 허용
   • 의도하지 않은 변수값의 변경이 일어날 가능성이 크다.
4. 변수 호이스팅
   • 변수를 선언하기 이전에 참조할 수 있다.

대부분의 문제는 전역 변수로 인해 발생한다. 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리하다는 장점이 있지만 불가피한 상황을 제외하고 사용을 억제해야 한다. 전역 변수는 유효 범위(scope)가 넓어서 어디에서 어떻게 사용될 것인지 파악하기 힘들며, 비순수 함수(Impure function)에 의해 의도하지 않게 변경될 수도 있어서 복잡성을 증가시키는 원인이 된다. 따라서 변수의 스코프는 좁을수록 좋다.

ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.

 

이래서 오늘 이에대해 글을 조금 써봤고 타입을 자바나 타언어처럼 지정하는 특징이 중요한거같다.

 

ㅃ2~