Preview

Start a free Courses trial
to watch this video

The JavaScript 'use strict' Statement

18:02 with Huston Hedinger

This workshop is all about JavaScript’s “use strict” statement. Recently you may have seen a curious little string `“use strict”;` appearing at the top of JavaScript files and within functions. This little statement causes the JavaScript interpreter to run in a strict variant. It can introduce a lot of breaking changes to your code, but in this workshop we’ll check out why this is a good thing!

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Fork the workspace for this Workshop and make it your own!

JavaScript's parseInt method

ES6 drafts

Documentation on creating non writable properties on objects.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Hi, I'm Huston, and I'm a JavaScript teacher here at Treehouse. 0:04

If you've been playing close attention to some of the JavaScript out there lately, 0:09

you may have noticed a funny looking string at the top of some of your files. 0:12

It's called use strict. 0:16

You'll see the use strict statement in both single quotes or double quotes. 0:19

This important little string tells the JavaScript interpreter 0:24

to run the file in a strict variant. 0:27

This means that the JavaScript interpreter is much more picky about your code and 0:30

will try to keep you from making some potentially bad mistakes. 0:34

How the JavaScript engine interprets your code in strict mode or 0:38

not can have a huge impact on how your code runs. 0:41

Check out the difference with this simple example, and 0:45

feel free to follow along by clicking the launch WorkSpaces button. 0:48

Here in our workspaces, we have a few different files. 0:53

Let's take a look at the file called bad JavaScript. 0:57

Later we're going to go through all the code that makes this file bad. 1:03

First, let's see how to run this code. 1:07

When I open up the index.html file. 1:11

I see that this script is loaded right here in the script tag. 1:15

This means we're good to go to launch the browser and 1:19

see just what's happening when the script is run. 1:22

I can do that by clicking on the preview button. 1:25

Now, there's not a whole lot going on, and in order to see what's happening behind 1:28

the scenes, I need to open the developer tools. 1:31

I can do that by clicking on this drop down menu here. 1:34

I could have also done this using the keyboard shortcut Cmd+Alt+I on a Mac or 1:37

Ctrl+Shift+I on a Windows machine. 1:45

Jumping back to the bad JavaScript file in WorkSpaces, 1:50

let's take a look at the first example. 1:53

Looks like we are creating a variable globally, and assigning a value. 1:58

But unfortunately, we're doing all of this without the var keyword. 2:03

This is a no no in JavaScript, since the var keyword is 2:07

used to restrict a variable to a scope, even if it is a global scope. 2:11

But remember, 2:16

it didn't throw any errors in the console when we just open the browser. 2:17

And we actually have access to the variable. 2:22

And I could see that by jumping back into the console here. 2:24

[BLANK_AUDIO] 2:29

Now let's try running this code in strict mode. 2:33

To do this I'm going to comment out all of the other code. 2:36

And I'm gonna add this use strict statement to the top of the file, 2:40

just like we've already talked about. 2:44

[BLANK_AUDIO] 2:46

Now, let's go back to the browser and refresh the page to see how this runs. 3:00

Now, we have a reference error. 3:09

And of course, as we expect, bad variable does not exist. 3:12

[SOUND] We actually get the same 3:16

reference error when we try to use it. 3:21

Now the way we fix this is to simply add the var keyword in front of bad variable. 3:26

I'm gonna save the file. 3:32

Go back to the console and refresh the page. 3:38

And there's bad variable. 3:44

But it's now good variable. 3:46

There's one other problem here, and it's more of a design issue as opposed to 3:48

being a syntax issue that's going to break your code. 3:52

Now when you're writing JavaScript for 3:55

the browser, keep in mind that it's getting loaded with a bunch of other code. 3:57

The browser's kind of like the wild, wild west, for 4:02

this reason, you want to prevent creating too many global variables 4:05

that may affect other team members' code, or even third party libraries. 4:09

And ideally, 4:15

all of your code could actually be contained under one global variable. 4:16

One of the ways we talk about this is that global variables clutter 4:21

the global name space. 4:25

Feel free to check out the teachers notes for an expanded look at good patterns for 4:27

writing JavaScript. 4:32

Running JavaScript in strict mode looks like it can cause some real problems. 4:34

But in reality, if you're writing good code it shouldn't cause you any problems. 4:39

Furthermore, strict mode eliminates what are called silent errors. 4:45

In other words, 4:49

when something pretty major is going wrong you won't have to hunt for it. 4:50

The use strict statement is a standard part of the 5th version of ECMAScript, 4:55

the official JavaScript standard. 5:00

Usually we just call this ES5, but no one talks about ES5 anymore, so 5:02

we've provided a link to ES6 in the teacher's notes. 5:07

