연산자
1. 조건부 연산자 '?'
let accessAllowed;
let age = prompt('나이를 입력해 주세요.', '');
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
alert(accessAllowed);'물음표 연산자'라고도 불리는 '조건부 연산자'를 사용하면 위 예시를 더 짧고 간결하게 변형 할 수 있다.
조건부 연산자는 ?로 표시한다. 피연산자가 3개이기 때문에 '삼항 연산자'라고 부르기도 한다. 자바스크립트에서 피연산자가 3개 인 연사자는 조건부 연산자가 유일하다.
let result = condition ? value:value2
let accessAllowed = (age > 18) ? true : false;다중 '?'
물음표 연산자 ?를 여러개 연결하면 복수의 조건을 처리 할 수 있다.
let age = prompt('how old are you?', 18);
let message = (age<3) ? '안녕 아기야' :
(age < 18) ? '안녕' :
(age < 100) ? '환영합니다' :
'나이가 아주 많거나, 나이가 아닌 값을 입력 하셨군요!';
alert(message);2. 논리 연산자
자바스크립트에는 세 종류의 논리 연산자가 있다.
논리 연산자는 피연산자로 불린형뿐 아니라 모든 타입의 값을 받을 수 있다.
1) ||(OR)
인수중 하나라도 true이면 true를 반환하고 그렇지 않으면 false를 반환한다.
- 자바 스크립트만의 추가기능
result = value || value1 || value2이 때, || 연산자는 다음 순서에 따라 연산을 수행한다.
1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자 평가
2. 각 연산자를 불린형으로 변환. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환
3. 피연산자 모두들 평가한후 (모든 피연산자가 false로 평가되는경우)에 마지막 피연산자를 반환.
핵심은 반환 값이 형 변환을 하지않은 원래 값이라는 것이다.
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)- 활용하기
let firstName = "";
let lastName = "";
let nickName = "바이올렛";
alert( firstName || lastName || nickName || "익명"); // 바이올렛모든 변수가 false 였으면 익명이 출력되었을 것이다.
2) && (AND)
두 피연산자 모두가 참 일때 true를 반환한다. 그 외의 경우 false를 반환.
첫번째 falsy를 찾는 AND 여산자
피연산자가 여러개일 때 아래와 같은 순서로 동작한다.
- 가장 왼쪽 피연산자부터 시작해 오른쪽순으로 평가
- 각 피연산자는 불린형으로 변환. 변환 후 값이
false면 멈추고 해당 피연산자의 변환 전 원래 값을 반환 - 피연산자 모두
true로 평가되는 경우에 마지막 피연산자가 반환
// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0 AND 연산자 &&의 우선순위가 OR 연산자 ||보다 높다.
3. null 병합 연산자 '??'
null 병합 연산자 ??를 사용하면 짧은 문법으로 여러 피연산자 중 값이 '확정되어있는' 변수를 찾을 수 있다.
a ??b 의 평가 결과는 다음과 같다
a가null도 아니고undefined도 아니면a- 그 외의 경우는
b
let firstName = null;
let lastName = null;
let nickName = "바이올렛";
// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛1) '??'와 '||'의 차이
||은 첫 번째 truthy 값을 반환.??은 첫 번재 정의된(defined) 값을 반환.
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0height에 0을 할당 했기 때문에 height ?? 100은 0이 된다.
2) 연산자 우선순위
??의 연산자 우선순위는 5로 꽤 낮다.
따라서 ??는 ? 와 =보다 먼저, 대부분 다른 연산자보다는 나중에 평가 된다.
그렇기 때문에 괄호를 추가해주는 것이 좋다.
let height = null;
let width = null;
// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000또한 안전성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다.
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'||를 ??로 바꾸기 시작하면서 만드는 실수를 방지하고자 명세서에 제약이 추가 된 상황이라고 한다. 제약을 피하려면 괄호를 사용하자
let x = (1 && 2) ?? 3; //
alert(x); // 2자료 출처 : https://ko.javascript.info
