타입스크립트 | 변수 선언, 타입 어노테이션 실습

변수 선언 및 타입 어노테이션 실습을 해보겠습니다. 변수 선언 실험을 통해 블록 스코프와 const의 참조에 대해 알아보고, 타입 어노테이션을 통해 타입 스크립트의 장점을 확인해 보세요.

---

요즘 세상에는 보기 힘들 수도 있는 비디오 대여 관리를 하는 어플을 만든다고 가정해 보겠습니다.

변수 선언

우선 getAllVideos 라는 함수를 작성하겠습니다.

함수에 대해서는 차후 다른 포스트에서 다룰 예정이지만, 지금 위의 함수는 단순한 자바 스크립트 함수처럼 보이고 동작합니다. videos라는 변수를 선언하고 배열에 비디오를 나타내는 객체 리터럴을 넣어주고 있습니다. 제목과 배우 이름, 대여 가능 여부를 나타내는 세 가지 속성을 가지고 있습니다. 마지막으로 함수에서 배열을 반환해주고 있습니다. let으로 videos 변수를 선언했음을 주목해주세요. 블록이 함수 본문이고 함수의 맨 위에 선언했기 때문에 var로 선언한 것처럼 작동합니다.

 

두 번째 함수 printAvailableOne 을 추가하겠습니다.

비디오 배열을 매개변수를 받고 배열에 있는 비디오 수와 대출 가능한 첫 번째 비디오 하나를 출력해 주는 함수입니다.

let을 사용하여 배열의 비디오 수를 저장하는 변수 numOfVideos를 선언하였습니다. 함수에 배열을 전달할 것이므로 배열에 있는 length 속성을 사용하여 numOfVideos를 초기화합니다.

이제 for.. of 루프를 사용해서 available속성이 true로 설정된 첫 번째 비디오를 찾습니다. for... of 구문에서 video는 각 반복에서 검사 되는 비디오를 할당하는 데 사용되는 변수입니다. let으로 선언했기 때문에 for문 뒤의 중괄호로 정의된 루프 내에서만 사용할 수 있습니다. for의 if문에서 available이 true라면 availableOne에 제목을 할당하고 for 루프에서 빠져나오게 됩니다. 그러고 나서 총 비디오 수와, 대출 가능한 비디오 하나를 출력하고 함수가 종료됩니다.

 

let 의 스코프

그런데 함수를 보면 VSCode에서 우리에게 뭔가 문제가 있음을 빨간 줄로 알려주고 있습니다. 빨간줄 밑줄이 나있는 변수에 마우스 오버를 해보면 팝업 메시지가 표시됩니다.

해당 변수를 찾을 수 없다는 메시지가 나오고 있는데요. 그 이유는 for 루프 내에서 let 키워드로 변수를 선언했기 때문입니다. 루프 블록에서 선언한 let 변수를 블록 외부에서 참조하고 있었기 때문에 에러가 났던 것입니다.

 

let대신에 var를 사용하여 변수를 선언하면 오류가 사라지게 할 수 있습니다.

빨간색 구불구불한 선이 사라진 걸 볼 수 있습니다. 이렇게 해도 에러가 사라지지만 더 나은 설루션은 가장 바깥쪽 코드 블록에서 let으로 변수를 선언하는 것입니다.

 

변수를 for 루프 외부로 이동하고 var를 다시 let으로 변경하겠습니다.

에러도 사라지고 코드도 한결 나아 보입니다.  함수를 호출하는 구문도 추가하였습니다.

 

이제 콘솔에서 컴파일 후 결과를 출력해 보면 아래와 같이 출력됩니다. (컴파일하는 방법을 확인하고 싶으시면 이쪽을 확인해 주세요)

컴파일러가 JavaScript 출력을 저장하고 있는 js 디렉터리로 이동한 다음 node app.js 명령으로 프로그램을 실행하였습니다. 총 비디오수는 3개이고, 대출 가능한 비디오는 해리포터로 나오고 있습니다.

 

const의 참조 변경? 값 변경?

코드를 조금 추가해 보겠습니다.

allVideos에 빈 배열을 설정하는 라인을 추가하였는데요. 다시 빨간색 밑선이 표시되었습니다. 마우스 오버해서 이유를 살펴보겠습니다.

상수(const)이기 때문에 할당할 수 없다고 메시지가 나옵니다. 명시적으로 const로 선언하였기 때문에 변경이 불가능합니다. 하지만 상수에 새 배열을 할당하는 대신 Array에서 사용할 수 있는 push 함수를 호출하고 새책을 추가할 수 있습니다.

빨간 밑줄이 사라졌습니다.

터미널로 돌아가서 앱을 실행하면 4개의 비디오가 있음을 확인할 수 있습니다.

const 키워드를 사용하면 식별자가 다른 것을 참조되도록 변경하는 걸 못하게 방지해 줍니다. 완전히 다른 배열을 참조하도록 변경할 수는 없지만, 이미 참조하는 배열 내부의 데이터는 변경할 수 있습니다. 미묘하지만 매우 중요한 내용입니다.

---

타입 어노테이션

이제 예제 코드에서 타입에 대해 살펴보겠습니다.

코드를 보면 아직 타입 어노테이션을 추가하지 않았습니다. 따라서 사용되는 타입은 타입 스크립트가 유추하게 됩니다.

getAllVideos 함수 위로 마우스를 올려보겠습니다.

함수의 시그니처에 배열이 반환되고 객체는 title, actor, available이라는 세 가지 프로퍼티가 포함되어 있음이 표시됩니다. 타입 스크립트는 처음 두 개는 string이고 마지막은 boolean임을 올바르게 추론하였습니다.

printAvailableOne 함수 위로 마우스 오버해보겠습니다.

매개변수가 있지만 해당 매개변수를 타입 스크립트에서 유추할 방법이 없으므로 현재 any 타입으로 되어있습니다. 그리고 그 뒤에 void라고 나오는 건 반환 타입입니다. 반환 값이 없으므로 void로 유추되고 있습니다.

---

타입 어노테이션 추가하기

printAvalialbeOne 함수에 타입 어노테이션을 추가하여 명시적으로 만들어 보겠습니다.

일반적으로 타입 어노테이션을 사용하고 타입에 대해 명시적으로 적어주는 것이 좋은 습관입니다. 코드를 보는 개발자가 코드를 좀 더 명확하게 파악할 수 있고, 변수나 함수에 대한 의도를 명확하게 해 줍니다. 또한 컴파일러가 다른 잘못된 유형을 유추할 가능성을 제거해 줍니다. 하지만 때때로 타입 어노테이션이 코드를 더 장황하게 만들어 줄 경우도 있기 때문에 팀의 결정에 따라 부분적으로 생략을 하기도 합니다.

 

타입 스크립트가 타입 어노테이션이 버그를 조기에 잡는데 어떻게 도움이 되는지 보기 위해 availableOne에 숫자 10을 할당해 보겠습니다.

즉시 편집기에서 에러가 표시되는데, 이는 string에 number를 할당할 수 없다는 것을 알려줍니다. 타입으로 인해 개발 시에 이러한 버그를 찾는 게 도움이 많이 됩니다.

 

---

여기까지 읽어주셔서 감사합니다. 다음 포스트에서 열거형과 배열에 대해 공부해 보겠습니다.