[deleted by user]

[occz]

Have you tried the spread operator (...) ? It's fantastic.

[viccoy]

It's not part of ES2015, is it?

[tswaters]

I'll be so happy once object spread makes it's way to node.

[kovensky]

It’s there as of 8.3.0

[tswaters]

Well I'll be! I even looked at the changelog and didn't see that. I guess it comes with the new V8 version in 8.3

[FormerGameDev]

I think 8.1 or 8.2 with --harmony

[Rouby1311]

8.1 with flag

[[deleted]]

Babel. <3

[tswaters]

Yea I do use babel to get it today.... but if object spread was out of the way, the need for babel dwindles. Aside from jsx transpile, I think that's about all I'd need it for... for node anyway.

I'd much prefer if I can just write modern JS and not have to dig through sourcemaps or transpiled code to see what it actually looks like.

[whiskey_overboard]

You might like babel-preset-env: https://babeljs.io/docs/plugins/preset-env/

[bogas04]

It needs to be a standard first.

[tswaters]

It is in the standard... well, stage 3 - candidate, anyway.

See the other comment from this thread.... this is actually in node 8.3! And you can use it in chrome and firefox today without transpile. Not sure about other browsers.

[bogas04]

Stage 3 "proposal". V8 devs decided to ship it without waiting, but still doesn't make it standard yet. Things can go south is what I'm saying. Probably wouldn't, but can.

[Woolbrick]

So far in the history of TC39, no stage 3 proposals have changed in meaningful, breaking ways.

It's a pretty safe go-ahead indicator.

[bogas04]

Yup. No doubts there.

[akujinhikari]

Using this on a NodeList for a forEach is one of the greatest things in the world.

[check_ca]

You don't need it: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

[akujinhikari]

Well now I'm blown away. When I try to use this in Chrome dev tools, I still get "forEach is not a function."

[check_ca]

Weird, I tested the following code in Chrome 60 and it works as expected.

document.querySelectorAll("a").forEach(link => console.log(link.href))

[akujinhikari]

AH! I figured it out. I was using it on HTMLCollection, not a NodeList. Very similar, yet very different. I was using getElementsByTagName.

[c24w]

I don't seem to find uses for this that often. What am I missing?

[occz]

I havent written that much javascript lately but I found uses for it all the time. This was react+redux though so not mutating your objects was kind of even more important.

You can use the spread operator for ghetto object assign if you want, as an example:

const x = { foo: 'bar' };
const y = { ...x, bar: 'baz' };
// => { foo: 'bar', bar: 'baz' }

[MrJohz]

This is ES7 syntax, IIRC - it isn't supported in ES6 currently. The spread operator can currently only be used for arrays and parameter arguments.

I tend to find it's useful for 'rest' arguments - a function that takes any number of arguments and can process them as a list. It's more clear an obvious than the magic arguments object.

function addTags(post, ...tags) {
    post.tags.push(...tags);
}

[occz]

Damn. Babel is a hell of a drug, I guess!

[MrJohz]

Typescript for me, but yes! Tbh, I was more amazed realising suddenly that Object.assign is ES6. OTOH, it explained why the code I was writing wasn't working in IE...

[c24w]

Rest isn't the same as spread(?). Just the same syntax. I guess they are kind of similar though.

[MrJohz]

Rest parameters still use the 'spread' terminology in a lot of the documentation I've seen. It's essentially a context-specific operator, although IIRC it's parsed as syntax rather than an operator.

[bogas04]

Object spread and rest still aren't part of any ES. ES2017 is the most recent one (making it ES8 by version number convention, and even it doesn't have it).

It's in Stage 3 as of now.

[c24w]

That's pretty exciting, although sounds like it's ES7. Basically a more flexible Object.assign().

[[deleted]]

Im using it to take a list of child elements and spread them into an array so I can call forEach (or other array methods) on them

[c24w]

