JavaScript Use Strict
"use strict"; This line of code indicates that JavaScript should run in "strict mode," enforcing a more rigorous set of rules.
The "use strict" Directive
The "use strict" instruction was introduced in ECMAScript version 5.
This is not a sentence but an actual expression that previous versions of JavaScript used to overlook.
The aim of adding "use strict" is to signal that the code must run in a mode with strict rules.
In strict mode, you are not allowed to use variables that haven't been declared, for instance.
The table shows which browser version first fully supports the directive, with the numbers indicating this
information.
Enable strict mode in your programs for cleaner code. It ensures you write code without using undeclared variables.
The phrase "use strict" is merely a string. Therefore, Internet Explorer 9 won't generate an error, even if it doesn't comprehend it.
Declaring Strict Mode
Enabling strict mode involves inserting "use strict"; at the start of a script or within a function.
Placed at the start of a script, this statement applies to the entire script (all the code in the script will run in strict mode):
Created within a function, it has a limited scope (strict mode applies only to the code within that function):
The "use strict"; Syntax
To enable strict mode in JavaScript, the syntax was created to work seamlessly with older JavaScript versions.
Creating a number (like 4 + 5;) or a text (like "John Doe";) in a JavaScript program doesn't cause any extra effects. It just turns into a variable that doesn't really exist and stops there.
Only modern compilers that can comprehend its significance are affected by the "use strict"; directive.
Why Strict Mode?
Using strict mode in JavaScript makes it simpler to write code that is more secure.
Strict mode turns previously allowed "bad syntax" into actual errors.
For instance, in regular JavaScript, if you make a mistake in typing a variable name, a new global variable is created. However, in strict mode, an error will be triggered, preventing the unintentional creation of a global variable.
In regular JavaScript, if a developer tries to assign values to properties that cannot be written to, there won't be any error feedback.
In strict mode, if you try to change a property that can't be changed, read a property that can only be read, access a property or variable that doesn't exist, or interact with an object that doesn't exist, it will cause an error.
Not Allowed in Strict Mode
You cannot use a variable without first declaring it.
Things can also be considered as variables.
You can't use an object without declaring it first.
You cannot delete a variable or object.
Prohibiting the removal of a function.
Copying a parameter name is not permitted.
You can't use octal numeric literals in this context.
You can't use octal escape characters.
Attempting to modify a property set as read-only is prohibited.
You can't write to a property that is designed to only be read.
Removing a property that cannot be deleted is not permitted.
You can't use the term eval as a variable.
The term arguments cannot be used as a variable.
The with statement is prohibited:
Due to security concerns, the use of eval() is restricted from creating variables in the same scope from where it was invoked.
In strict mode, the behavior of the this keyword within functions is distinct.
The this keyword points to the object that triggered the function.
If you don't mention the object, functions in strict mode will give back 'undefined,' while functions in normal mode will return the global object (window):
Future Proof!
In strict mode, you cannot use certain keywords that are reserved for upcoming versions of JavaScript as names for your variables.
These are:
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
Watch Out!
The "use strict" instruction must be placed at the start of a script or a function.
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>It's not okay to use a variable without saying what it is first.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
x = 3.14; // This will cause an error (x is not defined).
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Global "use strict" declaration.</h2>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
myFunction();
function myFunction() {
y = 3.14; // This will cause an error (y is not defined)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>When you put "use strict" in a function, it means that only errors within that function will show up.</p>
<p>Activate debugging in your browser (F12) to see the error report.</p>
<script>
x = 3.14; // This will not cause an error.
myFunction();
function myFunction() {
"use strict";
y = 3.14; // This will cause an error (y is not defined).
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Not declaring a variable before using it is not allowed.</h3>
<p>Turn on debugging in your browser by pressing F12. This will show you the error report.</p>
<script>
"use strict";
x = 3.14; // This will cause an error (x is not defined).
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Not declaring a variable before using it is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
x = {
p1: 10,
p2: 20
}; // This will cause an error (x is not defined).
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Deleting a variable (or object) is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let x = 3.14;
delete x; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Deleting a function is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
function x(p1, p2) {};
delete x; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Duplicating a parameter name is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
function x(p1, p1) {}; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Octal numeric literals are not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let x = 010; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Octal escape characters are not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let x = "\010"; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Writing to a read-only property is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
const obj = {};
Object.defineProperty(obj, "x", {
value: 0,
writable: false
});
obj.x = 3.14; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Writing to a get-only property is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
const obj = {
get x() {
return 0
}
};
obj.x = 3.14; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>Deleting an udeletable property is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
delete Object.prototype; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>The string "eval" cannot be used as a variable.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let eval = 3.14; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>The string "arguments" cannot be used as a variable.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let arguments = 3.14; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>The with statement is not allowed.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
with(Math) {
x = cos(2)
}; // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>For safety, the function eval() cannot make new variables in the same place it's called from.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
eval("x = 2");
alert(x); // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>For safety, eval() can't make new variables where it's used.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
eval("var x = 2");
alert(x); // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Using eval()</h2>
<h3>Due to security concerns, the function eval() cannot make new variables within the area it's called from.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
eval("let x = 2");
alert(x); // This will cause an error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>In functions, when you use "this", it doesn't always refer to the global object unless you specifically mention it.</h3>
<script>
"use strict";
function myFunction() {
// alert(this); //
}
myFunction();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>With "use strict":</h2>
<h3>In strict mode, you can't use words that might be reserved for future use.</h3>
<p>To find out what's wrong, turn on debugging in your browser by pressing F12.</p>
<script>
"use strict";
let public = 1500; // This will cause an error
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery