10 Different Tricky and Interesting Things in JavaScript

Here are 10 different things That I have learned today.

1)Use addition(+) operator to convert a string to number:

There are many way to convert a string to a number. Most easiest way is using (+) operator before the string.

Example:

console.log(+”42"); //output:42

But it has a side effect. It can convert only number type string otherwise it returns NaN, that can be solved by using parseInt and parseFloat function. Like as —

console.log(+”10.2abc”);             //output:NaN
console.log(parseInt(“10.2abc”));    //Output:10
console.log(parseFloat(“10.2abc”));  // output:10.2

2)1) For Loop:

We can declare a for loop like as-

//for loop
const a = [1,2,3,4,5];
for (var i = 0, item; item = a[i];i++) {
console.log(`Item-${i+1} = ${a[i]}`);
}
// Output:
// Item-1 = 1
// Item-2 = 2
// Item-3 = 3
// Item-4 = 4
// Item-5 = 5

Here item = a[i] is used to check the length of array a.

3) Careful about array length:

Usually we know that array.length means the number of elements in array. But here is one thing on blow example —

const a = [1,2,3];
a[100]=5;
console.log(a.length);
//output:101

4) Closure:

A closure is a function that remembers its outer variables and can access them. Whenever JavaScript executes a function, a ‘scope’ object is created to hold the local variables created within that function.

Example:

function makeAdder(a) {
return function(b) {
return a + b;
}
}
x = makeAdder(5);
console.log(x(6));
//output:11

So when makeAdder() is called, a scope object is created with one property: a, which is the argument passed to the makeAdder() function. makeAdder() then returns a newly created function.

5) Public static fields:

Public static fields are useful when it needs to used only once per class, not on every class instance. Public static fields are declared using the static keyword. Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.

Example:

class a {
static baseField = 'base class field'
}
class b extends a {}
console.log(b.baseField)
//output: "base class field"

6) Public static methods:

The static keyword defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself.

Example:

class ClassWithStaticMethod {
static staticMethod() { return 'static method has been called.';}
}
const ins = new ClassWithStaticMethod();
ins.staticMethod()         //invalid
console.log(ClassWithStaticMethod.staticMethod());     //valid

7) Form Structure:

Generally, we used to apply form tag to start a form and other fields are apply inside of this tag.

The <fieldset> tag draws a box around the related elements. It is used to group related elements in a form. The text content of the <legend> formally describes the purpose of the <fieldset> it is included inside.

Example:

<form>
<fieldset>
    <legend>Fruit juice size</legend>
    <p>
       <label for="name">
          Name :<input type="text" name="name" id="name">
       </label>
    </p>
</fieldset>
</form>

8) Multiple labels:

We can put multiple labels on a single widget, but this is not a good idea as some assistive technologies can have trouble handling them. In the case of multiple labels, we should nest a widget and its labels inside a single <label> element.

Let’s consider this example:

<div>
<label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label>
<input id="username" type="text" name="username">
</div>

9)Cross Browser Testing:

Cross Browser Testing is a process of testing to ensuring that an application works across different browsers perfectly. Each browser interprets the information on the website page in a distinct manner. Hence, some browsers may have insufficient features that is trying to show and make a website look broken on that browser. So it is necessary to verify an application compatibility with different browsers.

Workflow of cross browser testing:

The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases .

i)Initial planning

ii)Development

iii)Testing/discovery

iv)Fixes/iteration

Initial Planning:

Initially you have an overall idea on your project. Then you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? After then you have an idea what technologies you will likely build these features to support different browsers.

Development:

There are multiple general strategies to cross browser development, for example:

A) Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers or using some polypill for any missing support.

B) Accept that some things aren’t going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don’t support the full functionality.

C) Accept that your site just isn’t going to work in some older browsers.

Testing/discovery:

After completing development, you should test new functionality and make sure there are no general issues with your code that are stopping your feature from working.

1)Test it in several browser.

2)Do some lo-fi accessibility testing for keyboard and screen reader facilities.

3)Test on mobile tablets and many small devices.

You can also go further than this, if wished. There are commercial tools available such as Sauce Labs, Browser Stack, LambdaTest, TestingBot, and CrossBrowserTesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing.Finally test it as a prerelease versions on different browser.

Fixes/iteration:

If you have any bug, you have to fix it by knowing about type of error, devices and browsers versions etc.And you have to do it again and again unit to make it bugs free.

10) Client-side storage:

Nowadays most of the modern web sites are dynamic, they store data on the server using several kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting HTML to the client to be displayed by the user’s browser.

Client-side storage works on similar principles, but has different uses.They use different API to do so.

In early age of development, cookies are used to stored client side data. But at present, they use more effective APIs for storing client-side data than by using cookies. Such as –

1)Web Storage

2)IndexedBD etc.