JavaScript Was So Bad They Had To Add A Second Mode To Fix It

JavaScript used to be the wild west when it came to hidden errors. So many unintuitive mistakes/errors were hidden which is why JavaScript introduced strict mode to clean up those weird interactions. Strict mode adds a bunch of different rules mostly around fixing potential bugs and surfacing them to the developer.
📚 Materials/References:
ES6 Modules Video: kzbin.info/www/bejne/mYOrgoGEmL6ZbNU
ES6 Modules Article: blog.webdevsimplified.com/2021-11/es6-modules
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: www.patreon.com/WebDevSimplified
Twitter: DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:27 - How to enter strict mode
02:30 - Reason #1 for strict mode
04:10 - Reason #2 for strict mode
05:56 - Reason #3 for strict mode
06:18 - Reason #4 for strict mode
07:19 - Reason #5 for strict mode
08:35 - Reason #6 for strict mode
09:47 - Reason #7 for strict mode
11:28 - Reason #8 for strict mode
#StrictMode #WDS #JavaScript

I've always wondered what is the purpose of "use strict" in javascript files, but never had the time to give it enough attention or to goggle what is its purpose. Now with this video everything is clear about "use strict" and I will absolutely use it in my future javascript projects. Thank you so much for this detailed explanation with usage examples.

[@re.liable]

learning the modern JS, strict mode has been effectively the default for me as I've always set my scripts as modules

[@MichaelCampbell01]

The leading `0` for octal has roots at least as far back as the original "C" days, it wasn't "some random reason". But as a fun side effect, there is no "base 10 zero" in C, it's always octal. (Note: In java this is not the case, but both the C and C++ standards specify exactly this.)

[@QwDragon]

0 is decimal zero, but 00 is an octal one.

[@lawrencedoliveiro9104]

Octal numbers were pretty popular back then. They were a good fit for the PDP-11 architecture, since the fields in an instruction word for register number and addressing mode were 3 bits each. And their locations just happened to line up with individual digits in the octal integer representation of the instruction. One of the breaking changes in the Python 2→3 transition was moving away from a simple “0” prefix to “0o” for octal numbers. Personally I like the Ada based-integer style, “«n»♯xxxx♯”, where the base «n» can have any integer value from 2 to 36.

[@harleyspeedthrust4013]

0 is zero in any base. I don't know what the difference is between an "octal zero" and a "decimal zero." And whatever the reason to make 0 the prefix for octal numbers back in the day, there's no reason why that should still be a common language feature today. It's one of those foot-guns that you learn early on in your CS career and forget about until you shoot yourself in the foot with it because you put a leading zero in front of a decimal number.

[@QwDragon]

@@harleyspeedthrust4013 like 30 years ago syntax highlighting was showing octal numbers (with leading zero) in a different color. But now nobody cares, just threw off this feature. But everyone is complaining how confuzing they are...

[@harleyspeedthrust4013]

@@QwDragon It's not confusing at all, it's just obscure. It's the kind of thing that you forget about until you stumble upon it because it bites you in the ass. Most people aren't going to use octal literals so they almost forget that it's a thing

[@trappedcat3615]

It was so bad, TypeScript was created.

[@nathanbanji5015]

Hi Web Dev Simplified, I truly love your videos, you are the reason why I originally got into web development. You've taught me so much in the past year and a half, and I was wondering if you could make a tutorial on implementing ads into your website. I've been trying for a while now but I can't seem to get it to work.

[@ShiloBuff]

Your videos are always top notch and cover what I consider niche and advanced topics which is great. I recommend you to any friends who are learning javascript. Keep up the great work!

[@carafachera4781]

I love your videos, can´t stop waching them. Thanks for all this high quality videos.

[@christopheanfry2425]

Adding type=“module” in script tag will also use the defer attribute by default

[@louvethomas]

Thank you so much for this explanation, I never paid attention to that use strict instruction. Now that I'm trying to teach some JS to new employees in the company I'm working in, it will help ensure they learn properly before we switch to TS

[@NotKilgamesh]

Are you all hiring? 😅

[@louvethomas]

@@NotKilgamesh We sometimes do, if you're in France and near Paris 😁

[@smartphonecinematics]

@@louvethomas Hi there, I am actually a year 3 university student from Singapore studying information systems and I will be in France, Paris from January 2023 for my exchange programme. I will be looking for an internship opportunity if your company is hiring :) PM me if interested, merci beaucoup hahah

[@louvethomas]

