If the first returned function of the compose function is called without any arguments, what is the starting value of its reduce function?

Question

If the first returned function of the compose function is called without any arguments, what is the starting value of its reduce function?

In my attempts to modify the compose function to output to the console using different arguments, I am struggling to find a solution. The initial call of the compose function results in an undefined argument arg. Consequently, the reduce function utilizes the first element of the array (console.clear()) as the starting value, which is then passed as the argument for the subsequent function, getCurrentTime.

When compose is invoked with convertToCivilianTime, it takes the output from serializeClockTime and passes it as the parameter for the first returned function in compose.

This raises the question: how can compose be called initially with an undefined arg without triggering an error?

const compose = (...fns) =>
  (arg) =>
    fns.reduce( (composed, f) => f(composed), arg)

...
// Additional JavaScript functions and code
...

startTicking()

javascript

Answer 1

Answer №1

When you pass `undefined` as the initial argument to the `reduce` function, it does not automatically default to using the first element of the array. Instead, it simply uses `undefined` as the initial argument:

const arr = [1, 2, 3];
const traceSum = (a, b) => {
  console.log(a, b)
  return a + b
};
console.log("reduce without initial argument:",        arr.reduce(traceSum));
console.log("reduce with initial argument:",           arr.reduce(traceSum, 0));
console.log("reduce with initial argument undefined:", arr.reduce(traceSum, undefined));

Therefore, calling a function created by `compose` without supplying an argument is safe. In this case, `arg` will be explicitly `undefined`, causing each function to execute, but the initial value passing through them will be `undefined`:

const compose = (...fns) =>
  (arg) =>
    fns.reduce( (composed, f) => f(composed), arg)
    
const trace = message => value => {
  console.log(message, value);
  return value;
}

const test = compose(trace("one"), trace("two"));

console.log(test("hello"));
console.log(test());

It is important to ensure that your composed functions can operate without an initial value being passed:

const compose = (...fns) =>
  (arg) =>
    fns.reduce((composed, f) => f(composed), arg)

const excited = str => str + "!";
const loud = str => str.toUpperCase();
const greet = () => "hey";

const shout = compose(loud, excited);
const shoutGreeting = compose(greet, shout);

console.log(shout("stop"));                // works with initial value
console.log(shoutGreeting());              // works without initial value
console.log(shoutGreeting("hammer time")); // ignores initial value
console.log(shout());                      // error - initial value expected

Answer 2

When you pass `undefined` as the initial argument to the `reduce` function, it does not automatically default to using the first element of the array. Instead, it simply uses `undefined` as the initial argument:

const arr = [1, 2, 3];
const traceSum = (a, b) => {
  console.log(a, b)
  return a + b
};
console.log("reduce without initial argument:",        arr.reduce(traceSum));
console.log("reduce with initial argument:",           arr.reduce(traceSum, 0));
console.log("reduce with initial argument undefined:", arr.reduce(traceSum, undefined));

Therefore, calling a function created by `compose` without supplying an argument is safe. In this case, `arg` will be explicitly `undefined`, causing each function to execute, but the initial value passing through them will be `undefined`:

const compose = (...fns) =>
  (arg) =>
    fns.reduce( (composed, f) => f(composed), arg)
    
const trace = message => value => {
  console.log(message, value);
  return value;
}

const test = compose(trace("one"), trace("two"));

console.log(test("hello"));
console.log(test());

It is important to ensure that your composed functions can operate without an initial value being passed:

const compose = (...fns) =>
  (arg) =>
    fns.reduce((composed, f) => f(composed), arg)

const excited = str => str + "!";
const loud = str => str.toUpperCase();
const greet = () => "hey";

const shout = compose(loud, excited);
const shoutGreeting = compose(greet, shout);

console.log(shout("stop"));                // works with initial value
console.log(shoutGreeting());              // works without initial value
console.log(shoutGreeting("hammer time")); // ignores initial value
console.log(shout());                      // error - initial value expected

Answer 3

Answer №2

When the reduce function is used without specifying an initialValue, it will start by applying the callback to the first two elements of the array.

For instance:

[2, 4, 6, 8, 10].reduce((x, y) => {
  console.log(x, ',', y, ',', x + y)
  return x + y;
}

This code snippet will produce the following output:

2 , 4 , 6
6 , 6 , 12
12 , 8 , 20
20 , 10 , 30

Answer 4

When the reduce function is used without specifying an initialValue, it will start by applying the callback to the first two elements of the array.

For instance:

[2, 4, 6, 8, 10].reduce((x, y) => {
  console.log(x, ',', y, ',', x + y)
  return x + y;
}

This code snippet will produce the following output:

2 , 4 , 6
6 , 6 , 12
12 , 8 , 20
20 , 10 , 30

If the first returned function of the compose function is called without any arguments, what is the starting value of its reduce function?

Answer №1

Answer №2

Similar questions

Tips for accessing the parent reference while binding using the .on() method

Controlling date selection with Material UI's datepicker functionality

Updating contact list to a database table structure

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

The image map library functions seamlessly with React but encounters issues when integrated with Next.js

Utilizing JQuery to Modify XML File Content

Managing date fields retrieved from a REST Api in AngularJS

HTML5 Canvas Border

Encountering Errors with Angular JS Following Update from Version 1.1.0 to 1.1.1

The addListener method in Google Maps iterates n times for a specific number of repetitions

Enhance fullness to facial features

Leveraging Iron Router for implementing query variable settings

AngularJS - Issue with Scope not being properly utilized in view when calling controller function

Tracker.gg's API for Valorant

Locally hosted website failing to transfer login details to external domain

Unable to dynamically translate special characters using npm latinize

Troubleshooting issues with JavaScript events in order to effectively implement popovers

Utilize AngularJS's OrderBy feature to iterate through the list for navigation in ascending order by Index

React app frequently retrieves images from the server whenever react-router is being utilized

iterating over a list of files using JavaScript