Check out a free preview of the full The Good Parts of JavaScript and the Web course

The "New Methods" Lesson is part of the full, The Good Parts of JavaScript and the Web course featured in this preview video. Here's what you'd learn in this lesson:

Doug describes many of the new methods added in ES5. Most of these methods were added to the Array and Date objects, but he also covers the String.trim() and Object.create() methods.

Preview
Close

Transcript from the "New Methods" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Douglas Crockford: We added a lot of new methods because new methods allow us to provide new functionality without new syntax, and so that's where most of the attention went.
>> Douglas Crockford: We added function.bind, which was something that jQuery has been promoting that allows you to turn a method into a function so that you can use it as a callback.

[00:00:26]
We added string.trim, so we now have a method which will remove the extraneous whitespace from a string. This should have been in the language from day one, right? And it's just, it shouldn't have taken this long to get that. We've got-
>> Speaker 2: Does it trim on both sides?

[00:00:44]
>> Douglas Crockford: It trims both sides.
>> Speaker 2: Okay.
>> Douglas Crockford: We didn't fight enough demands to do the individuals, the left and right versions, and I haven't heard anybody complain about it. If anybody does, maybe we could get into his.
>> Speaker 3: So, you adjust the trim, and, now, is that what it's doing, or it's actually just more JS, or is it written in a lower level?

[00:01:07]
>> Douglas Crockford: It depends on the implementation, it could be written in a lower level. So, this is called poly filling, it's also been called monkey patching. It allows you to insert code into the system, so when Brendan originally designed the language, he only had 10 days to do this prototype.

[00:01:26]
He was told that, or he expected that if his demo didn't work that Netscape would have done something much stupider. I don't know what it would have been, I can't imagine what that would have been but that was his [INAUDIBLE] so he only had 10 days. And he was pretty confident that he wasn't going to get everything right in ten days, but they're probably gonna need to be some tweaks in the field.

[00:01:50]
So, he left almost everything exposed on lot. So, things which in a properly designed language would be locked down or completely open. So, you can add things to object.prototype, for example, in a real language. You shouldn't even be able to see object.prototype, you know all that stuff should be sealed.

[00:02:12]
And he did that, probably correctly, because he figured he didn't get everything right and someday people were going to need to patch the system in real time in order to make it Work which is exactly what happened. So there's all this stuff in the language which is exposed including this.

[00:02:31]
If you take this code and run it on an IE 6 browser or IE 7 or IE 8 browser. Then they will work the same way as IE ten with respect as trim.trim. Now IE ten might have its own implementation of this it might be a native implementation so it might run faster.

[00:02:47]
So this version IE six months slower. I think that's great that's exactly how it should be We added a large new set of or array methods and I really like these methods of design wasn't perfect but there. They're good enough that we can use these so most of these work the same way in that you'll pass Call a method on an array and pass in a function and that function will get called for each element of the array and things will happen based on what method you provide.

[00:03:25]
So the every method will keep doing that behavior until a function returns false and when a function returns false then it stops doing that. So that allows you to loop for a time and then bail out similar to what break might be doing in a for loop. Filter will take all of the return values.

[00:03:49]
If the return value is true, then the original element of the array will be copied into a new array. So it allows you to take a bigger array and produce a smaller array based on what happens for each element. For each is the thing that replaces a for loop it just goes and visits every element I like for each.

[00:04:08]
IndexOf will do a search, so you can do a search in an array similar to the searching you can do on strings Last of searches, the array from the back end. Map is maybe the most powerful of them, it will take every return value from that function and store it into a new array.

[00:04:27]
So you can do transformations and you can do selections and lots of new things using map. Reduce will take in an array and reduce it down to a single value, and it'll do that by, you pass it a function that function gets called for pairs of values from the array.

[00:04:48]
For example if you pass the add function to reduce, you'll get a total function. If you pass a multiply function to reduce you'll get a product function then there is reduce right which reduces from the other end of the array I've not found any reason for that. I don't know why we did that, but it's in there.

[00:05:10]
Some is similar to every except it uses the opposite boolean value. We added Date.now. So it used to be, if you wanted to get the real time clock you'd have to do what this is doing. You would make a new Date object with the default configuration and then extract its time.

