JavaScript中if/else块内定义变量外部调用显示undefined的原因

核心原因：let的块级作用域限制 #

let 是ES6引入的块级作用域声明关键字，作用范围仅限定在当前所在的花括号{}包裹的代码块内。你在if和else两个独立代码块内分别用let声明newCard，这两个变量仅在各自的if/else块内生效，块外作用域完全访问不到，所以在块外调用newCard时会提示未定义。

提前声明仍报错的常见诱因 #

如果你已经在if/else外层提前声明了newCard但仍然报错，基本是因为你在if/else块内赋值时又加了let关键字，这相当于在块内重新声明了一个同名局部变量，覆盖了外层的变量，外层的newCard始终没有被赋值，自然还是未定义。
正确的提前声明写法如下（同时修正你原代码的逻辑错误：原判断条件写反了，state[listId]为undefined时执行展开操作会直接抛出类型错误）：

case CONSTANTS.ADD_CARD: {
  const { listId, card } = action.payload;
  // 在外层作用域提前声明变量
  let newCard;
  if (typeof state[listId] !== "undefined") {
    // 直接赋值，不要加let重复声明
    newCard = [...state[listId], card];
  } else {
    newCard = [card];
  }
  const newState = {
    ...state
  };
  newState[listId] = newCard;

  return newState;
}

三元运算符生效的原因 #

三元运算符属于表达式，你可以直接将整个表达式的计算结果赋值给外层作用域的newCard变量，不存在跨块访问局部变量的问题，自然不会触发作用域相关的报错，写法也更简洁：

const newCard = typeof state[listId] !== "undefined" ? [...state[listId], card] : [card]

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