What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Introduction to JavaScript spread operator

Spread operator is a feature that allows you to access content of an iterable object. Iterable object is an object, or data structure, that allows to access its content with for…of loop. The most popular example of an iterable is an array. Another example of an iterable can be objects literals or strings.

When you wanted to access all content in some iterable, before spread operator was a thing, you had to use some kind of a loop, such as the mentioned for...of loop, or method, such as forEach(). Another option were indexes. Spread Operator allows you to do this much faster and with much less code. About the syntax.

The syntax of spread operator is simple and easy to remember. It consists of three dots (...). These three dots are followed by the iterable (...someIterable), whose content you want to access.

// Create array
const myArray = ['Venus', 'Ares', 'Mars']

// Use spread operator to access content of "myArray" variable
// Syntax: ...someIterable
console.log(...myArray)
// Output:
// 'Venus' 'Ares' 'Mars'

Spread operator and object literals

When you want to use spread operator with object literals the syntax is the same. You will use those three dots, but now followed by the name of the object whose content you want to access. The result you will get will be the content, only without the surrounding curly braces.

// Create object literal
const myObj = {
  firstName: 'Sam',
  lastName: 'Dodge'
}

// Use spread operator to access content of "myObj" variable
// Note: the {} around ...myObj are to avoid TypeError
// console.log(...myObj) would not work
console.log({ ...myObj })
// Output:
// { firstName: 'Sam', lastName: 'Dodge' }

#javascript

What is GEEK

Buddha Community

What Javascript Spread Operator is, How It Works and How to Use It

Santosh J

1622036598

JavaScript compound assignment operators

JavaScript is unarguablly one of the most common things you’ll learn when you start programming for the web. Here’s a small post on JavaScript compound assignment operators and how we use them.

The compound assignment operators consist of a binary operator and the simple assignment operator.

The binary operators, work with two operands. For example a+b where + is the operator and the a, b are operands. Simple assignment operator is used to assign values to a variable(s).

It’s quite common to modify values stored in variables. To make this process a little quicker, we use compound assignment operators.

They are:

  • +=
  • -+
  • *=
  • /=

You can also check my video tutorial compound assignment operators.

Let’s consider an example. Suppose price = 5 and we want to add ten more to it.

var price = 5;
price = price + 10;

We added ten to price. Look at the repetitive price variable. We could easily use a compound += to reduce this. We do this instead.

price += 5;

Awesome. Isn’t it? What’s the value of price now? Practice and comment below. If you don’t know how to practice check these lessons.

Lets bring down the price by 5 again and display it.
We use console.log command to display what is stored in the variable. It is very help for debugging.
Debugging let’s you find errors or bugs in your code. More on this later.

price -= 5;
console.log(price);

Lets multiply price and show it.

price *=5;
console.log(price);

and finally we will divide it.

price /=5;
console.log(price);

If you have any doubts, comment below.

#javascript #javascript compound assignment operators #javascript binary operators #javascript simple assignment operator #doers javascript

CSS Boss

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

Eldora  Bradtke

Eldora Bradtke

1594059180

Rest Parameter and Spread Operator

The Rest Parameter

A Rest Parameter is used as the last argument of a function declaration. It is enabling the user to specify any number of parameters.

function sumUp(...nums) {
	  return nums.reduce((acc, cur) => acc = Number(acc + cur), 0);
	}

	console.log(sumUp(1, 2, 3));
	// -> 6

A function can also have common parameters as long as the Rest Parameter is the last one.

	function myHero(name, level, ...abilities) {
	  return `My hero ${name} on level ${level} has the following abilities: ${abilities.join(", ") || 'none'}.`;
	}

	console.log(myHero('Arthas', 55, 'Attack', 'Blizzard'));
	// -> My hero Arthas on level 55 has the following abilities: Attack,Blizzard.

	console.log(myHero('Thrall', 1));
	// -> My hero Thrall on level 1 has the following abilities: none.

Rest Parameter vs. Arguments

Arguments is an Array-like Object; we cannot directly apply Array-functions to it. We have to make use of the Spread Operator to unfold the Arguments Object in an Array first. For instance: In the last example, we could apply the join method directly to our abilities parameter.

function sumUp() {
	  return [...arguments].reduce((acc, cur) => acc = Number(acc + cur), 0);
	}

	console.log(sumUp(1, 2, 3));
	// -> 6

#spread-operator #es6 #rest-parameter #learn-javascript #javascript-basics #javascript

How to Use the Spread Operator (...) in JavaScript

ES6 has introduced many new features into JavaScript, among them the spread operator (...), which expands an iterable object into a list of its individual elements.

If it’s not clear yet, don’t worry, we will go into details in the next sections when we actually learn to use it with real-life scenarios.

Copy arrays or objects

Look at the following script, can you tell what’s the output?

const listA = [1, 2, 3]
const listB = listA
listB.push(4)
console.log('listA:', listA)
console.log('listB:', listB)

The output for that example is the following:

"listA:" [1, 2, 3, 4]
"listB:" [1, 2, 3, 4]

Wait! what? Why did listA changed its value when we clearly only changed listB. Well, the reason is simple, when we did the assignment:

const listB = listA

Javascript assigned to listB a reference to listA, so in essence listA and listB are pointing to the same list in memory.

So then, how do I create a copy? Here is where spread operators enter the picture. Let’s look again at the same example using spread operators:

const listC = [1, 2, 3]
const listD = [...listC]
listD.push(4)
console.log('listC:', listC)
console.log('listD:', listD)

And the output:

"listC:" [1, 2, 3]
"listD:" [1, 2, 3, 4]

In this case, by using the spread operator we are making a new copy in memory of the array, so when we update listD we are not affecting by any means listC.

#javascript #programming #spread operator

Armando  Bruen

Armando Bruen

1595815560

How to Use the Spread Operator (...) in JavaScript

ES6 has introduced many new features into JavaScript, among them the spread operator (...), which expands an iterable object into a list of its individual elements.

If it’s not clear yet, don’t worry, we will go into details in the next sections when we actually learn to use it with real-life scenarios.

Copy arrays or objects

Look at the following script, can you tell what’s the output?

const listA = [1, 2, 3]
const listB = listA
listB.push(4)
console.log('listA:', listA)
console.log('listB:', listB)

The output for that example is the following:

"listA:" [1, 2, 3, 4]
"listB:" [1, 2, 3, 4]

Wait! what? Why did listA changed its value when we clearly only changed listB. Well, the reason is simple, when we did the assignment:

const listB = listA

Javascript assigned to listB a reference to listA, so in essence listA and listB are pointing to the same list in memory.

So then, how do I create a copy? Here is where spread operators enter the picture. Let’s look again at the same example using spread operators:

const listC = [1, 2, 3]
const listD = [...listC]
listD.push(4)
console.log('listC:', listC)
console.log('listD:', listD)

And the output:

"listC:" [1, 2, 3]
"listD:" [1, 2, 3, 4]

In this case, by using the spread operator we are making a new copy in memory of the array, so when we update listD we are not affecting by any means listC.

#javascript #programming #spread operator