Before we jump into more examples, 5:11

let's check out the use strict statement in the wild. 5:14

Here we are on GitHub. 5:17

I'm going to check out the repo for grunt.js. 5:19

[NOISE]. 5:22

Grunt's a pretty amazing technology, and it's what's called a task runner. 5:26

Let's go into the lib, one of the common places to store custom code. 5:31

So I'll click on the lib folder. 5:35

Now I'm gonna open the grunt.js file. 5:39

And here it is, we see that the use strict statement 5:43

is the first line of code that will be interpreted. 5:46

Keep in mind that the use strict statement has to be the first line, and 5:49

it has to be a string, not an object and not a key word. 5:54

In here the use strict statement is below a comment block, but 5:59

comments aren't interpreted and neither are blank lines so we're good to go. 6:03

And typically in my own code this is the only way I'm implementing the use strict 6:10

statement. 6:15

However, you can also implement the use strict statement within functions. 6:17

Now lets head over to the Twitter bootstrap repo, to see how that works. 6:22

[BLANK_AUDIO] 6:26

Now I'm going to head down to the JavaScript's. 6:35

I'm gonna check out one of their files here. 6:39

And remember, unlike grunt, 6:43

which is a node module, bootstrap is actually run in the browser. 6:45

So, here it is. 6:50

We see the use strict statement used within a function. 6:51

And this pattern is especially useful for 6:54

larger client-side or browser-side projects. 6:57

And I'll admit, for scalable and modular code, it is definitely a better way to go. 7:01

One good reason to implement strict mode this way 7:07

is if you expect a lot of other people to use your code. 7:10

And I'm pretty sure the Twitter bootstrap team expected a lot of other people 7:14

to be using this. 7:18

And sometimes in production, 7:19

all JavaScript files can be concatenated into one larger file. 7:21

If this is the case and you implement strict mode globally through one of your 7:27

files, then all the code will be forced to run in strict mode and 7:31

not just what started out as your one file. 7:36

Remember, if you put a use strict statement at the top of a JavaScript file, 7:40

no matter how big the file is, the entire file will be run in strict mode. 7:45

Likewise, you won't run into this problem if your file is concatenated 7:51

in the middle of some other files since the use strict statement 7:56

wouldn't be the first line in the file anymore. 7:59

This is definitely a fringe use case, but it is possible. 8:02

Now let's dive into our bad JavaScript file and check out some of the other 8:06

important things that the use strict statement effects. 8:10

Take a look at our second block of code. 8:14

We have a very similar scenario. 8:17

Basically, I'm trying to create a variable without the var keyword. 8:19

Normal JavaScript thinks that this variable should be hoisted 8:24

to the global name space. 8:28

And let's jump over to the browser to see this in action. 8:30

[BLANK_AUDIO] 8:33

Make sure my developer tools are open. 8:38

I'm gonna click on the console. 8:40

Run the function amIGlobal. 8:42

Sure to refresh the page. 8:48

Now, do we have access? 8:51

Yep. We have access to the x variable 8:52

in the global name space. 8:55

Now, let's run this in strict mode. 8:57

Here, I'll just comment in the use strict statement. 9:01

Save the file, now refresh the page, and try to run this function. 9:05

There's a reference error, 9:13

because x hasn't been defined in the global name space. 9:14

Now if I wanted to do this correctly, all I need to do is simply 9:19

define x in the global name space before I run this function. 9:23

So let's try this. 9:30

I'm going to refresh the page. 9:32

I can see that x exists, but it's undefined. 9:35

Now when I run amIGlobal, x takes the value of ten, 9:39

which was assigned by our function. 9:43

Let's keep moving down the line. 9:46

[BLANK_AUDIO] 9:50

Not that you'd ever want to do this, but just know that if you try to write to 9:59

an object that is non-writable, it will throw an error in strict mode. 10:03

Not a number is pretty obviously not a writable object, since it is a property of 10:08

the global object, and is actually built into JavaScript itself. 10:13

Additionally, there are tons of other unwritable objects, or globals. 10:18

You can write your own non-writable objects, 10:23

as can other folks that have released third party JavaScript libraries. 10:25

You can see how to do that in the teacher's notes. 10:30

Now, let's see this running normally. 10:33

So, I'm just gonna refresh the browser here. 10:35

Nothing. There's no error. 10:38

It fails silently. 10:40

Now, if we comment back in strict mode, with 10:41

a use strict statement, and run the code in strict mode. 10:46

I see that there's assignment because you can't assign the property foobar 10:51

to not a number. 10:56

Great. Let's check out this next piece of code. 10:57

[BLANK_AUDIO] 10:59

Strict mode will also throw an error if I try to delete properties that 11:08

