5 ms·

What's the difference between named functions and arrow functions in JavaScript?

46 points by jrsinclair 1y ago

threatofrain 1y ago
[flagged]
- sublinear 1y ago
  Traditional media and chatgpt are just aggregators. Random blogs like this are where much of the training data for communication style comes from.
  - threatofrain 1y ago
    By traditional media I mean blogs. I'm saying there are already a trillion high quality blog posts on this very topic. There's YT, wikis like MDN, bootcamps, real life or digital curriculum. These are all examples of "traditional" as opposed to chat bot style learning, which is completely new to the education space. Also we definitely don't need more of this as training material, for humans or machines. It's not like you can't write a better introduction to JS, but by now the bar is very high and the likelihood of writing something good without pedagogical conviction is pretty bad, and this blog post is no different. It has a mock pedagogical voice that people do when they think they're writing in a friendly way, a kind of pedagogical style developed in isolation from all other educators, whether traditional like YT & MDN or otherwise.
- trgn 1y ago
  you'd have to think to ask the question first. these sort of deep cuts people generally learn by osmosis, it bobs up through the blog roll, in conversation, at code review, ...
- fitsumbelay 1y ago
  I would go to Gemini with specific questions I want answers to, while I'd go to Sinclair's JS blog for deep dives into topics I'm familiar with but don't thoroughly understand (or in some cases forget critical/helpful things that I once knew). They are different types of discovery and are both very valuable. It might also help to know that this blog is well pre-chatgpt I'm curious what's meant by "traditional media" here: do you mean specifically books? I can't imagine there are tv or radio broadcasts dedicated to web dev, at least not U.S. Also, even before chatgpt you could bet that at any given time there are probably a couple of hundred blogs that are competently written by fairly smart people about the same topic. That wouldn't be pedagogical, it would just be a coupole of hundred blogs competently written by fairly smart people :shrugs:
- dspillett 1y ago
  > ChatGPT would thoroughly cover with probably zero fault? If I'm trying to learn something, I want that probably in “probably zero fault” to be far smaller than an LLM can legitimately promise.
comrade1234 1y ago
JavaScript used to be a nice prototype based programming language... Anyway, I'm more interested in how this site is being published. I'm on iOS and in vertical format words are cutoff with dashes properly for that format and when I switch to landscape other words are cut off that fit that format. Is this some simple css attribute I missed completely?
- test1235 1y ago
  css hyphens? https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
  - comrade1234 1y ago
    I totally missed that. :) as long as the browser has a hyphenation dictionary for the language being used it will work.
- moritzwarhier 1y ago
  > JavaScript used to be a nice prototype based programming language "this" binding depending on the call site never made sense to me. Why do you think it became worse with arrow functions and Function.prototype.bind? In case I'm not misunderstanding you. Tbh I haven't read the article so I'm only responding to your first sentence, since the CSS hyphens thing has been cleared up already. By the way, CSS hyphens have been my most-wanted feature ever when I was working for a web design agency. So glad to see it gain traction over the years. There are JS libraries for this, and of course they cause ugly page reflow and/or overhead. Prime example of what should be in the CSS domain, and such a frequent problem when putting real content into design templates.
- WorldMaker 1y ago
  To be fair, most of these complaints about functions in JS are because its roots are still a nice prototype-based programming language and the `class` syntax sugar implies class-oriented things that JS doesn't deliver and confuses prototype-oriented features as class-oriented bugs. You can still use them as features, though we are getting close to the point where using them as features is an art form for arcane wizards that will make many, many JS users scream in terror and confusion.
