JavaScript三元运算符代码问题：认证判断触发未定义属性读取错误

这个问题其实是运算符优先级在搞鬼！你写的代码里，+字符串拼接运算符的优先级比三元条件运算符?:更高，导致代码的执行顺序和你预期的完全不一样。

举个具体场景：当auth.isAuthenticated()返回false时，代码会先执行：

'Checking... ' + auth.isAuthenticated()

得到字符串'Checking... false'，而这个非空字符串在布尔判断里会被判定为true，所以三元运算符会直接执行冒号前的部分——也就是去读取auth.user.email，但这时候auth.user是undefined，自然就抛出了TypeError: Cannot read property 'email' of undefined的错误。

修复方案 #

只需要给三元判断的部分加上括号，强制让它先执行，再进行字符串拼接就可以了：

console.log('Checking... ' + (auth.isAuthenticated() ? `User ${auth.user.email} is authenticated` : 'User is not authenticated!'));

如果追求更好的可读性，也可以把状态消息先存到变量里，再输出：

const authStatus = auth.isAuthenticated() 
  ? `User ${auth.user.email} is authenticated` 
  : 'User is not authenticated!';
console.log(`Checking... ${authStatus}`);

这样一来，只有当auth.isAuthenticated()返回true时，代码才会去访问auth.user.email，完美避免了对undefined的属性读取操作。

内容的提问来源于stack exchange，提问作者Poogy