are undeletable. 11:12

In normal mode, this will simply have no effect. 11:14

Let's save this file and see what happens here. 11:18

I can see that there's no error. 11:22

If I type in object, the prototype, guess what? 11:25

It's still there. 11:29

If I run this in strict mode. 11:33

See what happens? 11:37

There's an error. 11:38

You can't delete property prototype of function Object. 11:39

[BLANK_AUDIO] 11:47

It's really just fundamentally bad to have an object with duplicate keys. 12:01

If you're new to JavaScript objects, just know that values are looked up by their 12:06

key and therefore the keys need to be unique. 12:11

And you can see here that I have two zoo keys. 12:15

In any case take a look at this code when you run it in normal mode. 12:20

Use strict is commented out, great. 12:25

And just refresh the page here. 12:28

My bad object still exists, but with two keys. 12:30

What you'll notice is the second zoo key simply overwrote the first. 12:36

[BLANK_AUDIO] 12:41

Now let's run this in strict mode. 12:46

[BLANK_AUDIO] 12:48

>> Great, we get a SyntaxError, which is exactly what we want, 12:53

because we don't want an error like that to be failing silently. 12:56

One other thing I wanted to point out 13:00

is the reason we're commenting out all this other code. 13:03

And the reason is because, when one of these errors takes place. 13:07

It'll actually stop the interpreter and stop our application. 13:12

So if I comment this back in, and 13:17

then I comment this back in, and run this in strict mode. 13:19

Save the file first. 13:26

We're actually only going to see one of these errors. 13:29

So in order to demonstrate these errors, 13:31

I'm simply commenting out all of the ones except for the one that we're looking at. 13:34

[BLANK_AUDIO] 13:39

Cool, let's keep moving along. 13:43

One of the things strict mode doesn't like is duplicate parameter names. 13:46

But instead of just running this function, let's explore what happens in normal mode. 13:51

[BLANK_AUDIO] 13:56

To do this I type in the debugger keyword in our function. 14:13

Now I save the file. 14:21

When I go back to the browser and refresh the page, 14:23

I can now run this function. 14:28

[BLANK_AUDIO] 14:30

And it's actually gonna stop me in the middle of the function. 14:34

Now in the console, I have access to this context. 14:39

So let me just type in a, b, 14:44

c, to see what's happening with my different variables. 14:48

I actually even have access to all the variables here at once. 14:53

Now, even though I have access to all these parameters, 15:00

sometimes the first parameter is going to be overwritten by the second. 15:03

Furthermore, it's a bit of an academic point since if you run this function in 15:08

strict mode it will fail. 15:12

[BLANK_AUDIO] 15:13

Jumping down to the next block of code, Octals are not supported in strict mode. 15:21

Octal syntax is rarely used, and 15:29

it's actually not even a part of the Ucma standard. 15:31

It is, however, supported in all browsers. 15:35

Long story short, 15:38

just don't put a leading zero in front of your integers without meaning to. 15:39

And if you wanna read more about Octal syntax, 15:43

you can check out the parse int documentation in the teacher's notes. 15:46

Let's move right down to the next block of code. 15:51

[NOISE]. 15:54

[BLANK_AUDIO] 15:57

In strict mode, delete cannot actually be used on plain names. 16:01

In other words, delete can be used to delete properties but 16:06

not variables or plain objects. 16:10

So you can delete the property of an object. 16:13

But you can't, for instance, delete a number, a string, an entire array, or 16:16

an entire object. 16:20

Let's run this last block of code in strict mode and see what happens. 16:22

Now I refresh the browser, and I get a SyntaxError. 16:30

Because I'm trying to delete an unqualified identifier in strict mode. 16:34

Keep in mind this is actually very helpful. 16:40

The browser here is leading me to the error and 16:43

actually helping me figure out what's wrong with my code. 16:46

This is much better than if it was failing silently. 16:49

I hope these examples have been helpful. 16:54

Let's go to our index file and swap out scripts, so that we can see 16:57

what well written JavaScript that can run in strict mode actually looks like. 17:02

So I'll go to my index.html file. 17:07

I'm gonna swap out this bad JavaScript.js file for 17:10

strictJavaScript.js. 17:16

I'm gonna save this, and head back over to the browser, refresh the page, awesome. 17:19

Looks like it ran without any errors. 17:26

Now if you want to play around with these functions in strict mode, 17:30

feel free to do so in the browser's console. 17:33

Congratulations, you now have some insight into one of those things you probably see 17:37

a lot but haven't given much attention to. 17:41

Not only do you have a better handle on how to write strict JavaScript, 17:43

you can impress all of your friends. 17:48

From here on out you should plan to implement your java script in strict mode. 17:49