Forem: Pankaj

Variable Types in Javascript

Pankaj — Sun, 04 Oct 2020 21:00:09 +0000

This article specifically talks about the variable types in Javascript. The reason I dedicated an entire post for this is, that, there are a lot of tricky interview questions that come out of this. There are many gotchas included. So this deserves its own separate article.

There are mainly 6 types of data types available in JavaScript:

String
Number
Boolean
Null
Undefined
Object

Although, these data types are also divided into two categories:

Primitive data types
Non-primitive data types

You will see the gotchas and examples of some of these in this post. Although a separate article would be required for Object data types as it holds a lot of things worth of explanation

1. String

It can possibly hold any value. It's one of the primitive data types. Primitive data types cannot be mutated.

For example, we can access each character in a string like this:

let name = 'pankaj';
console.log(name[0]); // 'p'
console.log(name[1]); // 'a'
console.log(name[2]); // 'n'

But we cannot re-assign the values in primitive data types like this:

let name = 'pankaj';
name[0] = 't';

console.log(name[0]); // 'p'
console.log(name); // 'pankaj'

So primitive data types are immutable and cannot be modified like this.

2. Number

According to the ECMAScript standard, the Number holds a double-precision 64-bit binary format IEEE 754 value.

The number data type can hold all possible numerical values including the following:

NaN (Not-a-Number)
+Infinity (Positive infinity)
-Infinity (Negative infinity)

The above three are special kinds of data that can be stored in Number data types.

NaN (Not-a-Number)

It is a special value that's returned by Javascript when parsing of a number is failed for some reason.

It doesn't equal to itself.

console.log(NaN === NaN); // false
console.log(NaN == NaN); // false

We can verify if a value is NaN or not by using isNaN() function.

But be careful while using the isNaN() function because it first tries to convert the value that you pass to it into a number through type conversion and, as a result, some values convert into numbers while others don't.

For example:

console.log(isNaN(NaN)); // true
console.log(isNaN(undefined)); // true
console.log(isNaN({})); // true
console.log(isNaN(null)); // false
console.log(isNaN(true)); // false
console.log(isNaN(false)); // false
console.log(isNaN('')); // false
console.log(isNaN('     ')); // false
console.log(isNaN('90')); // false
console.log(isNaN("Ant Man")); // true

3. Boolean

This is one of the most simple data types which either holds true or false.

4. Null

null is used when you want to declare a variable and intentionally express the absence of a value (unlike undefined where the value is simply absent).

Here is a gotcha with null values:

console.log(typeof null); // 'object'

The type of null is an object. 😂 I know this is strange but this is how it was designed and we have to live with it.

5. Undefined

This is another unusual and strange thing about JavaScript. If you declared a variable then it means that it exists but it's still considered undefined unless you put a value into it. So basically it represents the state of a variable that's been declared but without a value assigned to it.

The type of undefined is undefined.

console.log(typeof undefined); // 'undefined'

6. Object

An object is a collection of properties. The properties can be any of the previously mentioned types, as well as other objects and functions.

It's a non-primitive data type and stores the values by reference. This is a very tricky part of the Objects.

console.log({} === {}) // false

Objects are created by reference so two {} will always have two different references so they are never equal. This is another gotcha that you must watch out for.

Comparison between different data types:

Here are some quick and interesting comparisons

console.log(null === undefined); // false
console.log(null == undefined); // true

console.log(null === null); // true
console.log(null == null); // true

console.log(!null); // true
console.log(null); // null
console.log(!!null); // false

console.log(1 + null); // 1
console.log(1 + undefined); // NaN

Thanks for reading! 🎈

Variable Declaration in Javascript for Beginners

Pankaj — Sun, 04 Oct 2020 20:56:47 +0000

Variables in JavaScript are like containers that hold reusable data. These data containers need to be declared with some specific keywords in Javascript.

Right now there are 3 ways to declare a keyword in JavaScript:

var (older/outdated way)
let (introduced in ES6 ✨)
const (introduced in ES6 ✨)

Before the standardization of ES6 (ES2015), everyone used to declare variables with the var keyword. Now we have let and const for every possible case.

Rules for using const and let

Follow these two rules to decide:

Use const as a constant when you are sure that the variable will not be redeclared.
Use let for everything else.

Rules for naming variables

Variable names are case sensitive, so name and Name both will be considered different variables.

