본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


웹 프로그래머가 되어보자!

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

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2020. 4. 20.

4-4. 데이터(자료)

저번시간에는 문자형태의 데이터에 대해서 살펴보았습니다.
이번시간에 살펴볼 내용은 논리값 입니다.

논리값은 프로그램에서 정말 많이 사용됩니다.
고작 true와 false라는 간단한 형태의 값 인데 언제 사용될까요?

가령, 비밀번호가 일치하는지 예를들어봅시다.
비밀번호가 일치하면 로그인을 하게 하고 틀리면 로그인을 다시하게 하려고 합니다.
이때 사용되는 값이 바로 논리값 입니다.
또한 어떠한 쇼핑몰에서 내가 결재하려고 하는 상품이 가지고있는 캐쉬보다 더 비싸다면, 결재가 되어서는 안될 것 입니다.
이러한 경우에서도 논리값이 사용 됩니다.

논리값은 아래처럼 표현합니다.

var ok = true;
var no = false;
console.log(ok, no);


논리값은 단순하게 사용되는 것이 아니라 "비교연산자"에 의해서도 만들어집니다.
우리는 숫자와의 계산을 해 보았었습니다.
숫자는 덧셈, 뺄셈, 곱셈, 나눗셈등 여러 수학적인 연산이 가능하였습니다.

"비교연산자"라는 내용은 두 값을 비교하여 결과를 true와 fasle값으로 반환 합니다.
아주 간단한 예제를 살펴 보겠습니다.

console.log(1 > 0);
console.log(1 < 0);

괄호모양이 나왔습니다.


처음보는 기호가 나타났습니다. 
초과연산자 (>) 는 왼쪽 값이 오른쪽 값보다 클 경우 true, 아니면 false를 반환합니다.
미만연산자 (<) 는 왼쪽 값이 오른쪽 값보다 작을 경우 true, 아니면 false를 반환합니다.
여기서 명칭을 굳이 외우려고 하지 않아도됩니다!
단지 해당 표기법에 대해서 어떻게 동작하는지만 익히면 됩니다.

몇개의 예문을 더 살펴보겠습니다.

console.log(100 > 0);
console.log(100 > 100);

숫자의 비교를 통해 논리값을 취합니다.


첫번째의 경우에는 100이 0보다 크므로 true를 반환합니다.
그런데 아래의 100이 100보다 크지는 않습니다. 서로 같은 값 이므로 false를 반환합니다.
그러면 크거가 같을때는 어떻게 사용할까요?

console.log(100 >= 100);

크거나 같은 경우


매번 보았던 대입연산자(=)가 나타났습니다.
이렇게 비교연산자에 대입연산자(=)를 붙이면 ~같거나의 개념이 됩니다.
아래의 내용을 살펴보겠습니다.

console.log(1 >= 0);
console.log(1 <= 1);

크거나 같은경우, 작거나 같은경우입니다.


첫번째 내용은 1이 0보다 크거나 같거나 입니다. 둘중 1가지 경우인 크거나에 일치하므로 true를 반환합니다.
두번째 내용은 1이 1보다 작거나 같거나 입니다. 둘중 1가지 경우인 같거나에 일치하므로 true를 반환합니다.
그러면 서로 같을때는 어떻게 하는 것일까요?
대입연산자(=)를 두개 사용하는 경우 동등연산자의 효과가 나타납니다.

console.log(1 == 0); 

= 기호를 2개써서 같은지가 되었습니다.


1이 0과 같거나에 대한 내용입니다. 그러나 값이 같지 않으므로 false값을 반환 합니다.
위 내용을 조금 응용하여 같지 않을때를 살펴보겠습니다.

console.log(1 != 0); 


느낌표(!)가 사용되었습니다. 
느낌표를 처음 붙여주고 대입연산자를 붙이면 같지 않다의 부등연산자가 됩니다.
1은 0과 같지 않습니다. 그러므로 true를 반환합니다.

논리값을 살펴보려 했는데 오히려 비교연산자에 대한 내용이 많았습니다.
논리값은 사실 비교연산자에 의해서 만들어진 값의 비중이 훨씬 많습니다.
그러면 아래내용을 한번 실행하여 보겠습니다.
사용자가 비밀번호를 입력해야하는데 잘못 입력했다라는 내용입니다.

var password = 'asdf1234';
var goodpassword = 'eefg';
if(password == goodpassword){  //아까 살펴본 동등 연산자로 태어난 값 입니다.
    alert('올바른 번호 입니다. 이제 로그인합니다.');
} else {
    alert('틀린비밀번호 입니다.');
}
console.log(password == goodpassword);  //해당 값을 정확하게 일치시키면 true가 나타납니다.

자세히 알 수는 없지만 비교하는 값이 틀려서 틀린비밀번호라는 문구가 실행 되었습니다.


위 내용에서 if와 else라는 비교문이 나왔습니다.
아직 우리는 비교문을 배우지는 않았습니다만, alert에서 "틀린비밀번호 입니다." 가 실행되는 것을 볼 수 있습니다.
그리고 동등연산자(==) 값은 서로의 값이 틀리므로 false 값이 나오게 되었습니다.
여기서의 핵심은 if와 else가 아니라 동등연산자(==) 값이 거짓(false)으로 나와서 로그인을 하지 못하게 된 것 입니다.
 * if와 else는 그냥 잊어주셔도 됩니다.

즉, 논리값은 이처럼 조건에 의해서 어떠한 내용이 실행되야하는지, 실행되면 안되는지를 위해서 사용됩니다.
또한 숫자 이외의 문자에서도 사용되는 것을 볼 수 있었습니다.

이번시간에는 조금 어렵고 복잡한 논리값과 비교연산자에 대해서 살펴 보았습니다.
다음시간에는 논리값을 만드는 방법과 사용법에 대해서 조금 더 살펴보겠습니다.
위 내용에서 if와 else에 대해서는 일단 넘어가도 됩니다!!

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글