[실전 자바스크립트]6. boolean타입 , nullish coalescing

javascirpt의 logical기호

const c1 = true;
const c2 = false;
if (c1 && c2) {
	console.log('c1 && c2'); //LOGICAL AND : 조건 충족 안됨
}
if (c1 || c2) {
	console.log('c1 || c2'); //LOGICAL OR : 조건 충족 되므로 출력
}

숫자와 문자를 활용한 로직 연산

//복습! : 숫자에서는 NaN이나 0이 false로 취급되어진다.
//복습! : 문자열에서는 빈 문자열 일 때에만 false로 취급되어진다.
const c1 = 123;
const c2 = 'abc';
if (c1 && c2) {
	console.log('c1 && c2');
}
if (c1 || c2) {
	console.log('c1 || c2');
}
if (c1 && c2 && 0) { //false
	console.log('c1 && c2 && 0');
}
if (c1 && c2 && NaN) { //false
	console.log('c1 && c2 && NaN');
}
if (c1 && c2 && '') { //false
	console.log(`c1 && c2 && ''`);
}

논리연산자의 값은 마지막으로 평가되어진 값이 결과가 된다.

const c1 = 123; 
const c2 = 'abc';
const v1 = c1 && c2; // c1이 true, 그다음 c2가 true이므로 값은 'abc'가 된다.
const v2 = c1 && c2 && 0; // c1이 true, c2가 true, 마지막 0이 false이므로 맨 만지막으로 읽은 0이 반환 되어진다.
const v3 = c1 && 0 && c2; // c1이 true, 0이 false이고, and연산의 필요 과정이 끝났기 때문에 false가 반환되어진다. 
console.log({v1, v2, v3}); // abc, 0 , 0

const v4 = c1 || c2; // c1이 true인 상황에서 or 연산이 끝났으므로 c1가 값이된다.
const v5 = '' || c2; // c1이 false 그 다음 c2가 true이므로 c2가 값이 된다.
console.log({ v4, v5}); //123, abc


//위처럼 결과의 값이 실제값일 수도 있기 때문에, 이를 boolean type으로 판단을 하기 위해서는 !!를 활용해 주어야 한다.
const v6 = !!(c1 && 0 && c2);
const v7 = !!(c1 || c2);
console.log({ v6, v7});


//AND연산자에서는 앞의 값이 true가 되어야 뒤의 코드 평가가 가능해지기 떄문에, if문으로써 활용하는 것이 가능합니다. 작성하기 간편한 장점이 활용점
const c1 = 123;
const c2 = 0;
c1 && console.log('log1'); // c1이 true이므로 뒤의 코드가 실행
c2 && console.log('log2'); // c2이 false이므로 뒤 코드가 실행되어지지 않음


//or연산자는 기본값을 입력시키는 스킬로도 사용이 가능하다.
const price = 0;
const name = '';
const price2 = price || 1000;
const name2 = name || '이름을 입력해주세요';

기본값을 입력해주는 문법 nulish coalescing

const person = {};

const name = person.name ?? 'unkown';

// nulish coalescing ?? 왼쪽의 값이 null 혹은 undefined라면 우측연산을 실행하는 방식을 말한다. 풀어쓴 코드는 아래와 같이 나타난다. 조건이 true이면 기본값사용 아니면 person.name을 사용
const name =
      person.name === undefined || person.name === null ? 'unkown' : person.name;

// nulish coalescing은 OR연산자와 비슷하지만 빈문자열이나 0에 대해서는 기본 값이 사용되어지지 않는다는 것이다. (false로는 판단해주지 않는다.)
const product = { desc: '', price: 0};
const descInput = product.desc ?? '상품을 입력해 주세요.'; //이렇게 빈 문자열을 값으로 인정한다면 nulish coalescing을 사용하면 된다. 인정하시 않겠다면? or를 사용하면 되겠지.
const priceInput = product.price ?? 1000;

// nulish coalescing에서 논리 연산을 사용하기 위해서는 괄호를 묶어줘야 한다.
// syntax에러가 발생함
const name = '';
const title = '';
const text = (name || title) ?? 'foo'; //필수

const name = 'mike';
function getDefaultName() {
	console.log('called getDefaultName');
  	return 'default name';
}
console.log(name ?? getDefaultName()); // name에 값이 null이 아니기 때문에 호출이 회어지지 않는다.
console.log(name || getDefaultName()); // OR도 마찬가지

//만약에 name값이 빈 문자열이라면?? nulish coalescing은 동작하지 않지만, or구문은 동작하게 된다.