DEV Community: Tyn

JavaScript Spread Operator

Tyn — Wed, 11 Dec 2024 18:31:10 +0000

JavaScript Spread Operator (…)

The Spread Operator in JavaScript expands (unpacks) an array into its individual elements.

*It’s used with both arrays and objects, in arrays it’s used when:

1. Building an Array
2. passing arguments into a function

1- Building an Array:

in here we can use it to expand an array element and use it in another (array for example).


const arr = [5, 6, 7];

// without the spread operator 😐

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator 😃

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

as you can see, the spread operator makes things much easier.
if you again wanted the individual elements of the expanded array, use the spread operator:

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

another example to understand more:

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

keep in mind that here we are creating a completely new array, we are not changing (mutating) the foods array, look:

console.log(foods); // ['chicken', 'meat', 'rice']

Spread Operator is similar to Destructuring, but the difference is that the spread operator doesn’t create new variables, so we can use it only in places where we write values separated by commas.

Two useful use cases of the spread operator with arrays:

1.creating a copy of an array:

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2.merging two or more arrays:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

The spread Operator does not only work on arrays, it also works on all iterables, which are things like: arrays, strings, maps and sets (most of the built-in data structures), but NOT (objects).
on strings: each letter on the original string = an individual element, example:

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

but remember, we still don’t want to use the spread operator other than in the two situations we specified at the top, which where “building an array” & “passing arguments”, because for example, if we wanted to use some values separated by commas to create a string by template literals, it won’t work and will give us an error, because it is not a place that expects multiple values separated by a comma:

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- passing arguments into a function

function orderDrink(drink1, drink2) {
  console.log(`Your Ordered drinks are ${drink1} and ${drink2}`);
}


const drinks = ['water', 'juice'];

orderDrink(...drinks);


// if you did it without the Spread Operator, it would be like this
orderDrink(drinks[0], drinks[1]);

Using Spread Operator:
Starting with ES2018, The Spread Operator actually also works for objects, even though objects are not iterables, example:

const restaurant = {
  name: 'spongeBob restaurant',
  location: 'Bikini bottom',
  chef: 'spongeBob',
};

// adding new properties

const restaurantNew = { ...restaurant, netWorth: 'billions' };

// making a copy

const restaurantCopy = { ...restaurant };

in the first one we created a new object with the same properties as the restaurant object, but we added another property which is the netWorth property.
in the second one, we made a copy of the restaurant object, note that Changes to the copied object do not affect the original object, and vice versa.

Hope you understood everything here, if you have any questions feel free to ask in the comments section, THANKS for reading 🙂

JavaScript Object Destructuring

Tyn — Tue, 10 Dec 2024 18:48:08 +0000

Destructuring Objects

Like destructuring arrays, destructuring objects helps you and makes your code cleaner and better, but it’s different from destructuring arrays, here is how to do it:

First, for the whole explanation we will need this object, I used a sponge bob analogy for the object 🧽😁, so take a look at it and analyze it a little bit:

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

now, let’s destruct two properties from the object:

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

as you saw, to destruct an object you have to use {curly braces}, then inside it, write variable names that are exactly the same as the property names we want to retrieve in the object.

*You can also make variable names different from the property names, just right the new variable name after a colon:

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

as you can see, we changed personName to name & personAge to age.

*Default Values:

we can also set default values, in case when we try to access a property that does not exist in the object, example:

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* Mutating Variables while Destructuring Objects:

({ heightInCm } = obj);
console.log(heightInCm); // 10

in this example, if you look back you will find out that heightInCm = 4 outside the object, and we wanted to assign the value inside the object to the heightInCm outside, so we did it like a normal destructuring, BUT JavaScript expects a code block when starting with { } outside a function, so we wrap the statement in parentheses to make it valid.

*Nested object destructuring:

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

Best for clarity: The first way can be better when you're working with larger objects and prefer to keep things clear by extracting a whole object first.
Best for efficiency: The third way is often the best if you're only interested in specific properties from a deeply nested object. It's concise and avoids creating unnecessary variables.

*Thanks for reading, hope you understand everything, if you have any questions feel free to ask 😊

JavaScript Array Destructuring

Tyn — Mon, 09 Dec 2024 13:23:44 +0000

In JavaScript, destructuring is a powerful feature that allows us to quickly unpack values from arrays or objects into variables. This can make your code cleaner, more readable, and easier to maintain.

->in this post you will learn to destruct arrays, Skipping a value in the array, and Switching variables

Destructuring Arrays
We use destructuring to retrieve elements from the array and store them into variables.
Array Destructuring assignment = []
Example:


const arr = ['rice', 'pizza', 'chicken'];

// without Destructuring:
const foodOne = arr[0];
const foodTwo = arr[1];
const foodThree = arr[2];
console.log(foodOne, foodTwo, foodThree); // rice pizza chicken

// with Destructuring

const [food1, food2, food3] = arr;

console.log(food1, food2, food3); // rice pizza  chicken

as we can see in this example, destructuring made our work much easier and saves a lot of time, we use const or let to create the destructuring, then inside square brackets [] we can write the variable names for the values we want in the array, but be careful that in destructuring arrays the order of values in the array is important, the order in the destructuring assignment will be the order in the array, so you have to be aware of this.

Note: Destructuring Doesn't destroy the original array, we just UNPACK it, for illustration:

console.log(arr); // rice pizza chicken

so, we still have our values inside the original array.

Skipping a value:

if we did not want to unpack a certain value from an array, to skip that one leave an empty space (a 'hole') in your destructuring pattern, so that it does not destruct that value, for example:
if for some reason we did not want the pizza, then write it like this:

let [food1, , food3] = arr;
console.log(food1, food3); // rice chicken

Switching variables:
if we wanted the first food to be chicken instead of rice, and the third one rice instead of chicken, we can switch their places and their values will be switched, example:

[food1, food3] = [food3, food1];
console.log(food1, food3); // chicken rice

I hope this helped you get a better understanding of JavaScript array destructuring. Feel free to ask any questions in the comments below :)