每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day2

tags: ItIron2021 Javascript

前言

昨天我们透过了一个相当经典的题目探讨了基本的作用域(scope)与变数赋值的概念，让我们沿续这两个概念继续进行另一个题目的练习吧! 由於只是概念的应用复习，今天的篇幅甚至会再更短一些! 一起放轻松来学习吧!

本日题目与解释

请问下方的程序码会有什麽输出结果?

(function(){
  var a = b = 3
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

这个题目也算相对常见的基本题型之一，当时是在一间博奕公司给的现场测验中遇到这题目，好在之前自己练习时就有遇到类似的情境才不至於翻车?

先防雷，来张思考图片挡一下，思考结束後再往下滑吧!

最终的输出结果如下

a defined? false
b defined? true

最终a是个未定义的变数，但b则是一个已经定义的变数，且其值为3，那为什麽会有这样的结果呢? 我们一个个重点来看吧!

• var a = b = 3 与你想像的执行结果并不相同

很多人会以为下面两种写法是完全等价的

var a = b = 3

-----我是分隔线-----
var a = 3
var b = 3

但事实上由於运算子相依性(associativity，也有人说运算子结合率)，上方的程序码赋值部份会是右 -> 左进行，也就是说实际上会是这样的

b = 3
var a = b

但这样又有什麽差别呢? 关键在於b变成一个类似全域变数的存在，会挂在当下指向的global object下，以浏览器为例便是在window物件下

而var宣告的变数我们在昨天提过，它是functional scoped，也就是说a这个变数仅存在於该立即执行函数(IIFE)中，离开那个函数便无法被使用，最终自然变成not defined的变数罗!

也因此你在很多很多的教材中都会看到永远都要用var、const/let来宣告变数，以免造成这样意料之外的行为，现在许多的框架都会自动套用strict mode，在严格模式下就会预先替你把这样的错误抓出来罗!

顺带一提，一次赋值多个变数的写法是这样的，利用这样的写法修改题目後就会看到我们预期的结果罗!

本日核心观念与总结

核心观念

scope、变数宣告与赋值、运算子相依性

总结

1. 永远都要使用关键字宣告变数，以免造成预期外的结果，现在的框架基本上都会帮你做把关
2. 一次赋值多个变数的写法并不是var a = b = c,而是需要写var a = 3, b = 3
3. 赋值运算子为右相依性，从右判断到左

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!