JavaScript中(var1 !== var2)和(var1 && var1 !== var2)的区别是什么？

核心原因是querySelector的返回值可能为null，不加非空校验会触发运行时报错：

• 首先看current的赋值逻辑：event.target.parentElement.querySelector(.${selectedClassName}) 这个方法在父元素范围内找不到带对应选中类名的元素时，返回值是null，而非HTML元素对象。
• 若去掉current &&只保留current !== event.target：当current为null时，null和作为DOM元素的event.target必然不相等，条件判定会通过，紧接着执行current.classList.remove(selectedClassName)时，会尝试访问null的classList属性，直接抛出 Uncaught TypeError: Cannot read properties of null (reading 'classList')，后续给点击元素加选中类、存储颜色到同步存储的逻辑都会被中断，功能完全失效。
• 前置current &&的作用是做短路非空校验：只有current确实是存在的有效DOM元素时，才会继续执行后续的相等性判断，从根源上避免空值访问报错。

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