5 ms·

Javascript n00b question... is there any difference between onMount(() => { return listenForAuthChanges() }) and onMount(() => listenForAuthChanges()) ?

oplav 6y ago
No, they are functionally the same.
rahulpadalkar 6y ago
no
jfengel 6y ago
They are the same. It's a matter of style. For that matter, you could also write: onMount(listenForAuthChanges) which is technically simpler -- you're not constructing a new anonymous function. But if you wanted to extend the code (to say, add a console.log), you'd need to do the top version, which already has the braces. It's up to your judgment of what's clearer and likely to be more maintainable.
- brundolf 6y ago
  This is a utility function I carry around between projects for the "logging within a pure expression" case: function log(expr) { console.log(expr); return expr; } onMount(() => log(listenForAuthChanges()))
- M2Ys4U 6y ago
  That may be visually simpler, but if onMount were to start passing a parameter to its callback in a future version (for whatever reason) then that will be passed to listenForAuthChanges. Using the anonymous function means that wouldn't happen.
- hoten 6y ago
  That should work in the provided example, but in general `fn(cb)` is different: you lose the implied `this` binding unless you do `cb.bind(something)` beforehand. There's also some unexpected trouble due to potential extra parameters. Consider the output of ['1', '2', '3'].map(parseInt) gives: [1, NaN, NaN] So yea, fn(() => cb()) is the same as fn(() => {return cb()}) – just syntactic sugar when the anonymous function has just one statement. but fn(cb) is semantically different.
  - jfengel 6y ago
    I consider myself a pretty advanced JS developer, and I still don't understand how "this" works in JS. I avoid using it whenever I can.
    - hoten 6y ago
      Yea, you can avoid it without losing much at all. Most common place IME you end up needing to use it are when assigning functions on a class as event listeners: if you want to be able to remove them, you need to use the same value in `addEventListener` as `removeEventListener`; and if the function uses other properties of the class, you must use `.bind(this)` to correctly set `this`. It may help to think of it like this. This code object.someFunction(a, b); is syntactic sugar for someFunction.call(object, a, b) So with most usages of functions, the `this` is implicitly defined. The trouble comes when you start passing around references to functions. const fn = object.someFunction; fn(a, b); // throw `this is undefined` error if function accesses this Here, `this` was never defined. So you need to do one of: const fn = object.someFunction.bind(object); fn(a ,b); // OR fn.call(object, a, b); The last thing you need to know is the difference between arrow functions and classic functions. Arrow functions _never_ have a `this` binding of its own. It doesn't make a scope. If the scope it was defined in happened to already define `this`, it would use that. Classic functions (`function blah() {}` or `const fn = function() {}`) do make a new scope, so they have a `this` binding, so if you wanted to access `this` of the outer scope you'd have to assign it to another variable beforehand class A { a = 1; fn() { const thisRef = this; return function () { return thisRef.a } } } With arrow functions, it's easier: class A { a = 1; fn() { return () => { return this.a } } } I think this is all you'd ever need to know.
- filoleg 6y ago
  >For that matter, you could also write: >onMount(listenForAuthChanges) >which is technically simpler -- you're not constructing a new anonymous function. Not just technically simpler, it is a perf improvement over initializing an anonymous function every time onMount is called (which you have already mentioned, I just wanted to emphasize). A minor performance improvement at that, but still, small things add up. I agree with the entirety of your post, however, well-written.
KitDuncan 6y ago
no it's the same
hazzahzah 6y ago
same
hajile 6y ago
No. They are identical

oplav 6y ago

No, they are functionally the same.

rahulpadalkar 6y ago

jfengel 6y ago

They are the same. It's a matter of style. For that matter, you could also write: onMount(listenForAuthChanges) which is technically simpler -- you're not constructing a new anonymous function. But if you wanted to extend the code (to say, add a console.log), you'd need to do the top version, which already has the braces. It's up to your judgment of what's clearer and likely to be more maintainable.

brundolf 6y ago
This is a utility function I carry around between projects for the "logging within a pure expression" case: function log(expr) { console.log(expr); return expr; } onMount(() => log(listenForAuthChanges()))
M2Ys4U 6y ago
That may be visually simpler, but if onMount were to start passing a parameter to its callback in a future version (for whatever reason) then that will be passed to listenForAuthChanges. Using the anonymous function means that wouldn't happen.
hoten 6y ago
That should work in the provided example, but in general `fn(cb)` is different: you lose the implied `this` binding unless you do `cb.bind(something)` beforehand. There's also some unexpected trouble due to potential extra parameters. Consider the output of ['1', '2', '3'].map(parseInt) gives: [1, NaN, NaN] So yea, fn(() => cb()) is the same as fn(() => {return cb()}) – just syntactic sugar when the anonymous function has just one statement. but fn(cb) is semantically different.
- jfengel 6y ago
  I consider myself a pretty advanced JS developer, and I still don't understand how "this" works in JS. I avoid using it whenever I can.
  - hoten 6y ago
    Yea, you can avoid it without losing much at all. Most common place IME you end up needing to use it are when assigning functions on a class as event listeners: if you want to be able to remove them, you need to use the same value in `addEventListener` as `removeEventListener`; and if the function uses other properties of the class, you must use `.bind(this)` to correctly set `this`. It may help to think of it like this. This code object.someFunction(a, b); is syntactic sugar for someFunction.call(object, a, b) So with most usages of functions, the `this` is implicitly defined. The trouble comes when you start passing around references to functions. const fn = object.someFunction; fn(a, b); // throw `this is undefined` error if function accesses this Here, `this` was never defined. So you need to do one of: const fn = object.someFunction.bind(object); fn(a ,b); // OR fn.call(object, a, b); The last thing you need to know is the difference between arrow functions and classic functions. Arrow functions _never_ have a `this` binding of its own. It doesn't make a scope. If the scope it was defined in happened to already define `this`, it would use that. Classic functions (`function blah() {}` or `const fn = function() {}`) do make a new scope, so they have a `this` binding, so if you wanted to access `this` of the outer scope you'd have to assign it to another variable beforehand class A { a = 1; fn() { const thisRef = this; return function () { return thisRef.a } } } With arrow functions, it's easier: class A { a = 1; fn() { return () => { return this.a } } } I think this is all you'd ever need to know.
filoleg 6y ago
>For that matter, you could also write: >onMount(listenForAuthChanges) >which is technically simpler -- you're not constructing a new anonymous function. Not just technically simpler, it is a perf improvement over initializing an anonymous function every time onMount is called (which you have already mentioned, I just wanted to emphasize). A minor performance improvement at that, but still, small things add up. I agree with the entirety of your post, however, well-written.

KitDuncan 6y ago

no it's the same

hazzahzah 6y ago

same

hajile 6y ago

No. They are identical