let name = 'Pankaj';
let Name = 'Batman';

console.log(name); // 'Pankaj'
console.log(Name); // 'Batman'

Variable names cannot begin with a number but the numbers can be used in the middle and end of the variable name.

let 1name; // ❌ invalid
var 1name; // ❌ invalid
const 1name; // ❌ invalid

let name1; // ✔ valid
var name1; // ✔ valid
let my1name; // ✔ valid
const name1; // ❌ invalid
const name1 = 'Pankaj' // ✔ valid

A variable declared with const must be initialized.

// ❌ invalid
const name; // SyntaxError: missing initializer

// ✔ valid
const name = 'Pankaj';

Variables can start, end, or contain the following:

Uppercase strings
Lowercase strings
Underscores _
Dollar sign $

let _name; // ✔ valid
var $name; // ✔ valid
const my_name; // ✔ valid
let my$name; // ✔ valid

Variables cannot start, end, or contain symbols and special characters:

let my@name; // ❌ invalid
const #name; // ❌ invalid
var my%name; // ❌ invalid
let -name; // ❌ invalid
const my^name; // ❌ invalid
var *name; // ❌ invalid

Multiple variables can be chained by comma, but it's not considered good practice to do this.

let x, y, z; // ✔ valid
var x, y, z; // ✔ valid
const x, y, z; // ❌ invalid

// ✔ valid with let, const and var
let x = 1, y = 2, z = 3;
const a = 1,
    b = 2,
    c = 3;

Subsequent declaration of a variable is possible with var but not with let and const.

// ✔ valid
var age = 80;
var age = 81;
console.log(age) // 81

// ❌ invalid for let and const
let age = 80;
let age = 81;
// SyntaxError: Identifier 'age' has already been declared

// ✔ valid for var and let
let age = 80;
age = 81;
console.log(age) // 81

// ❌ invalid for const
const name = 'Hulk';
name = 'Thor'; // Uncaught TypeError: Assignment to constant variable.

// ✔ valid for let, var, and const if the variable is an object/array
const hero = {};
hero.name = 'Thor'; // ✔

const hero = { name: 'Hulk' };
hero.name = 'Thor'; // ✔

Notice in the above last example that we are just modifying one of the keys in the object and not replacing the entire object so it's working perfectly fine.

Why should we prefer let and const over var

It is good practice to avoid using var declaration in your code. let was introduced to provide a level of organization while managing the large data structures as it is safer knowing that your variable cannot be reassigned anywhere in its scope.

A quick tip

End all your statements with a semicolon. Although, JavaScript will do it for you when reading your code. But as a general guideline, we should always terminate each statement with a semicolon.

Thanks for reading! 🎉

Why should you learn JavaScript?

Pankaj — Sun, 04 Oct 2020 20:51:11 +0000

JavaScript is a loosely typed, interpreted scripting language. It is one of the most powerful and popular programming languages in the world.

Most of the websites today are using Javascript. It is literally hard to imagine the World Wide Web today without JavaScript. It's everywhere because all the browsers and devices support JavaScript nowadays.

Initially, JavaScript was only available for creating simple user interactions on the websites but it evolved so much that it has gone beyond the web. Now you can do the following things with JavaScript:

Web development
Mobile app development
Desktop app development
VR and Game development
Machine learning

Due to such a wide scope, there is an enormous amount of opportunities and possibilities with JavaScript. You can literally build anything with it. It has a huge job market for the same reason. Good and decent JavaScript developers are always in demand. 😉

What benefits JavaScript offers

There are some major benefits offered by JavaScript:

It's free and easy to learn. (Except few gotchas 😈)
It helps you to create beautiful, interactive, and fast user interfaces.
You don't have to wait for an entire page to refresh while you interact with something on the page. It only loads the required part of the page without refreshing the entire page.
Build websites, mobile, and desktop apps with Javascript so you don't have to learn the different languages for different platforms.
Huge ecosystem of frameworks and libraries to choose from, which saves a lot of time and effort.
Very large community of developers who are ready to help. They are constantly writing articles and tutorials related to Javascript from basic to advanced topics.
Ecma International makes sure that the JavaScript standards are always updating and improving to make the web more performant and interactive. They are releasing new features and improvements every year.

You have a wide range of frameworks to choose from, for your choice of platform:

⚒ For backend

