DEV Community: Parwinder 👨🏻‍💻

IIFE: Immediately Invoked Function Expressions

Parwinder 👨🏻‍💻 — Sat, 17 Oct 2020 17:28:59 +0000

IIFE is a function that is declared and invoked at the same time. You create them by using anonymous functions and enclosing the function in round brackets (). You can then invoke them by merely calling the expression immediately with a followed pair of round brackets.

(function(name){ // function expression enclosed in ()
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments

Immediately invoked function expressions are helpful in:

Avoiding variable hoisting from within blocks
Not polluting the global scope
Allowing us to access public methods while maintaining privacy for variables defined within the IIFE

In short, Immediately Invoked Function Expression is an excellent way to protect the scope of your function and the variables in it.

Just because I wrote the above function using the function keyword does not mean you have to. With ES6 popularity, you can use arrow functions as well.

(name => {
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder");

Another way to create IIFE is by using the negation operator !. When we use the function keyword, what we are creating is a function declaration.

function myName() {
    return "Parwinder";
}

console.log(myName()); // Parwinder

You have to invoke the declaration to the return eventually. If we prefix the function with negation, it becomes a function expression.

!function myName() {
    return "Parwinder";
}

But this alone will not invoke it! It has only turned the function into an expression.

We must use () to call the method.

!function myName() {
    console.log("Parwinder"); // Parwinder
}();

Ta-Da! Instead of creating a IIFE using (function => {})() we have done it using !function => {}(). No need to wrap our function block in ().

🚨 Do you see that I changed the return statement in my last example to a console.log? It is on purpose. IIFE will always return undefined. If we use the negation operator to create an IIFE, it will return true because !undefined is true.

Polymorphism in JavaScript

Parwinder 👨🏻‍💻 — Sun, 11 Oct 2020 17:08:07 +0000

Polymorphism is a concept from Object-Oriented Programming. It is the capability to create a property, a function, or an object that has more than one implementation.

It allows us to substitute properties or methods in classes that have common functionality. It is similar to method overriding. With polymorphism, we can implement a standard interface but still serve slightly different needs or scenarios.

function Employee(name) {
    this.name = name;
    this.getName = () => {
        return this.name;
    }
}

const employee = new Employee("Parwinder");

console.log(employee.getName()); // Parwinder

Employee.prototype.getDetails = function () {
    return this.name.toUpperCase();
}

console.log(employee.getDetails()); // PARWINDER

You can see how Employee will implement the standard interface but depending on where we use the instance of Employee we can change the behavior slightly to fit our needs. We could either get the name as is or get the name in all uppercase.

We can do the same with classes.

class Shape {
    area() {
        return 0;
    }
}

class Circle extends Shape {
    constructor (radius) {
        super(); // needed to use this
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius * this.radius;
    }
}

class Rectangle extends Shape {
    constructor (width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

const circle = new Circle(2);
const rectangle = new Rectangle(5, 6);

console.log(circle.area());
console.log(rectangle.area());

Shape is the base class that we use to create Circle and Rectangle by extending it. They all have the area method but change the implementation based on the type of shape.

Memoization in JavaScript

Parwinder 👨🏻‍💻 — Sat, 10 Oct 2020 22:46:56 +0000

JavaScript and functional programming go hand in hand. There are times when our functions will be expensive in terms of performance. Performing the same functions with the same input over and over again could degrade the experience of the application and it is unnecessary.

Memoization is an optimization technique in which we cache the function results. If we provide the same input again, we fetch the result from the cache instead of executing code that can cause a performance hit.

In case the result is not cached, we would execute the function and cache the result. Let's take an example of finding the square of a number.

const square = () => {
    let cache = {}; // set cache
    return (value) => {
        // if exists in cache return from cache
        if (value in cache) {
            console.log("Fetching from cache");
            return cache[value];
        } else {
            // If not in cache perform operation
            console.log("Performing expensive query");
            const result = value * value;
            cache[value] = result; // store the value in cache
            return result; // return result
        }
    }
}

const sq = square();
console.log(sq(21)); // Performing expensive query, 441
console.log(sq(21)); // Fetching from cache, 441

Why or when to use it?

For expensive function calls, i.e. functions that do network calls where the output might not change or functions with large computations or disk I/O.
For pure functions (where function output stays the same given the same input).
For functions with a limited range of input but highly recurring.

Currying

Parwinder 👨🏻‍💻 — Sun, 04 Oct 2020 16:58:25 +0000

Currying is a technique in which you make a function that takes multiple arguments into a series of functions that each take only one argument. It is translating a function from callable as f(a, b, c, n) into callable as f(a)(b)(c)(n).

Let's start with an example of a function that takes two arguments.

const multiply = (a, b) => {
    return a * b;
}

console.log(multiply(4, 3)); // 12

We will convert this into a series of functions where each one takes only one argument (currying):

const multiply = (a) => {
    return (b) => {
        return a * b;
    }
}

console.log(multiply(4)(3)); // 12

Using shorthand:

const multiply = a => b => a * b;
console.log(multiply(4)(3)); // 12

The outer function takes in a and returns a function that takes in b which eventually returns the multiplication of a and b.

Currying is commonly associated with partial application. The idea is to create a function with two or more arguments, and we only know the value(s) for some of those arguments. We can use partial application (currying) to supply the knows values and get a function in return that works with unknowns (at the moment). Once the remaining arguments are known, we can execute the returned function.

I, in all honesty, have not used currying that much in real-life applications. There are other ways to accomplish what we are trying to do with currying (classes, callback functions and higher-order functions). It is good to know.

Terminal of Choice: iTerm2

Parwinder 👨🏻‍💻 — Sat, 26 Sep 2020 23:25:41 +0000

One of the critical tools or piece of software in a developers life is the terminal or command prompt. If you are on Windows, you probably use cmd or PowerShell. If you are on Linux, you have the choice of a plethora of shells. It is the same with Mac.

I have been a Mac user for about 12 years now. It gives me the power of Linux paired with the friendliness of Windows. I would say it is a happy middle for me. It's not perfect, but it does the job reasonably well!

The terminal shipped with Mac comes with bash shell by default. If you are using Catalina or above, it has been switched to zsh by default. I will deep dive into my shell customization in another post.

Background

I started coding professionally around 2008. Coding for personal projects began in early 2004. So it's been a 16-year journey and counting. Here are a few terminal replacements I have used in the past few years:

Cmder: To date, my favorite terminal on Windows.
Hyper: It is a beautiful and extensible command-line interface built on open web standards. JavaScript developers will feel right at home.
iTerm2: Finally settled on iTerm 2.

I've been with iTerm2 for the last five years. I'm absolutely in love ❤️ with it because:

Highly configurable and multi-profile support
Split Panes
Autocomplete
Paste History
Jump to Window shortcuts
Inline Images and a Password Manager!
Free 💰

Downloads

You can get iTerm2 here. Keep in mind that it is only available for Mac.
Powerline Patched fonts are available here
Cobalt2 Color Scheme is available here
Direct link to my profile JSON is here

My Setup

Now comes the important part, my setup of iTerm2. I am going to share my extensions and settings for the terminal. You can use them; as you feel like. Below is how my terminal looks like:

Sync your iTerm2 preferences across multiple systems. Go to Preference. Select General > Preferences and check the box for Load preferences from a custom folder or URL. You can use a service like Dropbox or Google Drive.
To make the title bar match the rest of the color scheme, select Appearance > General > Theme > Minimal.
To have an unlimited amount of scroll back available in the terminal, select Profiles > Terminal > Scrollback Buffer and check Unlimited scrollback. I will attach my profile with this post so you can import it directly.

I make use of ligatures and anti-aliasing for my text. For fonts, I use powerline patched fonts, specifically Inconsolata. Download link above.

For colors, I use cobalt2. It is a theme created by Wes Bos. Download link above.

Here is my iTerm2 profile I promised. You might have to change the Working Directory. Direct link to my profile JSON is here. I keep it up to date. Happy Coding 👨🏼‍💻



{
  "Set Local Environment Vars" : true,
  "Working Directory" : "\/Users\/Parwinder",
  "Prompt Before Closing 2" : 0,
  "Selected Text Color" : {
    "Green Component" : 0.70916998386383057,
    "Red Component" : 0.70916998386383057,
    "Blue Component" : 0.70916998386383057
  },
  "Rows" : 45,
  "Ansi 11 Color" : {
    "Green Component" : 0.78536456823348999,
    "Red Component" : 0.92833864688873291,
    "Blue Component" : 0.035555899143218994
  },
  "Use Italic Font" : true,
  "Foreground Color" : {
    "Green Component" : 1,
    "Red Component" : 1,
    "Blue Component" : 1
  },
  "Right Option Key Sends" : 0,
  "Character Encoding" : 4,
  "Selection Color" : {
    "Green Component" : 0.20615114271640778,
    "Red Component" : 0.09597768634557724,
    "Blue Component" : 0.31055498123168945
  },
  "Triggers" : [

  ],
  "Blend" : 0.30000001192092896,
  "Mouse Reporting" : true,
  "Ansi 4 Color" : {
    "Green Component" : 0.37805050611495972,
    "Red Component" : 0.079237513244152069,
    "Blue Component" : 0.82438474893569946
  },
  "Non-ASCII Anti Aliased" : true,
  "Sync Title" : false,
  "Disable Window Resizing" : true,
  "Close Sessions On End" : true,
  "Jobs to Ignore" : [
    "rlogin",
    "ssh",
    "slogin",
    "telnet"
  ],
  "Non-ASCII Ligatures" : true,
  "Scrollback Lines" : 0,
  "Scrollback in Alternate Screen" : true,
  "Scrollback With Status Bar" : false,
  "Hide After Opening" : false,
  "Flashing Bell" : false,
  "Cursor Guide Color" : {
    "Red Component" : 0.70213186740875244,
    "Color Space" : "sRGB",
    "Blue Component" : 1,
    "Alpha Component" : 0.25,
    "Green Component" : 0.9268307089805603
  },
  "BM Growl" : true,
  "Ansi 3 Color" : {
    "Green Component" : 0.89706093072891235,
    "Red Component" : 0.99814993143081665,
    "Blue Component" : 0.039139740169048309
  },
  "Link Color" : {
    "Red Component" : 0,
    "Color Space" : "sRGB",
    "Blue Component" : 0.73423302173614502,
    "Alpha Component" : 1,
    "Green Component" : 0.35916060209274292
  },
  "Shortcut" : "",
  "Background Image Location" : "",
  "Bold Color" : {
    "Green Component" : 0.98771905899047852,
    "Red Component" : 0.96919095516204834,
    "Blue Component" : 1
  },
  "Unlimited Scrollback" : true,
  "Custom Command" : "No",
  "Smart Selection Rules" : [
    {
      "notes" : "Word bounded by whitespace",
      "regex" : "\\S+",
      "precision" : "low"
    },
    {
      "notes" : "C++ namespace::identifier",
      "regex" : "([a-zA-Z0-9_]+::)+[a-zA-Z0-9_]+",
      "precision" : "normal"
    },
    {
      "notes" : "Paths",
      "regex" : "\\~?\/?([[:letter:][:number:]._-]+\/+)+[[:letter:][:number:]._-]+\/?",
      "precision" : "normal"
    },
    {
      "notes" : "Quoted string",
      "regex" : "@?\"(?:[^\"\\\\]|\\\\.)*\"",
      "precision" : "normal"
    },
    {
      "notes" : "Java\/Python include paths",
      "regex" : "([[:letter:][:number:]._]+\\.)+[[:letter:][:number:]._]+",
      "precision" : "normal"
    },
    {
      "notes" : "mailto URL",
      "regex" : "\\bmailto:([a-z0-9A-Z_]+@)?([a-zA-Z0-9\\-]+\\.)*[a-zA-Z0-9\\-]+\\b",
      "precision" : "normal"
    },
    {
      "notes" : "Obj-C selector",
      "regex" : "@selector\\([^)]+\\)",
      "precision" : "high"
    },
    {
      "notes" : "email address",
      "regex" : "\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}\\b",
      "precision" : "high"
    },
    {
      "notes" : "HTTP URL",
      "regex" : "https?:\/\/([a-z0-9A-Z]+(:[a-zA-Z0-9]+)?@)?[a-z0-9A-Z]+(\\.[a-z0-9A-Z]+)*((:[0-9]+)?)(\/[a-zA-Z0-9;\/\\.\\-_+%~?&@=#\\(\\)]*)?",
      "precision" : "very_high"
    },
    {
      "notes" : "SSH URL",
      "regex" : "\\bssh:([a-z0-9A-Z_]+@)?([a-zA-Z0-9\\-]+\\.)*[a-zA-Z0-9\\-]+\\b",
      "precision" : "very_high"
    },
    {
      "notes" : "Telnet URL",
      "regex" : "\\btelnet:([a-z0-9A-Z_]+@)?([a-zA-Z0-9\\-]+\\.)*[a-zA-Z0-9\\-]+\\b",
      "precision" : "very_high"
    }
  ],
  "Keyboard Map" : {
    "0xf700-0x260000" : {
      "Text" : "[1;6A",
      "Action" : 10
    },
    "0x37-0x40000" : {
      "Text" : "0x1f",
      "Action" : 11
    },
    "0x32-0x40000" : {
      "Text" : "0x00",
      "Action" : 11
    },
    "0xf709-0x20000" : {
      "Text" : "[17;2~",
      "Action" : 10
    },
    "0xf70c-0x20000" : {
      "Text" : "[20;2~",
      "Action" : 10
    },
    "0xf729-0x20000" : {
      "Text" : "[1;2H",
      "Action" : 10
    },
    "0xf72b-0x40000" : {
      "Text" : "[1;5F",
      "Action" : 10
    },
    "0xf705-0x20000" : {
      "Text" : "[1;2Q",
      "Action" : 10
    },
    "0xf703-0x260000" : {
      "Text" : "[1;6C",
      "Action" : 10
    },
    "0xf700-0x220000" : {
      "Text" : "[1;2A",
      "Action" : 10
    },
    "0xf701-0x280000" : {
      "Text" : "0x1b 0x1b 0x5b 0x42",
      "Action" : 11
    },
    "0x38-0x40000" : {
      "Text" : "0x7f",
      "Action" : 11
    },
    "0x33-0x40000" : {
      "Text" : "0x1b",
      "Action" : 11
    },
    "0xf703-0x220000" : {
      "Text" : "[1;2C",
      "Action" : 10
    },
    "0xf701-0x240000" : {
      "Text" : "[1;5B",
      "Action" : 10
    },
    "0xf70d-0x20000" : {
      "Text" : "[21;2~",
      "Action" : 10
    },
    "0xf702-0x260000" : {
      "Text" : "[1;6D",
      "Action" : 10
    },
    "0xf729-0x40000" : {
      "Text" : "[1;5H",
      "Action" : 10
    },
    "0xf706-0x20000" : {
      "Text" : "[1;2R",
      "Action" : 10
    },
    "0x34-0x40000" : {
      "Text" : "0x1c",
      "Action" : 11
    },
    "0xf700-0x280000" : {
      "Text" : "0x1b 0x1b 0x5b 0x41",
      "Action" : 11
    },
    "0x2d-0x40000" : {
      "Text" : "0x1f",
      "Action" : 11
    },
    "0xf70e-0x20000" : {
      "Text" : "[23;2~",
      "Action" : 10
    },
    "0xf702-0x220000" : {
      "Text" : "[1;2D",
      "Action" : 10
    },
    "0xf703-0x280000" : {
      "Text" : "0x1b 0x1b 0x5b 0x43",
      "Action" : 11
    },
    "0xf700-0x240000" : {
      "Text" : "[1;5A",
      "Action" : 10
    },
    "0xf707-0x20000" : {
      "Text" : "[1;2S",
      "Action" : 10
    },
    "0xf70a-0x20000" : {
      "Text" : "[18;2~",
      "Action" : 10
    },
    "0x35-0x40000" : {
      "Text" : "0x1d",
      "Action" : 11
    },
    "0xf70f-0x20000" : {
      "Text" : "[24;2~",
      "Action" : 10
    },
    "0xf703-0x240000" : {
      "Text" : "[1;5C",
      "Action" : 10
    },
    "0xf701-0x260000" : {
      "Text" : "[1;6B",
      "Action" : 10
    },
    "0xf702-0x280000" : {
      "Text" : "0x1b 0x1b 0x5b 0x44",
      "Action" : 11
    },
    "0xf72b-0x20000" : {
      "Text" : "[1;2F",
      "Action" : 10
    },
    "0x36-0x40000" : {
      "Text" : "0x1e",
      "Action" : 11
    },
    "0xf708-0x20000" : {
      "Text" : "[15;2~",
      "Action" : 10
    },
    "0xf701-0x220000" : {
      "Text" : "[1;2B",
      "Action" : 10
    },
    "0xf70b-0x20000" : {
      "Text" : "[19;2~",
      "Action" : 10
    },
    "0xf702-0x240000" : {
      "Text" : "[1;5D",
      "Action" : 10
    },
    "0xf704-0x20000" : {
      "Text" : "[1;2P",
      "Action" : 10
    }
  },
  "Log Directory" : "",
  "Use Canonical Parser" : false,
  "Ansi 14 Color" : {
    "Green Component" : 0.89121149225051699,
    "Red Component" : 0.41672572861338453,
    "Blue Component" : 0.97867441177368164
  },
  "Ansi 2 Color" : {
    "Green Component" : 0.87031603506787336,
    "Red Component" : 0.21895777543895642,
    "Blue Component" : 0.13008742736566298
  },
  "Background Image Is Tiled" : false,
  "Send Code When Idle" : false,
  "ASCII Anti Aliased" : true,
  "Tags" : [

  ],
  "Ansi 9 Color" : {
    "Green Component" : 0.052976857870817184,
    "Red Component" : 0.95708823204040527,
    "Blue Component" : 0.090362116694450378
  },
  "Use Bold Font" : true,
  "Silence Bell" : false,
  "Ansi 12 Color" : {
    "Green Component" : 0.3333333432674408,
    "Red Component" : 0.3333333432674408,
    "Blue Component" : 1
  },
  "Window Type" : 0,
  "Allow Title Reporting" : false,
  "Use Bright Bold" : true,
  "Cursor Text Color" : {
    "Green Component" : 1,
    "Red Component" : 0.99659550189971924,
    "Blue Component" : 0.9480862021446228
  },
  "Default Bookmark" : "No",
  "Cursor Color" : {
    "Green Component" : 0.79959547519683838,
    "Red Component" : 0.94297069311141968,
    "Blue Component" : 0.03614787757396698
  },
  "Disable Smcup Rmcup" : false,
  "Name" : "Default",
  "Blinking Cursor" : false,
  "Guid" : "59BB2A49-982B-40F8-9423-BAA42EB8F948",
  "Ansi 1 Color" : {
    "Green Component" : 0,
    "Red Component" : 1,
    "Blue Component" : 0
  },
  "Idle Code" : 0,
  "Ansi 10 Color" : {
    "Green Component" : 0.81519794464111328,
    "Red Component" : 0.23300750553607941,
    "Blue Component" : 0.11517760157585144
  },
  "Ansi 8 Color" : {
    "Green Component" : 0.33333333333333331,
    "Red Component" : 0.33333333333333331,
    "Blue Component" : 0.33333333333333331
  },
  "Badge Color" : {
    "Red Component" : 1,
    "Color Space" : "sRGB",
    "Blue Component" : 0,
    "Alpha Component" : 0.5,
    "Green Component" : 0.1491314172744751
  },
  "Automatically Log" : false,
  "Smart Cursor Color" : true,
  "Semantic History" : {
    "action" : "best editor",
    "text" : "",
    "editor" : "com.sublimetext.3"
  },
  "Ambiguous Double Width" : false,
  "Blur Radius" : 2,
  "Ansi 0 Color" : {
    "Green Component" : 0,
    "Red Component" : 0,
    "Blue Component" : 0
  },
  "Cursor Type" : 2,
  "Blur" : false,
  "Normal Font" : "InconsolataForPowerline 14",
  "Vertical Spacing" : 1,
  "Disable Printing" : false,
  "Ansi 7 Color" : {
    "Green Component" : 0.73333334922790527,
    "Red Component" : 0.73333334922790527,
    "Blue Component" : 0.73333334922790527
  },
  "Command" : "",
  "Terminal Type" : "xterm-256color",
  "Horizontal Spacing" : 1,
  "Option Key Sends" : 0,
  "Blink Allowed" : false,
  "Minimum Contrast" : 0,
  "Ansi 15 Color" : {
    "Green Component" : 1,
    "Red Component" : 1,
    "Blue Component" : 1
  },
  "Ansi 6 Color" : {
    "Green Component" : 0.73333334922790527,
    "Red Component" : 0,
    "Blue Component" : 0.73333334922790527
  },
  "Transparency" : 0.021613801892339839,
  "Initial Text" : "",
  "Background Color" : {
    "Green Component" : 0.15233974158763885,
    "Red Component" : 0.073702715337276459,
    "Blue Component" : 0.21839480102062225
  },
  "Screen" : -1,
  "Non Ascii Font" : "InconsolataForPowerline 12",
  "Ansi 13 Color" : {
    "Green Component" : 0.3333333432674408,
    "Red Component" : 1,
    "Blue Component" : 1
  },
  "Columns" : 120,
  "Visual Bell" : true,
  "ASCII Ligatures" : true,
  "Custom Directory" : "No",
  "Ansi 5 Color" : {
    "Green Component" : 0,
    "Red Component" : 1,
    "Blue Component" : 0.36536297202110291
  }
}

Git Ignore Locally: Ignore Files in Local Copy

Parwinder 👨🏻‍💻 — Sun, 20 Sep 2020 18:13:33 +0000

The blog post is going to a short and sweet writeup about one of the git aliases that I have created in my gitconfig. I use this shortcut quite often and it could come in handy for developers using Git as version control.

.gitconfig is the file that stores the basic settings for Git installed on your machine. It includes your commit name and email. You can also set your diff and merge tool here, among other things.

Locations

For Windows

%USERPROFILE%\.gitconfig

For Mac

~/.gitconfig

Problem

Imagine you are working on a project. The project requires modifications to specific files to run on your machine. You do not want to commit these changes, but Git tracks these files.

These files will clutter the commit tree in your source control manager or when you do git status.

The above is just one scenario. There could be any reason for you to have some local modifications to files which you should not commit and like I said you don't want to commit them.

Solution

You can ignore these files locally without un-tracking them!

Add the following aliases to your .gitconfig file.

ignore = update-index --skip-worktree
unignore = update-index --no-skip-worktree
ignored = !git ls-files -v | grep \"^S\"

It gives you three Git shortcuts ignore (to locally ignore some files), unignore (to stop the local ignore on specific files), and ignored (to see the list of files you have ignored).

Execute any of the shortcuts, prefixed with git, in your terminal. Like below:

> git ignored

Extending JavaScript Built-in Classes/Objects

Parwinder 👨🏻‍💻 — Sun, 13 Sep 2020 18:09:06 +0000

You might want to extend the functionality provided by JS built-in objects or classes. Maybe there is functionality on Arrays or Strings that is not yet supported by JavaScript, but you use it heavily in your project. Typically you can do this by creating a standard utility function.

Let's take the example of shuffling an array. I can create a shuffle function that takes in an array.

function shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        const random = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[random]] = [arr[random], arr[i]];
    }
    return arr;
}

const input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffle(input)); // [ 7, 8, 10, 3, 2, 9, 5, 1, 4, 6 ]

Note: You will get a different console output compared to me as we are randomly shuffling an array.

We could, however, add this shuffle method to the prototype of Array so we can use it as in-built methods (pop, slice, sort).

Array.prototype.shuffle = function () {
    let arr = this;
    for (let i = arr.length - 1; i > 0; i--) {
        const random = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[random]] = [arr[random], arr[i]];
    }
    return arr;
}

const input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(input.shuffle()); // [ 2, 4, 9, 8, 5, 7, 3, 10, 6, 1 ]

Now we have declared it on the prototype, and we can call it on any array using the format input.shuffle().

Disadvantages

A lot of people do not recommend extending built-in classes or objects. It is a controversial topic. There are a couple of disadvantages:

ECMAScript may implement its version of the custom method we created. For example, if the next ES version brings in shuffle property to Arrays, we will have a conflict.
Nothing is stopping us from overwriting the functionality of existing methods. For example, I might change the behavior of slice method on Arrays with a custom function. Doing so is not a good practice for an enterprise app as others might be dependent on in-built methods. I would be breaking functionality for a lot of people in the organization.

Class: Static Members

Parwinder 👨🏻‍💻 — Sat, 12 Sep 2020 21:20:56 +0000

Classes in JavaScript can have static methods and properties. These members are members of the class, not members of the objects created from the class. Most likely, you would create them as utility methods (to compare class instance, clone or create objects).

Static methods

class Person {
    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    static orderByAge(a, b) {
        return a.age - b.age;
    }
}

const employees = [
    new Person("Parwinder", 22),
    new Person("Robert", 33),
    new Person("George", 18),
    new Person("Eliu", 101),
    new Person("Gaurav", 39)
]

employees.sort(Person.orderByAge);

console.log(employees);

In the example above, the Person class creates a person with a name and their age. We have a static method in the class called orderByAge. This method compares the age of all Person. The ordering of age does not belong to one specific person but to a group of them (or the parent class they were all created from).

The output of the above code will be:

[ Person { name: 'George', age: 18 },
  Person { name: 'Parwinder', age: 22 },
  Person { name: 'Robert', age: 33 },
  Person { name: 'Gaurav', age: 39 },
  Person { name: 'Eliu', age: 101 } ]

Keep in mind that static methods are methods on the class alone! You cannot do the last two console logs below:

class Person {
    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    static orderByAge(a, b) {
        return a.age - b.age;
    }

    static sayMyName(person) {
        return person.name;
    }
}

const me = new Person("Parwinder", 101);

console.log(me.name); // Parwinder => this is valid
console.log(me.age); // 101 => this is valid
console.log(me.orderByAge); // undefined or Property 'orderByAge' is a static member of type 'Person' 🚨
console.log(me.sayMyName); // undefined or Property 'sayMyName' is a static member of type 'Person' 🚨

Static Properties (or public static fields)

🚨 This feature is in stage 3 of the ES proposal. Only Chrome 72 or above supports it at the moment. Check the proposal here and the compatibility here

We use static fields when a field needs to exist only once per class and not on every instance we create. It could be used for storing config, endpoints, cache and so on.

class Base {
    static field = "Base Class";
}

class Child extends Base {

}

class GrandChild extends Child {
    static field = "Grand Child Class";
}

console.log(Base.field); // Base Class
console.log(Child.field); // Base Class
console.log(GrandChild.field); // Grand Child Class

What are, Mixins?

Parwinder 👨🏻‍💻 — Sat, 12 Sep 2020 19:23:37 +0000

Introduction

Throughout all the blog posts on my blog, we have realized that prototypical inheritance works reasonably well in JavaScript. We do know; however, there is only one [[Prototype]] for each object. It means that an object can only inherit from one other object. The same goes for classes as we can only extend from one other class. JavaScript doesn't support multiple inheritance.

A mixin could is a class that has methods which we can use in our class without inheriting from the mixin class. It is a way of adding properties to object without using inheritance.

In theory, it would look something like this.

Inheritance in classes

class B extends A {}

Inheritance but with Mixin (M1)

class B extends A with M1 {}

Inheritance with multiple Mixins (M1, M2, M3)

class B extends A with M1, M2, M3 {}

The complete secret sauce of mixins is in Object.assign!

Implementation

For Objects

cconst employee = {
    name: "John Smith",
    age: 30,
    gender: "male"
}

const payroll = {
    duration: "monthly",
    amount: 7000,
    currency: "dollars"
}

const benefits = {
    retirement: true,
    savings: true,
    health: true,
    dental: false
}

const employeeProfile = Object.assign({}, employee, payroll, benefits);

console.log(employeeProfile);

The output on the console will be:

{ name: 'John Smith',
  age: 30,
  gender: 'male',
  duration: 'monthly',
  amount: 7000,
  currency: 'dollars',
  retirement: true,
  savings: true,
  health: true,
  dental: false }

Yes, this is what a mixin does. It allows us to combine the properties of different objects into a single object (in simplest terms). The Object.assign copies all enumerable properties from one or more source objects to a target object. The first argument is the target object, followed by all source object(s).

For Classes

let employeeDetails = {
    returnName() {
        console.log(`The employee is ${this.name}`);
    },
    subscribesToDental () {
        console.log(`Employee ${this.name} does ${(this.dental) ? "" : "not "}subscribe to dental benefits`);
    }
};

class Employee {
    name;
    dental;
    constructor(name, dental) {
        this.name = name;
        this.dental = dental;
    }
}

Object.assign(Employee.prototype, employeeDetails);

new Employee("Parwinder", false).returnName();
// The employee is Parwinder
new Employee("Parwinder", false).subscribesToDental();
// Employee Parwinder does not subscribe to dental benefits
new Employee("Robert", true).subscribesToDental();
// Employee Robert does subscribe to dental benefits

🚨 Javascript supports the use of super keyword now. Mixins are not able to support super as it is lexically bound!

Class Inheritance

Parwinder 👨🏻‍💻 — Thu, 10 Sep 2020 14:12:02 +0000

This blog post will be a brief introduction to inheritance in classes.

To create an instance of a class, we use the new keyword. If we would like to inherit from a base class, then we can use the extends keyword.

class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

// creating new instance of a class Person
const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder

To extend the Person class, let's use extend.

class Person {
    name;
    age;

    constructor(name) {
        this.name = name;
        this.age = 33;
    }
    getName() {
        return this.name;
    }
}

const person = new Person("Parwinder");
console.log(person.getName()); // Parwinder

class Female extends Person {
    gender;
    constructor(name) {
        super(name);
        this.gender = "Female";
    }
}

const female = new Female("Lauren");

console.log(female.getName()); // Lauren
console.log(female instanceof Female); // true
console.log(female instanceof Person); // true

super keyword allows us to use the parent class constructor. We can also use super to call a method from the parent/base class.

Classes in ES6 support:

prototypical inheritance,
super
instance and static methods.

Classes in JS: Public, Private and Protected

Parwinder 👨🏻‍💻 — Sat, 05 Sep 2020 18:00:12 +0000

Even though ES6 introduced the class keyword that fairly well mimics classes and allows us to jump into object-oriented programming, JavaScript is missing the ability to create public, private, and protected members in a class.

If you have worked with any object-oriented language, you must know the importance of internal vs external interface. Internal interface refers to the methods and properties of a class that is only accessible by the class itself and not from outside. In contrast, the external interface has methods and properties that are also accessible from outside the class.

The three major keywords at play are public, protected, and private.

Public: These members of the class and available to everyone that can access the (owner) class instance.
Private: These members are only accessible within the class that instantiated the object.
Protected: This keyword allows a little more access than private members but a lot less than the public. A protected member is accessible within the class (similar to private) and any object that inherits from it. A protected value is shared across all layers of the prototype chain. It is not accessible by anybody else.

The protected keyword is the hardest keyword of the three to imitate in JavaScript.

Public

This is the default nature of JavaScript. If something has access to an object, it does have access to its members. Example:

const myObject = {
    name: "Parwinder",
    sayMyName: function () {
        return this.name;
    }
}

console.log(myObject.name); // Parwinder
console.log(myObject.sayMyName()); // Parwinder

In the above example, I can access the property and method without any issue. If you would rather prefer it in a class syntax:

class ObjectCreator {
    name;

    constructor(name) {
        this.name = name;
    }

    sayMyName() {
        return this.name;
    }
}

const myObject = new ObjectCreator("Parwinder");
console.log(myObject.name); // Parwinder
console.log(myObject.sayMyName()); // Parwinder

Private

There are multiple ways of creating private variables in JavaScript. First is closures.

function carMonitor() {
    var speed = 0;

    return {
        accelerate: function () {
            return speed++;
        }
    }
}

var car = new carMonitor();
var redCar = new carMonitor()
console.log(car.accelerate()); // 0
console.log(car.accelerate()); // 1
console.log(redCar.accelerate()); // 0
console.log(redCar.accelerate()); // 1
console.log(car.accelerate()); // 2
console.log(redCar.accelerate()); // 2
console.log(speed); // speed is not defined

car and redCar maintain their own private speed variables, and speed is not accessible outside. We are enforcing the consumer to use the methods defined on the function or class rather than accessing the properties directly (which they should not). This is how you would encapsulate your code.

The second way is by using the # notation.

class ObjectCreator {
    #meaningOfLife;

    constructor(name) {
        this.#meaningOfLife = 42;
    }

    returnMeaningOfLife() {
        return this.#meaningOfLife;
    }

    #returnAMessage() {
        return "You will do great things in life";
    }
}

