논리적 연산자 - 요약
다음은 다시 복습, 혹은 출력을 위한 참고자료로 JavaScript에서 논리 연산자와 비교 연산자가 어떻게 작동하는지에 대한 간단한 요약입니다.
const userName = 'Max';
const altName = '';
console.log(userName === 'Max'); // 불리언 값 참을 생성하고 출력
console.log(userName); // 문자열 'Max'에서 변경되지 않음
console.log(userName || null); // userName이 Truthy이므로 ||로 'Max'가 반환됨
console.log(altName || 'Max'); // altName은 (빈 문자열이므로)Falsy이며 'Max'가 반환됨
console.log(altName || ''); // altName과 ''는 모두 Falsy이지만 만일 첫 피연산자가 Falsy라면 항상 두 번째 피연산자가 반환되므로 ''이 반환됨
console.log(altName || null || 'Anna'); // altName과 null은 Falsy이므로 'Anna'가 반환됨
console.log(userName && 'Anna'); // userName은 Truthy이므로 두 번째 (!) 값인 'Anna'가 반환됨
console.log(altName && 'Anna'); // altName은 Falsy이므로 첫 번째 값인 ''이 반환됨
console.log(userName && ''); // userName은 Truthy이므로 두 번째 값인 ''이 반환됨
항상 명심하세요. 그 어떤 연산자 (===, > 등이나 && 혹은 ||)도 비교에 쓰이는 변수를 변경하지 않습니다. 위의 예에서 userName 과 altName에 저장된 값은 절대 변경되지 않습니다.
===, >등은 단지 비교에 쓰이는 불값만 생성합니다. || 와 && 는 불리언을 생성하는 것이 아니라, 연산자 전후에 있는 값을 조건으로 취급합니다 (따라서 불값을 산출하고 필요한 경우 불리언으로 강제 변환됩니다).
위에서 설명한 작동 방식 때문에 JavaScript에서는 || 으로 변수/상수에 기본/대체 값을 할당합니다.
const enteredValue = ''; // let's assume this is set based on some input provided by the user, therefore it might be an empty string
const userName = enteredValue || 'PLACEHOLDER'; // will assign 'PLACEHOLDER' if enteredValue is an empty string