Node
Express
Hapi
Koa
Nest
Deno

🎨 For frontend

Vue js
React js
Svelte
Quasar
Angular

📱 For mobile apps

React Native
Native Script
Quasar
Meteor
Ionic

💻 For desktop apps

Electron
Quasar
Proton Native

👓 For virtual reality

React VR
A-frame
WebXR

🎮 For games

PhaserJS
PixiJS
MelonJS

🧩 For machine learning

TensorFlow.js
Brain.js
Keras.js

👑 A single language rules them all. JavaScript is the future as it's constantly growing and improving with bleeding-edge features. It is definitely worth learning so you can build great stuff.

You must have seen different articles with titles like these:

Should I learn Javascript in 2019

Should I learn Javascript in 2020

Trust me you would see the same after 10 years:

Should I learn Javascript in 2030

Let me say this once and for all - Javascript is worth learning as long as the Web exists and the Web will exist and evolve as long as the human race exists.

Why should you not learn JavaScript

We have all the good reasons to learn it but there has to be something that would want you to not learn it. There are, actually, two reasons to not learn it. I would strongly suggest to never learn JavaScript if:

You are living in a cave without the internet and planning to stay there for the rest of your life.
You know that the world would be destroyed by Thanos/Aliens/Super-Villains someday.

Now, it's up to you.

Thanks for reading. 🎉

History of JavaScript - How it came into the existence

Pankaj — Sun, 04 Oct 2020 20:43:34 +0000

Javascript is a powerful scripting language. It was mainly developed for improving the interactions on web pages. But it has evolved so massively that it can now be used for mobile and desktop applications along with web applications.

Who created Javascript

Javascript was created within 10 days in May 1995 by Brendan Eich. He worked as a Netscape Engineer at that time.

How it got its name

Javascript was initially named Mocha but it was officially called LiveScript when first shipped as part of the Navigator 2.0 beta release in September 1995. But three months later, after receiving a Sun trademark, the name was changed to JavaScript in Netscape Navigator 2.0 beta 3 release.

Naming it JavaScript was a marketing tactic by Netscape to give the impression that JavaScript was a spin-off of Java since Java was very popular among developers at that time. However, these two languages are not related to each other at all.

Why was JavaScript created?

It was created to add animations and user interactions to make websites dynamic. Netscape wanted to be ahead of the game by introducing this in its browser so they came up with this.

Standardization of JavaScript

In November 1996, Netscape submitted JavaScript to ECMA (European Computer Manufacturers Association), as the starting point for a standard specification that all browser vendors could follow.

They had a technical committee that came up with ECMA-262 for standardizing the syntax and semantics to provide a vendor-neutral scripting language. This committee had developers from Netscape Communications, Microsoft, Sun Microsystems, and many other companies.

ECMA was expanded beyond Europe so they changed their name to Ecma International where Ecma is a name and not an acronym anymore. They are responsible for the development and upkeep of the language to this day. As a result, the scripting language was officially given the name ECMAScript.

ECMAScript Timeline

ECMAScript 1 (June 1997): First version of the standard.

ECMAScript 2 (June 1998): Small update to keep these standards in sync with the ISO standard.

ECMAScript 3 (December 1999): Added many core features like regular expressions, try/catch exception handling, better string handling, do-while, switch, etc.

ECMAScript 4 (abandoned in July 2008): A massive upgrade with static typing, modules, namespaces, etc, but it was never finalized and got abandoned.

ECMAScript 5 (December 2009): Added minor improvements along with JSON support, strict mode, and some array methods.

ECMAScript 5.1 (June 2011): Small update to keep Ecma and ISO standards in sync.

ECMAScript 6 (June 2015): A large update that took a lot of things from the abandoned ECMAScript 4. This was the first version that used the year of publication as its official name - ECMAScript 2015. It added a lot of features like classes, promises, arrow functions, default parameter values, let/const, etc.

ECMAScript 2016 (June 2016): First yearly release with few improvements and new features like exponential operator.

ECMAScript 2017 (June 2017): Second yearly release with new features like string padding, async functions, shared memory, etc.

ECMAScript 2018 (June 2018): New features like asynchronous iteration, Promise.finally, rest/spread operators for object literals, etc.

ECMAScript 2019 (June 2019): New features and some changes in Array and Object prototypes and stability improvement in Array.sort.

