자바스크립트로 배우는 프로그래밍 #1.3 비교 연산자

자바스크립트는 이전 포스팅에서 말씀드렸듯이 웹페이지를 동적으로 동작할 수 있게 합니다.

즉, 자기가 원하는 어떤 연산을 수행하는 프로그래밍이 가능합니다. 

프로그래밍이 가능하다는 것은 변수, 연산, 비교, 반복 등이 가능하다는 것을 의미 합니다.

저번 포스팅에서 변수에 대해 자세히 알아봤습니다.

변수는 값을 저장합니다.

변수에 들어갈 수 있는 데이터 값의 종류는 여러개가 있습니다.

숫자 값, 문자 값, 문자열 값, 데이터가 없음을 나타내는 의미인 null(undefined)이 들어갈 수 있고, 변수에 변수를 대입 할 수도 있었죠.

위에 언급한 값 외에 다른 종류의 값에는 무엇이 있을까요? 더 있을까요?

네, 있습니다. 바로 bool 값이란게 존재하는데요~

bool 형 변수는 true(참) 혹은 false(거짓) 이라는 두가지의 논리 값을 저장할 수 있습니다.

bool 값은 왜 필요 할까요? 좀 더 자세히 예를 들어보죠.

프로그램은 OS(운영체제)안에서 돌아가고 운영체제는 컴퓨터라는 하드웨어에서 돌아갑니다.

그럼 하드웨어는 어떻게 동작할까요? 우리가 명령을 어떻게 내릴 수 있을까요?

컴퓨터는 2진수로 명령을 인식합니다. 

하지만 사람이 0과 1로만 이루어진 2진수를 사용하기란 여간 어려운일이 아닙니다.

var a = 10; 에서 10이라는 숫자만 해도 1010 으로 표현해야합니다.

그래서 고급언어 들인 C언어, 자바 등등이 나오게 되었죠.

이제 변수에 대한 얘기는 여기까지 하고 연산자에 대해 알아보죠!

변수 값은 가공될 수 있습니다. 변할 수 있죠.

뭘 해야 값이 변할까요? 

네! 계산, 즉 연산을 하면 값이 바뀝니다.

연산자는 다들 알고 계시는 +(더하기), -(빼기), /(나누기), *(곱하기)와 같은 일반 계산 연산자와는 별도로 비교 연산자라는게 있습니다.

비교 연산자는 말 그대로 비교를 할 수 있는 연산자 입니다.

비교 연산자를 사용하게 되면 어떤 두개 이상의 변수를 어떤 조건을 두고 비교를 해서 이게 참인지 거짓인지를 알아 낼 수 있게 되죠.

꼭 두개 이상의 변수가 필요 한 것은 아닙니다.

"!" 연산자는 "아니다" 라는 의미로 변수가 선언은 되어있지만 아무 값도 없을때 

즉, var a; 라고만 되있을 때 (!a) 를 출력해보면 true 가 나옵니다. 아무값도 없으니까 이 변수는 아무것도 아니다. 라고 생각하시면 될 것 같아요~

값의 종류 중에 bool 이라는 것은 2진수가 0과 1만 존재하듯 어떤 조건이 0이냐 1이냐를 판단하여 나온 true(1, 참) 혹은 false(0, 거짓) 값을 저장하는 변수형 입니다.

어떤 비교가 끝난 후에 이 비교가 참인지 아닌지를 판단하여 true 또는 false가 반환하게 되는데 이 true/false 라는 값의 종류를 bool 형 이라고 하는 겁니다.

코드로 예를 살펴볼까요?

var a = (1==1);
console.log(a);

이렇게 한번 작성해서 콘솔로 확인해보세요. (직전 포스팅에서 언급한 기능입니다.)

true 라는 값이 찍힐 겁니다.

비교 연산자 중에 "==" 라는 연산자가 있습니다.

"==" 는 어떤 두 값이 같은지 비교하는 연산자 입니다. 즉 이 연산자는 등호를 중심으로 양 쪽이 "같은지" 확인 합니다.

위 코드에서 1과 1이 같은지 "==" 연산자를 이용하여 비교하였고 1과 1은 같으므로 true(참) 이라는 bool 값이 반환 되어 출력되는 것입니다.

다른 비교연산자도 한번 봅시다.

var b = (2<1);
console.log(b);

이렇게 소스코드를 작성하게 되면 콘솔에 뭐라고 나올까요? 예상해보세요.

네, false 라는 bool 값이 출력 됩니다.

