ES6 Series: Old but new

So, I am going to take a little bit of time and talk about a few things that have existed for a long or short while before ES6 before going on further with ES6. Why? Because these things have gained new life and are worth looking at. I have also seen enough people that haven’t seen these concept or don’t use them much that it is worth it to go over them again.

Ternary Operator

First is the ternary operator. I have found this little operator to be invaluable as I use some of the new features in ES6 because I can put some logic in inline statement. You’ll see this a lot as you go through the different parts of this ES6 series.

Ternary means three. It is a three part operation for an if statement:

condition ? if : else

That is it. Pretty simple. There are a few things to know, but in general, the more complicated a ternary is the more likely it should just be an if statement. Let’s look at some examples.

In a ternary operator the expressions, the things after the ?, are returned. So you can use it as an assignment. That is the first example. Jimmy is being returned to the sayHi variable for assignment.

The second example shows nesting of ternary. It is also pretty straight forward but one thing to remember, it only works on the right hand side of the ternary.

It can also be used, on it’s own, to preform operations. In the third example a simple variable assignment, which is contrived because you would normally just do the first one.

The fourth I wanted to show was the multiple expression syntax. The two things to keep in mind are 1. different expressions need to be seperated by a comma, and 2. the last expression will be returned.

And a final note on ternary operators, it is really just a reiteration on the first, if it is too complicated it is probably better to just use an if statement for readability and maintainability.

inline if

Just a quick mention of these because these have also proved to be very valuable for some of the inline logic.

condition && expression

The way this works is that if the condition evaluates to true then it will move on to the next statement. Think of it like in an if statement with multiple conditions, because that is pretty much what it is.

condition || expression

This is the opposite of the one above. If the condition evaluates to true, then you won’t hit the expression, again, pretty much exactly as the way it works with multiple conditions in an if statement.

Array functions

I want to say a few things about some of the array functions in es5. I don’t think they get used as much as they should, here are some examples of each of the ones I have found to be most useful.

before I get into the array functions I want to define something else that will apply. That is the idea of a pure or dirty function.

Pure Functions

A pure function is one that doesn’t rely on any outside state to run. In other words, if you put in the same values, you will always get out the same result.

Here is what I mean:

Example of a dirty function

The above is an example of a dirty function. The same function is called twice in, but return different values. This causes a lot of confusion. Why does it do that? Because it is relying on an outside variable — someValue.

Let’s do that in a clean way:

Now it is really clear why I am getting “why?” and “how?”.

Now you know the difference between a clean and dirty function.

forEach

This one actually isn’t as useful, because most of the time you probably should use one of the ones below here, but I wanted to start here because it it is a good one to compare the rest of them to.

The things to know about the foreach function is that is really is just a foreach. It doesn’t return anything, well, it returns undefined, because nothing is returned you have to effect stuff outside of the iteration, this, in my opinion, isn’t ideal. It is a dirty function. A more pure function would be to use one of the ones below.

map

A map is similar to forEach except for one important thing, it returns a new array. That is key to making it a pure function. So, to define a map, it iterates over each item in array and returns a value to put in a new array. The returned value becomes the value for that point in the array.

Clean and dirty ways to map. Clean is always better.

filter

Filter filters. This expects a return value, if it is true, it keeps the value in the array, a false removes it. The function returns the new filtered array.

some & every

Some and Every are very similar. Some returns true if there are any values that match the condition. Every will return true if all of them meet the condition.

reduce

This one is the hardest to get, but the most powerful. The basic idea is easy to understand, but where and when to use it takes a shift in thinking. I had a problem recently that I tried to use recursion because that seemed like the best way to handle it. I tried and tried but couldn’t solve it. Ultimately I realized it was a reduce problem and when I realized that it was a lot simpler to solve. I will give you an example of reduce to understand, then I’ll show the real world problem I had.

Reduce takes two arguments. The first is the accumulator, meaning the result of the last call, and a new value. The first time it runs it will take the first value of the array as the accumulator and the second item the new value.

[1,2,3].reduce( (acc, n) => ( acc + n) );
// returns 6

So this would be:

1+2 = 3

Three becomes the accumulator in the next round, and it takes the next item in the array as the new value:

3 + 3 = 6

then it returns the last value, in this case, 6.

The math thing is the most common way to explain it, but isn’t very practical, unless you need to add all the numbers in an array.

So here is the example of where I used it in practice. I needed a function that would combine sibling arrays to a single array.

There are two places I am using reduce. First is to take one array and combine it with another. I am then using map to iterate over the two arrays, combine the values into a string, then I am using reduce to concat all the resulting arrays into a flat one to use as the next accumulator. So you get a combination of sibling arrays.

This is a major value of functional programming, it is pretty cool.

Be sure to look at the whole series: ES6 Series

or the next section: ES6 Series: Template Strings