My Boundary As Much As I Experienced

JS) And연산자(&&), Or연산자(||), Nullish연산자(??) 본문

FrontEnd/Javascript(Vanilla)

JS) And연산자(&&), Or연산자(||), Nullish연산자(??)

Bumang 2023. 7. 20. 16:55

And 연산자(&&)

조건문에 쓰일 시: 두 조건 모두 만족해야 true를 반환한다. 하나라도 불만족할 시 false를 반환한다.

변수 할당에 쓰일 시: 가장 마지막 참인 항의 값을 할당한다. 특이하게도 만약 거짓된 항이 있을 시 탐색을 그만하고 거짓된 항의 값을 할당한다(!)

const num0 = 0
if (num0 < 10 && num0) {
	console.log("both are valid!")
}
// 아무것도 출력되지 않는다.
// num0은 falshy값인 0이므로 거짓이기 때문에, 두 항 모두 참을 만족하지 않는다.


const num1 = 10
if(num1 === 10 && num1 > 0) {
	console.log("both are valid!")
}
// "both are valid!"가 출력된다.


const num2 = 1 && 2;
console.log(num2);
// 마지막으로 참인 2가 출력된다.


const num3 = 6 && "" && 2;
console.log(num3);
// 빈 값이 출력된다.
// 거짓항을 발견하자마자 탐색을 중단하고 거짓값을 할당한다.

 

 

Or 연산자(||)

조건문에 쓰일 시: 두 조건 중 하나만 만족하면 true를 반환한다.

변수 할당에 쓰일 시: 순차적으로 탐색하며 참인 항을 발견하면 지정한다. 나머지 값들은 탐색하지 않는다.

const num0 = 9
if(num0 > 10 || num0 < 10) {
	console.log("work!")
}
// 9는 10보다 작으므로 오른쪽 항은 참이고 왼쪽 항은 거짓이다.
// 그러나 하나만 만족하면 결과적으로 true를 반환하므로 "work!"가 정상적으로 출력된다.

const num1 = 1 || 10
console.log(num1)
// truthy값이 보이면 바로 지정한 후, 나머지 항들은 검토하지 않는다.

const num2 = 0 || 1
console.log(num2)
// falshy값은 건너 뛰다가 truthy한 값이 보이면 그걸 지정한다.


const num3 = 0 || "" || 3;
console.log(num3);
// 3이 출력된다.
// falshy값들을 계속 건너 뛰어서 3을 지정한다.

const num4 = false || 0;
console.log(num4);
// 0이 출력된다.
// falshy값을 계속 건너 뛰다 마지막 항까지 falshy값이면 마지막 값을 지정한다.

 

Nullish 연산자(??)

거짓(falshy) 데이터 중 undefined와 null만 건너 뛰고 나머지 중에서 맨 처음 보이는 항을 선택한다.

const num1 = null ?? 7;
// 7이 선택된다.
const num2 = null ?? 0 ?? 1;
// 0이 선택된다. 0이 falshy값이어도 선택된다.