fitsumbelay 1y ago
one of my favorite JS bloggers, love his deep dives
JoeOfTexas 1y ago
There is a bit more nuance in using `this` in a named function that wasn't covered. Named functions defined in classes are scoped outside of the class, meaning they are not bound to the class. To use `this` in your named function, you usually have to bind it in the constructor using `this.functionName.bind(this)` Arrow functions defined within a class are scoped and bound to the class automatically. Hence, arrow functions do not require calling the .bind in constructor, and you can happily use `this` inside arrow functions.
- moritzwarhier 1y ago
  The article misses even more nuance, independent from classes. If you define const o = { a: "Hello", b() { return this.a;} } then o.a() will return "Hello" while const b = o.b; // not a.b ... b(); will throw an error. This predates generator functions and classes (which are only syntax sugar AFAIK). And it seems like a glaring omission giving the submission title. I'm ashamed though if it's in there and I missed it. The behavior is called "late binding".
  - postalrat 1y ago
    Of course it's an error. 'a' isn't defined.
    - moritzwarhier 1y ago
      Lol, thanks, edited
  - WorldMaker 1y ago
    Late binding is also what the above poster is complaining about and they mention the habit some have in class constructors for "early binding" to try to avoid it.
    - moritzwarhier 1y ago
      Thanks for explaining, maybe I was missing the point there. I was replying with this because it happens without using the "class" keyword (or "constructor") at all. Not sure what you mean with the class constructor thing, but that's on me. I still don't understand these properly: > Named functions defined in classes are scoped outside of the class, meaning they are not bound to the class > the habit some have in class constructors for "early binding" to try to avoid it. You mean using sth like this.a = //... in the constructor, using arrow functions? I guess I'm missing something here. That can also be done after the class was declared? The class keyword is only syntax sugar. Anyway, I might be missing something important here. That's why I brought up an example using an object literal, which has the prototype Object.prototype Try it: const a = {}; console.log(Object.getPrototypeOf(a) === Object.prototype); // logs "true" These shenanigans are why I sometimes hate JS, but also agree that we should aim to understand the basics first. I love MDN for that. https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#the_prototype_chain https://developer.mozilla.org/en-US/docs/Learn_web_developme...
fud101 1y ago
I appreciate the article but I was waiting for Monads to appear.
nayuki 1y ago
> Somewhat confusingly, we can also give our function expression a name. One that’s separate from the variable name [...] This throws an error. If we can’t use that name, then what’s the point of it? Well, takeyWhiley will show up if we throw an error in our code. There is another reason: If you give a name to a function expression, the function can directly recurse on itself without the use of combinators. For example: const factorial = function fact(n) { if (n == 0) return 1; else return n * fact(n - 1); };
Ashkee 1y ago
Named functions give you a clear function name which helps in debugging and recursion. For simpler syntax and capturing the surrounding context, arrow functions are handy. You might want to explore MailsAI for organizing your JavaScript code snippets efficiently, it made my workflow smoother.

46 points by jrsinclair 1y ago

threatofrain 1y ago

[flagged]

sublinear 1y ago
Traditional media and chatgpt are just aggregators. Random blogs like this are where much of the training data for communication style comes from.
- threatofrain 1y ago
  By traditional media I mean blogs. I'm saying there are already a trillion high quality blog posts on this very topic. There's YT, wikis like MDN, bootcamps, real life or digital curriculum. These are all examples of "traditional" as opposed to chat bot style learning, which is completely new to the education space. Also we definitely don't need more of this as training material, for humans or machines. It's not like you can't write a better introduction to JS, but by now the bar is very high and the likelihood of writing something good without pedagogical conviction is pretty bad, and this blog post is no different. It has a mock pedagogical voice that people do when they think they're writing in a friendly way, a kind of pedagogical style developed in isolation from all other educators, whether traditional like YT & MDN or otherwise.
trgn 1y ago
you'd have to think to ask the question first. these sort of deep cuts people generally learn by osmosis, it bobs up through the blog roll, in conversation, at code review, ...
fitsumbelay 1y ago
I would go to Gemini with specific questions I want answers to, while I'd go to Sinclair's JS blog for deep dives into topics I'm familiar with but don't thoroughly understand (or in some cases forget critical/helpful things that I once knew). They are different types of discovery and are both very valuable. It might also help to know that this blog is well pre-chatgpt I'm curious what's meant by "traditional media" here: do you mean specifically books? I can't imagine there are tv or radio broadcasts dedicated to web dev, at least not U.S. Also, even before chatgpt you could bet that at any given time there are probably a couple of hundred blogs that are competently written by fairly smart people about the same topic. That wouldn't be pedagogical, it would just be a coupole of hundred blogs competently written by fairly smart people :shrugs:
dspillett 1y ago
> ChatGPT would thoroughly cover with probably zero fault? If I'm trying to learn something, I want that probably in “probably zero fault” to be far smaller than an LLM can legitimately promise.

comrade1234 1y ago

