오늘은 자바스크립트의 데이터 타입 및 연산자에 대해 정리해볼까 합니다.

데이터 타입을 알아보기 전에 동적 언어와 정적 언어에 대해 알아봅시다.

동적 타입 언어 vs 정적 타입 언어

프로그래밍 언어는 보통 정적 타입의 언어와 동적 타입의 언어로 나뉘어집니다.

여기서 타입이란 자료형을 의미합니다.

📝 정적 타입 언어 (Statically typed language)

정적 타입의 언어는 컴파일 시 변수의 타입이 결정되는 언어를 뜻합니다. 코드 작성자가 변수 타입을 직접 작성하게 됩니다.

정적 타입 언어에는 C, C#, C++, Java 등의 언어가 있고, 이들 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 합니다. 컴파일 시에 자료형에 맞지 않는 값이 할당되었을 경우 컴파일 에러가 발생하게 됩니다.

장점

• 타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입 안정성을 높이고 타입 관련한 런타임 오류를 방지할 수 있습니다.
• 컴파일 시에 미리 타입을 결정하기 때문에 코드 실행 속도가 빠릅니다.
• 코드의 가독성이 좋아 다수의 협업이나 프로젝트를 할 때 유지보수에 유리합니다.

단점

• 코드를 작성할 때 매번 타입을 결정해주는 것이 번거롭습니다.

📝 동적 타입 언어 (Dynamically typed language)

동적 타입 언어는 런타임 시 변수의 타입이 결정되는 언어를 뜻합니다. 즉, 코드를 실행할 때 알아서 변수 타입을 판단하여 적용해주는 언어입니다.

동적 타입 언어에는 JavaScript, Ruby, Python 등의 언어가 있고, 이 언어들은 컴파일 시 자료형을 정하는 것이 아니고 런타임 시에 동적으로 타입이 결정되게 됩니다.

장점

• 코드 실행 시 자동적으로 변수의 타입을 판단하여 지정해줍니다.
• 타입을 매번 지정하지 않아도 되기 때문에 코드 작성 속도가 빠릅니다.

단점

• 실행 도중에 변수에 예상지 못한 자료형이 들어와 타입 에러가 발생할 수 있습니다.
• 타입 관련 에러는 런타임 시 확인 가능하기 때문에 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워집니다.

자바스크립트는 동적 타입의 언어입니다.

그래서 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능합니다.

👌 데이터 타입

1. 숫자 타입

• ECMAScript는 Number와 BigInt 두 가지의 내장 숫자 타입을 가지고 있습니다.
• Number 타입은 배정밀도 64비트 이진 형식 IEEE 754 값(-(2^53 – 1)부터 2^53 – 1까지의 수)입니다.
• BigInt는 Number의 안전 한계를 넘어서는 큰 정수를 안전하게 저장하고 연산할 수 있습니다.
• BigInt도 +, *, -, **, % 연산자를 사용할 수 있습니다.
• BigInt는 Number와 혼합해 연산할 수 없으며, 이때 TypeError가 발생합니다.

2. 문자열 타입

• 텍스트 데이터를 나타낼 때 사용하며 16비트 부호 없는 정수 값 요소로 구성된 집합입니다.
  
• 문자열을 생성한 후 바꾸는 것은 불가능하지만 원본 문자열을 사용해 새로운 문자열을 생성하는 것이 가능합니다.
  

3. 템플릿 리터럴

• 내장된 표현식을 허용하는 문자열 리터럴입니다.
• 이중 따옴표나 작은 따옴표 대신 백틱(``)을 이용합니다.
• 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, $와 중괄호($ {expression})로 표기할 수 있습니다.
• 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으셔야 합니다.
  

4. 불리언 타입

• Boolean 타입은 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있습니다.
  

5. null 타입

• Null 타입은 null 하나의 값만 가질 수 있습니다.
• 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조입니다.
• null은 동작이 원시적으로 보이기 때문에 primitive values 중 하나로 표시됩니다.
  

6. 심벌 타입

• 고유하고 변경 불가능한 원시 값이며 객체의 속성키로 사용할 수 있습니다.
• 심볼은 Symbol() 함수로 생성할 수 있으며 이 함수로 생성된 심볼의 타입은 객체가 아닌 symbol입니다.
• 이 함수는 변경이 불가능하고 고유한 원시 타입이므로 호출이 될 때마다 새로운 값을 생성합니다.
  

