TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

ES6 in Depth: Destructuring

128 pointsby mnemonikalmost 10 years ago

13 comments

girvoalmost 10 years ago
I&#x27;m currently building a rather large isomorphic React&#x2F;Flux application in ES6 and ES7.<p>With our Flux implementation that we&#x27;re using[0], async actions to external services become amazingly simple.<p><pre><code> async sendRequest(payload) { try { let result = await this.api.sendRequest(payload); return await result; } catch (e) { if (e.name === &#x27;ServerException&#x27;) { this.errorActions.serverError(e); return null; } this.errorActions.genericError(e); return null; } } </code></pre> Having a class system on top of prototype system, removing a lot of the boilerplate is great. Browserify&#x2F;CommonJS and Babel make for a phenomenal build system, and being able to with few exceptions render everything on the server correctly is brilliant.<p>Javascript has come a long way. The best part of destructuring is simplifying `import` statements<p><pre><code> import { fooFunc } from &#x27;.&#x2F;Bar&#x27;; </code></pre> I highly recommend checking it out, as the confluence of ES6&#x2F;7, Babel, React and Flux (with one way data-flow) feels like the future but here today. That, and I&#x27;m stoked that functional programming concepts are taking off!<p>[0] <a href="http:&#x2F;&#x2F;acdlite.github.io&#x2F;flummox" rel="nofollow">http:&#x2F;&#x2F;acdlite.github.io&#x2F;flummox</a>
评论 #9622415 未加载
评论 #9624890 未加载
评论 #9622472 未加载
评论 #9623041 未加载
评论 #9624233 未加载
评论 #9623118 未加载
bakhyalmost 10 years ago
No offense meant to anyone, but I really do not like this constant stream of new features in JavaScript. There are some core issues with the language which, of course, cannot be just fixed, and no new features will make them go away. But there is also a beautiful simplicity and power in the way this (used to be) funny little language does classes, objects, scoping... I feel like these new features are bloating it, and for what? So that you can write an assignment in 1 instead of 3 lines? Wow. It&#x27;s as if, whatever programming language is trendy, JavaScript must absorb as much of its features as it can...<p>Don&#x27;t get me wrong, destructuring is a nifty feature, but it&#x27;s not really necessary. Plus, things like that usually get thought through along with everything else, when the language is designed. Not only is this increasing the conceptual weight of the language (OK, maybe I exaggerate in this example ;) but there are many more features added all the time), but now you also have a new set of potential pitfalls when doing potentially type-inappropriate destructuring. (I see from the text that you sometimes get undefined, and sometimes a TypeError?) Does JS need more of that?<p>Why not keep it simple? It may have its flaws, but the JavaScript mental model, once you figure out some corner cases, is really simple and powerful. I find it sometimes very elegant. This feature bloat reduces that, IMO, and could hurt understandability of JS code.
评论 #9623514 未加载
评论 #9623556 未加载
评论 #9623308 未加载
评论 #9623300 未加载
评论 #9624559 未加载
评论 #9623614 未加载
评论 #9623339 未加载
darklajidalmost 10 years ago
I&#x27;m not really into web&#x2F;frontend stuff. I&#x27;m interested, but it&#x27;s not part of my day job and so I dabble only, play a bit here and there.<p>My last experiments caused lots of browser based problems (string.prototype.contains doesn&#x27;t exist in IE9 etc..) and ES6 features were a no-go for the same reason. How do you actually use things like the fat arrow etc. in applications today?<p>Is that limited to server-side code for now (and for quite some time..)? Do you decide to ignore a number of ~relevant~ browsers? Build tools to generate a &#x27;lower&#x27; dialect&#x2F;subset?<p>Any intro to this specific topic, i.e. &#x27;making sure your ~modern~ code works in last years browsers&#x27;?
评论 #9623895 未加载
评论 #9623220 未加载
评论 #9624551 未加载
评论 #9624637 未加载
dandelanyalmost 10 years ago
I&#x27;ve been writing ES6 with Babel for a couple of months now, and I&#x27;ve fallen in love with destructuring - it&#x27;s my second favorite part, besides arrow functions. My only complaint, having run into this a few times in real code, is that you can only use destructuring with <i>assignment</i>, not with existing variables. So this works:<p><pre><code> let myThing = {a: 4}; let {a} = myThing; </code></pre> But this does not:<p><pre><code> let a = 5; let myThing = {a: 4}; {a} = 5; </code></pre> I understand there are some problems of ambiguity here, but it seems to me this could be made to work somehow?
评论 #9623050 未加载
评论 #9623570 未加载
评论 #9623176 未加载
thomasvarney723almost 10 years ago
I recognize destructuring from Clojure. Did it origniate there? Or is this a specific case of pattern matching?
评论 #9623126 未加载
评论 #9622485 未加载
评论 #9623779 未加载
评论 #9625101 未加载
itajajaalmost 10 years ago
Adding to babel and traceur, Typescript is catching up with all ES6 features, so you can use destructors (discussed [here](<a href="https:&#x2F;&#x2F;github.com&#x2F;Microsoft&#x2F;TypeScript&#x2F;issues&#x2F;240)" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Microsoft&#x2F;TypeScript&#x2F;issues&#x2F;240)</a>) in Typescript v1.5--beta
评论 #9624029 未加载
评论 #9623986 未加载
croustoalmost 10 years ago
I love it!<p>As someone else also mentioned in the comments, it is unapologetically dynamic. In many ways, this reminds me of Perl. The array destructuring assignment is such a common pattern in that language (eg. <a href="http:&#x2F;&#x2F;perldoc.perl.org&#x2F;functions&#x2F;caller.html" rel="nofollow">http:&#x2F;&#x2F;perldoc.perl.org&#x2F;functions&#x2F;caller.html</a>)<p>What&#x27;s even more exciting&#x2F;terrifying is that ES6 goes even beyond the patterns allowed in Perl!
评论 #9624429 未加载
istvan__almost 10 years ago
I think this is a great language feature, using it a lot in OCaml and Clojure. I am not sure how much this will improve JS but I guess we can just wait and see.
评论 #9622597 未加载
ffnalmost 10 years ago
var [wtf] = NaN; console.log(wtf); &#x2F;&#x2F; undefined<p>I don&#x27;t know about you, but this sensibly gives a TypeError when I did it in my console on Firefox 38. Please let this article be more dated than my firefox browser, because making NaN auto-coerce into an iterator sounds incredibly stupid.
评论 #9622553 未加载
评论 #9643897 未加载
评论 #9624094 未加载
评论 #9622545 未加载
Ono-Sendaialmost 10 years ago
Wow, that&#x27;s some pretty complicated stuff. I can only imagine the monstrous code that could be written using this.
评论 #9622582 未加载
gcb0almost 10 years ago
that&#x27;s awful syntax IMHO.<p>like php&#x27;s list&#x2F;map but with several levels.<p>those are just asking for bugs that are hard to spot even on code reviews.
评论 #9622256 未加载
评论 #9623001 未加载
z3t4almost 10 years ago
I fail to see this doing anything besides turning the syntax backwards!? Maybe it&#x27;s useful for those of us who are used to write from right to left, like in Arabic, but I would still use var foo = bar[0] over var[foo] = bar any day. It gets even stupider with objects: var foo = bar.a, vs, var {a: foo} = bar.<p>JavaScript is a good language because it&#x27;s so simple and easy to learn, adding stuff like destructor&#x27;s just make it more confusing! Making a language more confusing just because of strong preference with syntactic sugars is a mistake. I would like to see a forking of the language before this goes mainstream. Maybe called CJS, where C stands for Clean or Classic JavaScript.
评论 #9623198 未加载
ilakshalmost 10 years ago
The part of this that is disengenuous and a little silly is that they are just slowly adding in features from CoffeeScript&#x2F;IcedCoffeeScript and nobody mentions that.<p>And in order to do it you have to use something like Babel.<p>Why not just move to CoffeeScript, or IcedCoffeeScript, or ToffeeScript, or even LiveScript?<p>The only explanation I can see is that people just aren&#x27;t capable of learning the full new languages and so the standards people are leading you by the hand like you just got off the short bus.<p>AND, the standards people don&#x27;t want to admit that individuals did their jobs for them years ago, don&#x27;t want to use someone else&#x27;s design for implementing those features and so insist on slowly coming up with their own independent implementations for engines.<p>This is a microcosm that demonstrates the relationship between technology and society. There is just a huge lag between the newest and best ideas or systems and what the group or individuals or systems can grasp or absorb.<p>Take this existing many-year gap and multiply by 10X or 100X and you will start to perhaps understand the concept of the technological singularity.
评论 #9624360 未加载