by Zell Liew

由Zell Liew

让我们讨论一下变量，以及为什么要在JavaScript中使用它们。 (Let’s talk about variables — and why you should use them in JavaScript.)

The main purpose of coding is to solve problems. For example, what happens when you click on a button? That’s a problem for us to solve.

编码的主要目的是解决问题。 例如，当您单击按钮时会发生什么？ 这是我们要解决的问题。

So, let’s begin this article by solving a simple problem.

因此，让我们从解决一个简单的问题开始。

数苹果 (Counting apples)

If you have 4 apples and you buy 27 more, how many apples do you have? Take a second and write your answer in your text editor.

如果您有4个苹果，又购买了27个，那么您有多少个苹果？ 花一点时间，然后在文本编辑器中写下您的答案。

What’s your answer?

你的答案是什么？

// This? 31

// Or this? 4 + 27

Both answers are right, but the second method is better — because you’re offloading the calculation to JavaScript. You’re teaching it how to arrive at the answer.

两种答案都是正确的，但是第二种方法更好-因为您将计算工作转移到了JavaScript。 您正在教它如何得出答案。

But there’s still one problem with the code.

但是代码仍然存在一个问题。

If you look at 4 + 27 without any context from our apple problem, do you know we’re calculating the number of apples you’re currently holding?

如果您在4 + 27情况下没有遇到苹果问题，那么您是否知道我们正在计算您当前持有的苹果数量？

Probably not.

可能不是。

So, a better way is to use algebra to substitute 4 and 27 with variables. When you do so, you’ll get the ability to write code that has meaning:

因此，更好的方法是使用代数将4和27替换为变量。 这样做时，您将能够编写具有以下含义的代码：

initialApples + applesBought

The process of substituting 4 with a variable called initialApples is called declaring variables.

用名为initialApples的变量替换4的过程称为声明变量。

声明变量 (Declaring variables)

You declare variables with the following syntax:

您可以使用以下语法声明变量：

const variableName = 'value'

There are four parts you’ll want to take note of:

您需要注意四个部分：

1. The variableName

   variableName

2. The value

   value

3. The = sign

   =符号

4. The const keyword

   const关键字

variableName (The variableName)

variableName is the name of the variable you’re declaring. You can name it anything, as long as it follows these rules:

variableName是您要声明的变量的名称。 您可以为它命名，只要遵循以下规则即可：

1. It must be one word
   必须是一个字

2. It must consist only of letters, numbers, or underscores (0–9, a-z, A-Z, _).

   它只能包含字母，数字或下划线(0–9，az，AZ， _ )。

3. It cannot begin with a number.
   它不能以数字开头。

4. It cannot be any of these reserved keywords

   不能是这些保留关键字中的任何一个

If you need to use two or more words to name your variable, just join the words together but capitalize the first letter of each subsequent word. This weird capitalization is called camel case.

如果需要使用两个或多个单词来命名变量，只需将单词连接在一起，但将每个后续单词的首字母大写。 这种奇怪的大小写被称为骆驼案 。

A good example of a camel-cased variable is applesToBuy.

驼峰式变量的一个很好的例子是applesToBuy 。

价值 (The value)

The value is what you want the variable to be. It can be primitives (like strings and numbers) or objects (like arrays and functions).

该值是您希望变量成为的值。 它可以是原语(如字符串和数字)或对象(如数组和函数)。

=在JavaScript中 (= in JavaScript)

= in JavaScript doesn’t work like = in math. Don’t get confused.

JavaScript中的=不能像数学中的=一样工作。 不要感到困惑。

In JavaScript, = means assignment. When you use =, you set (or assign) the value on the right hand side (RHS) of the = sign to the left hand side (LHS) of the = sign.

在JavaScript中， =表示赋值 。 当您使用= ，设置(或指定)的值的右手边(RHS) =标志的左手侧(LHS) =迹象。

In the following statement, you set the variable initialApples to the number 4.

在下面的语句中，将变量initialApples设置为数字4。

const initialApples = 4

If you console.log this variable, you can see that initialApples is 4.

如果使用console.log这个变量，则可以看到initialApples为4。

console.log(initialApples) // 4

作业前评估 (Evaluation before assignment)

Every variable can only take up one value. So, if you have an equation that needs to be evaluated on the RHS, it will be evaluated before it is assigned to the variable.

