Day 03 - jS 微基础之ES6变数： let, const

在前一篇文章中描述了基本的jS操作，这篇要讨论关於变数的定义。

推出很久的ES6(2015)中定义了新的两个变数：const, let，分别代表不可重新定义与可以重新定义的变数（原本的var变数并未就此消失，而是建议以let取代使之更严谨）。

首先说明变数的概念，以设计师的视觉化想像，变数就像在影像软件里建立一个图层，可以取重复或不重复的名字，填入重复或不重复的内容。

原先的var变数就是类似这样的存在，我可以 var x = 0（建立名为x的图层画黄线）後再 var x = 5（再建立一个名为x的图层并画一样尺寸的黑线），但问题来了，当图层视窗的“预览功能没有”时，如何判断这两个重复名称的图层内容为何？

在程序的执行中，浏览器会依序执行，所以当x被重新赋予一个值的时候，他会取代掉先前那个值的存在（网页设计师请想像在同一个位置两个图层画上一样大小的内容时，上面图层会遮住下面图层的内容）。

因此通常在写程序不会做这种事，即不断地用相同名称的变数去重新定义值，以避免出现覆盖的问题。

可是，就是这个可是！

电脑会当机，人脑会忘记！

有时候会不小心（或因为刻意）重新定义相同的值，那感觉就像黄线被黑线遮住一样，看不到就是看不到，而人脑完全忘记有重复的这件事，所以电脑很无辜的执行错误，人脑只能不断找错误在哪里。

在ES6推出const, let以前，var变数是很不严谨的存在，var可以随意地重新定义，甚至有可能从区域变数变成全域变数，一不小心就带来大灾难（那就像好不容易画好线涂完色修完影像才发现都做在同一个图层上，设计师内心有多崩溃）。

而为什麽网页设计师不会遇到这个问题呢？

因为影像软件已经自动帮我们设定好有预览图层功能的视窗，有自动做不同命名的图层（例如图层一、图层二、图层三...）功能，对，请把每个图层当作不同的变数来想像（但是硬要命相同名称还粗心做错边真的没办法拯救，那个要改善的是细心度）。

所以var变数在过去来说很容易在执行上出问题与并在维护中增加难度，特别是团队进行的专案。

於是，当看见const，就必须知道这是不可以再被重新定义的变数，当看见let，就必需知道这个变数可能会被重新定义（而且它已经存在区块域的概念，不会渲染到整个全域）。

希望今天写的内容，能对身为网页设计师的各位有较大的帮助，因为我想用“我是一个网页设计师”的角度来切入“我是一个网页工程师”的方式来换位思考。

一样，如果有说明的不清楚的部分或有所谬误，欢迎各位留言给予建议协助勘正。

很幸运能顺利的在烤肉整理完後赶上这篇文章，先预祝各位佳节愉快。