ECMAScript 2020 (June 2020): New features that include a BigInt primitive for arbitrary-sized integers, new null coalescing syntax, etc.

Ecma Technical Committee 39 (TC39)

TC-39 is a group of people who are responsible for the standards. They have meetings every two months with member-appointed delegates and invited experts. You can check the minutes of those meetings here GitHub repository

You can also check the proposed features and their stages here GitHub repository.

With each ECMAScript release, there are few important points to note-

New versions are always backward compatible except few occasional minor cleanups which are hardly noticeable.
Old features aren’t removed or fixed. Instead, better versions of them are introduced. For example, let and const were introduced but var wasn't removed.

Keeping old stuff is important here. If a new version is created without any backward compatibility then a lot of work will be required to migrate all these billions of projects and sites. This would wreak havoc and break the entire internet.😁

I hope you found this history interesting.

Watch out for more articles coming in this Javascript Basics series.

Thanks for reading!

Free your blocked ports on Linux

Pankaj — Sun, 23 Aug 2020 15:36:57 +0000

You closed all your code editors and terminals but your ports are still blocked.

The only solution you would have in your mind as a beginner is, to restart the computer. That would definitely fix this.

But what if there is a better way?

What if I can check where my port is being used and close that application, rather than restarting the computer?

For example, my blocked port is 3005 and I would like to see which application is still using it. I would simply run this in my terminal-

lsof -i :3005

This would give an output with a table of all the programs using this port 3005. Notice the PID column there and note down its value. In my case, it was 6595.

Now run the following command to kill the process and free the port from this evil app-

kill 6595

Now run your project on that port and live happily ever after.

Closing Notes

This is not a very frequent problem but can be frustrating for beginners and developers who are not proficient in Linux.

What's your definition of success?

Pankaj — Tue, 04 Aug 2020 11:35:38 +0000

The meaning of success can be different for everybody.

I would consider myself successful when I have the following:

Financial freedom
Automated income
Enough savings and investment
Work from anywhere
Healthy lifestyle
Work-free weekends
More family time
More travel

If you give enough thought on these points, you would realize that the following two points can help in achieving the rest:

Automated income
Work from anywhere

I haven't achieved any of the above yet. Once I do, I shall consider myself successful.

So what's your definition of success?

Do you think you are already successful? Or do you think you are close enough/far-away?

What do you think about my new domain?

Pankaj — Thu, 16 Jul 2020 03:07:41 +0000

Hey guys 👋🏼,

I hope you all are doing great.

I just bought a domain: desk.sh

I don't know but I was compelled to grab it as soon as I saw it. It's short, memorable and can fit with different niches from tech to non-tech material.

I wonder what you guys think about this? Do you like this short name? What can I possibly do with this other than using it as my new secondary email?

I'm exploring different options at the moment and your valuable thoughts on this would be much appreciated.

Thanks 🙏🏼

My browser journey from 2007

Pankaj — Thu, 09 Jul 2020 04:51:35 +0000

Ben posted about making a switch to the Firefox browser. However, he felt weird to be off from Chrome.

Last month I also made a switch so I know that feeling of switching away from Chrome.

I'm still using Firefox

Ben Halpern ・ Jul 6 '20

#webdev #browsers #watercooler #productivity

Ben's post got me to revisit my old memories and my entire browser journey.

This all started when I got my first computer in 2007. I had zero knowledge and understanding of how computers worked. I think I have used Internet Explorer for a lot of these initial years.

I slowly learned how to use it and finally got a dial-up internet connection in 2008. I also explored other browsers like Maxthon, SeaMonkey, Opera.

So this is how it started-

Internet Explorer (Used it in the beginning)
Opera (1 year)
Firefox (3 years)
Chrome (5 years)
Edge (Currently using)

I just started using the new Edge browser last month when I read a tweet from Sarthak.

// Detect dark theme var iframe = document.getElementById('tweet-1273337590964346880-553'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1273337590964346880&theme=dark" }

So I tweeted this and started using it-

// Detect dark theme var iframe = document.getElementById('tweet-1273457814149541889-888'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1273457814149541889&theme=dark" }

To my wonders, I found Edge to be much better and faster than Chrome. I can use the same amount of extensions and browsing tabs on Edge which could lag my Chrome experience like crazy.

So bye-bye Chrome! And Hello Edge!