Git Product home page Git Product logo

phase-0-pac-1-the-assignment-expression's Introduction

The Assignment Expression

Learning Goals

  • Define the Assignment Expression
  • Define Mutability / Immutability
  • Learn what the Return Value of an Assignment Expression is

Introduction

So you've seen the first of our essential three expressions, the constant expression, which gives JavaScript some constant facts about the world: 2 is 2, 3 is 3, etc...

It's really useful to associate an expression's evaluated result with a 'name'. We call those names that we associate with the expression's result, variable names or, commonly, just variables. The process of bonding an expression to a variable is called assigning a variable. Programmers also say that "the variable name 'points to' the expression that was assigned to it."

A helpful metaphor here is that it's like adding a new entry to a dictionary: aFunNumber's definition is 3 * (10 - 4) or myBirthYear's is 1989. Or you can think about a variable name as a label you put on a box. Using this metaphor, the box labeled aFunNumber contains the value 3 * (10 - 4), and the box labeled myBirthYear contains the value 1989.

We create the association between a variable name and a value by using the second of our essential three expressions: the assignment expression.

Define the Assignment Expression

In JavaScript, the assignment expression is like so:

Assignment Expression Graphic

Here are some examples:

aFunNumber = 3 * (10 - 4);
myBirthYear = 1989;

Variable names are most often descriptions of what their assigned expressions mean. In JavaScript, when a variable name is made of multiple words, every word after the first is capitalized. This is referred to as camelCase and although it isn't strictly required, it is a common convention in JavaScript.

Note: In JavaScript, it's optional to include a semi-colon at the end of each line. You may encounter JavaScript expressions written both ways.

While you can include numbers and some symbols in variable names, let's keep things simple for the moment and just use camelCased letters.

Consider the following expression:

maximumSpeed;

Run this alone in a REPL, and we get an error:

ReferenceError: maximumSpeed is not defined

...followed by many lines starting with at.... Here, JavaScript, by default, doesn't know anything about maximumSpeed.

<iframe height="400px" width="100%" src="https://repl.it/@MaxwellBenton2/OrderlyDeadParticle?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

When we define a variable using the "assignment expression" we add something new to JavaScript.

<iframe height="400px" width="100%" src="https://repl.it/@MaxwellBenton2/OutgoingAlienatedMacrolanguage?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

Notice that maximumSpeed = 9000, the assignment expression, evaluates to 9000 when run. Once maximumSpeed is defined, JavaScript will know what it is. (We'll look at this more closely in the next lesson.)

SUPER-IMPORTANT: In the assignment expression = means "assignment". It does not mean "what's on the left of the = is equal to what's on the right." In math courses, we use = to say that the expressions on either side of the = are the same. JavaScript uses == and === for that purpose. It's very common โ€” and very confusing โ€” for beginners to have bugs where they confuse = for == or ===.

Define Mutability / Immutability

A variable is said to be "mutable." That means the value that the name "points to" can be changed during the running of the program. Being able to change the value a variable points to is very important. For example, if we need to do something 10 times, we need a variable to keep track of how many times the thing happens. That variable will need to change: its value will need to increase by 1 each time. Here's "mutability" in action:

Many years ago my height in centimeters was:

heightInCentimeters = 50;

But today it is:

heightInCentimeters = 180;

We can try these out in REPL:

<iframe height="400px" width="100%" src="https://repl.it/@MaxwellBenton2/TrueShortMaintenance?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

Sometimes, we might want to make a variable's value permanent. We might want to say "hey, this value should not change." We want to say that the value is immutable, the opposite of mutable. We do this by writing a constant (not the same as the constant expression we discussed previously). We'll go into more detail on constants in the next part of this course.

Return Value of an Assignment Expression

The return value of an assignment expression is the evaluated result of the expression to the right of the =.

recurringExpressionValue = 3 * (10 - 4);
// 18

Pay attention here: the return value of the assignment expression IS NOT THE SAME THING as getting the value out of the variable name. We'll learn to get the value "back out of a variable" in the next lesson. What JavaScript is saying is that the assignment expression's return value is the value of the expression to the right of the =.

Note: The syntax underneath recurringExpressionValue indicates what this expression evaluates to; in this case, it's the number 18. Any line that starts with // in JavaScript is a "comment": it's code that is ignored by the JavaScript engine, but can be used to indicate something to other developers looking at your code.

Conclusion

Think about a baby who has never spoken before. Before it stands a parent saying their name over and over (...and over) again.

Learning to talk 1

They wave towards their bodies and say their names again and again. What the parent is trying to do is teach the baby to assign their face to the variable name "Mama" or "Dada." But to the baby, this means nothing.

While neither the baby or the (average) adult is aware of it, they're trying to teach the baby the second of the three essential expressions: the assignment expression. Then, one magical day, it clicks for the baby. It performs an assignment in its precious little head:

Learning to talk 2

Unfortunately, Mom is still sad; she doesn't have any proof that the assignment was successful. For that to work, the baby will need to prove that it can "look up" the variable assignment of who "ma-ma" points to. The baby will need to learn the last of our essential expressions: the variable lookup expression!

phase-0-pac-1-the-assignment-expression's People

Contributors

ihollander avatar lizbur10 avatar maxwellbenton avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.