Check out a free preview of the full Introduction to JavaScript Programming course:
The "EcmaScript 6" Lesson is part of the full, Introduction to JavaScript Programming course featured in this preview video. Here's what you'd learn in this lesson:

While answering a few audience questions, Kyle spends a few minutes talking about how developers can start using ES6 syntax in their applications. He demonstrates Babel and ES6 Fiddle and discusses why learning this new syntax is important.

Get Free Access Now

Transcript from the "EcmaScript 6" Lesson

[00:00:00]
>> Kyle Simpson: When will it become standard to use const? It's already standard in the sense that ES6 is already been, officially voted upon and so const is happening. I mean there was one last official vote that it'll in June of this year, to kinda give it the final stamp of approval but it's virtual certainty ES6 will happen as the standard is already written.

[00:00:24] And there are several browsers that are already, so the new versions of Chrome Firefox, IE; they all support it. If you're having to run code that's running in older browsers, or you're trying to use ES6 features that don't yet exist even in the newest of browsers, cuz they're still some unimplemented features as of yet.

[00:00:45] If you're trying to do that, the bridge is to use what's called a transpiler. It's a special kind of compiler that takes your existing JavaScript code, say you write code that has ES6 features in it. And it converts that code to something that will run the same way but in older browsers.

[00:01:01] So, it goes through lots of different tricks to figure that out. So, we won't belabor that point, but I'll just quickly illustrate that, if we had, there's a tool called babel, that is probably one of the more common transpilers. And if we had some code in babel. Let me try to zoom in, so it's a little bit more readable.

[00:01:21] If we add some code in Babel that we were trying to play around with and see what's the equivalent if I wrote it in ES6, what's the equivalent of it in something that runs in a browser. So if I say const x = 10. You'll notice over here that they're not actually doing const, the thing that they're transpiling it to is this other stuff where they're setting up different checks on it's behavior, so that it's gonna behave almost identically to the way const will work in a normal ES6 engine.

[00:01:51] So this is the code that's automatically produced by this tool, and that's the code that you would sort of compile and ship out to the browser, while you would maintain your source code, and your repository or whatever, would use the const. So you would author in ES6, and you would, as a build step, you would transpile to something lower and ship that out.

[00:02:11] So this is a pretty common practice among JavaScript developers and applications, and it's becoming even more so. This is kind of the new norm, is that it's gonna be suggested that you do always write in the newest version of JavaScript, and if you have to run your code in older browsers, which is the reality for most of us, you just simply let a build step with this tool take care of the implementation details.

[00:02:36] So we won't go into any more details about how Babel works or what it does, but it's a very sophisticated program that's able to figure all that stuff out for us, kind of let us not have to worry about it. So basically take away here. You should if you gonna take seriously writing Java script, if you gonna work in an environment write it in an application, if that's your job, I'd recommend switching to ES6 now which is gonna take learning ES6 so there is plenty of work to do there.

[00:03:05] But once you have learned it and implemented it, you just need a build step with transpiler like Babel or something like that to take care of the compilation, okay. So did I miss any more questions? Yeah, Babel does have a lot of great examples. There's more than just Babel, I'm not meaning to say that's the only tool.

[00:03:23] There's Tracer and a couple of other ones. But Babel's one of the more popular ones these days. So it'd be a good place to start. Yeah, it was mentioned in the chat, I just wanna make sure everybody sees, there are tools, if you're not really serious about a full build step thing, but you just wanna play around with how ES6 works, there's tools like es6fiddle.net.

[00:03:47] And what this tool does, is, it does the transpiling, the compiling behind the scenes. So it'll just run your code. So if I said something like const x = 10 and then I said console.log(x) and then I said x = 20 and console.log(x), the question is am I gonna get 10 and 20 or what's gonna, and the way it's gonna do it's gonna transpile that const so that this state is not allowed.

[00:04:19] And you'll notice that we get an error saying x is read only. So it's transpilled under the scenes, so that I wasn't allowed to do line five. So you can play around with various different ES6 features here and they got several built in examples. So if you wanted to learn what, somebody asked earlier how do I do default parameters, well here's the syntax for default parameters as of ES6.

[00:04:42] You just put an equals sign and the value to assign a default burner. [COUGH] So you can play around with those if you're interested in learning more about ES6. And as a reminder there is definitely an ES6 course available from Frontend Masters.