1. issue

실무에서 다음과 같이 || 연산자와 삼항연산자 함께 쓸 때 예상치 못한 값이 ProductOrderID에 담기는 문제가 발생했다.

ProductOrderID:
worksheet[`${ProductOrderID?.rowIdx}${i + 1}`]?.v || worksheet[`${ProductOption?.rowIdx}${i + 1}`]?.v
? worksheet[`${ItemNo?.rowIdx}${i + 1}`]?.v
? worksheet[`${OrderID?.rowIdx}${i + 1}`]?.v + '_' + worksheet[`${ItemNo?.rowIdx}${i + 1}`]?.v
: worksheet[`${OptionManageCode?.rowIdx}${i + 1}`]?.v
? worksheet[`${OrderID?.rowIdx}${i + 1}`]?.v +
'_' +
worksheet[`${OptionManageCode?.rowIdx}${i + 1}`]?.v
: worksheet[`${OrderID?.rowIdx}${i + 1}`]?.v +
'_' +
worksheet[`${ProductID?.rowIdx}${i + 1}`]?.v +
'_' +
worksheet[`${ProductOption?.rowIdx}${i + 1}`]?.v
: worksheet[`${OrderID?.rowIdx}${i + 1}`]?.v + '_' + worksheet[`${ProductID?.rowIdx}${i + 1}`]?.v,

위 코드의 구조를 간단히 만들어보면 다음과 같다. 우선 내가 예상한 operator변수에 담길 값은 true이다. ||연산자 왼쪽에 true값이 담겼음에도 결과는 operator변수에 "a"가 담긴다.

const operator = true || false ? "a" : "b";
console.log(operator);//"a"

2. solution

operator변수에 "a"가 담긴 이유는 다음과 같이 삼항연산자를 썼을 때 특별히 괄호를 표시하지 않으면 ? 앞을 전부 괄호로 자동으로 묶기 때문이다.

const operator = (true || false) ? "a" : "b";
console.log(operator);

operator변수에 true가 담기려면 다음과 같이 괄호를 넣어준다.

const operator = true || (false ? "a" : "b");
console.log(operator);//true