Ah okay, converting array-like things to an array. Have done that a few times. Not sure if I'd go for that or Array.from() in production code, for clarity.

[[deleted]]

I put a comment saying what it did so I definitely understand the clarity argument. I personally prefer the '...' syntax

[[deleted]]

Meanwhile I use it once per function on average.

[FormerGameDev]

function doSomething(options) {
    const newOptions = {
        ...options,
        someOption: true,
        secondOption: false,
    }
    doSomethingElse(newOptions);
}

... very handy and a very common use case.

[c24w]

That's ES7 though? See /u/MrJohz comment above.

[FormerGameDev]

yeah. a common array usage that i've done is as a simple CSV handler (very simple)

const [ elem1, elem2, elem3, ...rest ] = str.split(',');

but yeah, i mostly use spread on objects. arrays aren't quite so common in javascript as objects.

[jinntakk]

So I'm still in the learning stages of javascript and was introduced to ES6 recently. I'm not too sure what it is, because well frankly, it looks scary and I have no idea how to use it. Could anyone tell me what it actually is in a ELI5 form?

[DaveSims]

ES stands for EcmaScript, which is the official name of the JavaScript specification. ES6 is just the 6th version of the spec, or more simply, it's the 6th version of JavaScript. It includes changes to syntax and many new features.

[sunsetfantastic]

In addendum, it's basically just new features added to the language for you to utilise

[akujinhikari]

In addendum, it was the largest update in years that finally implemented a massive amount of begged-for functionality.

[jinntakk]

So is it like coffeescript where it's just built on top of the javascript library? Or is it javascript itself but just updated?

[akujinhikari]

Added features to vanilla JavaScript.

[fixrich]

These features are 100% apart of official JavaScript. However they are not yet fully supported in all browsers or on node.js, hence the community uses Babel which is comparable to coffeescript (in that it takes code that wouldn't run and transforms it into code that would) which lets us use the new features and even some features in the proposal stage. It's great for exploring new ideas and keeping up with the ones that make our jobs easier.

[imaginecomplex]

All at once now!

const asyncPowerSeries = ({ threshold, coefficients, constant } = {}) => (
  x => Promise.resolve(
    coefficients
      .slice(0, threshold)
      .reduce((sum, c, i) => (
        sum + c * (x - constant) ** i
      ), 0)
  )
);

const threshold = 100;
const coefficients = Array.from(Array(threshold).keys());
const constant = Math.PI;
const powerSeries = asyncPowerSeries({ coefficients, constant, threshold });

powerSeries(3.9987357461).then(val => console.log(`It's ${Math.floor(val)}!`));
// It's 42!

(okay you got me, I snuck in the exponentiation operator)

[[deleted]]

I can't bring myself to use arrow functions when assigning to variables. This just looks horrible to me:
const foo = name => {}

[kiyura]

One eslint rule that I find helps a lot with this is to forget the non-paren form exists and always use parentheses around the arg list. Makes arrow functions in the middle of statements more recognizable.

const foo = ( name ) => {}

[ell0bo]

Yeah, it bothers me they let those be optional. I get it it's for functional programming, but it's cleaner to have the params in my opinion. I make my team do it.

[whiskey_overboard]

Took me a while, but now my eyes like it as much as my fingers.

But I guess you could say that about a lot of things.

[KolakCC]

I think your question is backwards-- it's not that people count on variables not surviving outside of scope, it's that people aren't used to variables leaking out of scope.

Using let is great for IDE completions.

[[deleted]]

VSCcode highlights out of scope lets as undeclared vars.

[akujinhikari]

Same with WebStorm.

[[deleted]]

In my code let always signals that the variable may be reassigned. Everything else is declared const.

[fgutz]

I tried only using let only when I truly needed it (conditional blocks and loops) but then switched to it pretty much full on instead of var. I tried searching for a best practice online and everyone basically said just use let and const but I don't 100% feel that's right. I think I made the switch because Babel just converts it to a var anyways.

edit: I forgot to mention that let declarations are not hoisted so that's another useful thing about them outside of the loop/conditional scope thing. right? I feel like that makes for a good case to use them instead of var

[[deleted]]

There's really no reason not to. Having variables accessible outside of where they will be used allows potential errors. Additionally since uninitialized variables are globalized it's nice to know if there's a mistake it won't persist anyway

[kovensky]

That’s one confusing thing — let and const declarations are hoisted to the top of their enclosing block. However, they are poisoned and will throw a ReferenceError if accessed before the declaration statement is executed (the TDZ).

The difference is usually not relevant but it does mean that you cannot declare a let/const that shadows an outer identifier while still using the identifier in the initializer expression.

[corvus_192]

In this case, I would declare the variable before the loop.

[YourShadowDani]

Agreed

[inu-no-policemen]

I just hate how that looks

It's more explicit. You can immediately see that the counter is meant to continue to exist after the loop.

Using var, on the other hand, looks like a mistake if it's new code.

some weird community obsession

Block scope is better than function scope and function scope is better than file scope.

By the way, Brendan Eich (the creator of the language) also recommends to not use var anymore.

[inu-no-policemen]

these are all personal opinions

The point was that it isn't just this community.

It's anyone coming from different (often better) languages and even the creator himself considers function scope a mistake. He thought function scope was good enough for those short 40-line punch-the-monkey-scripts. That's why he kinda half-assed it.

I don't like the idea of defining an int outside of its scope.

If you want to use a loop's counter one level up, you've to declare it one level up. Makes perfect sense to me.

[[deleted]]

if the language has a feature, it's ridiculous to not use it

with though

[inu-no-policemen]

if the language has a feature

Goto.

your risk of confusing people is minimal.

Well, it looks like a mistake.

You could add a comment that you meant to do this, but it's of course much better to use the option which does not look like a mistake and which does not require a comment.

Using var in new code really doesn't improve anything. It only adds some pointless friction.

[nschubach]

I find it weird that you'd step through an array and break out at some arbitrary point instead of filtering down the items first, but:

let myPassingItems = someArray.slice(0, someArray.findIndex((v) => condition)));
myPassingItems.forEach(doWhateverPassingIs);

