Cara menggunakan time to seconds javascript

Functional programming has been making quite a splash in the development world these days. And for good reason: Functional techniques can help you write more declarative code that is easier to understand at a glance, refactor, and test.

Table of Contents Show

A Map From List to List
326 in Practice
Implementation
Filter Out the Noise
Implementation
The Reduce Method
328 in Practice
Implementation
Putting It Together: Map, Filter, Reduce, and Chainability
Conclusion and Next Steps

One of the cornerstones of functional programming is its special use of lists and list operations. Those things are exactly what they sound like: arrays of things and the stuff you do to them. But the functional mindset treats them a bit differently than you might expect.

How to Use Map, Filter, & Reduce in JavaScript

This article will take a close look at what I like to call the "big three" list operations:

26,

27, and

28. Wrapping your head around these three functions is an important step towards being able to write clean, functional code, and it opens the doors to the vastly powerful techniques of functional and reactive programming.

Curious? Let's dive in.

A Map From List to List

Often, we find ourselves needing to take an array and modify every element in it in exactly the same way. Typical examples of this are squaring every element in an array of numbers, retrieving the name from a list of users, or running a regex against an array of strings.

26 is a method built to do exactly that. It's defined on

30, so you can call it on any array, and it accepts a callback as its first argument.

The syntax for

26 is shown below.

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

}[, thisArg]);

When you call

26 on an array, it executes that callback on every element within it, returning a new array with all of the values that the callback returned.

Under the hood,

26 passes three arguments to your callback:

the current item in the array
the array index of the current item
the entire array you called
```
3
```
26 on

Let's look at some code.

326 in Practice

Suppose we have an app that maintains an array of your tasks for the day. Each

36 is an object, each with a

37 and

38 property:

// Durations are in minutes

