JavaScript: Assignment and Mutation

Hello, fellow coders! Today, we are embarking on a journey to uncover the secrets of two fundamental concepts in JavaScript: assignment and mutation. We'll shed light on the differences, the quirks, and the best practices while using var, let, const, objects, arrays, arrow functions, spread operators, and rest operators. Buckle up and get ready for a code-filled adventure!

Variables: The DNA of Your Code

First things first, let's talk about variables. They're the DNA of your code, the building blocks that hold the data your code processes.

In JavaScript, we have three keywords to declare a variable: var, let, and const. While all of them are used for variable declaration, they have different scopes and limitations.

The Basics: Primitive Values and Objects

Before we delve deeper into variable assignment and mutation, it's crucial to understand the two types of values we deal with in JavaScript: primitive values and objects.

Primitive values include numbers, strings, booleans, null, undefined, symbols, and BigInt for large integer values. Anything that isn't a primitive value is an object, including arrays, dates, regular expressions, and functions.

Assignment: Setting the Stage

Let's say you're directing a play (your code), and you need actors (variables). When you assign values to variables, you're essentially casting actors to play certain roles.

In JavaScript, variable assignment is straightforward. For example, if we want to assign the number 3 to the variable bears, we would simply write:

Assigning a variable in JavaScript (click to open fiddle)

 
This is just like saying "in this play, the role of bears will be played by the number 3".

However, it's important to note that when dealing with objects, even if two objects look exactly the same, they reference different objects:

Objects in JavaScript (click to open fiddle)

 
Even though ghostbusters and tmnt look identical, they are different objects.

Const and Let: To Reassign or Not to Reassign

When you declare a variable using const, its value can't be reassigned. This is true for both primitive values and objects:

Declaring a variable using const (click to open fiddle)

In contrast, when you declare a variable using let, its value can be reassigned:

Declaring a variable using let (click to open fiddle)

In general, it's good practice to use const as much as possible, as this leads to more predictable and less error-prone code.

Mutation: A Costume Change Mid-Play

Mutation is like having an actor change costumes in the middle of the play. The actor (variable) is the same, but the costume (value) changes.

Let's look at an example:

Mutation example in JavaScript (click to open fiddle)

In this case, beatles is still beatles, but the number property of the object has changed. This is mutation.

Spread and Rest Operators: The Magic Tricks

Now, let's talk about spread and rest operators (...). These are powerful tools that can be used for manipulating arrays and objects.

The spread operator allows you to expand iterable elements, such as arrays or strings, into individual elements. For example:

Spread operator in Javascript (click to open fiddle)

On the other hand, the rest operator is used to collect the rest of the elements into an array. This is handy when working with function arguments:

Rest operator in JavaScript (click to open fiddle)

These are just a few examples of what you can do with spread and rest operators.

Arrow Functions: A Different Kind of Actor

Arrow functions are another feature in JavaScript that have their quirks when it comes to assignment and mutation.

Unlike regular functions, arrow functions do not have their own this value. Instead, this is determined by the surrounding (lexical) context.

This makes arrow functions useful in scenarios where you want this to have the same value as it does in the parent scope:

Arrow functions in JavaScript (click to open fiddle)

Wrapping Up

Understanding assignment, mutation, and the related concepts is crucial to mastering JavaScript. These principles are the foundation upon which you'll build more complex applications and develop a deeper understanding of the language.

Remember, practice is the key. Try out different scenarios, make mistakes, learn from them, and keep coding!