DEV Community: Zulfan Hameed

Strict Mode in JavaScript

Zulfan Hameed — Sun, 28 Jun 2020 15:33:29 +0000

Why was strict mode introduced?
What is strict mode in JS?
How to enable strict mode?
What are the changes in strict mode?

The spec for ECMAScript 2020 says:

The strict variant of the language excludes some specific syntactic and semantic features of the regular ECMAScript language and modifies the detailed semantics of some features. The strict variant also specifies additional error conditions that must be reported by throwing error exceptions in situations that are not specified as errors by the non-strict form of the language.

Why was strict mode introduced?

Strict mode was introduced in ECMAScript 5 (ES5).
When JS was released, there were a few mistakes or imperfect decisions which got stuck in the language forever. To fix these decisions would mean that all the programs written before the fix would break. To make sure that didn't happen and to make the fixes too, ES5 contributors came up with a workaround where the fixes would be processed only if strict mode is enabled.

What is strict mode in JS?

Strict mode is an opt-in feature in JS which needs to be explicitly enabled. Once enabled the processing of code changes in a couple of ways:

Some JS silent errors are changed to throw error exceptions.
Prohibits use of certain syntax.
Allows JS engines to perform a few optimisations to evaluate JS code.

How to enable strict mode?

To enable strict mode "use strict;" must be placed at the top of the script. It can only be preceded by comments.
When I say it must be placed at the top of the script, it means at the top of the execution context.

It can be placed at the top of a .js file and the whole file will be processed in strict mode.

// comments...
"use strict";

// code here will be processed in strict mode
...

It can also be placed at the beginning of a function and only the code inside that function would be processed in strict mode. This comes in handy when migration of legacy codebase to strict mode can be made in small individual function-by-function pieces.

// code here will be processed in non-strict mode
var a = "non-strict code";

function strictModeCode(){
  // comments
  "use strict";

  // code here will be processed in non-strict mode
  var b = "strict mode"
}
...

JS Modules which was introduced in ES6 has strict mode enabled by default in exported modules.

function moduleFunction() {
  // because this is a module, code here is processed in 
  // strict mode by default
}
export default moduleFunction;
...

All the code inside classes are processed in strict mode by default.

class stictClass {
  // because this is inside a class, code here is processed 
  // in strict mode by default
  constructor() { ... }
}

Most of the times the code that we write is transpiled before it is run on production. Most Transpilers enable strict mode by default.

What are the changes in strict mode?

These are the restriction and exceptions in strict mode in ECMAScript 2020:

implements, interface, let, package, private, protected, public, static, and yield are reserved keywords.
Assigning values to undeclared variables will throw ReferenceError and assigning values to non-writable properties will throw TypeError.

a = "undeclared variable"; // ReferenceError
var NaN = "Read Only property" // TypeError

Using delete operator on a variable, function argument, or function name will throw a SyntaxError. When delete is used on non-configurable properties TypeError is thrown.

var a = "cool varaible";
delete a; // SyntaxError
delete Object.prototype; // TypeError

Multiple parameters with same name cannot be used in a function, generator, or asyncFunction.

function duplicateParamNames(a, a) { ... } // SyntaxError

eval or arguments cannot be used as parameter names for catch() statements.

function InvalidParamNames(eval, arguments) { ... } // SyntaxError

with() statements are not allowed.

with (expression) { ... } // SyntaxError

If the value of this is undefined or null it is not converted to the global object.
this is not coerced to an object. Boxing does not happen on the value of this.
eval or arguments cannot be used as a variable names.

var eval = "variable name is eval" // SyntaxError
var arguments = "variable name is arguments" // SyntaxError

Octal numeric literals and octal escape characters are not allowed.

var variableWithOctalLiteralAsValue = 010 // SyntaxError
var variableWithOctalEscapeCharacter = "\010"; // SyntaxError

Functions processed in strict mode define non-configurable properties callee and caller to it's arguments object. These properties are not accessible.

function CalleeAccessor() {
  return arguments.callee; // TypeError
}

function CallerAccessor() {
  return arguments.caller; // TypeError
}

Variables created inside eval code will be created in a separate execution context and the eval code cannot instantiate variables or functions in the execution context of where eval was called.
Inside a function if the value of an argument is changed it does not automatically change the associated property in arguments object.

function changeArgValue(a) {
  a = 50;
  return [a,arguments[0]];
}
var values = changeArgValue(49);
console.log(values[0]); // 50
console.log(values[1]); // 49

The properties caller and arguments inside a function cannot be changed or read.

function restrictedPropertiesAccessor(a) {
  changeArgValue.arguments; // TypeError
  changeArgValue.caller; // TypeError
}

I have tried to cover all the changes in strict mode. If I have missed something please let me know. :)

Fin.

Next post is going to be about Errors in javascript.

