식별자와 Value

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다.

식별자

MDN에서 정의하는 식별자란?

식별자 - 용어 사전 | MDN

식별자 규칙

• 숫자로 시작할 수 없고, 공백을 포함할수 없다
• 데이터는 식별자화 될 수 있다.

let age = 10;

function setAge(){
}

const obj = {
    age : 10; //속성도 식별자이다. 
    ['123my name'] : '김' // 데이터는 식별자화 할 수 있다.
}
obj.age   //10
obj.['123my name']    //'김'

식별자 관습

• 상수인 경우는 대문자로 작성합니다.
• 단어와 단어의 구분하는 방법은 카멜케이스를 사용한다.

Value 값

자바스크립트 기본자료형

• Boolean - true, false
• Null - 값이 없다
• Undefined - 값이 정의되어있지 않다.
• Number - 정수 , 실수
• String - 문자열
• Symbol (ES6에 추가)
• Object

배열, 함수도 값으로 취급한다.

타입스크립트 기본자료형

• Boolean
• Number
• String
• Array
• Obejct
  -----------------------------JS에도 있는 기본 자료형 -----------------------------------------------
• Type assertions
• Tuple - 특별한 배열
• Enum- 열거형
  

  //자바스크립트
  const Color = { Red: 1, Blue : 2; Green : 3, } 
  Color.Red; 
  
  //타입스크립트 enum-> 안에 실제 데이터는 숫자로 되어있다. 
  enum Color { Red, Blue, Green } 
  Color.Red;

• Any - 모든 타입, 자바스크립트의 기본 타입
• Void - 함수리턴값 X
  

  funcion printHello(): void{ 
  	console.log('hello'); 
  }​

• Null and Undefined
  

  let un: undefined = undefined; 
  let nu: null = null;​

• Never : 리턴하지않는다.예외처리 절대 값이 발생하지 않을 때
  

  function error(message: string): never {
  		throw new Error(message); 
   }​

 

Typescript vs Javascript 문법 차이

같은 소스에서 타입스크립트와 자바스크립트와의 차이를 알아봅시다.

 

📕 Javascript

function addAge(age){
    return age + 1;
}
let age = addAge(20);  //21

📕 Typescript

function addAge(age :number): number{
    return age + 1;
}
let age = addAge(20);  //21

이를 보면 둘다 같은 결과가 나옵니다.

❗ 만약 Javascript에서 타입을 number로 넣지 않는다면

let age = addAge('20');   // 결과  : 201 문자열로 변환

다음과 같은 현상이 생깁니다.

자바스크립트는 값을 넣는 순간 변수의 타입을 데이터가 들어가는 시점에 자유롭게 바꾸는 구조입니다. 따라서 데이터의 변환이 자유롭다고 할 수 있습니다.

 

이러한 매커니즘은 한편으로는 편리하지만 의도하지 않게 오류를 발생시키는 경우가 생깁니다.

 

❗ 이를 해결하기 위해 자바스크립트 개발자들은 어떻게 했나요

function addAge(age){
     if(typeof age === 'number'){
            return age + 1;
        }
        // 에러 처리를 할까... 콘솔에 찍을까???...
}
let age = addAge(20);  //21

자바스크립트 개발자들은 이를 해결하기 위해 앞에 발생할수 있는 상황에 대한 처리를 꼼꼼히 개발을 해주어야합니다.

 

원하는 값(number)이 아닌경우 예외처리를 해서 던져버릴까...? 아니면 콘솔에 찍을까 함수를 끝낼까 ?와 같은 더 많은 고민을 해야하는 상황이 발생합니다. 많은 방어 코드를 작성해야합니다.

 

타입의 변동이 자유롭다는 자바스크립트의 원리는 개발자에게 불편함을 증가시키는 일을 되어버렸습니다.

 

❗ 타입스크립트로 간단히 해결

function addAge(age :number): number{
    return age + 1;
}
let age = addAge(20);  //21
let age = addAge('20') //개발단계에서 에러

타입스크립트 컴파일러가 에러가 나면서 컴파일 자체가 되지않습니다.

 

타입스크립트에서는 타입을 지정하기 때문에 개발자들은 개발시 원천적으로 문제를 제거합니다. 자바스크립트의 불안정성을 타입스크립트가 해결하고 있습니다.

 

타입스크립트의 가치 중 하나는 이러한 불편함을 해소시켜줍니다.