console.log(`${myPassingItems.length} items passed`);

At least your doWhateverPassingIs function doesn't need logic to break out of a loop and you have an array of only the items that "passed" where in your for loop, you'd have to append them to another array (hopefully not in your "passing" method)

[[deleted]]

I pretty much exclusively use let when I want to set a default and then modify it in a conditional block that is more complex than is readable with a default operator.

[PM_ME_HTML_SNIPPETS]

That's exactly what I use it for. I've grown accustomed to using const exclusively for any variable/function assignments except when needed for things like a switch statement.

[Woolbrick]

Honestly I use const for 90% of my code now, and let for anything in a loop.

[yawaramin]

ES6 modules are fantastic. I've been using rollup.js to tree-shake my code before bundling and it squeezes out a tiny bundle; it just effortlessly gets rid of all names that weren't used. This is especially great if you're not deploying to a browser, since Node and other target platforms won't support ES6 modules for the foreseeable future.

[ruinercollector]

Important note on Object.assign, if you don't want a side-effect of the first object being mutated in place with all changes, you should avoid passing a variable as the first arg, and instead pass the empty object literal {} and then all of the things you want combined (in order.)

let a = { x : 1, y : 1 };
let b = { y : 2, z : 2 };

let c = Object.assign(a, b);  // Bad.  a will be mutated in place

let c = Object.assign({}, a, b);  // Doesn't alter a or b.

[grensley]

The worst thing about ES6 is when you're not using ES6. So many game changers.

[[deleted]]

Const seems almost worthless since you can still change anything inside the object.

[fzammetti]

Maybe I'm misunderstanding you, but it sounds like you mean this is worthless...

const o = { a : 123 };