I have taken up a challenge to post good-to-know stuff in JS for thirty days. Please follow me @zlfnhmd for updates and to show some love❤️❤️❤️

All Reserved keywords in JavaScript

Zulfan Hameed — Fri, 26 Jun 2020 08:16:35 +0000

The spec for ECMAScript 2020 says:

A reserved word is an IdentifierName that cannot be used as an identifier.

These are the reserved keywords specified in ECMAScript 2020:

break case catch class const continue debugger default delete do else
export extends false finally for function if import in instanceof new
null return super switch this throw true try typeof var void while with

Keywords which are reserved only in certain contexts:

await yield

Keywords which are reserved only if strict mode is on:

arguments eval let static

There are a few keywords which are not currently used in the spec but are set aside for use as a reserved keyword in future specifications, they are:

enum implements interface package private protected public

Apart from the above there global properties which act as reserved keywords. These are read-only or immutable in global scope:

Infinity NaN undefined

There are also a few keywords like async which are not reserved and can be used as identifiers.

Fin.

Next post is going to be about strict mode in javascript.
I have taken up a challenge to post good-to-know stuff in JS for thirty days. Please follow me @zlfnhmd for updates and to show some love❤️❤️❤️

Dynamic Name React Component With Closure

Zulfan Hameed — Tue, 17 Mar 2020 09:32:15 +0000

I was going through the react course on @FrontendMasters by @holtbt and I noticed how he used a custom hook to return a closure of react component, it's state object and the state modifier to create a reusable component.

When I want to create a component for rendering similar elements with different data I just go ahead a create a component which excepts the dynamic data as props.
Let's take an example where we want to create multiple dropdown elements with different options. I would go ahead and create a component something like this

// DropdownElement.js
import React, { useState } from 'react';

const DropdownElement = props => {
  const { dropdownLabel, options } = props;
  const [selectedValue, updateSelectedValue] = useState(options[0]);
  return (
    <>
      <label htmlFor={dropdownLabel}>
        {dropdownLabel}
      </label>
      <select
        id={dropdownLabel}
        value={selectedValue}
        onChange={e => updateSelectedValue(e.target.value)}
        onBlur={e => updateSelectedValue(e.target.value)}
        disabled={!options.length}
      >
        {options.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </>
  );
};

export default DropdownElement;

Now if we want to create any dropdown element, we can use <DropdownElement /> passing in props with it.
Let's say we want to create a filter component for shoes which has Color and Size dropdown fields.

//shoeFilter.js
import React from 'react';
import DropdownElement from './DropdownElement';

const ShoeFilter = () => (
  <>
    <DropdownElement
      dropdownLabel="Shoe Color"
      options={["black", "red", "white"]}
    />
    <DropdownElement
      dropdownLabel="Shoe Size"
      options={["6", "7", "8", "9", "10"]}
    />
  </>
);

export default ShoeFilter;

This will create two dropdowns Shoe Color and Shoe Size. This is what people generally do, or at least this is what I do. There is nothing wrong with it. But, what if we could give the composite component <DropdownElement /> any name we want when we use it? Say for Shoe Color we could call it with <ShoeColorDropdown /> and for Shoe Size it could be <ShoeSizeDropdown /> This would certainly increase readability. So how can we do this?

import React, { useState } from 'react';

const useDropdown = (dropdownLabel, options) => {
  const [selectedValue, updateSelectedValue] = useState(options[0]);
  const DropdownComponent () => (
    <>
      <label htmlFor={dropdownLabel}>
        {dropdownLabel}
      </label>
      <select
        id={dropdownLabel}
        value={selectedValue}
        onChange={e => updateSelectedValue(e.target.value)}
        onBlur={e => updateSelectedValue(e.target.value)}
        disabled={!options.length}
      >
        {options.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </>
  );
  return DropdownComponent;
};

const ShoeFilter = () => {
  const ShoeColorDropdown = useDropdown("Shoe Color", ["black", "red", "white"]);
  const ShoeSizeDropdown = useDropdown("Shoe Size", ["6", "7", "8", "9", "10"]);
  return (
    <>
      <ShoeColorDropdown />
      <ShoeSizeDropdown />
    </>
  );
};

So what is happening here is I am giving a name to the closure which is returned when useDropdown() is invoked and since that closure returns a react component we can go ahead and render it.

Now I have used this component just to render some data, we can extend this by returning an array of objects related to the component like its state and state modifier so the parent component can directly access the component data and maybe also change it. This is a custom hook and the next post will explain it well. I will update on twitter once it's out, please show me some love there :P

Let me know your thought's.

If anyone is getting started with react, this course on @FrontendMasters by @holtbt is a great starting point. I got the idea for this pattern from his lecture. Also, the subscription to Frontend Masters is really really worth it. The quality of content is just amazing. Kudos to @1Marc for putting together an amazing platform.