Loading Now
×

What is  Strict Mode in JavaScript?

What is  Strict Mode in JavaScript?

JavaScript sometimes exhibits unexpected behaviour, and to address these issues, the concept of Strict Mode was introduced to the developer community. In contrast, the non-strict mode is often referred to as Sloppy Mode. By default, if we don’t specify strict mode, the code operates in sloppy mode.

## Enabling Strict Mode

To enable strict mode, we don’t need to do much. Simply add the following line at the beginning of your script:

“`javascript

‘use strict’;

“`

However, be cautious when using strict mode. Some environments or browsers may not support it, which could lead to different behaviour for your strict mode code. Therefore, it’s better not to rely heavily on strict mode unless you are sure about the environments where your web application will run and their support for strict mode.

### Purpose of Strict Mode

Strict mode in JavaScript is introduced for the following reasons:

1. To throw more detailed errors for some unspecified behaviours in JavaScript.

2. To help JavaScript engines optimise the code better, preventing slow performance caused by poorly optimised code.

3. To restrict developers from writing certain syntax that might be added to JavaScript in the future.

To demonstrate these examples, you can either create a new script file and write the code to test it, or use an existing HTML file and link it to a `script.js` file.

## Applying Strict Mode

Strict mode can be applied in two ways:

1. To the entire script.

2. To specific functions.

### Applying Strict Mode to the Entire Script

First, clear all the code in `script.js`. Then, try the following:

“`javascript

‘use strict’;

var name = ‘Zonayed Ahmed’;

var age = 10;

var address = ‘Comilla’;

console.log(‘My name is ‘ + name + ‘ and I am ‘ + age + ‘ years old!’);

function aFunc() {

    var job = ‘Student’;

    console.log(‘A Function with Strict Mode Enabled’);

}

aFunc();

console.log(‘I am a ‘ + job + ‘ And I am from ‘ + address);

“`

Running this code will result in an error:

“`

Uncaught ReferenceError: job is not defined

    at aFunc (script.js:11)

    at script.js:15

“`

This means the strict mode is applied to the entire script.

### Applying Strict Mode to Specific Functions

Now, we can apply strict mode to just a specific function. Clear the `script.js` file and write the following code:

“`javascript

var name = ‘Zonayed Ahmed’;

var age = 10;

var address = ‘Comilla’;

console.log(‘My name is ‘ + name + ‘ and I am ‘ + age + ‘ years old!’);

function aFunc() {

    ‘use strict’;

    var job = ‘Student’;

    console.log(‘A Function with Strict Mode Enabled’);

}

aFunc();

console.log(‘I am a ‘ + job + ‘ And I am from ‘ + address);

“`

This code will result in an error only within the function:

“`

Uncaught ReferenceError: job is not defined

    at aFunc (script.js:7)

    at script.js:10

“`

### Non-Strict or Sloppy Mode

To run the same program in non-strict or sloppy mode, which is JavaScript’s default behaviour, we don’t need to mention anything:

“`javascript

var name = ‘Zonayed Ahmed’;

var age = 10;

var address = ‘Comilla’;

console.log(‘My name is ‘ + name + ‘ and I am ‘ + age + ‘ years old!’);

function aFunc() {

    job = ‘Student’;

    console.log(‘A Function with strict Mode Enabled’);

}

aFunc();

console.log(‘I am a ‘ + job + ‘ And I am from ‘ + address);

“`

Output:

“`

My name is Zonayed Ahmed and I am 10 years old!

A Function with Strict Mode Enabled

I am a Student And I am from Comilla

“`

### Behaviour of JavaScript in Strict Mode

In this mode, you cannot accidentally declare global variables. For example, if we write the following code in `script.js`:

“`javascript

var name = ‘Zonayed Ahmed’;

nama = ‘Ahmed Zonayed’; // Typo

console.log(‘Name:’, name);

console.log(‘Mistakenly Created:’, nama);

“`

Output in developer console:

“`

Name: Zonayed Ahmed

Mistakenly Created: Ahmed Zonayed

“`

This code works perfectly, and both `name` and `nama` are treated as separate variables. However, in strict mode, this won’t work:

“`javascript

‘use strict’;

var name = ‘Zonayed Ahmed’;

nama = ‘Ahmed Zonayed’; // Typo

console.log(‘Name:’, name);

console.log(‘Mistakenly Created:’, nama);

“`

Output:

“`

Uncaught ReferenceError: nama is not defined

    at script.js:4

“`

In strict mode, no variable will be set as a global variable by mistake.

### Object Case

Suppose we have an object, and we want to prevent new properties from being assigned to it. JavaScript provides a method `Object.preventExtensions(…)` for this purpose. It takes the object as the first argument and prevents new properties from being assigned to it. 

“`javascript

var obj = {

    name: ‘Zonayed Ahmed’,

    job: ‘Student’

};

Object.preventExtensions(obj);

// Assign a new property

obj.age = 13;

// Try to print this new property

console.log(obj.age);

“`

In a non-strict mode, the output will be `undefined`.

However, in strict mode, this code will result in an error:

“`javascript

‘use strict’;

var obj = {

    name: ‘Zonayed Ahmed’,

    job: ‘Student’

};

Object.preventExtensions(obj);

// Assign a new property

obj.age = 35;

// Try to print this new property

console.log(obj.age);

“`

Output:

“`

Uncaught TypeError: Cannot add property age, object is not extensible

    at script.js:11

“`

This is the primary job of strict mode, to help you write JavaScript more securely.

Post Comment