2023.01.20 study
javascript 연산자
javascript 연산자
- 논리연산자 ( ||(OR) ,&&(AND) , !(NOT)
- 병합연산자 '??' <-- es6문법
- 삼항연산자 a > 10 ? true : false
- es6옵셔녈 체이닝 문법 ?. <-- es6문법
참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://ko.javascript.info/nullish-coalescing-operator
프로그래머스는 풀었던 문제 새로운 논리 연산자로 다시 풀어보기 및 새로운 문제 하루에 2개 스스로 풀어보기!!
이번 javascript에서 사용하는 연산자들에 대해 알아보자!
1 기초적인 javascript 논리 연산자
1. || (OR)
- OR 연산자는 불린값(boolean)을 조작하는 데 쓰인다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.
- OR 연산자와 피연산자가 여러 개인 경우:
result = value1 || value2 || value3;
OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째truthy를 반환하며 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환한다.
예)
alert( 1 || 0 ); // 1 (1은 truthy임)
alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)
예)
let firstName = "";
let lastName = "";
let nickName = "바이올렛";
alert( firstName || lastName || nickName || "익명"); // 바이올렛 
2. && (AND)
- AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환하며, 외의 경우는 false를 반환한다.
- AND 연산자와 피연산자가 여러 개인 경우 :
result = value1 && value2 && value3;
첫 번째 falsy를 찾는 &&(AND) 연산자는 첫 번째 falsy를 반환하며, 피연산자에 falsy가 없다면 마지막 값을 반환한다.
예)
// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0
3. !(NOT)
- 논리 연산자 NOT은 느낌표 !으로 인수를 하나만 받고 다음 순서대로 연산을 수행한다.
- NOT !! 연달아 사용하면 boolean(불린값)으로 변환할 수 있다.
- NOT ! 운선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&(AND) ||(OR)보다 먼저 실행된다.
☆ &&(AND) 연산자가 첫 번째 falsy를 반환하는 반면, ||(OR)은 첫 번째 truthy를 반환한다는 것
4. 병합 연산자(nullish) '??' <-- ES6문법
- nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다.
▶ ||(OR)는 첫 번째 truthy 값을 반환한다.
▶ ??(NULLISH)는 첫 번째 정의된(defined) 값을 반환한다.- ??는 =와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가되기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋다.
- 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지!!
예)
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
예)
let height = null;
let width = null;
// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000
문제 :
1. console.log(null || 2 || undefinde) 결과는?
2. console.log(console.log(1) || 2 || console.log(3) ); 결과는?
3. console.log(1 && null && 2); 결과는?
4. console.log( null || 2 && 3 || 4 ); 결과는?
- if (-1 || 0) alert( 'first' );
if (-1 && 0) alert( 'second' );
if (null || -1 && 1) alert( 'third' );
--> alert창의 실행 결과는? - ??(nullish) 병합연산자 특징 3가지?
https://ko.javascript.info/logical-operators#ref-1687 문제 참고
5. 삼항연산자 === 조건부 연산자 a > 5 ? true : false
조건부 연산자 '?'
- 조건부 연산자는 물음표'?'로 표시
- 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자라고 한다.
- 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치된다. 해당 연산자는 if...else문의 대체재로 빈번하게 사용되고 있다.
예)
let result = condition ? value1 : value2;
//평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환
let accessAllowed = (age > 18) ? true : false;
//age > 18 주위의 괄호는 생략 가능합니다. 물음표 연산자는 우선순위가 낮으므로 비교 연산자 >가 실행되고 난 뒤에 실행다중 ‘?’
- 물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있다.
예)
let age = prompt('나이를 입력해주세요.', 20);
let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
alert( message );
------ if..else 로 변형한다면.. -------
if (age < 3) {
message = '아기야 안녕?';
} else if (age < 18) {
message = '안녕!';
} else if (age < 100) {
message = '환영합니다!';
} else {
message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}
문제 :
if를 ?로 교체하기
7.
let result;
if (a + b < 7) {
result = '미만';
} else {
result = '이상';
}
8.
let message;
if (login == '직원') {
message = '안녕하세요.';
} else if (login == '임원') {
message = '환영합니다.';
} else if (login == '') {
message = '로그인이 필요합니다.';
} else {
message = '';
}6. 옵셔널 체이닝 (?.)
- ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
- ?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다. 참고로 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.
- ?.()와 ?.[] 대괄호 표현식(Bracket notation)
--@@옵셔널 체이닝 주의할 점@@--
?. nullish연산자와 함께 쓰면 기본값 주기에 용이하다.
?. 존재하지 않아도 괜찮은 대상에만 사용해야한다.
?. 앞의 변수는 꼭 선언되어 있어야 한다.
?. 은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없다.예)
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않음
☆ 옵셔널 체이닝 등장으로..☆
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않음예) 대괄호 표현식
예) 단락 평가
답 :
1. 2 / 2. 1,2 / 3. null / 4. 3 /5. first, third /
6. 1: a ?? b
a가 null이나 undefined에 해당하지 않으면, a 아니면 b
2. (a !== null && a !== undefined) ? a : b 와 동일한 기능을 수행한다.
3. 괄호 없이 || 나 && 와 사용하지 못한다
/7. let result = (a + b < 4) ? '미만' : '이상';
/8. let message = (login == '직원') ? '안녕하세요.' :
(login == '임원') ? '환영합니다.' :
(login == '') ? '로그인이 필요합니다.' :
'';마무리하며...
es6문법이 나오면서 보안된건 확실한거지만 장단점이 있는걸 명시해야겠고, 프로그래머스 코딩 입문문제를 풀면서 오늘 새로 배운 연산자를 이용해서 다시 풀어보았다. 처음에는 => ? : 이건 뭘 하라는건가? 뭘까 궁금했는데 오늘 삼항연산을 알고나서 이해할 수 있는 거였다. 배움에는 끝이 없지만,, 배워도 배워도~ 계속 새로운 것들이 넘쳐나는구나!! 이번에는 명절 설을 지내고 나서 나 혼자서 공부할 수 있는 시간이 부족했지만 비겁한 변명일뿐~ 아이들 어린이집 보내고 나 혼자 있을 수 있는 시간에 더 깊이있게 공부해야겠다. 집중하자!! 나도 할 수 있다. I Can Do It!!
