DEV Community: Barbara Robles (english prof.)

Spread vs Rest Operators in JavaScript

Barbara Robles (english prof.) — Tue, 12 Mar 2024 12:42:40 +0000

Content:

Definition
Spread Operator
- Concatenating Arrays
- Merging Objects
- Copying Arrays and Objects
- Turning Strings into Arrays
Rest Operator
- Function Parameters
Destructuring with Rest and Spread

Let's learn how to use the three dots in our code. After this article, you won't forget the difference between them! 🐱🐱🐱

Definition :

The spread is the operator that allows us to expand iterables into individual elements.
The rest is the operator we use to represent an indefinite number of arguments in an array.

Both are written using the three dots ..., but you'll see that it's easy to identify when it's a spread and when it's a rest! At the end, there's also a good tip for you!

Spread Operator

Concatenating Arrays

The spread allows us to combine two or more arrays, maintaining a concise and clean language.

Let's have some coffee? ☕️ Consider the two arrays below:

const coffee = ['coffee', 'water'];
const spices = ['cinnamon', 'nutmeg', 'cardamom'];

We can use the spread to mix the ingredients into a single array:

const coffeeReady = [...coffee, ...spices];

console.log(coffeeReady) 
// output:
// ['coffee', 'water', 'cinnamon', 'nutmeg', 'cardamom'];

Simple! Much better than writing item by item from each of the two arrays to form coffeeReady.

Important:

1. Changes in coffee will NOT affect coffeeReady!

To better understand: when we make a copy, we can either create a new reference to the original value or just copy the value. Creating a new reference is simply creating a variable that will point to the same location in memory where the original value is.

If we had created a new reference, any changes in coffee would change coffeeReady and vice versa. But what we did with the spread was to copy only the value, which in turn will be stored in another location in memory. Thus, changes in one array will not affect the other.

However, some details could change this picture! That's because...

2. The spread only creates a shallow copy!

This means that, depending on the data contained in coffee, some changes could indeed alter coffeeReady! If coffee contained some non-primitive value, the computer would have created a reference to the values in memory. So, any change in one array would affect the other, since both would be storing a reference to the same location in memory. See below:

let a = [1, [2, 3]];
// [2, 3] is an array nested in a, and therefore
// it is a non-primitive value
const b = [4, 5, 6];

let c = [...a, ...b];
console.log(c);
// output: [1, [2, 3], 4, 5, 6]

a[0] = 11;
a[1][0] = 22;

console.log(c);
// output: [1, [22, 3], 4, 5, 6]

See above that changing a[0] did not affect c, because we changed a primitive value. In other words, a[0] and c point to equal values, but they are in different locations in memory. However, changing a[1][0] modified c, because we changed the value to which both a[1][0] and c point.

Merging Objects

We can also merge objects into one using the spread:

const myParents = { 
  fathersName: 'Michael', 
  mothersName: 'Louise'
};
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
/* output:
{ 
  fathersName: 'Michael', 
  mothersName: 'Louise', 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
} 
*/

However, it is important to remember that the spread does not clone identical properties! Below we have two objects with brothersName:

const myParents = { 
  fathersName: 'Michael', 
  mothersName: 'Louise',
  brothersName: 'Gabriel'
};
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
/* output:
{ 
  fathersName: 'Michael', 
  mothersName: 'Louise', 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
}
*/

Note that the final object does not inherit both brothersName keys. In fact, only one prevails, which is from the second object.

Copying Arrays and Objects

Got the idea so far? If we can merge arrays and also objects, that means we can also copy them individually:

// creating a shallow copy of coffee:
const coffee = ['coffee', 'water'];
const coffeeCopy = [...coffee];
console.log(coffeeCopy)
// output: 
// ['coffee', 'water'];

// creating a shallow copy of mySiblings:
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { 
  fathersName: 'Michael', 
  mothersName: 'Louise',
  ...mySiblings
};
// Now we can treat brothersName and sistersName as 
// a property of myFamily:
console.log(myFamily.brothersName) 
// output: Philip

Turning Strings into Arrays