JavaScript used to be a nice prototype based programming language... Anyway, I'm more interested in how this site is being published. I'm on iOS and in vertical format words are cutoff with dashes properly for that format and when I switch to landscape other words are cut off that fit that format. Is this some simple css attribute I missed completely?

test1235 1y ago
css hyphens? https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- comrade1234 1y ago
  I totally missed that. :) as long as the browser has a hyphenation dictionary for the language being used it will work.
moritzwarhier 1y ago
> JavaScript used to be a nice prototype based programming language "this" binding depending on the call site never made sense to me. Why do you think it became worse with arrow functions and Function.prototype.bind? In case I'm not misunderstanding you. Tbh I haven't read the article so I'm only responding to your first sentence, since the CSS hyphens thing has been cleared up already. By the way, CSS hyphens have been my most-wanted feature ever when I was working for a web design agency. So glad to see it gain traction over the years. There are JS libraries for this, and of course they cause ugly page reflow and/or overhead. Prime example of what should be in the CSS domain, and such a frequent problem when putting real content into design templates.
WorldMaker 1y ago
To be fair, most of these complaints about functions in JS are because its roots are still a nice prototype-based programming language and the `class` syntax sugar implies class-oriented things that JS doesn't deliver and confuses prototype-oriented features as class-oriented bugs. You can still use them as features, though we are getting close to the point where using them as features is an art form for arcane wizards that will make many, many JS users scream in terror and confusion.

fitsumbelay 1y ago

one of my favorite JS bloggers, love his deep dives

JoeOfTexas 1y ago

There is a bit more nuance in using `this` in a named function that wasn't covered. Named functions defined in classes are scoped outside of the class, meaning they are not bound to the class. To use `this` in your named function, you usually have to bind it in the constructor using `this.functionName.bind(this)` Arrow functions defined within a class are scoped and bound to the class automatically. Hence, arrow functions do not require calling the .bind in constructor, and you can happily use `this` inside arrow functions.

moritzwarhier 1y ago
The article misses even more nuance, independent from classes. If you define const o = { a: "Hello", b() { return this.a;} } then o.a() will return "Hello" while const b = o.b; // not a.b ... b(); will throw an error. This predates generator functions and classes (which are only syntax sugar AFAIK). And it seems like a glaring omission giving the submission title. I'm ashamed though if it's in there and I missed it. The behavior is called "late binding".
- postalrat 1y ago
  Of course it's an error. 'a' isn't defined.
  - moritzwarhier 1y ago
    Lol, thanks, edited
- WorldMaker 1y ago
  Late binding is also what the above poster is complaining about and they mention the habit some have in class constructors for "early binding" to try to avoid it.
  - moritzwarhier 1y ago
    Thanks for explaining, maybe I was missing the point there. I was replying with this because it happens without using the "class" keyword (or "constructor") at all. Not sure what you mean with the class constructor thing, but that's on me. I still don't understand these properly: > Named functions defined in classes are scoped outside of the class, meaning they are not bound to the class > the habit some have in class constructors for "early binding" to try to avoid it. You mean using sth like this.a = //... in the constructor, using arrow functions? I guess I'm missing something here. That can also be done after the class was declared? The class keyword is only syntax sugar. Anyway, I might be missing something important here. That's why I brought up an example using an object literal, which has the prototype Object.prototype Try it: const a = {}; console.log(Object.getPrototypeOf(a) === Object.prototype); // logs "true" These shenanigans are why I sometimes hate JS, but also agree that we should aim to understand the basics first. I love MDN for that. https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#the_prototype_chain https://developer.mozilla.org/en-US/docs/Learn_web_developme...

fud101 1y ago

I appreciate the article but I was waiting for Monads to appear.

nayuki 1y ago

> Somewhat confusingly, we can also give our function expression a name. One that’s separate from the variable name [...] This throws an error. If we can’t use that name, then what’s the point of it? Well, takeyWhiley will show up if we throw an error in our code. There is another reason: If you give a name to a function expression, the function can directly recurse on itself without the use of combinators. For example: const factorial = function fact(n) { if (n == 0) return 1; else return n * fact(n - 1); };

Ashkee 1y ago

Named functions give you a clear function name which helps in debugging and recursion. For simpler syntax and capturing the surrounding context, arrow functions are handy. You might want to explore MailsAI for organizing your JavaScript code snippets efficiently, it made my workflow smoother.