on
논리 연산자 실습 과제
논리 연산자 실습 과제
2021.11.17 - [Language/JavaScript] - 논리 연산자
다음 OR 연산의 결과는 무엇일까요?
아래 코드의 결과를 예측해 보세요.
alert( null || 2 || undefined );
풀이
2 , OR 연산자는 첫 번째 truthy 값을 반환한다.
해설
피연산자 중 첫 번째 truthy인 2가 출력됩니다.
alert( null || 2 || undefined );
OR 연산자의 피연산자가 alert 라면?
아래 코드의 결과를 예측해 보세요.
alert( alert(1) || 2 || alert(3) );
해설
얼럿 창엔 1, 2가 차례대로 출력됩니다.
alert( alert(1) || 2 || alert(3) );
alert 메서드는 값을 반환하지 않습니다. 즉, undefined를 반환하죠.
첫 번째 OR || 은 왼쪽 피연산자인 alert(1)를 평가합니다. 이때 첫 번째 얼럿 창에 1이 출력되죠. alert메서드는 undefined를 반환하기 때문에, OR 연산자는 다음 피연산자를 평가하게 됩니다. truthy를 찾기 위해 말이죠. 두 번째 피연산자(오른쪽 피연산자)인 2는 truthy이기 때문에 실행이 멈추고 2가 반환됩니다. 반환된 값 2는 제일 바깥 alert의 피연산자가 되어 두 번째 얼럿창에 출력됩니다.
평가가 alert(3)까지 진행되지 않기 때문에 3은 출력되지 않습니다.
다음 AND 연산의 결과는 무엇일까요?
아래 코드의 결과를 예측해 보세요.
alert( 1 && null && 2 );
풀이
AND 연산자는 첫 번째 falsy 값을 반환하기 때문에, null이 출력된다
해설
피연산자 중 첫 번째 falsy인 null이 출력됩니다.
alert( 1 && null && 2 );
AND 연산자의 피연산자가 alert 라면?
아래 코드의 결과를 예측해 보세요.
alert( alert(1) && alert(2) );
해설
얼럿 창엔 1, undefined가 차례대로 출력됩니다.
alert( alert(1) && alert(2) );
alert를 호출하면 undefined가 반환됩니다. alert는 단순히 얼럿 창에 메시지만 띄워주고, 의미 있는 값을 반환해 주지 않습니다.
&&는 왼쪽 피연산자를 평가하고(이때 1이 얼럿창에 출력됩니다) 평가를 즉시 멈춥니다. alert(1)의 평가 결과는 undefined로 falsy이기 때문이죠. && 연산자는 falsy를 만나면 그 값을 출력하고 즉시 연산을 멈춥니다.
OR AND OR 연산자로 구성된 표현식
아래 코드의 결과를 예측해 보세요.
alert( null || 2 && 3 || 4 );
풀이
alert( null || 2 && 3 || 4 ); // alert( null || 3 || 4 ); // (1) 2 && 3 반환 > 3 // alert( 3 || 4 ); // (2) null || 3 반환 > 3 // 출력값 : 3
해설
alert( null || 2 && 3 || 4 );
AND 연산자 &&의 우선순위는 ||보다 높습니다. 따라서 &&가 먼저 실행됩니다.
2 && 3 = 3이므로, 문제에서 제시한 표현식은 아래와 같이 바꿔쓸 수 있습니다.
null || 3 || 4
따라서 첫 번째 truthy인 3이 출력됩니다.
사이 범위 확인하기
age(나이)가 14세 이상 90세 이하에 속하는지를 확인하는 if문을 작성하세요.
"이상과 이하"는 age(나이) 범위에 14나 90이 포함된다는 의미입니다.
풀이
let age; if ( age >= 14 && age <= 90) { ... }
해설
if (age >= 14 && age <= 90)
바깥 범위 확인하기
age(나이)가 14세 이상 90세 이하에 속하지 않는지를 확인하는 if문을 작성하세요.
답안은 NOT ! 연산자를 사용한 답안과 사용하지 않은 답안 2가지를 제출해 주세요.
풀이
if(age < 14 || age > 90)
if (!(age >= 14 && age <= 90))
해설
첫 번째 답안은 다음과 같습니다.
if (!(age >= 14 && age <= 90))
두 번째 답안은 다음과 같습니다.
if (age < 14 || age > 90)
'if' 에 관한 고찰
아래 표현식에서 어떤 alert가 실행될까요?
if(...) 안에 표현식이 있으면 어떤 일이 일어날까요?
if (-1 || 0) alert( 'first' ); if (-1 && 0) alert( 'second' ); if (null || -1 && 1) alert( 'third' );
풀이
true || false 는 true를 반환하기 때문에 첫 번째 alert는 실행된다
true && false 는 false를 반환하기 때문에 두 번째 alert는 실행되지 않는다
false || true 는 true를 반환하기 때문에 세 번째 alert는 실행된다
해설
첫 번째 표현식과 세 번째 표현식에 있는 alert가 실행됩니다.
// -1 || 0 은 -1 이므로 truthy입니다. // 따라서 alert가 실행됩니다. if (-1 || 0) alert( 'first' ); // -1 && 0 은 0 이므로 falsy입니다. // 따라서 alert가 실행되지 않습니다. if (-1 && 0) alert( 'second' ); // 연산자 &&는 ||보다 우선순위가 높습니다. // 따라서 -1 && 1 이 먼저 실행되어 아래와 같이 표현식이 순차적으로 바뀝니다. // null || -1 && 1 -> null || 1 -> 1 // 결과적으로 alert가 실행됩니다. if (null || -1 && 1) alert( 'third' );
로그인 구현하기
프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요.
사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요.
비밀번호 확인 절차는 다음과 같습니다.
맞는 비밀번호 "TheMaster"를 입력했다면 "환영합니다!"라는 메시지를 보여주세요.
틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요.
빈 문자열을 입력하거나 입력을 취소했다면 "취소되었습니다."라는 메시지를 보여주세요.
순서도는 다음과 같습니다.
중첩 if 블록을 사용하고, 코드 전체의 가독성을 고려해 답안을 작성하세요.
힌트: 프롬프트 창에 아무것도 입력하지 않으면 빈 문자열인 ''가, ESC를 누르면 null이 반환됩니다.
풀이
let login = prompt('아이디를 입력하세요',''); if (login == "Admin") { let password = prompt('비밀번호를 입력하세요', ''); if (password == "TheMaster") { alert('환영합니다!') } else if (password == null || password == "") { alert('취소되었습니다'); } else { alert('인증에 실패하였습니다') } } else { alert('취소되었습니다.'); }
해설
let userName = prompt("사용자 이름을 입력해주세요.", ''); if (userName == 'Admin') { let pass = prompt('비밀번호:', ''); if (pass == 'TheMaster') { alert( '환영합니다!' ); } else if (pass == '' || pass == null) { alert( '취소되었습니다.' ); } else { alert( '인증에 실패하였습니다.' ); } } else if (userName == '' || userName == null) { alert( '취소되었습니다.' ); } else { alert( "인증되지 않은 사용자입니다." ); }
if 블록 안쪽의 들여쓰기를 주의 깊게 봐주세요. 들여쓰기는 필수가 아니지만, 코드 가독성을 높이는 데 도움을 줍니다.
from http://heimish-web.tistory.com/54 by ccl(A) rewrite - 2021-11-17 15:28:00