JavaScript (논리,병합 연산자)

논리 연산자

• 자바 스크립트엔 세 종류의 논리 연산 ||(or), &&(and), !(not) 이 있다.

||(or)

• 값을 비교 시 둘 중 하나라도 참(true) 일시 참(true)를 반환하고, 그렇지 않으면 (거짓)false 반환

console.log( true || true); //true
console.log( true || false); // true
console.log( false || false); //false
console.log( false || true); //true

첫 번째 truthy를 찾는 OR 연산자 ‘||’

• truthy란? 자바스크립트에서 논리 타입이 아닌 값을 암묵적으로 참으로 평가한 값을 의미한다.

result = value1 || value2 || value3;

• 가장 왼쪽 피연사자부터 시작해 오른쪽으로 나아가면 피연사자를 평가한다.
• 각 피연산자를 불린형으로 변환하고 변환한 값이 참(true)면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

예시 2번째

let firstName = "";
let lastName = "";
let nickName = "바이올렛";
   
alert( firstName || lastName || nickName || "익명"); // 바이올렛

or을 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있다.

단락평가?

• or은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 '단락 평가'라고 한다.
  예시를 들어

true || alert("not printed");
flase || alert("printed");

단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다.

&&(and)

• AND 연산자는 연산자 왼쪽과 오른쪽의 값이 모두 참이면 참, 한 쪽이라도 거짓이면 거짓을 반환한다.

console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false

첫 번째 falsy를 찾는 AND 연산자 '&&'

• falsy란? 쉽게 말해 if문의 조건으로 넣었을때 false로 변환되는 겂을 의미한다.

result = value1 || value2 || value3;

• 가장 왼쪽 피연사자부터 시작해 오른쪽으로 나아가면 피연사자를 평가한다.
• 각 피연산자를 불린형으로 변환하고 변환한 값이 거짓(false)이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

!(not)

• 위의 두개에 비하면 아주 간단 연산자이다.
  result = !조건 끝이다.
  !(not)는 참은 거짓으로, 거짓은 참으로 바꾸는 연산자이다.

병합 연산자 '??'

• nullish 병합 연사자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다.
  예를 들어 a ?? b라 하면 a가 null도 아니고 undefined도 아니면 a 그 외는 b이다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

'??'(병합 연산자)와 ||(or)의 차이?

• '||' 은 첫번째 truthy 값 반환
• '??'은 첫번쨰 정의된(defined) 값을 반환
  --> null, undefinde, 숫자 0 을 구분해야할 때 위의 차이가 중요!

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

연산자 우선순위?

1순위 부터 우선 적용됨