why it is returning different outcome ? (es6 arrow function)

Question

I'm trying to push some data onto the firebase.

Here is my handleSubmit function in App.js

  handleSubmit = e => {
    e.preventDefault();
    const note = {
      title: this.state.title,
      body: this.state.body
    };
    this.props.saveNotes(note);
    this.setState({
      title: "",
      body: ""
    });
  };

and this is my saveNote function, and it works fine.

function saveNotes(note) {
  database.push(note);
}

I wonder Why pushing onto database is not working with using arrow function like this

function saveNotes(note) {
  return () => database.push(note);
}

One is doing a push, the other *returns a function* that will do the push when called. So, the first one you have to call as `saveNotes(note)` the second option you have to call it as `saveNotes(note)()` — VLAZ, Feb 13 '20 at 06:42
A question explaining the concept but from the opposite side [Two sets of parentheses after function call](https://stackoverflow.com/q/18234491) also more about the same thing [What do multiple arrow functions mean in javascript?](https://stackoverflow.com/q/32782922) — VLAZ, Feb 13 '20 at 07:00
Because you are returning function from a function and the inner function is never being called — Suryan, Feb 13 '20 at 07:23

Amjed Omar · Answer 1 · 2020-02-13T06:57:50.077

1

Because you used function inside function

if you want rewrite function using arrow function syntax you should do the following:

const saveNotes = (note) => {
  database.push(note);
}

or

const saveNotes = (note) => database.push(note);

if you want to learn more about arrow function check out MDN Web Docs

edited Feb 13 '20 at 06:57

answered Feb 13 '20 at 06:42

Amjed Omar

853
2
14
30

score 1 · Accepted Answer · answered Feb 13 '20 at 06:46

if you want following to work:

function saveNotes(note) {
  return () => database.push(note);
}

then you should call saveNotes(note) like this.

this.props.saveNotes(note)();

OR

const arrowFunction = this.props.saveNotes(note);
arrowFunction();

Because you are returning a reference to a function not a result of a function

Please refer to guide IIEF

But this does not sound suitable here as you can simply call like this:

const saveNotes = (note) => database.push(note);

That's unrelated to IIFE, it's called currying. – Emile Bergeron Feb 25 '20 at 16:23 — Emile Bergeron, Feb 25 '20 at 16:23

score 0 · Answer 3 · answered Feb 13 '20 at 06:43

0

the last saveNote function return a function () => { return database.push(note) } so it doesnt operate push action.

answered Feb 13 '20 at 06:43

gnujoow

374
1
3
16

why it is returning different outcome ? (es6 arrow function)

3 Answers3