const tasks = [

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Let's say we want to create a new array with just the name of each task, so we can take a look at everything we've done today. Using a

39 loop, we'd write something like this:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

JavaScript also offers a

40 loop. It functions like a

39 loop, but manages all the messiness of checking our loop index against the array length for us:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Using

26, we can simply write:

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

// Durations are in minutes

Here I included the

43 and

44 parameters to remind you that they're there if you need them. Since I didn't use them here, though, you could leave them out, and the code would run just fine.

An even more succinct way of writing

26 in modern JavaScript is with arrow functions.

// Durations are in minutes

// Durations are in minutes

Arrow functions are a short form for one-line functions that just have a

46 statement. It doesn't get much more readable than that.

There are a few important differences between the different approaches:

Using
```
3
```
26, you don't have to manage the state of the
```
3
```
39 loop yourself.
With
```
3
```
26, you can operate on the element directly, rather than having to index into the array.
You don't have to create a new array and
```
3
```
50 into it.
```
3
```
26 returns the finished product all in one go, so we can simply assign the return value to a new variable.
You do have to remember to include a
```
3
```
46 statement in your callback. If you don't, you'll get a new array filled with
```
3
```
53.

Turns out, all of the functions we'll look at today share these characteristics.

The fact that we don't have to manually manage the state of the loop makes our code simpler and more maintainable. The fact that we can operate directly on the element instead of having to index into the array makes things more readable.

Using a

40 loop solves both of these problems for us. But

26 still has at least two distinct advantages:

```
3
```
40 returns
```
3
```
53, so it doesn't chain with other array methods.
```
3
```
26 returns an array, so you can chain it with other array methods.
```
3
```
26 returns an array with the finished product, rather than requiring us to mutate an array inside the loop.

Keeping the number of places where you modify state to an absolute minimum is an important tenet of functional programming. It makes for safer and more intelligible code.

Gotchas

The callback you pass to

26 must have an explicit

46 statement, or

26 will spit out an array full of

53. It's not hard to remember to include a

46 value, but it's not hard to forget.

If you do forget,

26 won't complain. Instead, it'll quietly hand back an array full of nothing. Silent errors like that can be surprisingly hard to debug.

Fortunately, this is the only gotcha with

26. But it's a common enough pitfall that I'm obliged to emphasize: Always make sure your callback contains a

46 statement!

Implementation

Reading implementations is an important part of understanding. So let's write our own lightweight

26 to better understand what's going on under the hood. If you want to see a production-quality implementation, check out Mozilla's polyfill at MDN.

// Durations are in minutes

// Durations are in minutes

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

const tasks = [

const tasks = [

This code accepts an array and a callback function as arguments. It then creates a new array, executes the callback on each element on the array we passed in, pushes the results into the new array, and returns the new array. If you run this in your console, you'll get the same result as before.

While we're using a for loop under the hood, wrapping it up into a function hides the details and lets us work with the abstraction instead.

That makes our code more declarative—it says what to do, not how to do it. You'll appreciate how much more readable, maintainable, and, erm, debuggable this can make your code.

Filter Out the Noise

The next of our array operations is

27. It does exactly what it sounds like: It takes an array and filters out unwanted elements.

The syntax for filter is:

const tasks = [

const tasks = [

}[, thisArg]);

Just like

26,

27 passes your callback three arguments:

the current item
the current index
the array you called
```
3
```
27 on

Consider the following example, which filters out any string which is less than 8 characters.

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

The expected result will be:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Let's revisit our task example. Instead of pulling out the names of each task, let's say I want to get a list of just the tasks that took me two hours or more to get done.

Using

40, we'd write:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

With

27, we can simply write:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Just like

26,

27 lets us:

avoid mutating an array inside a
```
3
```
40 or
```
3
```
39 loop
assign its result directly to a new variable, rather than push into an array we defined elsewhere

Gotchas

The callback you pass to

26 has to include a return statement if you want it to function properly. With

27, you also have to include a return statement (unless you're using arrow functions), and you must make sure it returns a boolean value.

If you forget your return statement, your callback will return

53, which

27 will unhelpfully coerce to

83. Instead of throwing an error, it will silently return an empty array!

If you go the other route and return something that's isn't explicitly

84 or

83, then

27 will try to figure out what you meant by applying JavaScript's type coercion rules. More often than not, this is a bug. And, just like forgetting your return statement, it'll be a silent one.

Always make sure your callbacks include an explicit return statement. And always make sure your callbacks in

27 return

84 or

83. Your sanity will thank you.

Implementation

Once again, the best way to understand a piece of code is... well, to write it. Let's roll our own lightweight

27. The good folks at Mozilla have an industrial-strength polyfill for you to read, too.

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

  // return element for newArray, after executing something

const tasks = [

The Reduce Method

The syntax for the

28 array method in JavaScript is:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

26 creates a new array by transforming every element in an array individually.

27 creates a new array by removing elements that don't belong.

28, on the other hand, takes all of the elements in an array and reduces them into a single value.

Just like

26 and

27,

28 is defined on

30 and so is available on any array, and you pass a callback as its first argument. But it also takes a second argument: the value to start combining all your array elements into.

28 passes your callback four arguments:

the current value
the previous value
the current index
the array you called
```
3
```
28 on

Notice that the callback gets a previous value on each iteration. On the first iteration, there is no previous value. This is why you have the option to pass

28 an initial value: It acts as the "previous value" for the first iteration, when there otherwise wouldn't be one.

Finally, bear in mind that

28 returns a single value, not an array containing a single item. This is more important than it might seem, and I'll come back to it in the examples.

328 in Practice

Let's say you want to find the sum of a list of numbers. Using a loop, it would look like this:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

While this isn't a bad use case for

40,

28 still has the advantage of allowing us to avoid mutation. With

28, we would write:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

First, we call

28 on our list of numbers. We pass it a callback, which accepts the previous value and current value as arguments, and returns the result of adding them together. Since we passed

}[, thisArg]);

08 as a second argument to

28, it'll use that as the value of

}[, thisArg]);

10 on the first iteration.

With arrow functions, we would write it like this:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

If we take it step by step, it looks like this:

Iteration PreviousCurrentTotal10112123333646410510515

If you're not a fan of tables, run this snippet in the console:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

  // return element for newArray, after executing something

To recap:

28 iterates over all the elements of an array, combining them however you specify in your callback. On every iteration, your callback has access to the previous value, which is the total-so-far, or accumulated value; the current value; the current index; and the entire array, if you need them.

Let's turn back to our tasks example. We've gotten a list of task names from

26, and a filtered list of tasks that took a long time with... well,

27.

What if we wanted to know the total amount of time we spent working today?

Using a

40 loop, you'd write:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

  // return element for newArray, after executing something

  // return element for newArray, after executing something

With

28, that becomes:

That's almost all there is to it. Almost, because JavaScript provides us with one more little-known method, called

}[, thisArg]);