It is also possible to use the spread to turn a string into an array. This allows us to have more flexibility when manipulating strings, since we will be able to apply array methods to strings:

const str = 'coffee';
const letters = [...str, 's.', '☕️']; 
console.log(letters);// ["c", "o", "f", "f", "e", "e", "s.", "☕️"]

Rest Operator

As mentioned above, the rest operator is used to pack elements into an array. You'll see that the rest operator is a great ally when dealing with many values or an uncertain number of values.

Function Parameters

The rest operator allows us to represent an indefinite number of arguments as an array.

const order = function(beverage, ...otherIngredients) {
  console.log(beverage);
  console.log(otherIngredients);
};

order('green tea', 'milk', 'brown sugar'); 
// output:
// green tea 
// ['milk', 'brown sugar']

Note that this allows us to call the same function with more arguments, as the rest operator will put them all in the otherIngredients array:

const order = function(beverage, ...otherIngredients) {
  console.log(beverage);
  console.log(otherIngredients);
};

order('green tea', 'milk', 'brown sugar', 'mint', 'tonka'); 
// output:
// green tea 
// ['milk', 'brown sugar', 'mint', 'tonka']

🍵 An important detail is that the rest must be the last parameter in the function! If we wrote function(...otherIngredients, beverage) the computer wouldn't know when to stop and this code would generate an error.

Destructuring with Rest and Spread

Rest and spread are also widely used in destructuring. If you don't know what that is yet, I suggest my other two articles here: array destructuring and object destructuring.

Using rest:

const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others); 
// output: 1 2 [3, 4, 5]

Now, take this tip so you don't confuse rest with spread here: the rest is on the left side of = and the spread is on the right side of =.

...rest = ☕️

🍵 = ...spread

Thanks for making it this far! I hope this post has helped you! Thoughts? Please, comment below!

Object Destructuring in JavaScript

Barbara Robles (english prof.) — Tue, 27 Feb 2024 14:14:48 +0000

Last week we talked about array destructuring here. Now let's finally understand object destructuring!

Contents:

Basic Syntax
Renaming Properties
Default Values
Renaming and Default Values
Nested Objects
Mutating Variables

Basic Syntax

Destructuring is a simple way to extract data from arrays or objects into separate variables. Now, let's delve into the workings of object destructuring.

Consider this object as an example:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo'
};

Now let's extract the data for city and age using destructuring:

const { city, age } = user;

Here, we've created two variables: city and age. These variables will hold the values corresponding to properties of the same names found in the user object.

And now we can work independently with this information:

console.log(city); // output: 'São Paulo'
console.log(age); // output: 28

Some important details should be noted:

Note that the userName property was omitted in the destructuring. Unlike array destructuring, it's not necessary to manually skip properties.
The order of the variables listed in the destructuring doesn't matter. You'll see that I placed city before age, which won't result in an error. This is because in objects, properties do not follow a fixed order!
Variable names can be changed while destructuring! For this, see below:

Renaming Properties

We can easily change the names of the properties extracted from the object at the same time as the destructuring assignment. This feature is particularly useful when you want to avoid naming conflicts:

const { city: c, age: a } = user;

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28

Default Values

It's possible that some of the values extracted may be undefined, which can be a source of bugs in your code. We can avoid this quite easily.

Let's assume we want to extract a nationality property, which hasn't been defined. To avoid the variable being assigned undefined, we can assign it a default value, like this:

const { city, age, nationality = 'Brazilian' } = user;

Renaming and Default Values

It is possible to combine the above syntaxes. So we can combine the process of renaming variables and setting default values simultaneously:

const { 
  city: c = 'Belo Horizonte',
  age: a = 18,
  nationality: n = 'Brazilian'
} = user;

And in the case of the user object, the output will now be this:

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
console.log(n); // output: 'Brazilian'

Note that the default value will only be applied to n, since the other values were already defined.

Nested Objects

If the object in question contains another object within it, it's also possible to destructure the nested object. Let's add grades for subjects to the user object:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo',
  grades: {
    math: 9.5,
    portuguese: 9.2,
    chemistry: 10,
    history: 7.5,
    geography: 7.8,
  }
};