@@smartphonecinematicsHello there, we mostly do web dev, but it's a big company, maybe i can pass a resume and they'll check if they are interested.

[@mubasherali630]

man you are amazinggg. thats why i don't miss your video. I knew strict mode already. but that octal stuff just blew my mind. litterally i don't know how you get to know these stuff. thanks alot man. Now its my time to blewwww others mind by writing 015 xD

[@theisoj]

Thanks for this video Kyle!

[@CJFX_]

Could you do a tutorial on await / promises / observables (more typescript content possibly?) I've found I've needed to rely on manually adding timeouts / waits using the waituntil npm package but was wondering if there was a better way to do this? Just more DB involved content would be nice I guess

[@dajac]

Thank you, Kyle. This helped me immensly.

[@maheshcharyindrakanti8544]

Thank you man for sharing this stuff

[@Raptor-jq8jg]

Thanks for the video!

[@UnlikelyToRemember]

The arguments "array" sometimes comes in handy in varargs functions.

[@anaselhassani2545]

Worked , thanks a lot!

[@sivaramakrishnan4833]

Thank you so much for this video ☺️

[@iorisi]

Keep going forward❤️

[@cherubin7th]

"strict mode" looks more like "relaxed but less stupid mode".

[@sfox-j]

😂 SHIT THATS FUNNYY

[@michaelschmid2311]

yeah, working for a company developping ui5 and js apps we always use "strict Mode"

[@Pareshbpatel]

An excellent introduction to JavaScript Strict Mode. Thanks, Kyle {2022-10-15}

[@cryofwill1416]

dude this is so gooood for debuggin and for me that im still learning JS its reaaaaaaaaaally good so i can write better now i feel

[@KoenVerheyen]

That arguments[0] = ...; thingy is quirky as hell!

[@yokowasis]

Why not use typescript like a normal person?

[@theodorealenas3171]

Does strict mode log errors or does it also change the behavior of the web app? If it does change the behavior, I'd imagine there are frameworks for only keeping strict mode in the dev version.

[@lawrencedoliveiro9104]

Errors appear in the browser console. The script will also abort.

[@theodorealenas3171]

@@lawrencedoliveiro9104 if it aborts then it shouldn't have much code per module I suspect. I find it weird I don't know.

[@broooth]

Or "use typescript"

[@javascript-zb8xe]

nice, short and clear!

[@butbutmybutt]

in classes and js loaded via es modules u don't need use strict, it's active automatically

[@raymondbyczko]

JavaScript: The Good Parts - is a good read. The behavior of 'this' is one part commented on in that book. Anyone have a timemachine to change this :)

[@saadaqmohamed2355]

Every day iam watching your videos slowly 🐌 😌

[@ColinRichardson]

I would prefer Javascript runtimes remove ASI, because, it's just annoying that people believe abusing this behavior is considered "good practice" Like saying "the legal limit of tread on a car tire is 1.6mm", so you should run it at that ALL THE TIME.. Or, the legal speed limit on a road is 50mph, so I will travel that fast ALL THE TIME regardless of icy conditions or not.

[@colinmarshall6634]

It's also bad for beginners. I'm in a full stack bootcamp where 90%+ of the class had never coded before. Having ASI is just setting them up to fail when they go learn java or python next. I think I'm going to start preaching strict mode in class just as a way to avoid syntax mistakes, but it seems to be good practice.

[@ColinRichardson]

@@colinmarshall6634 Yeah, and the beginners are not going to know about the 1 or 2 pitfalls where it is 100% required to use a semicolon.

[@sciverzero8197]

I stopped using strict mode because my code would _never_ work the way I intended it to in strict mode.

[@Abu-Lutfy]

how do you make the console tab take all the browser space ?

[@akshilverma]

Can you make a video on Shadow dom and how can one manipulate CSS in shadow dom

[@syednaqvi6572]

awesome as always

[@SteveAB4EL]

Someone at JS Central peeked at a PERL script ... *use strict;* directive.

[@technovelodos]

Yeah. I had flashbacks to the 90s seeing this, when I first started writing web apps in Perl.

[@WBraxx]

I've been using the strict mode since... well... 2012ish because of a recommendation from another developer. I've read an article online that argued that later ECMA version has it enabled by default. Now, I'm glad that I still put into my code and didn't listen to the article.

[@lawrencedoliveiro9104]

It is enabled by default (actually mandatorily) in modules.

[@WBraxx]

@@lawrencedoliveiro9104 not everything we write is a module

