타입스크립트 | 변수선언, var와 let차이점

모든 언어의 시작은 변수 선언을 익히는 것부터 인 것 같습니다. 변수 없이는 코드를 작성할 수 없기 때문입니다. 타입 스크립트에서 변수와 상수를 선언하는 방법, var와 let의 차이, 타입 인터페이스에 대해 공부해 보도록 하겠습니다.

---

var, let, const에 대하여

자바스크립트 코드를 작성해본 사람이라면 변수 선언에 사용되는 var 키워드에 익숙할 것입니다. var는 처음 자바스크립트를 배우는 개발자에게 혼란을 주는 직관적이지 못한 특징을 가지고 있습니다. ECMAScript 2015에서 변수와 상수를 선언하기 위한 두 개의 새로운 키워드를 도입했으며, TypeScript도 이를 지원합니다. let은 변수를 선언할 때 사용하고 const는 상수를 선언할 때 사용합니다.

---

var와 let, const 차이점 알아보기

범위(scope) 지정 규칙

var와 let 및 const의 주요 차이점은 선언된 식별자에 적용되는 범위(scope) 지정 규칙입니다. var로 선언된 변수는 선언된 함수에서 전역적으로 사용할 수 있습니다. 변수가 if블록에서 5단계로 중첩되어 있더라도 함수의 모든 코드가 변수에 접근할 수 있습니다.

let과 const는 선언된 블록으로 범위(스코프)가 정해집니다. 블록은 중괄호{} 세트로 정의됩니다. 블록은 함수의 전체 본문이 될 수도 있고 단순한 for 루프의 본문이 될 수도 있습니다. let 및 const로 선언된 변수는 선언된 블록 외부에서 액세스 할 수 없습니다. 이는 특정 변수를  사용해야 하는 위치가 명확해지기 때문에 에러를 줄이는데 도움이 됩니다.

 

호이스트 여부

var로 선언된 변수는 선언된 함수의 맨 위로 호이스트 됩니다. 이 말은 변수가 함수의 끝 부근에 선언되더라도 런타임 동작은 마치 함수의 맨 위에 선언된 것처럼 처리된다는 의미입니다.

let 및 const로 작성된 선언은 블록의 맨 위로 호이스트 되지 않습니다. 오직 선언된 위치에서만 접근할 수 있습니다.

 

동일 변수 선언 가능 여부

 또 다른 차이점은 var를 사용하여 동일한 함수 내에서 동일한 변수 이름을 두 번 선언할 수 있다는 것입니다. 그건 절대로 해서는 안 되는 일이라고 생각합니다. 하지만 다행히도  let and const를 사용한다면 동일한 이름을 선언할 시 에러로 처리되기 때문에 이름은 지정된 코드 블록에서 한 번만 선언할 수 있습니다.

 

let 및 const에 적용되는 범위 지정 규칙을 보여주는 예를 살펴보겠습니다.

Test 함수는 if 블록이 있고, if 블록 안에 두 변수를 선언했습니다. var를 사용하여 varValue 변수를 선언하고 문자열을 할당했습니다. 키워드 let으로 변수 letValue를 선언하고 문자열을 할당했습니다. 이 경우 블록은 if 문을 감싸는 대괄호로 정의됩니다.

if문 블록 밖에서 선언한 두 변수의 값을 콘솔 로그로 출력하려고 하고 있습니다. varValue가 var 키워드로 선언되었기 때문에 첫 번째 문은 정상적으로 작동합니다.  하지만 letValue는 Test함수에 정의된 외부 블록에 선언되지 않았기 때문에 두 번째 문은 컴파일러 오류를 발생시킵니다.

---

기본 데이터 타입

이제 타입 스크립트에 내장된 기본 데이터 타입 알아보겠습니다. 자바스크립트와 매우 유사합니다.

1. Boolean

ture 및 false 값을 저장할 수 있는 부울 타입입니다.

2. Number

Number 타입은 부동 소수점 숫자이고 자바스크립트와 같습니다.

3. String

String은 문자열 데이터를 저장합니다.

4. Array

Array로 배열을 사용할 수 있습니다. 타입 스크립트에는 배열 선언하는 두 가지 다른 방법이 있으며, 배열을 포함할 값의 타입을 지정할 수도 있습니다.

5. Enum

타입 스크립트는 enum 키워드를 사용하는 열거 지원이 포함되어 있습니다. 열거형은 유한한 숫자 값 집합에 친근한 이름을 부여하는 방법입니다

6. Any

타입 스크립트의 any 키워드는 변수가 모든 유형을 참조할 수 있음을 나타내는 데 사용됩니다. any를 사용해서 변수를 선언하게 되면 JavaScript와 같이  동일한 동작을 할 수 있습니다.  any를 사용한 변수에는 한 줄에 문자열 값을 할당하고 다음 줄에 숫자 값을 할당하고 그다음 줄에 개체 값을 할당할 수 있습니다. 일반적으로 TypeScript에서 제공하는 타입을 최대한 활용하려면 any 키워드를 사용하지 않는 것이 좋습니다.

7. Void

void 키워드는 타입의 부재를 지정하는 데 사용됩니다. 함수가 값을 반환하지 않음을 지정하는 데 가장 많이 사용됩니다.

---

타입 인터페이스

타입 스크립트에서 변수를 선언할 때 변수에 저장할 수 있는 데이터 타입 지정할 수 있습니다. 하지만 타입을 지정하는 것은 필수가 아닙니다. 만약 타입을 지정하지 않으면 타입 스크립트는 타입을 유추하게 됩니다.

위 예에서 hello라는 변수를 선언했습니다. 타입을 지정하지 않았지만 String 값으로 초기화를 해주었습니다. 이를 기반으로 타입 스크립트는 새 변수의 타입이 String임을 유추합니다.

나중에 해당 변수에 숫자를 저장하려고 하면 컴파일 에러가 발생합니다.

아래에 숫자를 반환하는 간단한 함수를 만들었습니다.

하지만 함수의 리턴 타입을 명시적으로 지정하지 않은 상태입니다. 타입 스크립트는 함수 본문의 리턴 문이 숫자 22를 반환한다는 사실을 기반으로 Number가 될 것이라고 추론합니다.

타입 스크립트가 String타입으로 유추할 다른 변수 stringValue를 선언하고 return22 함수의 반환 값을 할당하려고 하면 타입 스크립트는 함수가 숫자를 반환한다는 것을 알고 있기 때문에 컴파일러 에러가 발생합니다.

 

위에서 다뤘던 예제에 명시적으로 타입을 추가해 보겠습니다.

타입을 적는 방법은 변수 이름 뒤에 콜론을 추가하고 타입을 지정하면 됩니다.

함수의 경우에도 함수 매개변수를 묶는 닫는 괄호 뒤에 콜론을 적어주고 그 위에 함수의 반환 타입을 적어줍니다. 

 

---

다음 포스트에서는 변수 선언 테스트를 해보도록 하겠습니다. 읽어주셔서 감사합니다.