[00:05:30]
So usually when you're getting the time it's because you want to measure something But this process of getting access to the time adds a lot of latency and so you can now call date now directly and it'll give you the current value of the real time clock. Now browsers still add a lot of latency and operating systems also add a lot of latency.

[00:05:52]
So it's not proven that this actually does a better job but But it's not so much JavaScript's fault. now so that's gotten better when the first standard was made Netscape and Microsoft could not agree on the language in the standard for describing how date parsing works. There's a date constructor that can take a string And it can then attempt to turn that string into a date, object.

[00:06:20]
But they couldn't agree on the details for how that worked. So instead incorrectly, they agreed to disagree by leaving it completely unspecified. So there is no language of the standard that gives you a guarantee that if you pass at this form then it will parse. Which is kind of bad.

[00:06:38]
Now since then, ISO has come up with an international date format, which is pretty nice. Sometimes called ISO texts,ISO dates or ISO strings. Which you have a year then a dash, then a month and a dash and so on. So the date object will now produce strings in that form.

[00:06:57]
And the date parsers are now guaranteed to accept that form. So we now have at least one date format which is guaranteed to be acceptable. So this is the first one we'll try. If that one fails, then they'll fall back on the under-specified proprietary ones. But at least there's one that's guaranteed to work.

[00:07:17]
>> Speaker 2: Question about those two.
>> Douglas Crockford: Yeah.
>> Speaker 2: So the ISO format slide before this. Everything was getting UTC times whereas just one before so, if you do two ISO string. You're gonna get everything based on the UTC time. If you datetime.now, are you gonna get server time?
>> Speaker 2: Or the time that the machine that the code is running on thinks it is.

[00:07:45]
>> Speaker 3: You get a data object which is UTC.
>> Douglas Crockford: Yeah at the data object have some fundamental time.
>> Speaker 2: Okay.
>> Douglas Crockford: That's independent of the current time zone are situated right.
>> Speaker 2: Okay.
>> Douglas Crockford: So you're getting that that core value.
>> Speaker 2: Okay. Thank you.
>> Douglas Crockford: We added array.isArray to the language we tried to fix type of and couldn't that there was too much on the web that was dependent on the broken behavior type of so instead we added this horrendously ugly thing but at least we got into that language And Brendan had actually counted the keystrokes and this is smaller than the type of form.

[00:08:22]
So even I looks a lot worse, it's actually a little bit smaller. I managed to add object dot keys which will give you an enumeration of all of the Ownproperties of an object. So you don't get the inherited method names. You only get the data members which are the thing that you're probably most concerned with.

[00:08:42]
And it returns it in the form of an array which means you can then do for each on it and so that's pretty nice.
>> Speaker 4: You proposed that?
>> Douglas Crockford: Yeah I proposed that.
>> Speaker 4: Cool, I use that all the time and then I do like .length just to see how big this object is.

[00:08:56]
And stuff like that.
>> Douglas Crockford: You're welcome.
>> Class: [LAUGH]
>> Speaker 4: Yeah, sweet.
>> Speaker 3: You were talking about earlier there, some, was it some?
>> Douglas Crockford: Yep.
>> Speaker 3: How is that different than keys? Keys is an array.
>> Douglas Crockford: Some is for looping on an array. It's the opposite of every.
>> Speaker 3: Every gives you all the values, some gives you only one.

[00:09:16]
>> Douglas Crockford: Every gives you everything as long as the functions are returning true. And some keeps working as long as everything is returning false.
>> Speaker 3: It's operating on the values not the keys.
>> Douglas Crockford: On the return values that are based on the function that is processing the keys. Yes.

[00:09:34]
>> Speaker 6: Back on the dates there, there is a question. Are there any plans for mutable date objects?
>> Douglas Crockford: Immutable date objects?
>> Speaker 6: Yeah I don't know what he means by that.
>> Douglas Crockford: We're going to get to freeze you can freeze any date object is that what he wants?

[00:09:48]
>> Speaker 6: I'm waiting. I'm just going to ask for clarification just go on.
>> Douglas Crockford: I also managed to get object dot create Object.create is the primitive which makes a new object that inherits from another object. In a prototypal language, this should have been in the language from day one.

[00:10:06]
So instead we had the weird thing with new and .prototype., so this gives us a direct way of doing prototype inheritance, which is good.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now