To work separately with the grades, we can destructure like this:

const {
  grades: {
    math, 
    portuguese, 
    chemistry, 
    history, 
    geography 
  } 
} = user;

And now, the values can be accessed separately:

console.log(math) // output: 9.5
console.log(portuguese) // output: 9.2
console.log(chemistry) // output: 10
console.log(history) // output: 7.5
console.log(geography) // output: 7.8

Mutating Variables

Next, let's explore the scenario where variables are already declared and initialized, such as a and b below:

let a = 55;
let b = 77

const object = {
  a: 41,
  b: 27,
  c: 14
};

How can we assign a and b the values contained in the object? We can't write let {a, b} = object or const {a, b} = object, since we would be redeclaring the variables. But we also can't write {a, b} = object, as JavaScript interprets any line starting with curly braces {} as a block of code, resulting in a syntax error in the code.

The solution is to wrap the code using parentheses:

({a, b} = object);

console.log(a); // output: 41
console.log(b); // output: 27

This way, JavaScript will understand it as destructuring and not a block of code.

Thank you for making it this far! =)

Questions, comments, suggestions? Comment below!

Destructuring Arrays in JavaScript

Barbara Robles (english prof.) — Thu, 22 Feb 2024 16:34:43 +0000

Do you have questions about how array destructuring works? Let's dive in!

Content:

Basic Syntax
Skipping Values
Swapping Values
Nested Arrays
Default Values

Basic Syntax

Destructuring is a simple way to extract data from arrays or objects into separate variables. Let's take a look at how array destructuring works.

Consider the array below as an example:

const numbers = [41, 27, 55];

If we were to extract these data manually, we would do:

const a = numbers[0]; 
const b = numbers[1];
const c = numbers[2];

Quite repetitive, right?

Thanks to the programming gods, in 2015, ES6 introduced destructuring, and now we can extract these data in a much more concise and simple way. This is the basic syntax of destructuring:

const [ a, b, c ] = numbers;

We did the same thing as the code above: we declared three variables and assigned them the values of the numbers array.

Now, we can work with the array values separately:

console.log(a); // output: 41
console.log(b); // output: 27
console.log(c); // output: 55

But what if we don't want to extract all the data from the array? Let's find out!

Skipping Values

The reason we skip values during array destructuring is because arrays, unlike objects, follow a specific order. Therefore, every time we don't want to extract a value from an array, we have to signal this to the program. We do this by omitting the variable that would be there (but leaving the commas and spaces), so this , b, becomes this , ,.

Using the example above, if we don't want to extract the value 27 from the array, we should simply write:

const [ a, , c ] = numbers;

Et voilà!

Swapping Values

Destructuring allows us to swap values between variables without having to create a temporary variable. See the before and after of swapping values between a and c:

console.log(a, c); //  output: 41 55

[a, c] = [c, a];

console.log(a, c); //  output: 55 41

Is there anything simpler than this? Now you have a more performance-efficient option to swap values between variables!

Nested Arrays

Additionally, what happens if we encounter an array within an array? Destructuring still works smoothly:

const nested = [47, 5, [2, 1]];

const [k, , array] = nested;

The result is:

console.log(k); // output: 47
console.log(array); // output: [2, 1]

We can also nest destructuring within destructuring. Taking the same array as an example:

const [m, , [n, o]] = nested;

console.log(m); // output: 47
console.log(n); // output: 2
console.log(o); // output: 1

Nice!

Can destructuring generate more variables than the number of elements in the array? Absolutely! Let's delve deeper!

Default Values

It's possible to create more variables than there are elements in the array. However, initially, they will have the value of undefined:

const [a, b, c] = [2, 3]

console.log(a, b, c); // output: 2 3 undefined

What can we do to avoid this? Along with destructuring, we can establish default values! Take a look:

const [a = 1, b = 1, c = 1] = [2, 3]

console.log(a, b, c); // output: 2 3 1

This way, we avoid bugs in our code due to undefined. Additionally, setting default values makes our code more robust and reliable.

And that's it for today! Thank you for getting this far! =)

Comment below what you thought of this so I can improve myself!