每个变量只能占用一个值。 因此，如果您有一个需要在RHS上求值的方程式，则在将其分配给变量之前将对其求值。

const initialApples = 4 const applesToBuy = 27 const totalApples = initialApples + applesToBuy

In this example, JavaScript will evaluate the answer of initialApples + applesToBuy (which results in 31) before assigning the results to totalApples. This is why you get 31 if you try to log totalApples.

在此示例中，JavaScript在将结果分配给totalApples之前，将评估initialApples + applesToBuy的答案(结果为31)。 这就是为什么如果尝试记录totalApples得到31 totalApples 。

console.log(totalApples) // 31

const关键字 (The const keyword)

const is one of three keywords you can use to declare variables. There are two other keywords – let and var.

const是可用于声明变量的三个关键字之一。 还有另外两个关键字– let和var 。

All three keywords declare variables, but they’re slightly different from each other.

所有这三个关键字都声明了变量，但它们之间略有不同。

const vs let vs var (Const vs let vs var)

const and let are keywords made available to us in ES6. They are better for creating variables than var because they’re block scoped while var is function scoped.

const和let是ES6中提供给我们的关键字。 它们比var更好地创建变量，因为它们是块作用域的，而var是函数作用域的 。

For now, let’s concentrate on the difference between const and let.

现在，让我们集中讨论const和let的区别。

const vs let (Const vs let)

If you declare a variable with const, you cannot reassign it with a new value. The following code produces an error:

如果使用const声明变量， 则无法使用新值重新分配 它 。 以下代码产生错误：

const applesToBuy = 22

// Reassigning to a variable declared with const results in an error applesToBuy = 27

If you declare a variable with let, you can reassign it with a new value.

如果使用let声明变量，则可以使用新值重新分配它。

let applesToBuy = 22 applesToBuy = 27 console.log(applesToBuy)

您应该使用const还是let？ (Should you use const or let?)

Understanding whether you should use const or let is more of an advanced topic.

了解是应该使用const还是let是更高级的主题。

When you’re starting out, using let would be much simpler than using const.

当您刚开始时，使用let将比使用const简单得多。

However, as you write more programs, you’ll slowly realize that you want to refrain from reassigning your variables. So you’ll begin to use const over let. But that’s a different topic for another day.

但是，随着编写更多程序，您将逐渐意识到，您希望避免重新分配变量。 因此，您将开始在let上使用const 。 但这又是另一回事。

Since you’re going to use const over let anyway when you write more advanced programs, it’s better to get into the habit of preferring const over let when you’re starting out.

由于在编写更高级的程序时无论如何都要使用const over let ，因此最好在开始时养成更喜欢const不是let的习惯。

In case you’re wondering, don’t use var anymore — there’s no need for it. let and const are much better than var.

如果你想知道，不要使用var了-有没有必要为它。 let和const比var好得多。

结语 (Wrapping up)

In JavaScript, variables are used to hold a value. They can hold any value, from primitives to objects.

在JavaScript中，变量用于保存值。 它们可以保存任何值，从基元到对象。

The = sign in JavaScript isn’t the same as the = sign in Math. In JavaScript, = means assignment.

该=在JavaScript标志是不一样的=数学符号。 在JavaScript中， =表示赋值。

When you declare variables, use camelCase to name your variables. Avoid the reserved keywords.

声明变量时，请使用camelCase命名变量。 避免使用保留关键字。

You can declare variables with either const, let or var. As much as possible, you’ll want to use const over let. Use let when you need to reassign values. There’s no longer a need to use var.

您可以使用const ， let或var声明变量。 尽可能多地使用const over let 。 当您需要重新分配值时，请使用let 。 不再需要使用var 。

This article is a sample lesson from Learn JavaScript — a course that helps you learn JavaScript and build real, practical components from scratch. If you found this article helpful, I invite you to find out more about Learn JavaScript.

本文是学习JavaScript的示例课程，该课程可帮助您学习JavaScript并从头开始构建实际的实用组件。 如果您觉得这篇文章对您有帮助，我邀请您查找有关Learn JavaScript的更多信息 。

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. ?)

(哦，顺便说一句，如果您喜欢这篇文章，如果可以分享的话 ，不胜感激。)

Originally published at zellwk.com.

最初在zellwk.com上发布。

翻译自: https://www.freecodecamp.org/news/lets-talk-about-variables-and-why-you-should-use-them-in-javascript-92d8c661a5b/