7. 객체 타입

• Javascript에서 객체는 키와 값을 매핑한 것입니다.
• 객체 타입은 변경 가능한 값(mutable value)입니다.
• 객체는 참조되어 있기 때문에 상태가 변경될 수 있다는 문제점을 가지고 있습니다.

👌 연산자

1. 산술 연산자

• 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환합니다.
• 표준 산술 연산자는 +, -, *, /입니다.
  

2. 할당연산자

• 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.
• 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=)로, x=y는 y의 값을 x에 할당합니다.
• 연산과 할당을 동시에 수행하는 복합 할당 연산자도 존재합니다.
• ex) +=, -=, *=, %= ...
  

3. 비교연산자

• 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반환합니다.
• 피연산자로는 숫자, 문자열, 논리형, 객체 값을 사용할 수 있습니다.
  

연산자	설명
동등(==)	피연산자가 서로 같으면 true를 반환합니다.
부등(!=)	피연산자가 서로 다르면 true를 반환합니다.
일치(===)	두 피연산자의 값과 타입이 모두 같은 경우 true를 반환합니다.
불일치(!==)	피연산자의 값 또는 타입이 서로 다를 경우 true를 반환합니다.
큼(>)	왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환합니다.
크거나 같음(>=)	왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환합니다.
작음(<)	왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true를 반환합니다.
작거나 같음(<=)	왼쪽 피연산자가 오른쪽 피연산자와 같거나 작으면 true를 반환합니다.

4. 삼항조건연산자

• 조건 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다.
• condition ? val1 : val2;
• 만약 condition이 참이라면, 조건 연산자는 val1을 반환하고, 그 외에는 var2를 반환합니다.
  

5. 논리 연산자

• 논리 연산자는 보통 불리언(논리)값과 함께 사용해서 불리언 값을 반환합니다.
  

연산자	사용법	설명
AND(&&)	expr1 && expr2	둘 다 참일 때 true를, 그 외에는 false를 반환합니다.
OR(||)	expr1 || expr2	둘 중 하나가 참일 때 true를, 그 외에는 false를 반환합니다.
NOT(!)	!expr	true를 false로 false를 true로 반환합니다.

6. 쉼표 연산자

• 쉼표 연산자(,)는 두 피연산자를 모두 평가한 후 오른쪽 피연산자의 값을 반환합니다.
  

7. 그룹 연산자

• 그룹연산자 “()”는 표현식 평가의 우선순위를 조절합니다.
  

8. typeof 연산자

• typeof 연산자는 평가 전의 피연산자 타입을 나타내는 문자열을 반환합니다.

  var myFun = new Function('5 + 2');
   var shape = 'round';
   var size = 1;
   var foo = ['Apple', 'Mango', 'Orange'];
   var today = new Date();
  
   typeof myFun;     // "function" 반환
   typeof shape;     // "string" 반환
   typeof size;      // "number" 반환
   typeof foo;       // "object" 반환
   typeof today;     // "object" 반환
   typeof dontExist; // "undefined" 반환
  

9. 지수 연산자

• 거듭제곱 연산(**)는 왼쪽 피연산자를 밑, 오른쪽 피연산자를 지수로 한 값을 구합니다.
• BigInt도 피연산자로 받을 수 있다는 점을 제외하면 Math.pow(,)와 같습니다.
  

10. 그 외: In / Delete / InInstanceof

• Instanceof : 클래스의 타입을 감지하는 역할을 합니다. 두 개의 피연산자가 필요합니다.
• ex) inst instanceof Person; <--> typeof inst;
• In : 명시된 속성이 명시된 객체에 존재하면 true를 반환합니다.
• ex) 속성 in 객체명
  • 속성 : 속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값입니다.
  • 객체명 : 객체의 이름입니다.
• delete : 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다.

연산자 우선순위

참고 : ==와 ===의 차이점

==는 Equal Operator입니다. 예를 들어 a==b라고 할 때, a와 b의 값이 같은지를 비교하게 되고 값이 같을 시 true를 반환하게 됩니다.

===는 Strict Equal Operator입니다. 이는 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false를 반환합니다.

참고 자료
https://velog.io/@hahan
https://velog.io/@stormtrooper