/make-your-javascript-code-shide-knockout-old-es5-hack/

[panzerdp]

Written on 08/08/2016 09:34:03

URL: https://dmitripavlutin.com/make-your-javascript-code-shide-knockout-old-es5-hack/

[panzerdp]

Comment written by IllusionMH on 08/10/2016 15:45:09

To pass this problem, ECMAScript 2016 introduces a new method Array.prototype.contains
Strange to see here contains, when all other text I links points to includes.

[panzerdp]

Comment written by Dmitri Pavlutin on 08/10/2016 16:27:47

You're right :).
I just feel that the correct way is to use `.contains()`, and often confuse it will actual `.includes()`.

[panzerdp]

Comment written by coloured_chalk on 08/10/2016 21:43:11

Object.assign isn't a good choice for deep nested obejcts (it copies only 1 level deep, other deepness levels will be a regular links)

However, `npm install some-of-thousands-object-assign-deep` would make work done :) Or Object->JSON->Object conversion (but this is slow and only for object which can be stringified in JSON)

[panzerdp]

Comment written by Ihor Halchevskyi on 08/11/2016 01:12:51

For indexOf I usually use tilde operator.

Example:

const exists = ~[0, 1, 2].indexOf(3)
console.log(exists ? 'yes' : 'no')

[panzerdp]

Comment written by Dmitri Pavlutin on 08/11/2016 05:51:06

Using tilde operator seems like an interesting option, at least shorter than [0, 1, 2].indexOf(3) !== -1.
But I see an issue the returned type after applying the operator ~, which is still a number (falsy 0 when element is not found). It is a potential problem when trying to apply in all the comparisons `===` operator.
Thanks for sharing your idea!

[panzerdp]

Comment written by Dmitri Pavlutin on 08/11/2016 05:57:31

Yes, Object.assign() does not do deep cloning. And maybe in most situations deep cloning is not necessary.
There are a lot of alternatives. Probably the most used npm package is clone: https://www.npmjs.com/packa....

[panzerdp]

Comment written by jaggedsoft on 08/11/2016 21:14:33

Thanks for this awesome post. Looking forward to using array.includes() instead of the ugly array.indexOf() !== 1. Now if only strings had contains(): "http://www.google.com".contains("http")

[panzerdp]

Comment written by CodinCat on 08/12/2016 02:14:20

typo: default => defaults

[panzerdp]

Comment written by CodinCat on 08/12/2016 02:19:06

An even more fancy way to copy an object:

var defaults = {  
  height: 800,
  width: 200
}
var settings = { ...defaults, ...{
  height: 500
}}

[panzerdp]

Comment written by Alberto Restifo on 08/12/2016 04:28:35

You can use match and basically obtain the same result, as it returns undefined when there is no match:

'http://www.google.com'.match('http');

[panzerdp]

Comment written by Dmitri Pavlutin on 08/12/2016 06:34:48

Thanks @CodinCat:disqus. Fixed.

[panzerdp]

Comment written by Dmitri Pavlutin on 08/12/2016 07:17:27

This is a great alternative, and I actually like it more than Object.assign().
But the spread properties is still at proposal stage 2, but I hope it will land in a new JavaScript version soon!

[panzerdp]

Comment written by Dmitri Pavlutin on 08/12/2016 07:22:19

Thanks @jaggedsoft:disqus, I'm glad you like the post.
ECMAScript 2015 has String.prototype.includes() that searches for a substring in a string. So "http://www.google.com".includes("http") returns true.

[panzerdp]

Comment written by Dmitri Pavlutin on 08/12/2016 07:23:56

It's a good alternative. Just notice that match string parameter is transformed into a regexp object, so it must be escaped before usage.

[panzerdp]

Comment written by jaggedsoft on 08/12/2016 07:56:31

Thanks! Tested working with both arrays and strings on NodeJS, Chrome and Firefox.

[panzerdp]

Comment written by Alberto Restifo on 08/12/2016 13:17:25

Good point, and I didn't know that you can use includes on strings too, much more reliable solution if you just want to search for characters!

If you just want a string starting with http you can also easily harvest the power of regex:

'http://www.google.com'.match(/^http/);

[panzerdp]

Comment written by Min-Gyu Choi on 08/14/2016 03:57:26

Cool!

[panzerdp]

Comment written by Peter D Munro on 08/15/2016 08:30:58

jsfiddles would be helpful

[panzerdp]

Comment written by Dmitri Pavlutin on 08/15/2016 08:40:10

Hey Peter,
Every example has a repl.it demo. See the link on the right top side of the code box.

[panzerdp]

Comment written by Peter D Munro on 08/15/2016 13:21:01

Thanks.

[panzerdp]

Comment written by Lewis Cowles on 08/18/2016 12:22:44

I Like this. What I am concerned about is browser based JS being separated from server-side JS with the latter being able to instantly use ES2016, and the former lagging behind due to a fractured vendor ecosystem. Is this a legitimate concern?

[panzerdp]

Comment written by Dmitri Pavlutin on 08/18/2016 14:20:06

Hello Lewis,
The lagging behind browsers are a problem. If trying to use newest ES2015/2016 features, of course the code should be transpiled with Babel.
That's the price of the growing demand and complexity of the web applications. And the requirement to keep the backward compatibility and support older browsers.

[panzerdp]

Comment written by Seth Holladay on 12/14/2016 06:26:20

Fun fact: the spec originally called for it to be .contains(), but that turned out to be incompatible with the web. So they changed it to .includes(). See: https://bugzilla.mozilla.or... and https://bugzilla.mozilla.or...

[panzerdp]

Comment written by Dmitri Pavlutin on 12/23/2016 09:49:46

Yeah, I've read that story too.
Some old deprecated libraries will affect JavaScript for years beyond. In my opinion, they should have named it `contains()`.