|
|
|
|
|
by xcambar
1456 days ago
|
|
Tangent comment on JSX/TS/JS and a snippet found on reactivated.io. Not a comment on the article or reactivated.io in any way. > export const Flavor = () => <Select options={flavors} />; When I read the above, I fear for the new devs. The number of concepts to grasps and the level of parsing and mind bending to do is incredible. I used to teach code, before arrow functions and React. And I am convinced I would have lost some students to this snippet, especially the "= () =>" segment. Are we gone too far syntactically for the sake of compactness rather than understandability, allin the name of (fake, IMO) readability? |
|
They are controversial and everyone has different opinions, but I also think this is where programming ligatures come in extremely handy. When => looks more like ⇒ and is even more obviously an arrow, I think that also starts to make it easier to visually "parse" the flow of code like that.
For what it is worth, arrow functions weren't added solely for compactness, but also to fix some historic issues with classic function syntax. (Lexically scoped `this` versus caller scoped `this` being the big one.) A new type of function syntax was desired anyway for those reasons, and the compact syntax was the icing on the cake.
I haven't had the pleasure of teaching such things to students at this point in my career, but I have given a hand to many a junior developer to grasping some of these ideas and I don't think it is that tough, though it can be a shock/surprise if the last JS you touched was many years before. Especially if you are trying to also learn what JSX and/or TSX add on top of all the changes in ES2015+.