Iterators and Arrow Functions

Contact Us or call 1-877-932-8228
Iterators and Arrow Functions

Iterators and Arrow Functions

Before we take a look at Array methods, we'll look first at a few key concepts that will come up in our review of those methods.

Iterators

The ECMAScript 2015 standard of JavaScript introduced iterators, defined as objects with a next() method that returns an object of the format {value:Any, done: Boolean}. In short, iterators are objects that know how to access items one at a time, keeping track of the current position in the sequence and knowing when the end has been reached.

Abstracting this functionality gives us a way to handle disparate types of collections with the same control structures. The built-in types Array, Map, Set, and String all define a default iteration behavior.

If iter were an iterator with values "A", "B", and "C", then the following code would demonstrate how we might use the next() method:

iter.next() // would return { value: 'A', done: false }
iter.next() // would return { value: 'B', done: false }
iter.next() // would return { value: 'C', done: false }
iter.next() // would return { value: undefined, done: true }

Later in this lesson we will see some examples of Array methods that return iterators.

Arrow Functions

ECMAScript 2015 introduced arrow functions (sometimes called "fat arrow functions") to JavaScript, offering a more-concise syntax for writing function expressions:

(x, y) => x + y

The code above reads "let there be an anonymous function expression which takes two parameters, x and y, and returns x+y". This shorter syntax is especially useful for simple callback functions. With just one parameter we can optionally omit the parentheses:

(x) => x + 3
x => x + 3

Note that you need to have the parentheses when there are no arguments declared.

The arrow functions above are identical, both returning the value of three more than the parameter x.

Let's take a look at an example:

Code Sample:

AdvancedArrays/Demos/arrow-functions.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Arrow Functions</title>
</head>
<body>
	<h1>Arrow Functions</h1>
	<script>
		// a function expression:
		var foo = function(a, b) {
			return 3*a + b;
		}
		document.write( foo(1,2) );

		document.write( '<hr>' );

		// written as an arrow function:
		let bar = (a, b) => 3*a + b;
		document.write( bar(1,2) );

		document.write( '<hr>' );
		document.write( '<hr>' );

		// the real value of arrow functions comes when using callback functions:
		var arr1 = [1, 2, 3, 4];
		var arr1Squares = arr1.map(function(i) {
			return i*i;
		});
		document.write( arr1Squares );

		document.write( '<hr>' );

		var arr2 = [1, 2, 3, 4];
		// using arrow function:
		var arr2Squares = arr2.map(i => i*i);
		document.write( arr2Squares );

	</script>
</body>
</html>

Code Explanation

In the first set of examples, we write function expression foo in the ECMAScript 3 (and 5) syntax manner; on line 14 we write the value of foo(1,2) to the screen. We then do the same thing with an arrow function, assigning it to variable bar and write bar(1,2) to the screen.

While this first example illustrates how to use arrow functions, it's not much help to us here: function foo was already pretty simple and using an arrow function to create function bar isn't much shorter (and, one might argue, is a little harder to read.)

The real value of arrow functions comes when using them for callback functions. In the second set of examples, we use the Array method map to create a new array from an existing array by squaring each element of the first array. In the first example, on line 27, we use an anonymous function as the callback parameter for map, returning the square of each element. We then write the same thing using arrow functions, supplying i => i*i as the callback function parameter for map: it's the same anonymous function but the short syntax makes for shorter, clearer code.

Keep in mind that, as with any ECMAScript 2015 feature, arrow functions are a relatively-recent addition to JavaScript and won't be supported by some older browsers. As we mentioned earlier in this course, caniuse.com is a great resource for determining the availability of ECMAScript 2015 and ECMAScript 2016 features in various browsers.

Next