자바스크립트 데이터타입과 연산자(일치, 비교)

프로그래밍을 하다보면 데이터 타입이 일치하지 않아 가끔 예상치 못한 오류를 뱉어내기도 하는데 예전에 실전프로젝트를 진행하며 풀리지 않는 문제로 계속해서 고민했던 적이 있었다. 그 때는 아직 많이 부족해 원인을 찾는데 너무 오랜 시간을 허비했지만 지금은 비슷한 문제 상황이 생겼을 때 데이터 타입을 비교해보는 것까지 꼼꼼하게 체크하게 된다.

 

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

데이터 타입이란 것은 말 그대로 값의 종류를 의미한다. 자바스크립트에서는 총 7개의 데이터타입을 갖는데 크게 원시타입과 객체 타입으로 분류할 수 있다. 숫자타입, 문자열타입, 불리언타입, null 타입, undefined 타입, 심벌타입을 포함하는 원시타입과 객체, 함수, 배열 등을 포함하는 객체 타입이 있다.

 

구분	데이터 타입	설명
원시 타입	숫자 타입(number)	정수, 실수 구분 없이 하나의 숫자 타입
	문자열 타입(string)	문자열
	불리언 타입(boolean)	true & false 값
	null 타입	의도적으로 명시한 비어있는 값
	undefined 타입	var 변수 선언의 초기화 단계에서 암묵적으로 할당되는 값
	심벌 타입(symbol)	ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값
객체 타입		객체, 함수, 배열 등

 

자바스크립트에서 사용하는 타입은 이렇게 분류를 해볼 수 있는데 숫자 타입으로 선언한 10과 문자열 '10'은 전혀 다른 값이라고 할 수 있다. 그렇기 때문에 알고리즘 로직을 짤 때도 이 두가지를 비교하기 위해 사용하는 연산자를 잘 선택해야한다. 그렇지 않으면 예상되는 로직에 문제가 발생할 수 있기 때문이다.

 

2. 자바스크립트의 연산자

자바스크립트에서 사용할 수 있는 연산자에는 기본 연산자, 비교연산자, 논리연산자 등이 있는데 이러한 연산자들은 실제로 정말 많이 쓰이기 때문에 각각의 쓰임에 대해서 잘 알아두는 것이 좋다.

 

1) 기본 연산자

자바스크립트의 기본 연산자에는 +, -, *, /, % 등이 있는데 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산자 등이 있다. 나머지 연산자의 경우에는 짝수, 홀수 등을 구분하는 등에서 사용할 수 있다. 또한 곱셈 연산자를 두번 사용하면 거듭제곱을 의미하기에 기본 연산자를 잘 활용하면 각각의 계산을 어렵지 않게 구현할 수 있다,

홀수 : X % 2 = 1
짝수 : Y % 2 = 0

const result = 2**4;
 
console.log(result) // 16

 

a. 기본 연산자를 줄여쓰는 방법

기본 연산자를 그냥 사용해도 되지만 줄여서 쓰는 것도 가능하기에 아래와 같이 사용할 수 있다. 아래 예제를 제외하고도 -=, *=, /=, %= 등으로 줄여서 표현할 수 있다.

let num = 20;
num = num + 5;
 
console.log(num) // 25

let num = 20;
num += 5;
 
console.log(num) // 25

 

b. 증가 연산자와 감소 연산자

증가 연산자와 감소 연산자는 각각의 값을 1씩 증가시키거나 감소시킬 때 사용한다. 증가는 ++, 감소는 -- 로 표현할 수 있다.

let num = 20;
num++;
 
console.log(num) // 21
 
num--;
 
console.log(num) // 19

 

증가 연산자와 감소 연산자를 사용할 때 한가지 알아두어야할 사항은 ++, -- 를 사용하는 위치에 따라 값이 바뀔 수 있다는 것을 알아두어야한다. 두가지의 차이는 이렇다.

let num = 20;
let result = num++;
 
console.log(result) // 20

let num = 20;
let result = ++num;
 
console.log(result) // 21

 

2) 비교 연산자

비교 연산자는 말그대로 각각을 비교해줄 때 사용하는데 각 조건에 따라 true, false 값을 반환한다,

console.log(8 > 5) // true
console.log(8 == 3) // false
console.log(8 != 4) // true

 

여기서 한가지 주의할 점은 = 와 ==(동등 연산자), ===(일치 연산자)의 구분이 필요하다는 것인데 기본적으로 =의 경우 할당을 의미한다. 같다를 의미하는 것이 아닌 할당을 의미하는 것이기 때문에 이 차이를 알아두어야하는 것이다.

 

a. 동등 연산자(==)와 일치 연산자(===)의 차이 

동등 연산자(==)는 타입에 상관 없이 값이 같으면 true를 반환하는데 즉, 문자열 7과 숫자 7가 같다고 인식하여 true를 반환하는 것이다. 반면에 일치 연산자(===)는 값뿐만 아니라 타입까지 비교하는 것을 의미하는데 문자열 7과 숫자 7을 비교하면 false를 반환한다.

const a = 7;
const b = '7';
 
console.log(a == b) // true
console.log(a === b) // false

 

b. 비교 연산자가 사용되는 조건문( if문 )

비교 연산자는 보통 조건문 내에서 많이 사용하는데 true, false 값을 반환하며 이를 이용해 원하는 값들을 찍어낼 수 있다. 아래의 예제를 살펴보면 각각의 조건에 따라 필요한 alert 창을 띄워주는 형태로 되어있는데 이런식으로 조건문에 사용할 수 있는 것이다.

const score = (mathScore) => {
  if(mathScore > 90) {
    alert('잘했어요!')
  } else if(mathScore > 70) {
    alert('조금 더 분발하세요.')
  } else {
    alert('재시험 대상입니다!')
  }
}
 
score(40)
score(58)
score(85)
score(100)