what is dot for in front of .catch? (firebase auth, react native)

Question

I am very new to react native with somewhat of a background in C(EE courses) and is just trying to understand the concepts. I'm currently folloing a react native course on Udemy.

I am trying to create a login form using firebase + react native. Here I would like to notify the user if an error occurs with their login.

I have two sets of code below in which I attempt to do the same thing, one of them works and the other one doesn't. I would like to understand why the first one works, and why the second one doesn't

This does work:

    firebase.auth().createUserWithEmailAndPassword(email, password)
        .catch((error) => {
            this.setState({ error: error.message, loading: false });
        });

Why do I need to put error on the left of the arrow function? From my understanding, whatever is on the left side of the arrow function can be seen as the "input", and the rightside is the system/output?

This doesn't work:

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(this.createFailure.bind(this))
    createFailure() {
        .catch((error) => {
            this.setState({ error: error.message, loading: false });
    });
    }

This one gives me a parse error for the '.' in front of catch.

I don't think I quite understand how .catch works but I was only able to find catch() on mozilla without the '.' it seems that I lack some fundamental understanding of how certain elements work, are there any recommended Youtube series that explains these building blocks? I find documentations often have too many corner cases which makes everything quite confusing.

`expression.methodOrProperty` - so, it's just JavaScript syntax. JavaScript allows spaces before after the `.` as well, which is what allows it to be written across multiple newlines; `catch(..)` is just a method; consider. `a.then().then()`, which is the same as `(a.then()).then()`: the `.` works on 'any expression'. — user2864740, Nov 05 '18 at 17:43
catch is a method of the promise that is returned by your createUserWithEmailAndPassword function. Same as then — Timo Jokinen, Nov 05 '18 at 17:43
Yes, right. This is object methods, it is not language structure as `try {}catch(){}`. It is something similar as `{catch: function(){}}`;Read more here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise — degr, Nov 05 '18 at 17:47
Closely related: [Is the 'catch' method name of JS Promises/A+ invalid since it's a JS keyword?](https://stackoverflow.com/q/25774628/1048572) — Bergi, Nov 05 '18 at 17:52

T.J. Crowder · Accepted Answer · 2018-11-05T18:01:55.667

createUserWithEmailAndPassword returns a promise object. That object has a catch method, which you use to hook up a handler for when the promise rejects. So the . is just like the . in, say, $("#foo").html(): It's accessing the method on the object returned by the function.

Why do I need to put error on the left of the arrow function? From my understanding, whatever is on the left side of the arrow function can be seen as the "input", and the rightside is the system/output?

Pretty much, yes. The arrow function is called if the promise rejects. When it gets called, it receives the error as input, and then does something with that error.

This asynchronous code using promises:

doSomething()
.then(data => {
    // ...do something with data...
})
.catch(error => {
    // ...do something with error...
});

is the same, logically, as this synchronous code:

try {
    const data = doSomething();
    // ...do something with data
} catch (error) {
    // ...do something with error
}

and in fact, if you use an async function, you can write the asynchronous version using promises almost exactly like that:

// (within an `async` function)
try {
    const data = await doSomething();
    // Note -----^^^^^^
    // ...do something with data
} catch (error) {
    // ...do something with error
}

Re your code that doesn't work, if I assume you want to call createFailure when an error occurs, you probably want this (see comments):

firebase.auth().createUserWithEmailAndPassword(email, password)
.then(result => {
    // This is the success path
    this.setState({/*...from result...*/});
}
.catch(error => {
    // This is the error path
    this.createFailure(error);
});

or within an async function:

// (within an `async` function)
try {
    const result = await firebase.auth().createUserWithEmailAndPassword(email, password);
    // This is the success path
    this.setState({/*...from result...*/});
} catch (error) {
    // This is the error path
    this.createFailure(error);
}

what is dot for in front of .catch? (firebase auth, react native)

1 Answers1