[@lawrencedoliveiro9104]

@@WBraxx Fun fact: you can put “type="module"” in an inline block directly in the HTML page.

[@EnzoAuditore]

Thank you for this

[@izexi]

Hi, can u pls explain how to get access to selectors that have same class names or id's so u could do onclick functions or add and delete classes or styles or data-attributes with JavaScript? Thanks

[@chinmayghule8272]

Google it.

[@brunogonzalez8490]

To select all DOM objects with the class ".selector" just use querySelectorAll, you can use forEach to iterate it. It will return a static nodeList, so if you change something after selecting those DOM elements the change will not reflect in the nodeList.

[@izexi]

@@brunogonzalez8490 its hard to understand for me how to work with concrete element that has same class with forEach I console log them, but cant understand how to onclick function them in forEach Would be nice to have good explanations how to work with arrays and element in them

[@izexi]

@@chinmayghule8272 google your life. There is a lot of trash in google when u trying to find good explanations

[@ExileEditing]

@@izexi there's a lot of good ones that usually are at the top of the page but sometimes you have to search longer or change up keywords. There should be thousands of answers on that question

[@weakinsane]

how to activate hidden typescript

[@snake1625b]

Does typescript do all these checks anyways?

[@Aedaeum]

Typescript runs in strict mode by default, though not to be confused with the tsconfig "strict" compiler option, which is typescripts strict type checking mode.

[@asagiai4965]

So strict mode is like you have more stricter teacher.

[@thedelanyo]

Does strict mode check types just like typescript do?

[@Laura69]

JavaScript cannot define types as we know them in other programming languages and strict mode does not add anything new to it.

[@boris_js]

i see a lot of tricky interview questions here

[@SoloElROY]

Nice title!

[@rishiraj2548]

Thanks

[@parlor3115]

The last one is scary ngl

[@melonenlord2723]

I have a question, maybe someone can help. How can you do something like how Date is implentated in js? You can call it without the new keyword or with the keyword and it does different things. Without it simply returns a String with the Date, with the new Keyword it logically returns an Object, but it acts like some kind of a String, so if you print it, you get the same, but without the ' ' thingies, but it's still an object that contains functions. So normally if you return an object, you see all the keys of this object and don't get a simple text. So it's some kind of return value, but return doesn't work with a class object. You can assign keys to a function, but this doesn't work with the new keyword. And you can't define a function and a class with the same name. So does someone know, how it can be called with and without new at the same time and how it only prints a kind of String line out as an object?

[@colinmarshall6634]

As a beginner, I prefer working with unix timestamp and converting the string to a number if I need to make comparisons. I've only worked with Moment for time but that solved my problems.

[@Hari-mr1st]

Each video he posts justifies the name of his channel.

[@Ctrl_Alt_Elite]

Can you get asked about strict mode in a junior dev interview?

[@harmez7]

i hope so, because its so simple

[@maheshcharyindrakanti8544]

ty bruu

[@hiwotina26]

Bravo!

[@soniablanche5672]

if you're using modules you are automatically in strict mode

[@Aalii6]

awesome!

[@oneawarer]

You can’t use the “with” keyword in strict mode.

[@soniablanche5672]

I'm pretty sure a lot of people don't even know what "with" is lmao

[@boem231]

You can use ESLint to check your code without strict mode

[@De-Coder1.0.0]

very usefull thing to know this morning. , but ppl please i have an issue , i am trying to use a button that was created and rendered because of an evenlistn like using a pop up button to redirect you BUT i can get it to work i tried the mutationoserver but didnt work , only thing that worked was setIntervals but that is not practical.

[@berrodev]

Or just use typescript 😅?

[@gasparinizuzzurro6306]

Javascript as others 'moderns' languages like python, php is, and remain still bad regardless of every effort to improve it. (like typescript, flow, coffeescript etc).

[@Niksorus]

My gosh, JS used to be such a mess 🤣

[@blackcitadel37]

The JavaScript bug I'd love to see fixed is it's very existence.

[@elephant_888]

Don’t hate on JavaScript. Whatever language you like is definitely not perfect either.

[@allan_archie]

WHY DISABLE LINE NUMBERING? MY BRAIN IS BREAKING!

[@maomorin]

Este man como le hace para ser tan inteligente

[@MrDebranjandutta]

Dart should've replaced JS, atleast with flutter the language has a chance now.

[@learnwithshaheb]

awesome

[@und0]

just use typescript omg

