Copyright ©2008-2020 SoftTeco
The Benefits of Healthcare Processes Automation

The Benefits of Healthcare Processes Automation

Automation in healthcare contributes to better customer care, optimizes administrative processes, and helps create accurate and insightful data sets.

Tech Review Series: .NET

Tech Review Series: .NET

Companies across the industries prefer to use .NET for enterprise applications due to the reliability of this framework and its rich functionality.

The Most Important Features For a Mobile Banking Application

The Most Important Features For a Mobile Banking Application

The best features for mobile banking are the ones that create an ultimate user experience, help easily navigate and use the app, and bring value to the users.

The Best Practices On How to Build a Data Warehouse

The Best Practices On How to Build a Data Warehouse

If you want to learn how to build a data warehouse that would accurately and securely store and manage your data, read our article on the best practices.

Tech Review Series: Java

Tech Review Series: Java

Java is one of the oldest and most used programming language in the world. Learn about its pros and cons and the most common use cases.

5 Ways How Enterprise Messaging Benefits Your Business

5 Ways How Enterprise Messaging Benefits Your Business

The use of enterprise messaging in business brings many tangible benefits and has a positive impact on the overall productivity and users satisfaction

5 Practices That Will Help You Develop Secure Software

5 Practices That Will Help You Develop Secure Software

In order to safeguard the application from external and internal threats, it is important to follow secure software development best practices.

SoftTeco is recognized as one of the Top Mobile App Development Companies by TopDevelopers

SoftTeco is recognized as one of the Top Mobile App Development Companies by TopDevelopers

SoftTeco has been listed among the top mobile app development companies of 2020 by the TopDevelopers organization.

Why Mentoring Advice in IT Is Important? Part 2.

Why Mentoring Advice in IT Is Important? Part 2.

Mentoring advice in IT is a highly valuable asset that helps junior specialists grow into knowledgeable and experienced professionals.

Why Mentoring Advice in IT Is Important? Part 1.

Why Mentoring Advice in IT Is Important? Part 1.

Mentoring advice in IT is a highly valuable asset that helps junior specialists grow into knowledgeable and experienced professionals.

Web development
JavaScript Spread Operator: What Does It Bring to JS Community?

JavaScript Spread Operator: What Does It Bring to JS Community?

The JavaScript ES6 standard was a breath of fresh air for the whole JS community back then as it provided a new neat syntax which enabled developers to write more maintainable and accurate code. As well, the new standard introduced a lot of important features and one of the most significant ones was the spread operator. It proved to be so valuable that it is now impossible to imagine the current day-to-day development routine without these magical three dots.

What is a spread operator?

As can be guessed from its name, the spread operator is ‘spreading’ the iterable objects into a list of its elements. in other words, it gives you the “content” of these objects. By iterable objects we mean the structures that can be looped through - arrays, objects and strings. If it sounds a bit tricky, don’t worry - we will elaborate it in examples below. Let’s see how exactly a spread operator benefits JavaScript developers and where it can be applied.

Dynamic function arguments

Spread operator is extremely useful for passing dynamic parameters count to functions. A good example is the push array method. Let’s imagine that you have a dynamic array of values that needs to be passed as parameters to the `push` function. Before the ES6 era, developers had to do it via calling `apply` or `forEach` loop.

let basket = [];
let products = ["bread", "milk", "bread"];

Array.prototype.push.apply(basket, products)
console.log(basket); // ["bread", "milk", "bread"];

basket = [];
products.forEach(product => { basket.push(product); })
console.log(basket); // ["bread", "milk", "bread"];

Even though it works, it looks quite complicated. Hopefully we have the spread now. Compare how neat and handy it looks after using the spread:

let basket = [];
let products = ["bread", "milk", "bread"];

basket.push(...products);
console.log(basket); // ["bread", "milk", "bread"]

Operations with arrays

The spread operator is often used for manipulations with arrays. A very common use case is the concatenation of two arrays. It can be done through our well-known method - the `concat` function:

let fruits = ["banana", "apple"];
let vegetables = ["tomato", "cucumber"];

let basket = fruits.concat(vegetables); // ["banana", "apple", "tomato", "cucumber"] 

However we can do the same operation with `...` and it looks much more expressive:

let fruits = ["banana", "apple"];
let vegetables = ["tomato", "cucumber"];

let basket = [...fruits, ...vegetables]; // ["banana", "apple", "tomato", "cucumber"] 

The `...` can be used for copying arrays as well:

let fruits = ["banana", "apple"];
let copyFruits = [...fruits]; //["banana", "apple"]

Operations with objects

The ES standard from 2018 introduced the spread operator for the objects. It was a predictable enhancement and a great replacement for `Object.assign` in terms of copying and combining the objects. Compare how it looks with `Object.assign:

let cat = { 
  age: 3,
  sex: 'male'
};

let copyCat = Object.assign({}, cat, { age: 5, color: 'brown' }); 
// { age: 5, color: "brown", sex: "male" }

And how the same piece of code looks with spread:

let cat = { 
  age: 3,
  sex: 'male'
};

let copyCat = { ...cat, age: 5, color: 'brown' }; 
// { age: 5, color: "brown", sex: "male" }

As you can see, with the spread operator the code looks cleaner. Most importantly, the spread operator lets you use the same construction for manipulation with objects and arrays.

Convert string to letters

Another usage of the spread operator implies splitting the string:

const text = 'split me';
const letters = [...text];
console.log(letters); // ["s", "p", "l", "i", "t", " ", "m", "e"]

It might look a bit unusual and the built-in string “split” function seems to be a more straightforward way to perform this operation, but it’s good to know that there is one more option to do so.

Summary

The introduction of the spread operator was a great step forward for the whole JS community. It allows various manipulations with the core JS structures by using compact and expressive syntax and it also allows to build a common mental model for such operations. This, in turn, significantly simplifies the process of reading the code and improves the overall maintainability of the projects.

Comments

Andrey

Thanks for the article, I am working with Nuxt.js right now and it is very useful to know the features of javascript.