이미 느끼셨겠지만 <, >, <=, >= 도 비교 연산자 입니다. 모두 크기를 '비교' 하는 연산자죠.

이렇게 비교 연산은 비교가 끝난 이후 비교가 참인지 거짓인지 bool 값을 반환(return)하게 됩니다.

"==" 연산자만 있으면 모든게 다 같은지 비교가 될까요?

C언어와 달리 데이터 타입을 지정하지 않는 자바스크립트 변수는 아래 코드와 같은 경우에 같은지 비교를 하지 못합니다.

var c = (1=='1');
console.log(c);
var d = (1==='1');
console.log(d);

'같다'를 의미하는 비교 연산자인 == 의 한가지 맹점 입니다.

자바스크립트에서는 변수의 자료형이 없고 var로 통일 되어있기 때문에 1=='1' 과 같이 문자와 숫자를 비교해도 에러는 뜨지 않습니다. 그냥 둘은 같다고 인식 해버리죠. 사실 같은게 아닙니다. 1이라는 숫자와 '1'이라는 문자는 상식적으로 다릅니다.

C언어 같은 경우는 저번에 말씀드린대로 int a, char b; 이런 식으로 변수에 들어갈 값에 따라 변수의 타입을 정해주기 때문에 int(정수) 값과 char(문자) 값을 비교연산자로 비교하게 되면 두 데이터가 형식이 틀리다고 비교할 수 없다 하여 컴파일러가 에러를 뱉습니다.

자바스크립트에서 저런 맹점은 장점일 때도 있습니다. 

예를 들어 어떤 상품 구매 페이지에서 가격이 써져 있는 부분은 문자열인데 이 상품 구매를 처리하는 페이지에서 자바스크립트가 동작한다고 할 때, 가격은 문자열이지만 가격의 비교를 하는 부분에서 숫자랑 비교를 해도 문제가 없습니다. 에러는 안뜨죠.

따로 두개의 변수 형을 똑같이 만드는 형변환을 하지 않아도 됩니다.

그래도 이런 맹점때문에 발생하는 문제점들을 해결해야하는 상황이 있을 수도 있습니다. 

두 값이 엄격하게 같은지를 검사해야 하는 것은 "===" 연산자로 하면 됩니다.

"==" 와의 차이는 위 소스를 실행해보셨다면 아시겠지만, 1=='1' 은 true 가 나오는데 1==='1'은 false가 나옵니다.

"===" 는 양 쪽의 값의 타입까지 보기 때문입니다. 

"같다" 라는 의미의 비교 연산자를 알아보았으니 "다르다" 라는 비교 연산자도 한번 봐보죠.

var e = (1!=1);
console.log(e);

"!=" 는 "=="와 반대입니다. 양쪽 값이 같지 않은지를 확인합니다.

뭐가 출력될지 이제 슬슬 예상이 되시지 않나요? 

네, false 입니다. 1과1은 같으니까요.

지금까지 비교 연산자에 대해 알아 보았는데요.

그렇다면 이런 비교는 실제 프로그램에서 어디에 쓰일까요?

프로그래밍을 하다보면 비교 연산은 수 없이 하게 됩니다.

예를 들어 학점 계산에서 총점이 80 이상이면 (총점 > 80) 로 표현할 수 있고

로그인한 사용자가 관리자인지 확인하는 것은 (로그인 아이디 == 로그인 세션) 로 표현할 수 있는 등등 프로그램은 논리적인 비교의 연속입니다. 그래서 수학공부 많이하라고 하는거죠. 논리적인 사고가 중요하니까요! 제 생각엔 언어적인 능력도 중요한 것 같아요.

아무튼 비교를 했으니 비교를 한 이유가 있지 않을까요?

프로그래밍에선 이렇게 비교연산을 해서 반환되어 나온 bool 값을 보고 

비교한 결과가 true(참) 이면 ~~~ 을 수행, false(거짓) 이면 ~~~ 을 수행 하는 식으로 프로그래밍을 하게 되는데요

그 방법으로는 if와 switch 등이 있습니다. 

프로그래밍에서 거의 제일(?) 많이 쓰이는게 if 입니다. 

다음 포스팅에서 이런 비교 연산의 결과를 어떻게 활용하는지 if와 switch, ?: 에 대해 이야기 해볼게요!

열공!! 화이팅 입니다!!

공감이 되셨다면 아래 공감 버튼을 눌러주세요~

▼▼▼▼▼▼