📍2-11. 논리연산자📍
-> 자바스크립트에 있는 3개의 논리연산자
1) || (OR)
2) && (AND)
3) ! (NOT)
💙 || (OR)
-> OR 연산자는 두개의 수직선 기호로 만들수 있다
ex)
result = a || b;-> 불린값을 조작하는데.
🔥 인수중 하나라도 true 이면 true 를 반환. 그렇지 않으면 false 반환!
ex)
alert( true || true ); //true
alert( false || true); // true
alert( true || false); // true
alert( false || false); // false-> 연산자가 false 인 경우 제외하고 결과값은 항상 true;
🟣 if문 에서도 자주 사용한다. 주어진 조건에 "참", "거짓" 판별할 경우
ex)
let age = 9;
if ( age < 10 || age > 25) {
alert('나이가 아닙니다.');
}-> age < 10 ; 하나하로 true 이면 true. 따라 , alert창 이 보여진다.
🟣 여러가지 조건문도 가능.
let age = 25;
let iscute = true;
if (age < 10, || age > 18 || iscute) {
alert('귀엽습니다.');
}-> iscute 가 true 이고, 3개의 조건중 한개라도 true 이니까 alert 창이 보여진다.
💙 첫 번째 truthy를 찾는 OR 연산자 ‘||’
-> || 연산자의 추가 기능. 피연산자가 여러 개인 경우 .
순서
1. 가장 왼쪽 피연산자부터 -> 가장 오른쪽으로 나가며 피연산자 평가.
2. 각 피연산자 불린형. 그 값이 ture 이면 연산 멈춘다. 해당 피연산자의 변환전 원래값 반환.
3. 피 연산자를 모두 평가후 모두가 (false)일 경우 마지막 피연산자 반환.
ex)
alert ( 0 || undefined || null ); // null
// 모두 false 임으로 마지막 피연산자의 값을 반환 🟣 OR || 을 사용하면 실제 값이 들어있는 변수를 찾을수 있다. 없으면 "익명"이 출력.
ex)
let firstName = "";
let lastName = "";
let nickName = "하니";
alert( frstName || lastName || nickName || "익명" )
// let nickName 에 있는 변수 에 할당된 "하니" 가 출력 된다. 🟣 OR ||을 사용하면 단락 평가를 할수 있다.
=> OR 의 연산은 왼쪽의 피연산자 부터 오른쪽 까지 평가를 진행하는데 TURE 의 값을 만나면 멈춤.
"부수적인 효과를 가지는 표현식" 일때 볼수 있다.
ex)
true || alert("창이 뜨지 않아요");
false || alert(" 창이 뜹니다. ");
// 맨 처음식은 true 값을 만나자마자 평가를 멈추기때문에 alert 창이 뜨지 않는다.💙 && (AND)
-> 두 피연산자 모두가 참 일때 true 를 반환. 그외에는 false, 피연산자 타입에 제약이 없다.
ex)
result = a && bex)
alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false
alert( false && false); // false
// 피연산자가 모두 참일 때만 true를 출력.ex)
let hour = 4;
let minute = 50;
if (hour == 4 && minute == 50){
alert(' 현재 시각은 4시 50분 입니다.');
}🟣 첫번째 false 값을 찾는 AND 연산자 &&
ex)
result = value1 && value3 && value3;-> 각피연산자는 불린형으로 변환된다.
왼쪽 - 오른쪽 순으로 평가 하면서 false 이 면 평가를 멈추고 변환전 원래값 반환.
- 피연산자가 모두 true 인 경우 마지막 피연산자가 반환된다.
ex)
alert( 1 && 0); // 0
alert( 1 && 5); // 5
// -> 첫번째 피연산자가 true 이면 AND 는 두번째 피연산자를 반환 환다.
alert ( null && 5); //null
alert ( 0 && "아무거나 상관없습니다"); // 0
// -> 첫번째 피연산자가 false면, AND 는 첫번째 연산 반환후 , 두번째는 무시.✅ AND 과 OR 의 차이점.
AND 는 연산자가 첫번째 FALSE 를 반환
OR 은 첫번째 TRUE 를 반환한다.
🟣 AND 연산자에도 피 연산자 여러개를 전달할 수 있다.
ex)
alert ( 1 && 2 && null && 3);
// -> 첫번째 피 연산자도 true, 두번째 피 연산자도 true, 세번째 피연자값이 false
// 따라 null 이 출력된다.
alert ( 1 && 2 && 3 );
// -> 모두가 true 이기 때문에 , 마지막 값인 3 이 출력된다. 💙 !!(NOT)
-> 논리 연산자의 not은 ! 을 써서 만들수 있다.
ex)
result = !value-> NOT 연산자는 인수를 하나만 받고 , 다음 순서대로 연산을 수행.
1) 피연산자를 불린형으로 ( T / F) 로 변환
2) 1에서 변환된 값의 역을 반환한다.
ex)
alert( !true ); // false
// true 가 아닌 값을 반환
alert( !0 ); // true
// 0 은 false 그 반대인 true 값을 반환. 🟣 NOT 을 두개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.
alert( !!"orange"); // true
alert( !!null ); // false🐾 문제풀기 🐾
1) 아래의 코드 결과를 예측해 보세요.
alert ( null || 2 && 3 || 4);
// -> 우선순위가 && 가 더 높기 때문에 먼저 실행된다.
// 2 && 3 = 첫번째 연산자가 true 이기 때문에 두번째 값을 반환해서 3 이다.
-> alert ( null || 3 || 4);
// 따라 첫번째 true의 값 3이 출력된다.2) age(나이)가 14세 이상 90세 이하에 속하는지를 확인하는 if 문을 작성.
if(age >=14 , age <= 90)3) 바깥 범위 확인하기
if(!(age >= 14, age <= 90))4) if(...) 안에 표현식이 있으면?
1) if ( -1 || 0) alert('first');
// or은 첫번째 true 값. 반환 고로 -1 이므로 true. alert창이 실행된다.
2) if ( -1 && 0) alser('second');
// and는 첫번째 false 값 반환. 고로 0 임으로 alert창이 실행되지 않는다.
3) if (null || -1 && 1) alert('third');
/* 우선순위가 높은 && 이 먼저 실행이되고, && 는 첫번째 연산자가 true 이면 두번째
피 연산자인 1을 반환 따라,*/
if (null || 1)
// or 연산자는 첫번째 true 의 값을 반환. 따라 alert 창이 실행된다. 5) 로그인 구현하기
조건
사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요.
비밀번호 확인 절차는 다음과 같습니다.
맞는 비밀번호 "TheMaster"를 입력했다면 "환영합니다!"라는 메시지를 보여주세요.
틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요.
빈 문자열을 입력하거나 입력을 취소했다면 "취소되었습니다."라는 메시지를 보여주세요.
let userName = prompt('사용자 이름을 입력해주세요','');
if (userName == 'admin'){
let password = prompt('비밀번호:','');
if (password == 'TheMater',''){
alert('환영합니다!');
} else if ( password == ''|| password == null){
alert('취소되었습니다.');
} else {
alert( '인증에 실패하였습니다.' );
}
} else if ( userName == '' || userName == null){
alert( '인증에 실패 하였습니다.');
} else {
alert( '인증되지 않은 사용자 입니다.' )
}📍2-12. nullish 병합 연산자 '??'📍
-> 병합 연산자 ?? 를 사용하면 짧은 문법으로 여러 피연산중 그 값이
'확성되어 있는' 변수를 찾을수 있다.
ex)
화면엔 세 변수중 실제 값이 있는 변수의 값을 출력한다.
세 변수 모두 값이 없다면 '없음' 이라고 출력하는 로직을 만들어 보자 .
ex)
let one = null;
let two = null;
let Name = "없음"
alert( one ?? two ?? Name ?? '없음'); // 없음.
// -> ?? 을 사용하면 값이 정해진 변수를 찾을수 있다. 🟣 ?? 는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.
ex)
height = heigth ?? 100;
// heigth 가 null 이나 indefined 인 경우, 100을 할당🟣 ?? 연산자의 우선순위는 낮되 , ? , = 보다는 높다
🟣 괄호 없이 ?? 를 || , && 와 함께 사용하는 것은 안된다.
-> 안정성 관련 이슈 때문임
공부 후기
&& (AND) 연산자와 || (OR) 연산자의 차이점을 알게 되었으며
어떤 값이 반환되는지 다시 한번 알수 있게 되었다.
또한, 이런 듀토리얼에 나와있는 예제들을 그냥 지나친 적이 많았는데 오늘 한번 계속 풀어보니까 조금더 기억에 남고 이해하게 되었다.
앞으로 계속 예제 문제들을 풀어봐야 겠다. 🙂
