Easy and tricky JavaScript core concepts for beginners

As per the Wikipedia JavaScript is a high-level, interpreted programming language. It's being popular day by day just because twice behavior such as clients side and server side, let's learn some easy and tricky JavaScript core concepts for beginners.

What are the different data type of javascript?

As per the ECMAScript 5 specification, there are 6 different data types in javascript.

Boolean //true/false/
Number //1,1.0
String // 'a', "a"
Null // null
Undefined // undefined
(5 primitive types and 1 non-primitive types)

Object // new Objects()

How to know datatype of a variable in javascript?

By using the keyword 'typeof' you can know the type of a variable, for example-

typeof (1); // number
typeof('a'); // string
typeof('true'); //boolean
typeof(undefined ); //undefined

typeof(null); //

The output of null it's an 'object' but may you think it should be 'null' but 'object' because 'null' is a type has its own value 'object'

Let's do some practice to understand things clearly, run codes below:

null == undefined;

Output: true

Reverse it:

undefined == null;

Output: true

Value is same for undefined and null with different data type else you can say JavaScript incorrectly reports the type of null as an object.

Try with ===

undefined === null;

Output: false

undefined and null are not the same data types that's why === will return false, === in javascript use for strict compare with value and data type.

=== operator checks for the value and datatypes and it will return true only if both are same.

== operator checks only for the value and ignore the data types.

You can explore all the behavior using this URL, I really love it- https://dorey.github.io/JavaScript-Equality-Table/

Javascript Easy Core Concepts for Beginners

Move on one more example of 'typeof' in JavaScript.

typeof({});

Output: object

Variable in javascript doesn't have it's own type, it completely depends on the assigned value.

Explaining this point with some more examples, execute below lines of code in your Chrome Developer console.

var a = 1;
typeof a; // number
a = 'yahoo';
typeof a; // string

First, you will get 'number ' after that 'string' means you can change the type of variable in JavaScript dynamically at the run time.

JavaScript also having some magic of values, to know we will now explore 'NaN';

I think it's little silly, we all already know the 'NaN' stands for 'not a number', so what's new?

Do not worry, till some examples. Enter below the line in console:

NaN

Output = NaN

I'm again going to repeat is'NaN' not a number, right?

Execute:

typeof NaN;

Output: number

So, surprising just because 'NaN' Defines a number is not exactly a number. Everything going to be simple, now we are moving to next level with some comparison operators.

NaN == false

Output: false

NaN == 1

Output: false

NaN == NaN

Output: false

Strange?, every similar value returns 'true' in javascript so why 'NaN' compare itself 'false'?

So to clear this we need to do some more with isNaN, as for an example:

isNaN('NaN');

Output: true

Let's pass a string instead of 'NaN':

isNaN('1');

Output: false

Do not confuse try next one:

isNaN('a');

Output: true

So, NaN not really useful because it may return 'true' or 'false' so be sure before using it. NaN is the only javascript value only in javascript treated unequally to itself.

I have little more example to explain:

var CT = NaN;

Output: undefined

Now we assigned 'NaN' to a variable name 'CT", we can check this variable with a comparison itself:

CT === CT;

Output: false

Clearly, 'NaN' having strange property. NaN equal to ANYTHING is always false, even when compared to itself.

Easy and tricky JavaScript core concepts for beginners

Now we have to move on another basic and important topic, we will discuss and learn some crazy facts of JavaScript:

use strict: JavaScript is evaluated in a strict mode when you put 'use script' on the top of scripts. Simply, "use strict" In strict mode, we can't use variables that have not been declared with var first.

Example:

"use strict";
var tricksway = 3;
tricksways = 1;
tricksway;

Output: Uncaught ReferenceError: tricksways is not defined

Now again Run above code without "use strict"

var tricksway = 3;
tricksways = 1;
tricksway;

Output: 3

It can prevents your code or return errors when "unsafe" actions are try to taken (such as gaining access to a global object).

Why in javascript 'use strict' expressed as a string?

Using "use strict" as a string doesn't add any syntax to JavaScript, yes and therefore it is backwards compatible. The old browsers will ignore it if not able to compile it just because of string, and latest browsers that support EcmaScript 5+ will enter strict mode.

Now we are going to explore 'Scope of a variable':

There are two scope in JavaScript for a variable

  1. Local
  2. Global

We will clear everything in few examples, please do attention.

Start with the first example as below:

"use strict";

var a =1;

function foo(a){
}
foo(a);
a;

Output: 1

Now with little change see the example two:

"use strict";

var a =1;

function foo(a){
a = 2;
}
foo(a);
a;

Output: 1

Here you can see output affected due to 'scope' of a variable. Just because you are passing a copy of a=2, not the actual variable so it will not affect the actual just because first a (a=1) have global scope and second a (a=2) having local scope inside a function foo.

Example:

Let's create an object of 'a' as:

"use strict";

var a = { };

function foo(a){
a.moo = false;
}
foo(a);
a;

Output: {moo: false}

Now you can see you can't change the value but able to change the property for example 'a' as an object. Confusing? We will do one more example:

"use strict";

var a = {'moo':'too'};

function foo(a){
a = {'too':'moo'};
}
foo(a);
a;

Output: {moo: "too"}

We are getting the value of the 'a' which is {moo: "too"} of outer scope, you can't change what it's point too. You can change only property it has as in next example:

"use strict";

var a = {'moo':'too'};

function foo(a){
a.too = {'too':'moo'};
}
foo(a);
a;

Output: {moo: "too", too: "moo"}

I just tried to explain some small and tricky JavaScript behaviors especially for beginners or someone who just want to revise their concepts. Will come with some more exciting tutorial in next article. Till now, thanks for reading.

Feel free to share your feedback.

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info "Open Source. Millions of open minds can't be wrong!"

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page