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

tags: ItIron2021 Javascript

作者碎碎念

终於又等到今年的铁人赛开赛了，去年写的30天手把手的Vue.js教学即便只是个很基础的教学笔记，却仍收到一些很用心的回馈或是感谢，自己看了也相当高兴! 今年的主题打算换个方向，希望能以不同的形式回馈整个社群! 相较完整的教学文章，今年的系列文会相对的简短很多，大家就放松心情、每天花个几分钟看一下就行了!

这系列文章适合谁呢?

这个系列文其实启发於我最近办的javascript模拟面试活动，主要目的是协助像我一样的转职者在面对实际面试时不至於完全手足无措，四周的活动结束後获得不错的回响，因此打算将活动内容转为一篇篇的文章纪录，以下是我个人觉得适合的受众，如果你目前处於以下的阶段我认为(希望)这系列文章能对你有所帮助

• 正在准备jr等级职缺的面试且对javascript有基础的理解
• 单纯想确认自己javascript的基础够不够紮实的小可爱

前言

今年的主题是希望透过探讨我在面试过程中实际遇到的部分javascript题目，由於篇幅的关系，在这系列文章中不会探讨较为进阶的白板题，而是透过一些看似很简单的题目让阅读者复习一些javascript这奇妙语言的一些核心概念，同时在文章中会说明一些我认为比较重要的面试技巧，让像我一样的转职者即便没有资讯背景也能很好的应付这类jr等级的题目。由於此系列重点放在确认一些你可能忽略的概念，因此在解题时很多观念我并不打算用大量的篇幅说明，有些核心的概念不是短短几句话就能带过，我仍然会做基本的解释让你足够理解每天的题目，但细部的原理需要麻烦你自行再去钻研罗!
让我们马上开始今天的题目，要是你觉得中间的说明太过於冗长，也可以直接跳到最後的结论!

本日题目与解释

请解释var const & let的差别

这个题目可说是经典中的经典了，就连我为数不多的面试经验中都被反覆问了至少三次以上，若你认为你已经非常了解这基本的问题，除了回答const & let是在ES6後出来的新玩意之外，试着回答以下的输出结果吧!

情境一

var author = 'Danny'
var author = 'Wang'

console.log(author)

情境二

let author = 'Danny'
let author = 'Wang'

console.log(author)

情境三

const author = 'Danny'
const author = 'Wang'

console.log(author)

相信这问题应该难不倒多少人，最终的结果只有情境一会被顺利的compile，其他情境你都会看到以下的错误讯息

Uncaught SyntaxError: Identifier 'author' has already been declared

这就是第一个重点

• 在同一个作用域中，var可以重复宣告相同变数，let & const则不能

而什麽是作用域(scope)呢? 最简单的理解方式就是一个变数生存的范围，超出该变数的作用范围外就无法被使用，而当在目前的作用域中找不到指定的变数时便会不断的往外层的环境去找(outer environment)，直到每个环境中都找不到指定的变数时才心不甘情不愿的回传not defined，而这同时也带到我们的第二个重点。

• var宣告的变数为functional scoped，而let & const 宣告的变数为block scoped

光看理论有点困难对吧? 来看一下实际的范例

function demo() {
  for (var i = 1; i < 5; i++) {
    var host = 'Danny'
    let author = 'Wang'
  }
  console.log(host)
  console.log(author)
}

demo()

输出结果为

Danny
Uncaught ReferenceError: author is not defined

由於host是用var宣告的，它的有效范围就是整个demo function，与此相对的author变数因为是block scoped，它便仅存在於回圈的block中，一旦离开回圈外在的环境便没有办法使用它(所谓的block不用想得太复杂，在js中其实就是以{ }包起来的范围都可以称做一个block，像是常见的回圈、条件式等)

除了以上两点之外，最後一个比较细微的差别是在於重新赋值的限制，我们一样看一个简单的范例。

let name = 'Danny'
name = 'Wang'

const id = 32
id = 15

上方的例子中虽然name变数成功被重新赋值，但下方的const部分则会出现以下的错误讯息

Uncaught TypeError: Assignment to constant variable.

这是const关键字带来的限制，也就是本题的重点三

• 利用const宣告的变数无法被重新赋值

这边需要特别注意，无法被重新赋值与无法被改变是完全的两回事，看个简单的例子。

const arr = []
arr.push(1)
console.log(arr) // [1]

即便arr是用const宣告的变数，这个空阵列仍然被改变了，因为这并不是重新赋值的行为，所以不要傻傻地回答const宣告的变数就是个不可改变的常数!

本日核心观念与总结

核心观念

作用域scope、变数宣告与赋值

总结

1. var能重复宣告相同名称的变数，const & let则不行
2. let & const & var有不同的作用域，前两者为block scoped,後者为functional scoped.
3. const 宣告的变数永远无法被重新赋值，但仍可以被改变(阵列、物件等的操作)

今天的练习就到此为止，很简单对吧~!我们明天见啦!
小小提醒，当你在口试中遇到这类的问题时，若你知道面试官想考什麽概念，记得在回答时把关键字清楚的讲出来，以今天的题目来说，面试官想听到的很可能就是scope，这样的回答会将你的逼格往上拉一些，也让人了解你确实知道你在讲什麽?