Learn to properly handle variables in JavaScript

JavaScriptThe column will introduce in detail how to correctly handle variables

Recommended ( Free): javascript (Video)

Variables are everywhere. Even if we write a small function or a gadget, we still need to declare, assign and read variables. Paying more attention to variables can improve the readability and maintainability of the code.

1. It is recommended to use const, or use let

with const or let Declare your own JavaScript variables. The main difference between the two is that const variables need to be initialized when declared, and once initialized they cannot be reassigned.

// const 需要初始化
const pi = 3.14;
// const 不能被重新赋值
pi = 4.89; 
// throws "TypeError: Assignment to constant variable"

let The declaration does not require value initialization and can be reassigned multiple times.

// let 要不要初始化随你
let result;
// let 可被重新赋值
result = 14;
result = result * 2;

const is a one-time allocation variable. Because you know that const variables will not be modified, it is easier to speculate on const variables than let.

When declaring variables, const is used first, followed by let.

Suppose you are reviewing a function and see a const result = ... Statement:

function myBigFunction(param1, param2) {
  /* 一写代码... */

  const result = otherFunction(param1);
  /* 一些代码... */
  return something;
}

Although I don’t know myBigFunction() , but we can conclude that the result variable is read-only.

In other cases, if a variable must be reassigned multiple times during code execution, use let.

2. Minimize the scope of variables

A variable is located in the scope in which it is created. Code blocks and function bodies create scopes for const and let variables.

Keeping variables in the smallest scope is a good habit to improve readability.

For example, the implementation of the following binary search algorithm:

function binarySearch(array, search) {
  let middle;  let middleItem;  let left = 0;
  let right = array.length - 1;

  while(left  true
binarySearch([2, 5, 7, 9], 1); // => false

The variables middle and middleItem are declared at the beginning of the function, so these variables are binarySearch() Available within the entire scope of the function. The variable middle is used to hold the middle index of the binary search, while the variable middleItem holds the middle search item.

But the middle and middleItem variables are only used in the while loop. So why not declare these variables directly in the while block?

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <p>Now <code>middle</code> and <code>middleItem</code> only exist within the scope where the variable is used. Their life cycles are extremely short, so it is easier to deduce their purpose. </p><p><strong>3. Easy to use</strong></p><p>I am always used to declaring all variables at the beginning of the function, especially when writing some larger functions. But doing this would make my intention of using the variable in the function very confusing. </p><p>So the variable should be declared as close as possible to the location where it is used. This way you don't have to guess: <em>Oh, the variable is declared here, but... where is it used? </em></p><p>Suppose there is a function that contains many statements. You can declare and initialize the variable <code>result</code> at the beginning of the function, but only use <code>result</code> in the <code>return</code> statement: </p><pre class="brush:php;toolbar:false">function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

  /*
   * 一些代码...
   */

  return something + result;}

The problem isresult Variables are declared at the beginning but only used at the end. There is no good reason to declare this variable in the first place.

So in order to better understand the function and role of result variables, always declare the variable as close as possible to the location where it is used.

If you change the code to this:

function myBigFunction(param1, param2) {
  let something;

  /* 
   * 一些代码... 
   */

  const result = otherFunction(param1);  
  return something + result;}

It will be much clearer now.

4. Reasonable naming

You probably already know a lot about variable naming, so I won’t expand on it here. However, among the many naming rules, I have summarized two important principles:

The first one is very simple: use camel case naming and consistently maintain this style.

const message = 'Hello';
const isLoading = true;
let count;

An exception to this rule is certain values: such as numbers or strings with special meanings. Variables that contain specific values ​​are usually capitalized and underlined to distinguish them from regular variables:

const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';

I think the second one is: The variable name should clearly indicate what data it is used to save. .

Here are some good examples:

let message = 'Hello';
let isLoading = true;
let count;

message The name indicates that this variable contains some kind of message, most likely a string.

isLoading is the same, it is a Boolean value used to indicate whether loading is in progress.

There is no doubt that the count variable represents a numeric type variable that contains some counting results.

Be sure to choose a variable name that clearly indicates its role.

Look at an example, suppose you see the following code:

function salary(ws, r) {
  let t = 0;
  for (w of ws) {
    t += w * r;
  }
  return t;
}

你能很容易知道函数的作用吗？与薪水的计算有关？非常不幸，我们很难看出 ws、 r、 t、 w这些变量名的作用。

但是如果代码是这样：

function calculateTotalSalary(weeksHours, ratePerHour) {
  let totalSalary = 0;
  for (const weekHours of weeksHours) {
    const weeklySalary = weekHours * ratePerHour;
    totalSalary += weeklySalary;
  }
  return totalSalary;
}

我们就很容易知道它们的作用，这就是合理命名的力量。

5.采用中间变量

我一般尽可能避免写注释，更喜欢写出能够自我描述的代码，通过对变量、属性、函数、类等进行合理的命名来表达代码的意图。

如果想使代码本身称为文档，一个好习惯是引入中间变量，这在在处理长表达式时很好用。

比如下面的表达式：

const sum = val1 * val2 + val3 / val4;

可以通过引入两个中间变量来提高长表达式的可读性：

const multiplication = val1 * val2;
const pision       = val3 / val4;

const sum = multiplication + pision;

再回顾一下前面的二叉搜索算法实现：

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <p>里面的 <code>middleItem</code> 就是一个中间变量，用于保存中间项。使用中间变量 <code>middleItem</code> 比直接用 <code>array[middle]</code> 更容易。</p><p>与缺少  <code>middleItem</code> 变量的函数版本进行比较：</p><pre class="brush:php;toolbar:false">function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <p>没有中间变量的解释，这个版本稍微不太好理解。</p><p>通过使用中间变量<strong>用代码解释代码</strong>。中间变量可能会增加一些语句，但出于增强代码可读性的目的还是非常值得的的。</p><p><strong>总结</strong></p>

• 变量无处不在。在 JavaScript 中使用变量时，首选 const，其次是 let。
• 尽可能缩小变量的作用域。同样，声明变量时要尽可能靠近其使用位置。
• 合理的命名是非常重要的。要遵循以下规则：变量名称应该清楚无误地表明是用来保存哪些数据的。不要害怕使用更长的变量名：要追求清晰而不是简短。
• 最后，最好用代码自己来解释代码。在高度复杂的地方，我更喜欢引入中间变量。

The above is the detailed content of Learn to properly handle variables in JavaScript. For more information, please follow other related articles on the PHP Chinese website!