웹 프로그래머(웹 개발자)가 되어보자 - 10

4-5. 데이터(자료)
이번시간에도 논리값에 대해서 살펴보겠습니다.
논리값은 true와 false의 형태로 존재합니다.
또한 비교연산자를 통해서 true와 false값을 만들어 냅니다.

앞선 시간에서 우리는 다양한 비교연산자를 통해서 논리값을 만들어보았습니다.
좀더 어려운 내용을 나가기전에 아래 표를 통해서 비교연산자의 종류에 대해서 살펴보겠습니다.

이름	기호	사용	true인경우
미만 연산자	<	왼쪽이 작으면 true, 크면 false	3<5, 100<200
초과 연산자	>	왼쪽이 크면 true, 작으면 false	5>3, 10>0
이하 연산자	<=	왼쪽이 작거나 같으면 true, 크면 false	4<=10, 10<=10
이상 연산자	>=	왼쪽이 크거나 같으면 true, 작으면 false	10>=5, 10>=10
동등 연산자	==	왼쪽과 오른쪽 값이 같으면	'abcd'=='abcd', 1234 == 1234
부등 연산자	!=	왼쪽과 오른쪽 값이 같지 않으면	'abcd'!='qqqq', 1234 != 5678

위 내용은 반드시 숙달이 필요한 내용입니다.
꼭 연습을 여러번 해야합니다.

계속해서 논리값에 대해서 살펴보겠습니다.
숫자의 데이터는 수치로 인하여 논리값을 만들기가 참 쉽습니다.
아래의 예제를 살펴보겠습니다.

var number = 10;
var number2 = 0;
console.log(number >= number2);

true가 출력됩니다.

위 내용을 실행하면 당연히 number의 변수값이 크기때문에 true값이 반환됩니다.
그렇다면 문자는 어떻게 되는 것 일까요?
문자는 가장 많이 사용되는 것이 "같은지~ 다른지~" 입니다.
아래 내용을 살펴봅니다.

var password = "abcdefg";
var real = "qqqqq";
console.log(password == real);

false가 출력됩니다.

위 내용을 실행하면, false값이 나옵니다. 
동등 연산자에 의해서 동일한 값이 아니기 때문에 false값이 나오게 되는 것 입니다.
만약 두 값이 같다면 true가 나오게 됩니다.
그렇다면 예전에(8번째장) 살펴본 includes를 사용하여 보겠습니다.

var password = "asdf12345!";
var check = password.includes("!");
console.log(check);

문자형태의 데이터에서 포함하고 있는지("같은지의 개념")를 확인하는 함수를 사용하였습니다.
우리는 회원가입을 하는 특정 사이트에서 특수문자를 포함하고 있는지에 대해서 만나본 적이 있습니다.
그러한 경우처럼 includes 함수를 통해서 논리값을 확인하여 true면 올바른 비밀번호, false면 부적절한 비밀번호로 판단하게 합니다.

이러한 논리값은 이처럼 어떠한 조건에 따라서 특정 행동을 하게 만드는 데이터 형태 입니다.
숫자도 가능하며, 문자도 가능합니다.
또한 숫자와 문자도 비교 할 수 있습니다.

var aaaa = 12234;
var bbbb = '12234';
console.log(aaaa == bbbb);

문자와 숫자가 비교되어버렸습니다.

위 내용을 실행하면 true값이 나오게 됩니다.
자바스크립트는 매우 똑똑한 언어입니다. 
다른 종류의 데이터이지만 안에 형태를 보고 스스로 비교하여 줍니다.
하지만 우리는 이럴경우 좀더 엄격한 비교가 필요할 때가 있습니다.
똑똑한 것은 좋지만, 엄격하게 문자와 문자만 숫자와 숫자만 비교가 필요할 때가 있습니다.

var aaaa = 12234;
var bbbb = '12234';
console.log(aaaa === bbbb);

false값이 나옵니다.

대입연산자 1개가 더 추가되었습니다.
놀랍게도 true였던 값이 false가 나오게 되었습니다.
위 내용처럼 엄격한 비교를 통해서 무언가 만들어야하는 경우에 사용되기도 합니다.
여기서는 일단 참고만 하도록합니다.
중요한 것은 비교를 하는 경우에 데이터의 형태는 항상 일치하도록 신경써야 된다는 점 입니다.

논리값은 이처럼 "조건"을 만들어주기위한 필수 데이터 입니다.
그렇다면 그러한 조건을 통해서 실행을 하기 위해서는 어떠한 방법을 사용해야 되는 것 일까요?
9번째 시간에 살펴본 "조건문" 이라는 것이 필요합니다.  *if와 else가 기억나시나요..?
"조건문"은 특정 조건에 따라서 동작을 하도록 만드는 일종의 안내장치입니다.
다음시간에는 이러한 조건문을 통해서 데이터를 좀더 다양하게 다루어보겠습니다.

아..이번시간을 끝마치기 전에 아래 내용을 실행하여봅니다.

var cell = document.getElementById('root');
cell.innerHTML='';
cell.innerHTML = '<div style="color:blue;font-size:20;x">Hello Students!</div>';

이럴수가..화면에 입력한 내용이 나왔습니다!!

항상 보았던 화면에 "Hello Students!"라는 글씨가 나타났습니다.
위 내용은 아주 나중에 살펴볼 내용입니다!

여기서의 핵심은, 프로그래머에 의해서 화면이 만들어진다는 점 입니다.
지금하는 내용이 화면에 바로바로 나타나지는 않지만, 이러한 기술을 익히기 위한 기초단계 입니다.
단계를 밟아 갈 수록 좀더 다양하게 프로그래밍을 할 수 있을 것 입니다.
10번째 까지의 내용이 이해가 되지 않는다면 반드시 복습하여야 합니다.