const myObject = new ObjectCreator("Parwinder");
console.log(myObject.returnMeaningOfLife()); // 42
console.log(myObject["#meaningOfLife"]); // undefined
console.log(myObject.#meaningOfLife); // SyntaxError
console.log(myObject.#returnAMessage); // SyntaxError

The language enforces encapsulation. It is a syntax error to refer to # names from out of scope. Public and private fields do not conflict. We can have both private #meaningOfLife and public meaningOfLife fields in the same class.

🚨 The # method for declaring private members of a class is in part of ES2019/ES10.

Protected

Like I said at the beginning of this post, protected is the hardest of all 3 to implement in JavaScript. The only way that I can think of doing this is by using a class that has a getter for a property without a setter. The property will be read-only, and any object will inherit it from the class, but it will only be change-able from within the class itself.

🙏 If you have an example of creating protected members of the class (or as close to protected as we can get), please do share!

class NameGenerator {
    _name;

    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }
}

let nameGenerator = new NameGenerator("John");
console.log(`My name is ${nameGenerator.name}`); // My name is John
nameGenerator.name = "Jane"; // Cannot assign to 'name' because it is a read-only property.

Classes, Not Just Syntactic Sugar

Parwinder 👨🏻‍💻 — Fri, 04 Sep 2020 19:37:43 +0000

We went over classes in the last blog post and how they make it easier to create objects using a blueprint. The class keyword was introduced in ES2015/ES6, and there is a common misconception that classes are barely syntactic sugar and nothing more. Classes are the core fundamentals of object-oriented programming. My aim with this blog post is to demystify the misconception and showcase how classes are slightly different from functions paired with new keyword.

What does a class do?

class EmployeeRecord {
    name = "New User";
    id = 0;

    constructor(firstName, lastName, id) {
        this.name = `${firstName} ${lastName}`;
        this.id = id;
    }

    reverseName() {
        return this.name.split("").reverse().join("");
    }
}

const employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);

