[js] &&와 || 의 활용법 : 단락회로평가

프로그래밍을 막 처음 배우기 시작하던 시절부터 많이 봤던 &&와 ||이다

전통적인 프로그래밍 관점에서 이 둘은 논리연산자로 AND와 OR을 의미한다

 

 

 

 

AND연산자는 2개의 값이 모두 참이면 true 반환하고 아니면 false,

OR연산자는 2개의 값중 어느 한 값만 참이면 true 반환하고 아니면 false이다

AND연산자

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


OR연산자

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

 

이렇게 boolean값만 논리연산자에 오면 쉽게 알수있지만 피연산자에 다른 값들이 오면 헷갈린 경우가 많아 정리해보려 한다

 

 

 

 

 

단락회로평가란?

 

 

논리합(||), 논리곱(&&) 연산자를 왼쪽부터 오른쪽으로 평가하는데 과정중에 평가결과가 나오면 끝까지 가지 않고 그대로 평가 결과를 반환하는 것

 

 

이 단락회로 평가를 잘 적용하기 위해서는 truthy와 falsy값을 잘 알고 있어야하는데 간단히,

truthy는 true로 평가되는 값, falsy는 false로 평가되는 값을 의마한다

 

 

falsy

• 0
• NaN
• false
• ' '
• null
• undefined

 

truthy

• "stirng"
• 1
• []
• {}
• 등등

 

truthy와 falsy값은 위와 같이 있는데 간단히 저 6개의 falsy 값을 제외하면 거의 다 truty값이라고 이해하는게 좋을 듯하다

 

 

 

 

 

 

 

 

논리합(||) 에서 단란회로평가

 

 

여기서는 왼쪽에서 오른쪽으로 갈때 truthy값을 만나면 바로 반환해주고

falsy값을 만나면 넘어가고 전부 falsy 값이면 마지막 값을 반환한다, 하나만 true 값이어도 true이기 때문

 

console.log("yang" || true) // yang
console.log("yang" || false) // yang

 

위와 같이 오른쪽 값은 생각하지 않고 무시해주면 된다

 

 

 

만약, 왼쪽이 falsy값이라면

 

console.log( false || "yang" ) // yang
console.log( false || null ) // null

 

 

마찬가지로 truthy값을 만나면 truthy 값을 반환해주고,

다 falsy 값이면 마지막 만난 falsy 값을 반환해주면 된다

 

 

이를 이용하여 하여 매개변수의 기본값 체크를 할 수 있다

 

function example(param){
	const res = param;
    return res;  
}

example(); // 값을 전해주지 않아 undefined가 발생 -> 나중에 문제 생길수도




function example(param){
	const res = param || 'res';
    return res;  
}

example(); // res
example('hi') // hi

 

 

이는 데이터를 받을 때 유용하다

let res = '';  // 데이터 받은 값

let result = response || 'default';

console.log(result);  // 'default'

 

 

 

 

 

이걸 정리해보자면 다음 표와 같다

 

truthy || falsy	truthy
falsy || truthy	truthy
truthya || thruty b	truthya

 

 

그래서 다음과 같은 코드를 해석할수 있게 된다

 

console.log( NaN || false || "yang" || true || null ) // yang

 

 

 

 

 

 

 

 

논리곱(&&)에서 단락회로평가

 

여기서는 왼쪽부터 오른쪽으로 평가하며 falsy값을 만나면 바로 반환해주고,

truthy 값을 만나면 오른쪽으로 넘어가며 모두 truthy 값일 경우 마지막 값을 반환한다

 

 

console.log( false && "yang") //false
console.log( null && false ) // null

 

위와 같이 falsy값을 만나면 오른쪽은 무시해도된다

 

 

 

만약, 왼쪽이 truthy 값이라면,

 

console.log( "yang" && "hi" ) // hi
console.log( "yang" && null ) // null

 

다음값이 truthy 값이면 다음 값을 반환하고 falsy값을 만나면 falsy 값을 반환한다

이를 다른 방향에서 보면 피연산자가 2개일 경우 truthy 이 나오면 무조건 다음 값을 반환한다

 

 

이를 이용하여 null이나 undefined 체크를 할 수도 있다

 

 

let a;  // undefined

cosole.log(a.name) // TypeError: Cannot read property 'name' of undefined

console.log(a && a.name);  // undefined

 

 

 

 

 

이걸 정리해보자면 다음 표와 같다

 

truthy && falsy	falsy
falsy && truthy	falsy
truthya && thrutyb	thrutyb

 

 

 

 

그래서 다음과 같은 코드를 해석할수 있게 된다

 

console.log( NaN && false && "yang" && true && null ) //  NaN
console.log( "yang" && true && null && NaN && false ) // null