[JS]대칭연산 : 논리연산자를 이용한 초기화 Short Circuit Evaluation

 

JS에서 null이나 undefined는 false로 평가됩니다.

 

• 따라서 논리연산자 || 와 && 이용해서 초기화를 할 수 있습니다.

---

 

||

 

const nulll = null;
const empty = ``;
const exist = `exist`;

let result;

console.log(`nulll || empty : ${result = nulll || empty}`);
console.log(`nulll || exist : ${result = nulll || exist}`);
console.log(`empty || exist : ${result = empty || exist}`);
console.log(`nulll || empty || exist : ${result = nulll || empty || exist}`);

말로 설명하면 오히려 헷갈리구요. 코드 출력결과를 보시면 쉽게 이해 할 수 있습니다.

 

• null  ||   ' '  →  빈 문자열 출력
  
  
• ' '  ||  '값'  →  값이 출력
  
  
• null  ||  ' '  ||  '값'  →  값이 출력됩니다.

 

---

.

&&

 

그렇다면 && 는 어떨까요?
|| 를 && 로만 바꿔서 실행해 보겠습니다.

&&는 양쪽의 비교값이 모두 true(값이 있어야만) 출력되기 때문에
앞의 값이 false일 때에 처리되는 게 다르에 몇 가지 상황을 더 추가해보겠습니다.

const nulll = null;
const empty = ``;
const exist = `exist`;

let result;

console.log(`nulll && empty : ${result = nulll && empty}`);
console.log(`nulll && exist : ${result = nulll && exist}`);
console.log(`empty && nulll : ${result = empty && nulll}`)
console.log(`empty && exist : ${result = empty && exist}`);
console.log(`exist && empty : ${result = exist && empty}`);
console.log(`nulll && empty && exist : ${result = nulll && empty && exist}`);
console.log(`empty && nulll && exist : ${result = empty && nulll && exist}`);

 

• null 과 '' 을 비교하면 이미 null에서 false이기 때문에 첫번째 null이 출력.
  
  
• '' 문자열도 false이기 때문에 먼저오면 ''이 출력.
  
  
• '' && 'exist'를 비교해보면 → '' 빈문자열도 false로 처리되는 걸 알 수 있습니다.

 

---

 

그럼 값이 둘다 있을 때
|| 와 && 는 어떻게 처리할까요?

 

const nulll = null;
const empty = ``;
const exist = `exist`;

let result;

console.log(`1 && exist : ${result = 1 && exist}`);
console.log(`1 || exist : ${result = 1 || exist}`)

둘 다 값이 있을 경우

 

• &&  →  뒤의 값이 출력
  
  
• ||   →   앞의 값이 출력
  
  

---

 

※주의
아예 선언되지 않은 변수를 호출할 경우

 

 

• null을 return하는 함수를 호출할 경우
• && 사용시 함수가 이미 null의 값을 주기 때문에 false로 평가되어 null이 출력됩니다.
  
  

---

 

 

• 하지만 &&을 사용하더라도 선언되지 않은 변수가 앖에 온다면 error가 발생합니다.
  
  
• 왼쪽, 그러니까 앞의 값을 먼저 읽기 때문이죠.
  
  
• || 는 양쪽 값을 모두 읽으니 뒤에 선언되지 않은 변수를 뒤에 적어도 마찬가지로 error가 발생합니다.