console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
console.log(employee1.reverseName()); // tagahB redniwraP

In the above class example:

Under the hood, a function called EmployeeRecord is created. The function body is made of the constructor of the class. If there is no constructor, then the function body is empty.
All the class methods are stored on the prototype of EmployeeRecord.

With that logic, we can re-write the above class without using classes or the class keyword.

function EmployeeRecord(firstName, lastName, id) {
    this.name = `${firstName} ${lastName}`;
    this.id = id;
}

EmployeeRecord.prototype.reverseName = function () {
    return this.name.split("").reverse().join("");
}

let employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);

console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
console.log(employee1.reverseName()); // tagahB redniwraP

The results are the same and this is where class is just syntactic sugar comes from.

How do classes differ?

There is a specific function kind assigned to classes and it is checked at multiple places most importantly whenever we instantiate a class.

class EmployeeRecord {
    constructor() { }
}

console.log(typeof EmployeeRecord); // function
EmployeeRecord(); // Value of type 'typeof EmployeeRecord' is not callable. Did you mean to include 'new'?

Functional inheritance works using the prototype. Classes do the same using a cleaner syntax with extends keyword.

class Person {
    sayName() {
        console.log("My name is Person");
    }

    sayAge() {
        console.log("I am 30 years old."); // I am 30 years old.
    }
}

class Employee extends Person {
    sayDepartment() {
        console.log("I work for the tech department."); // I work for the tech department.
    }

    sayHello() {
        console.log("Hi, I am the new employee"); // Hi, I am the new employee
    }
}

let employee = new Employee;

employee.sayHello();
employee.sayAge();
employee.sayDepartment();

console.log(employee instanceof Person); // true
console.log(employee instanceof Employee); // true

Function declarations are hoisted, and class declarations are not!

const employee = new Employee(); // ReferenceError or Employee is not a constructor

class Employee {
    constructor() {}
}

A class always runs in strict mode. All code inside the class is automatically in strict mode.
Function decelerations and expressions can be overridden as they are similar to a var whereas classes are not overridden. They are like let and const keywords, let does not allow multiple declarations with the same name inside its scope.
Objects can have (non-enumerable) properties that do not show up when iterated through that object. Class methods are non-enumerable and have the enumerable property set to false. If we use for..in to loop over an object from a class, we will not get the methods.