16. In the examples above,

28 started at the first item in the array, iterating from left to right:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

16 does the same thing, but in the opposite direction:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

I use

28 every day, but I've never needed

}[, thisArg]);

16. I reckon you probably won't, either. But in the event you ever do, now you know it's there.

Gotchas

The three big gotchas with

28 are:

forgetting to
```
3
```
46
forgetting an initial value
expecting an array when
```
3
```
28 returns a single value

Fortunately, the first two are easy to avoid. Deciding what your initial value should be depends on what you're doing, but you'll get the hang of it quickly.

The last one might seem a bit strange. If

28 only ever returns a single value, why would you expect an array?

There are a few good reasons for that. First,

28 always returns a single value, not always a single number. If you reduce an array of arrays, for instance, it will return a single array. If you're in the habit of reducing arrays, it would be fair to expect that an array containing a single item wouldn't be a special case.

Second, if

28 did return an array with a single value, it would naturally play nice with

26 and

27, and other functions on arrays that you're likely to be using with it.

Implementation

Time for our last look under the hood. As usual, Mozilla has a bulletproof polyfill for reduce if you want to check it out.

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

const tasks = [

Two things to note here:

This time, I used the name
```
}[, thisArg]);
```
29 instead of
```
}[, thisArg]);
```
10. This is what you'll usually see in the wild.
I assign
```
}[, thisArg]);
```
29 an initial value if a user provides one, and default to
```
}[, thisArg]);
```
08 if not. This is how the real
```
3
```
28 behaves, as well.

Putting It Together: Map, Filter, Reduce, and Chainability

At this point, you might not be that impressed. Fair enough:

26,

27, and

28, on their own, aren't awfully interesting. After all, their true power lies in their chainability.

Let's say I want to do the following:

Collect two days' worth of tasks.
Convert the task durations to hours instead of minutes.
Filter out everything that took two hours or more.
Sum it all up.
Multiply the result by a per-hour rate for billing.
Output a formatted dollar amount.

First, let's define our tasks for Monday and Tuesday:

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

And now, our lovely-looking transformation:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

If you've made it this far, this should be pretty straightforward. There are two bits of weirdness to explain, though.

First, on line 10, I have to write:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

Two things to explain here:

The plus signs in front of
```
}[, thisArg]);
```
29 and
```
}[, thisArg]);
```
38 coerce their values to numbers. If you don't do this, the return value will be the rather useless string,
```
}[, thisArg]);
```
39.
If you don't wrap that sum in brackets,
```
3
```
28 will spit out a single value, not an array. That would end up throwing a
```
}[, thisArg]);
```
41, because you can only use
```
3
```
26 on an array!

The second bit that might make you a bit uncomfortable is the last

28, namely:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

That call to

26 returns an array containing a single value. Here, we call

28 to pull out that value.

Finally, let's see how our friend the

40 loop would get it done:

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

}[, thisArg]);

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Tolerable, but noisy.

Conclusion and Next Steps

In this tutorial, you've learned how

26,

27, and

28 work; how to use them; and roughly how they're implemented. You've seen that they all allow you to avoid mutating state, which using

39 and

40 loops requires, and you should now have a good idea of how to chain them all together.

By now, I'm sure you're eager for practice and further reading. For a masterclass in functional programming in JavaScript, check out our online course.