[JavaScript & TypeScript] - 식별자, 값, 타입

Parkboss·2022년 5월 11일

JavaScript / TypeScript

목록 보기

1/8

1.식별자

식별자는 코드 내의 변수, 함수, 혹은 속성 (en-US)을 식별하는 문자열이다.
JavaScript의 식별자는 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없다.

식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다르다.
JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있다.

1. 숫자로 시작할 수 없다.
2. 공백을 포함할 수 없다.
3. 길이 제한은 없다. (적당한 이름으로 짓는다)

데이터로 만들어진 식별자는 문자열로 분석이 가능하다.
브래킷[ ]을 사용해 접근 가능하다.
(데이터로 만들어진 식별자는 문자열로 분석이 가능하다.)

const 0 = {
  age: 10;
  ['123my Name']: '김'
}
0['123my Name'];

1. 상수는 대문자로 짓는 것이 좋다. 오래된 개발자들의 규칙이다.
2. setAge 단어와 단어 사이에 스페이스로 띄어 놓을 수 없다.
식별자에는 공백 포함이 안된다.
3. setAge -> 카멜 케이스
(첫 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작한다.)
4. set_Age -> 스네이크 케이스
(단어와 단어가 뱀처럼 연결되어 있다고 하는 의미로 스네이크 케이스라고 불린다.)

Mozilla-식별자

2.값(value)

1.자바스크립트 데이터 타입

Boolean 타입
Null 타입
Undefined 타입
Number 타입
BigInt 타입
String 타입
Symbol 타입
Object (속성의 컬렉션)

2.타입스크립트

불리언 (Boolean)
숫자 (Number)
문자열 (String)
배열 (Array)
튜플 (Tuple)
열거 (Enum)
Any
Void
Null and Undefined
Never
객체 (Object)
타입 단언 (Type assertions)
'let'에 관하여

3.튜플(Tuple)

배열 내의 원소의 타입들을 제한하고 싶을 때 튜플이 편리하다.

4.열거(Enum)

Enum은 데이터 타입이 아니라 코드이다.
만약 서버나 외부로부터 어떤 데이터를 가지고 오고 그 데이터를 객체로 표현해서 실제로 UI로 다룰 때 Enum 타입이 데이트를 변환하기 까다롭다.
그래서 사용에 따라 Enum을 쓸지 object로 쓸지 결정해서 써야 된다.

5.Any

Any는 모든 데이터 타입이라는 뜻을 갖고 있다. 가능하면 쓰지 않고 지양해라!

6.Void

void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것을 볼 수 있다.

7. Never

함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.

8. Object(객체)

객체도 값으로 취급한다.

값으로 취급하는것은 무엇이든 변수에 넣을수 있다는 원칙이 있다.

3.타입

1.자바스크립트

function addAge(age) {
  return age + 1;
}

let age = addAge('30');

console.log(age);

출력 값 : 301

1. 문자열 '30'이라고 수정해서 출력해 보면 301이라고 출력이 된다.
2. age 변수에 문자열이 들어갔다.
3. 문자열 같은 경우에는 왼쪽과 오른쪽 값 중에 하나가 문자열이면즉, 숫자가 아니면 둘 다 문자열로 취급하고 2개의 값을 그냥 합친다.
4. 더하기 연산이 되지 않고 합쳐버린다. 그래서 301 문자열이라는 결과를 만들어낸다.
5. 결국 자바스크립트는 데이터를 변수에 넣을 때 그 변수의 타입을 매번 데이터가 들어가는 시점에 자유롭게 바꾼다는 메커니즘을 바꾼다.

2.타입스크립트

function addAge(age: number):number {
  return age + 1;
}

let age:number = addAge('30');

console.log(age);

타입스크립트 컴파일러가 addAge는 문자열을 받지 못한다고 에러가 뜬다.

1. 자바스크립트가 타입 불안정성에 의해서 나타나는 이 현상 (301 문자열이 출력된 것) 즉, 사용자가 애플리케이션을 사용하고 있는 상황에서 발생하는 상황이라면 타입스크립트는 런타임이 아니라는 것이다.
2. 타입스크립트 앱을 사용자가 사용하고 있는 상황이 아니라 개발자가 개발하는 순간 즉, 컴파일 오류를 잡아내 준다는 하는 것이 가장 큰 가치이다.
3. 개발자가 코드를 바꾸지 않으면 통과되지 않는 원리이다.
컴파일 타임 즉, 개발하는 순간 코드의 타입 안정성을 잡아 주는 것이 가장 중요하다.

자바스크립트와 타입스크립트를 타입을 다루는 철학과 메커니즘의 가장 큰 차이이다.