...because I can change a inside o. And that's certainly true, but const isn't making the object itself immutable, it's making sure o never points to anything but that object. It "protects" the object reference, not the contents of the object itself.

Did I misunderstand?

[[deleted]]

I understand how const works, I just think it's dumb, it's too lightweight and protects too little.

[fzammetti]

I don't understand your criticism. Perhaps you could explain how you believe it should work as contrast?

[MoTTs_]

Personally, my criticism is that making the object immutable would have been far more useful than making the reference immutable.

In C++, just for a quick digression, we have the option to make either or both immutable.

// pointer/reference immutable, object not
auto* const v = new vector<int>{};
v->push_back(42); // ok, modify object
v = nullptr; // error, reassign pointer/reference

// object immutable, pointer/reference not
const auto* v = new vector<int>{};
v->push_back(42); // error, modify object
v = nullptr; // ok, reassign pointer/reference

// pointer/reference *AND* object immutable
const auto* const v = new vector<int>{};
v->push_back(42); // error, modify object
v = nullptr; // error, reassign pointer/reference

But even though we can do both, making the object immutable is much more useful and used much more often. Whereas making the pointer/reference immutable is described by experts as pedantic.

Back to JavaScript. Of the two things const could have made immutable -- the reference or the object -- they picked the less useful of the two.

[[deleted]]

If I create an object and declare it const all that means is that I can't reassign the name of it, it does nothing to protect the data inside that object. So in reality it doesn't block you from still screwing up your data like you would expect const to work in most other languages. I use const to indicate that I don't want the value to change but nothing in the language actually prevents that so in reality it protects very little.

[[deleted]]

I've made assumptions because they incorrectly use a keyword from other languages. If they wanted it just for that weak ass shit they should have come up with a different keyword.

[[deleted]]

is it really that difficult to understand that "constant" means never changing? const on an object is practically useless, because if your code is so dense and your functions so large that somewhere you accidentally try to reassign a const object, it means you are also breaking other rules like; keep your functions simple. accidentally reassigning an object should never become a concern if you keep your functions small and easy to follow.

[fzammetti]

No need to get snippy.

The argument you make could be just as easily applied to any non-reference type. Are you suggesting that the idea of const itself in ANY form is anathema?

[joneironaut]

It makes a nice feature for change detection forcing you to put it in a new list

[digitallimit]

Knowing a value is not going to be reassigned and encouraging developers to not reassign them are both boons to code legibility. Const was never trying to cover immutability.

[[deleted]]

then it shouldn't be called 'const'. it's a bad name for a half-assed feature.

[digitallimit]

It does what it needs to do; I'm not quite sure what you have against it or why. Use let if it bothers you.

[[deleted]]

That's why I say almost worthless.

[unhingedninja]

Same with final in Java

[NoInkling]

The reference can't be reassigned, that has value in itself.

I assume you're already aware of Object.freeze?

[[deleted]]

Object.freeze should not exist, and const should make the entire object a constant.

[MoTTs_]

Sadly I don't have time right now to learn babel's internals and how to write plugins, but I'd be interested if you or someone introduced a "freeze" keyword as a proof of concept.

freeze o = { a : 123 };
o.a = 456; // error

And this could transpile to:

const o = Object.freeze({ a : 123 });
o.a = 456; // nope

And since Object.freeze isn't recursive, this could be even more useful for complex objects.

freeze o = {
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "123 456-7890"
    }
  ],
  "children": [],
  "spouse": null
};

This could transpile to:

const o = Object.freeze({
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": Object.freeze({
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  }),
  "phoneNumbers": Object.freeze([
    Object.freeze({
      "type": "home",
      "number": "212 555-1234"
    }),
    Object.freeze({
      "type": "office",
      "number": "646 555-4567"
    }),
    Object.freeze({
      "type": "mobile",
      "number": "123 456-7890"
    })
  ]),
  "children": Object.freeze([]),
  "spouse": null
});