[@materialknight]

After seeing this, I'm even more disappointed in that the ECMA guys had the balls to call this BS behavior "features" of the laguage, and treat their readers in a disgustingly condescending way for not thinking that JS is the masterpiece of design they think it is (it's a steaming piece of crap in its design, not to mention that it was left unattended and wasn't improved in over 10 years). From section "4.3.2 The Strict Variant of ECMAScript" of the official documentation: "The ECMAScript Language recognizes the possibility that some users of the language may wish to restrict their usage of some FEATURES available in the language. They might do so in the interests of security, to avoid what THEY CONSIDER to be error-prone FEATURES, to get enhanced error checking, or for other reasons of their choosing. In support of this possibility, ECMAScript defines a strict variant of the language." Awesome video Kyle! When I see one of your videos about a topic I already know, I always learn something new 😃👍👌

[@AndrewTSq]

its a feature! for example I want a language that treats data as data. Then its up to me to use the data in the way that I want. If you write something on a paper, you dont declare that this is a string, and this is an integer. Cause it does not matter. What matters is how you use the data. And this is something every language should have in my opinion.

[@harmez7]

lets be kind, not strict

[@ankitshukla8640]

Why don't you make some tutorials in angular.

[@nibrocremulb3013]

“Are you in sloppy mode?” Depends who’s asking 😏

[@elephant_888]

😂

[@dand4485]

Kyle, love your videos, but my first computer teacher would fail you... When showing the console.log(015) and you mention putting an O (as in Oscar...) you are putting a 0 (zero) not an 'O'... Picky picky, but should really say zero if in fact it is a zero...?

[@0oh_no]

"oh" is sometimes said for zero

[@fyfoh]

Quick, someone tell 007 that he's going to fail as a spy!

[@dand4485]

@@0oh_no Just like ain't isn't a word. Or better yet i'll give you 1ohohohoh dollars, which in actuality is nothing.

[@mikevaleriano9557]

FFS, just switch to typescript and don't look back.

[@QwDragon]

Strict mode this has nothing to do with the security: first of all the code desides itself if it is writen in strict mode or not, secondly you can always access global object, there is even special globalThis word to do it. All strict mode featurtes are for catching possible bugs only. By the way, same argument names may be useful if you want to ignore these arguments like function (_, _, _, x) { return x }, but in strict mode you have to name them differently.

[@lawrencedoliveiro9104]

Strict mode requires global names to be explicitly declared as global, among other safety features.

[@QwDragon]

@@harleyspeedthrust4013 no, I haven't said such thing.

[@lawrencedoliveiro9104]

@@harleyspeedthrust4013 That’s why it was introduced.

[@mavdotj]

Minecraft mob vote. Just kidding

[@sfox-j]

nice

[@mavdotj]

Why did I post this comment? I think I was high

[@sfox-j]

@@mavdotj But your right

[@rodz]

i might love JS, but brah, this is so bad

[@almahbuby]

Sloppy 😳

[@AndrewTSq]

more like "People were so bad coders that they had to implement this..."

[@pupfriend]

good programmers make mistakes too

[@AndrewTSq]

@@pupfriend Yes. Its not JS fault that there are bugs in code. Myself grow up with poking machinecodes into c64 basic. No safetybelts there.. and sometimes it did not work.. not the c64 fault :) my fault!.

[@hexerei02021]

@@AndrewTSq cool

[@pupfriend]

@@AndrewTSq The point is that even good programmers should use tools to help stop the foot gun. John Carmack was on with Lex Fridman recently. He talked about how he took one of the Id software 3d engines and analyzed it using some code quality tools. The software he analyzed was widely regarded as one of the best engineered pieces of software around. And yet, the tools he used found all sorts of issues. I made a comment that I think was deleted by Kyle. Something like ... JS is bit like raw dogging in a whorehouse. Without protection, you'll eventually have big problems. JS has lots of obscure dangers. Good and bad developers alike should use whatever they can to help protect themselves.

[@AndrewTSq]

@@hexerei02021 I would agree if I had been good at it lol.

[@ninjaplavi]

You deserve dislike for this clickbait :D

[@elephant_888]

Why is this clickbait?

[@JeanDidier]

Would got mad the day I would console.log(015) and see 13

[@theodorealenas3171]

I got this mad when I did the same mistake in another language. I can't remember which one but it must have been C or Python. It was the standard back then.

[@AndrewTSq]

thats cause you treat the number as an octal...has nothing todo with js being wierd