Blog - Benson Arafat

Stay updated...

Tag: spread operator

Cascade operator (.., ?.. ) and Triple dot […] (Spread Operator) in Dart.

By

On October 5, 2022

In Dart, Flutter

Cascades (.., ?..) allow you to make a sequence of operations on the same object. In addition to accessing instance members, you can also call instance methods on that same object. This often saves you the step of creating a temporary variable and allows you to write more fluid code.

Example

Consider the following example code 

var paint = Paint()
  ..color = Colors.black
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 5.0;

The constructor, Paint(), returns a Paint object. The code that follows the cascade notation operates on this object, ignoring any values that might be returned.

The previous example is equivalent to this code:

var paint = Paint();
paint.color = Colors.black;
paint.strokeCap = StrokeCap.round;
paint.strokeWidth = 5.0;

If the object that the cascade operates on can be null, then use a null-shorting cascade (?..) for the first operation. Starting with ?.. guarantees that none of the cascade operations are attempted on that null object.

querySelector('#confirm') // Get an object.
  ?..text = 'Confirm' // Use its members.
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed!'))
  ..scrollIntoView();

The previous code is equivalent to the following:

final addressBook = (AddressBookBuilder()
      ..name = 'jenny'
      ..email = 'jenny@example.com'
      ..phone = (PhoneNumberBuilder()
            ..number = '415-555-0100'
            ..label = 'home')
          .build())
    .build();

Be careful to construct your cascade on a function that returns an actual object. For example, the following code fails:

var sb = StringBuffer();
sb.write('foo')
  ..write('bar'); // Error: method 'write' isn't defined for 'void'.

The sb.write() call returns void, and you can’t construct a cascade on void.

Spread Operator

Dart 2.3 introduced the spread operator (...) and the null-aware spread operator (...?), which provide a concise way to insert multiple values into a collection.

For example, you can use the spread operator (...) to insert all the values of a list into another list:

var list = [1, 2, 3];
var list2 = [0, ...list];
assert(list2.length == 4);

If the expression to the right of the spread operator might be null, you can avoid exceptions by using a null-aware spread operator (...?):

var list2 = [0, ...?list];
assert(list2.length == 1);

Reference

https://dart.dev/guides/language/language-tour#_operators

https://dart.dev/guides/language/language-tour#spread-operator

https://github.com/dart-lang/language/blob/master/accepted/2.3/spread-collections/feature-specification.md

Understanding JavaScript Spread syntax (…) and Common Uses Cases

By

On September 30, 2022

In JavaScript

The spread operator allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements and the syntax for this is three periods (…)

In this article, I will explain the use case of the spread operator in JavaScript, so let’s jump right to it.

Use Cases

Adding the elements of an existing array into a new array 

let newarr = ["Red", "Yellow"];
let otherarr = ["Blue", ...newarr, "Green"] 
console.log(otherarr); // ["Blue", "Red", "Yellow", "Green"];

So let’s explain what is happening here, newarr is an array containing two strings Red and Yellow, then the second array otherarr contains two strings and the newarr, usually, when we add this array without the three periods operator it will add the new array into the other array. but as we have the spread operator it will add the element of the array into the other array.

You can pass elements of an array as arguments to a function

function addThreeNumbers(x,y,z){
   return x+y+z;
}
let args = [1,2,3];
addThreeNumbers(...args); // 6

Another use case is that you can pass an element of an array as a function. in the above example, we have a function addThreeNumbers with three parameters x,y,z which return the sum of these three numbers. Now we have an array with three values 1,2,3. In a normal state, we can pass three arguments to the function but with the help of the spread operator, we just pass the array with the three-dot operator (…), which will spread out the array to each element of the function.

Note: If we have a fourth element in the array it going to ignore the fourth element in the array, like the example below. 

function addThreeNumbers(x,y,z){
   return x+y+z;
}
let args = [1,2,3,4];
addThreeNumbers(...args); // 6

Copy Arrays

let arr1 = [1,2,3];
let arr2 = [...arr1]

So if we have arr1 we can use the spread operator to copy the array into the second array.

Concatenate array 

let arr1 = [1,2,3];
let arr2 = [5,6,7];
arr1.concat(arr2); // [1,2,3,5,6,7]
arr1 = [...arr1 ...arr2]; // [1,2,3,5,6,7]

Another use case is that we can concatenate arrays together, normally how we do this, is we use the concat method to concatenate arrays together but with the spread operator, we can concatenate arrays too.

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Powered by WordPress & Theme by Anders Norén