6 Things About JavaScript You May Not Know Even As a Web Developer

December 3, 2020

How JavaScript Came to Be

JavaScript was created by Brendan Eich in 1995, it was inspired by Java, Scheme and Self. After competing with Microsoft to reduce the Microsoft monopoly on the browser market Eich said that with Sun on board, they decided to surf the tidal wave of hype surrounding Java, in the same way Visual Basic was to C++.

So the name “JavaScript” was a straightforward marketing ploy to gain acceptance.

Netscape’s Mocha aimed to turn the web into a fully equipped application platform.

Unfortunately JavaScript dropped its early popularity and later became the black sheep of web development.

So JavaScript was conceived as a scripting language for the web for both client and server side. It was quickly re-positioned as a web companion for Java.

Why JS is so Popular

As of 2020, JavaScript is arguably the most popular programming language to ever exist. Yet its rise has come as a surprise and disappointment to many. So why has JavaScript become so popular? 

  • It’s scalable
  • It is asynchronous
  • It runs on the web (as of today everywhere else too).
  • It has outstanding performance
  • It can be run with ease
  • There is a community behind it
  • Anyone can start learning it! (But not everyone gets far… 😀 )

NaN is a number?

Do you think null being an object is ridiculous? What if I tell you that NaN (not a number) is infact a Number? Moreover, NaN is not considered equal to itself! 

	console.log(typeof NaN); // 'Number'
	console.log(NaN === NaN); // false

To be precise NaN is not equal to anything and the only way to make sure that something is NaN is via the function isNaN().

Tagged template literals

If you’ve ever used styled-components in React, you’ve used tagged template literals. Tagged template literals give us more control over the parsing of our literals. It allows us to parse template literals with a function. 

parseWelcomeMessage`Welcome home, ${name}!`

The parseWelcomeMessage is a function and the first argument of a tag function contains an array of the string values, the remaining argument is related to expressions.

function parseWelcomeMessage(string, ...vals) {
	// ...
}

parseWelcomeMessage`Henlo fren, my name is ${name}!`

The strings argument will hold `[“Henlo fren”, “my name is”, “!”]` while the rest of the arguments are passed into the array, `vals[“Samu”]`. Inside this function we can manipulate the output that will be returned. 

function parseWelcomeMessage(strings, ...vals) {
	return strings[0] + vals[0] + string[1];
}

const name = “Samu”;
parseWelcomeMessage`Henlo fren, I’m ${name}!` // Henlo fren, I’m Samu!

Static Local Variables

Some languages like C++ support the concept of static variables. They are local variables that retain their values between function calls. JavaScript doesn’t have a static keyword or direct support for this technique. However, the fact that functions are also objects makes simulating this feature possible. This idea is storing the static variable as a property of the function. Suppose that we want to create a counter function, here is a code snippet that shows this technique in action:

function count() {
	if (typeof count.i == ‘undefined’) {
			count.i = 0;
	}
	return count.i++;
}

When count is called for the first time, count.i is undefined, so the if condition is true and count.i is set to 0. Because we are storing the variable as a property, it’s going to retain its value between the function calls, thus it can be considered a static variable.

We can introduce a slight performance improvement to the above function by removing that if check and initialize count.i after defining the function:

function count() {
		return count.i++;
}

count.i = 0

While the first example encapsulates all of count’s logic in its body, the second example is more efficient.

Use of the `in` operator

The in in JavaScript is a keyword that is used to check for the presence of a property in an object. We have used it in for..in loop without realizing that the in is a keyword. 

Using the in keyword will return true if a property is present on the object, and will return false otherwise.

const dailyDoggoInformation = {
	hasTreetos: true
}

console.log(“hasTreetos” in dailyDoggoInformation) // true

Create dynamic functions

We can define dynamic functions using the new Function constructor.

let square = new Function(‘x’, ‘return x * x’);

console.log(square.toString());
function anonymus(x /**/) {
		return x*x
}

square(4) // 16

Once use-case when this is used is in templating libraries (such as ejs, ajs) which parse the template once and return a function that accepts the template data in it.

Unary Operator

The unary operator converts its operand ti Number type and then negates it. 

-”33” / -33

What happens here is that the string “33” will convert to its Number type which will give 33. Then, this positive number will be converted to its negative form which is -33.

-{} // NaN
-null // -0
-undefined // NaN
-{ valueOf: () => 33 } // -33
-”Samu33” // NaN

- +0 // -0
- -0 // 0

If the result of the conversion to number value is NaN, negation will not be applied.

Conclusion

Whether you hate or love JavaScript, it is currently the most popular language that dominates web surfaces, mobile solutions and basically everything around you that is somehow connected to the internet.

It is powerful and has an enormous community with tools that will help you to build well structured systems.

The misconception is that JavaScript is a weak scripting language to highlight the title of your website is slowly dying. (Thank god!)

As you get deeper into the ecosystem you will always discover things that will make you realize how little you know about it.

But setting goals such as knowing all the nuances of JavaScript will be beneficial for both you and your next big project. 😉

Gábor Magyar
JavaScript Developer