Top 10 tricky things in javascript

hello my dear beautiful friends and javascript lover as usual today I am going to tell most top 10 tricky things about javascript so wait for what! Let's get start!

1. Accidental global variable

function doSum() {
let a = b = 0;
a++;
return a;
}

doSum();
typeof a;
typeof b;

Let’s look at line 2: let a = b = 0. This statement declares a local variable a. However, it does declare a global variable b.

No variable b is declared neither in the doSum() scope or global scope. So JavaScript interprets b = 0 expression as window.b = 0.

In other words, b is a global variable created accidentally.

2. Array length property

example,

3. Eagle eye test

Install through bower: bower install eagle-eye

The plugin requires jQuery to work so ensure that is available before linking to eagle eye.

<script src="bower-components/jquery/dist/jquery.js">
<script src="bower-components/eagle-eye/scripts/eagle-eye.js">

There is a minified version too if you would prefer to use that:

<script src="bower-components/eagle-eye/scripts/eagle-eye.min.js">

4. Automatic semicolon insertion

In JavaScript, a semicolon is automatically inserted when [1]

  1. two statements are separated by a line terminator
  2. two statements are separated by a closing brace (‘}’)
  3. a line terminator follows a break, continue, return, or throw.

While ASI would make your code easier to write (no need to type all of those semicolons), in practice the lack of semicolons makes your program harder to debug. Because of this, it is universally recognized as a best practice to use semicolons at the end of statements, anyway. However, the existence of ASI can still create some bugs that are hard to troubleshoot if you don’t know what to look for.

5. Floating point math

var x = 0.2 + 0.1;

console.log(x);

it will be, x =0.30000000000000004

To solve the problem above, it helps to multiply and divide.

6.Hoisting

example 1,

elem = document.getElementById(“demo”);
elem.innerHTML = x;

var x;

example 2,

elem = document.getElementById(“demo”);
elem.innerHTML = x;

7. Create an object constructor

function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}

var Saad = new Person("Saad", "Mousliki");

8.Create a Self-calling Function

(function(){
})();
(function(a,b){
var result = a+b;
return result;
})(10,20);

9.A string trim function

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};

A native implementation of the trim() function is available in the recent JavaScript engines.

10.Format JSON Code

You would be quite familiar with JSON.stringify by now. But are you aware that you can format your output by using stringify ? It is quite simple actually.

The stringify the method takes three inputs. The value , replacer , and space. The latter two are optional parameters. That is why we did not use them before. To indent our JSON, we must use the space parameter.

that's all for today I will right again something tricky and needy about javascript.

thank you!

Web Developer | React.js | JavaScript |