Post
Ask Question

Javascript Basic Key Concepts

Introduction

 
In this blog, I am going to discuss some important and basic key concepts of JavaScript.
 
Let’s see them one by one;
 
In JavaScript we declare variables using var keyword; we may assign the variable or we may not.
 
Key Capsule 1
 
So what happens when we declared var name;
 
Capsule 1
 
Here name stores undefined by default;
 
iI we print using console.log(name)
 
o/p - undefined.
 
Key Capsule 2
  1. var name=”Surya”  
  2. var name;  
  3. console.log(name)  What you think what will be the out put ?
O/P - “Surya”
 
Capsule 2
 
In javascript, although I declare the variable once again it won’t lose the value.
 
Key Capsule 3
  1. var result=”sun”+2+3;  
  2. console.log(result)  
  3. result=2+3+”sun”;  
  4. console.log(result)  
What you think the output is?
 
O/P - “sun”23
5”sun”
 
Capsule 3
 
In javascript, if any numeric values come after the string then the Plus (+) operator works as a concatenation operator whereas if the numeric value comes before the string then plus (+) operator works and it shows the addition of number then it concatenates the string.
 
Key Capsule 4
  1. var studnetName=”Suryakant”;  
  2. var studentName=”Rajanikant” ;  
  3. console.log(studentName);  
  4. var studnetName=”Rahul”;  
  5. var studentname=”Raj”;  
  6. console.log(studnetName);  
  7. console.log(studentname);  
What will be the output?
O/P - “Rajanikant”
“Rahul”
“Raj”
 
Capsule 5
 
Why so? Because the JavaScript variables are case sensitive; so when I write studnetName and studnetname both are different variables.
Remember all variables in JavaScript are called identifiers and each variable is a unique identifier.
 
Key Capsule 6
 
How to print a string like this,
 
“The name is “Surykant”; he is a blogger.”
 
I want to print suryakant with the double-quotes.
 
To do this in javascript we have different escape characters that can be used to achieve this.
 
We can write,
 
var data=”The name is \”Suryakant\”; he is a blogger”.
 
Same for a single quote,
 
var data=”It\’s looking good.”
 
Most Important Key Capsule 7
 
Difference between == and === operator
 
“== “ operator is used to checking directly the value whereas “===” equality operator checks the equality and types.
 
See below examples;
 
Test Case 1
 
var x=”surya”;
var y= “surya”;
console.log(x==y)
console.log(x===y)
o/p- true
 
Note
 
Here the output is true for both cases because both are storing the same value and both are of the same type
 
Test Case 2
 
var x=”surya”
var y=new string (“surya”)
console.log(x==y);
o/p- true
 
Scenario
 
Here some of us might wonder why it returns true.
 
This question also came to my mind; because the second one is reference type; as we know inside the reference type variable it stores the address of that value i.e “surya”.
 
So how are both equal then?
 
Here the important thing to understand is what actually happens when we comparing the value using a double equality operator (“==”).
When we using double equality operator (“==”) to compare then this operator performs a type of conversion while comparing two things; so in the above example when we compare x and y, although y is an object type it is converted to string type while comparing so both are getting the same type with value so it returns as true.
 
Whereas triple equality operator (“===”) never does any type of conversion while comparing; it only checks the type and value if both are the same then it returns true otherwise it returns false.
 
Key To Remember
 
So if we check any two references/object type variable using triple equality operator (“===”) then it always returns false; same for double equality operator (“==”) also return false, but if both are reference types pointing to the same location then “===” operator returns true.
 
Confused ????
 
Let’s clear; both reference type/object type pointing to the same location means;
  1. var obj=new string(“surya”);  
  2. var obj1=obj  
  3. Now if we check; obj===obj then we get output as true.  
Capsule 7 
 
What did we learn to form the above?
 
Double equality operator(“==”) does conversion before checking while triple equal to an operator(“===”) never does any conversion before checking it just checks the type and value.
 
examples
  1. var a=1;  
  2. var b=”surya”;  
  3. var c=new string(“surya”);  
  4. Now; a===a // True ; b===b // True; c===c //True  
Again if i declare a new object type variable;
 
var d=new string(“surya”);
 
Now; c===d // False
 
Note
 
Although ‘c’ and ‘d’ are the same type still it returns false because after checking the type it will check the value inside it; both are pointing to different locations so both have different values so it returns false.
 
if we write; c==d
 
Note 
 
Now, what happened is, both are converted to reference type, and due to both pointing to different locations; so it returns false.
 
Key To Remember
 
Due to the above reason double equality operator (“==”) is called a loose equality operator whereas the triple equality operator (“===”) is called a strict equality operator.
 
Test Case 3-
 
var x=”surya”
var y=new string (“surya”)
console.log(x===y);
o/p- false
 
Note - Here the output is false because “===” operator is used to check the type and both have different types so it returns false.
 
Test Case 4-
 
var x=new string(“surya”);
var y=new string (“surya”);
console.log(x==y);
o/p- false
console.log(x===y)
o/p- false
 
What is a value type and reference type in JavaScript?

Ans- In javascript data types are classified into two types such as value type and reference type.
 
Undervalue type we have data type like;
 
Int, string, number, Boolean, null, and etc.
 
Whereas under reference type we have data type like;
Function,array,object.
 
Combine this and as we said all these are object types.
 
Note:- Value types are directly stored values inside the variable whereas reference types are stored in the address of the object and that address points to the actual value location.
 
Key Capsule 8:–
 
In Java script, we have different global methods for Numbers such as;
  • Number()
  • parseInt()
  • parseFloat()
Important Test Case-
 
Test Case 1 - parseInt(“10 Year”) //O/P- 10
Test Case 2 - parseInt(“Year 10”) //O/P – NaN
 
Key Capsule 9-
 
In JavaScript we can define an array by using bellow syntax;
Var stdArr=[];
Note- stdArr is a special type of object which store different type of object inside it.
 
Join Method in Array-
 
In JavaScript, the join method is used to convert the array into a string but we can specify separator inside join method.
 
For eg- var arr=[“Ram”,”Hari”,”Madhu”]
arr.join(“*”);
so the o/p Ram * Hari * Madhu.
 
Key Capsule 10
 
In JavaScript, we use a keyword called “use strict”.
 
This indicates that we can not use a variable without declaring it. So if we use a variable without declaring it then it’s gives you an error.
 
Note - Use strict can be written at the top of the script.
  1. Use strict  
  2. a=2+3;  
  3. console.log(a) // Error because we did not declare the variable a.  
I hope the above concept helps you in understanding the basic concept; we will see more in the coming days.
 
If anything is wrong or if anything won't work for you please leave your feedback in the comment section.