Why do these ACTUALLY exist now. What do these 'do' that saying 'function' and 'return' do not? The ONLY thing I can seem to find that serves ANY purpose with them is to either make it so that your script CANNOT be run in any version of IE, or that you're too lazy to type those two words.
I'm not seeing any corner case usages where they have any legitimate advantage -- in fact under blink and chakra they are even slower than anonymous functions and suck down more memory! Though they are reasonably well behaved in Quantum
Can anyone provide me with a legitimate reason to use them other than "wah wah, I'm too lazy to type"? That bit of the equation reading sources I trust (like MDN) and even some I don't (like the dirtbag scam artist W3Schools) are failing to provide me with that missing part of the equation.
WHY are these even a thing apart from intentionally trying to make the language more cryptic, harder to use, and "wah wah, you means I haz to tieps wurds?!?"
I'm just not seeing it. Can anyone give me an actual usage case scenario where it makes a real difference?
Rohan Deshpande
Creative Software Developer
const foo = _try => to => _do => _this => _with => regular => functions =>
_try + to + _do + _this + _with + regular + functions
const foo = function(_try){
return function(to){
return function(_do){
return function(_this){
return function(_with){
return function(regular){
return function(functions){
return _try + to + _do + _this + _with + regular + functions
}
}
}
}
}
}
}
Yes, conciseness is the key here. And this really helps with composition. Some people like boilerplate, I don't.
Is funny because you have as copy on your profile: The less code you use, the less there is to break
I'll play the devil's advocate here, but one solution if you want the modern syntax but with full support to old browsers, is to use Typescript (you can use it without any types indeed)
This is a valid Typescript file:
document.addEventListener('resize', e => { console.log(this)} )
Which compiles to the following classic js (obviously, you should not select es6 as the target!)
var _this = this;
document.addEventListener('resize', function (e) { console.log(_this); });
I started to use TS more than 3 years ago, back in 0.8, and it made me able to use lots of modern features with full support of IE8 and others.
At first I disliked them because I think they make the code harder to read, but in a lot of cases they make the code a lot easier/faster/nicer to write when you're in the flow!
The Right Answer™ to the question of "Why are these a thing" is going to be that their lexical scope is shared with their surroundings so you can use this without having to pass it into the function you're creating.
Where they seem to shine are in one-line functions, because you also don't need the { return } if it's one line, so things like map(), filter() and stuff like that which expects a function.
I also find it nice inside addEventListener:
document.addEventListener('resize', e => {} )
So it might be nice inside other things like setTimeout or setInterval, etc.
As for support though - I think life's too short to transpile a dynamically interpreted language so I only use them in situations where I know I won't need to support a browser that doesn't have them.
That said - there is nothing wrong with function() { return } syntax, and never will be :D
Can anyone provide me with a legitimate reason to use them other than "wah wah, I'm too lazy to type"?
Nope, as is with most other new stuff in JS. There is class, which you don't really need, there are functional array methods, which you could as well have done with loops, there even is Array.includes(), which should be more semantic than Array.indexOf() >= 0. It's all that jitter, which is tripping me, too, because I am used to less abstract code and candy everywhere.
// You now can write
function foo() {
doSomething(() => this.bar());
}
// instead of
function foo() {
doSomething((function() { return this.bar() }).bind(this));
}
Every time I see one, my brain has to stop and re-translate what in the world => means in JS. I'm so used to => in PHP used as associated array assignment as in:
$myArray = array(
"key1"=>"value1",
"key2"=>"value2"
);
It's painful to keep context switching, especially since PHP and JS often go hand-in-hand.
Thus far, I have refused to use arrow functions in JS. To me, it defeats the purpose of readability.
The this reference is based on the context.
class DoSomethingWithTimeout {
somethingDelayed;
somethingOnInput(value) {
setTimeout(() => {
this.somethingDelayed = value;
}, 1000);
}
}
// without brackets it automatically returns the value
const x = n => n + 1;
const y = x(11); // 12
instead of
function z(n) {
return n + 1;
}
var a = z(11); // 12
so less typing and no need for .bind(this).
I'd be curious to learn more about them too but Jason Knight I'm afraid ppl are going to be scared to reply lmao.
I suppose my new ECMAScript 6 book that's coming today will explain more. I assume these are similar to C#'s lambda expressions.
I don't think many of these syntactic additions do anything that other older methods couldn't do but they're adding shorthand to the language but this is just my speculation. Will be interesting to see a JS pro get on here and tell us.
The less code you use, the less there is to break
Lambda functions have been introduced to improve code terseness and encourage functional programming practices.
You do not have to use them at all, but they are quite awesome for turning multiline function statements into single lines of code. They are very useful when using functional programming methods such as
map,filterandreduce.Like any language syntax, they are only cryptic if you do not understand them. The Spread (
...) syntax is another amazing ES7 feature that drastically improves the ability to interact with arrays and objects.In terms of compatibility, most people writing ES6/7 code are still using transpilers like Babel together with polyfills. Unless you are 100% sure all of your code will work in all browsers, you should be doing this too.
All this being said, the ES6/7 features really start to shine when used in a fully modern JavaScript development environment where
importandexportas well as all modern methods are supported. I encourage you to try out a boilerplate likecreate-react-appor something similar where you can play around with the new version of the language, it really is almost a completely different language to what it was 5 years ago.