Click me to vist the reference video
-
The lines will not be executed by the compiler.
-
Use // => for inline commenting.
-
Use /* ... */ => For multiline commenting.
-
EX:
console.log("hi");
// console.log("hello"); inline comment not executed.
//multiline comment (Not executed)
/*
bhcbcdbjc
bhcbbc historychbhbhj
cbhsdcbbdsc
*/
- Output:
hi
-
Variables are used to store data in memory.We can store any kind of data using variables.
-
In javascript,We use three kind of variables for assigining data.
- var
- let
- cost
//var
// 1) We can declare variables globally.
// 2) we can reassign values with var keyword.
var a = "vijay";
console.log(a);
a=10;
console.log(a);
- Output:
vijay
10
//let
// 1) We can use it for specific scope not for global usage
// 2) We can reassign the value using let
let b=20;
console.log(b)
b="hi";
console.log(b);
- Output:
20
hi
- This must be used with initialisation and should not used for reassignning.
//const
// 1) We must use declare a variable with it's value in same line in const keyword
const c = 10;
console.log(c);
// 2) We cannot reassign the const value (It will throe declartion error)
- Output:
10
-
= --> This opeartor assigns the right side value to left side variable.
-
EX: var a="Vijay"; --> Here, "vijay" stirng value is assigned to the a variable.
//addition
let a=10+20;
console.log(a);
//subtraction
let b=10+20;
console.log(b);
//mutiplication * astreit symbol
let c=10*20;
console.log(c);
//division
let d=10/20;
console.log(d);
//modulas or remainder
let e=10%20;
console.log(e);
//Increament
let f=10;
f++;
console.log(f);
//Decreament
let g=10;
g--;
console.log(g);
- Output:
30
30
200
0.5
10
11
9
//addition
let a =10;
a += 20;
console.log(a);
//subtraction
let b =10;
b -= 20;
console.log(b);
//Multiplication
let c=10;
c *= 20;
console.log(c);
//Division
let d=10;
d /= 20;
console.log(d);
//modulas
let e=10;
e %= 20;
console.log(e);
- Output:
30
-10
200
0.5
10
- We should declare inside "" or ''.
-
There are some escapse sequences that is not considered within string. They are:
- \n --> new line
- \b -->backspace
- \f --> form control
-
Ex:
//Using \n
let string ="I am vijay \nI am arun";
console.log(string);
//Using \b
let a = "Hii\b hello";
console.log(a);
//Using \f
let b="Welcome \fgood morning";
console.log(b);
- Output:
I am vijay
I am arun
Hi hello
Welcome
good morning
- They cannot be altered once created.
//correct method to alter string
// Use to change the whole string
let a ="Bi";
a = "Hi";
console.log(a);
//Wrong method to alter string
let b="bi";
b[0]='h';
console.log(b); //Not change
- Output:
Hi
bi
-
To find string length , Use stringnmae.length method.
-
We can also find letters in string using length method
// length
let a = "Hi i am vijay";
console.log(a.length);
//find first letter
let b = "vijay";
console.log(b[0]);
//find Nth letter
let c = "Good morinig";
console.log(c[8]);
//find last letter in large string
let d="ajnsdhvdchjdcbndcdcbz";
console.log(d[d.length-1]);
//find N'th last letter in string
let e="bcsdbcjdbbcnjkbjDFGbsh8";
console.log(e[e.length-2]);
- Output:
13
v
i
z
h
- We can merge two strings using + operator and += operator.
//Using +
let a = "I am";
let b = "vijay";
console.log(a + " " + b );
//Using +=
let c="He is";
c += " Vikram";
console.log(c);
- Output:
I am vijay
He is Vikram
- we can assign strings to variables and use the variables in another string.
function wordBlank(noun,adjective,verb,adverb){
let a ="The" + " " + adjective + " " + noun + " " + verb + " " + adverb + "." ;
return a;
}
console.log(wordBlank("dog","dirty","ran","fast"));
console.log(wordBlank("cat","beautiful","eat","well"));
- Output:
The dirty dog ran fast.
The beautiful cat eat well.
- Array allows us to storevmultiple values using [].
- Elementsv inside array will be seperated by ,
- Elements can be any data type.
let a = [1,2,3,"HI",'a',true];
console.log(a);
- Output:
[ 1, 2, 3, 'HI', 'a', true ]
- Arrays inside array also known as multi diamensional array.
let nest = [[1,2,3],[4,5,6],[7,8,9,10]];
console.log(nest);
- Output:
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9, 10 ] ]
-
[index] We can access array elements using this bracket notation.
-
Array index starts from 0.
-
We can access nested array elements using [][] where fisrt [] represents the main array index and next[] represennts the subarray index.
let a = [1,2,3,"HI",'a',true];
let nest = [[1,2,3],[4,5,6],[7,8,9,10]];
console.log(a[0]);
console.log(nest[2]);
console.log(nest[0][1]); // 2
- Output:
1
[ 7, 8, 9, 10 ]
2
- WE can modify or change the elements in the array using [] as below.
let normal = [10,20,30,40];
console.log("Before modification:",normal);
normal[3]=80;
console.log("After modification:",normal);
- Output:
Before modification: [ 10, 20, 30, 40 ]
After modification: [ 10, 20, 30, 80 ]
//Nested array
let nest = [[1,2,3],["hi","Hello"],[4,5]];
console.log("Before modification:",nest);
nest[2]=['a','b','c'];
console.log("After modification:",nest);
- Output:
Before modification: [ [ 1, 2, 3 ], [ 'hi', 'Hello' ], [ 4, 5 ] ]
After modification: [ [ 1, 2, 3 ], [ 'hi', 'Hello' ], [ 'a', 'b', 'c' ] ]
- It adds elements to the beginning of array using Arrayname.unshift([new element/new array]);
// Normal array
let a = [1,5,78];
console.log("Before unshift:",a);
a.unshift(0);
console.log("After unshift:",a);
//Nested array
let b = [["rice",10],["wheat",5],["mango",10]];
console.log("Before unshift:",b);
b.unshift(["orangr",5]);
console.log("After unshift:",b);
- Output:
Before unshift: [ 1, 5, 78 ]
After unshift: [ 0, 1, 5, 78 ]
Before unshift: [ [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ] ]
After unshift: [ [ 'orangr', 5 ], [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ] ]
- It adds elements to the last of array using Arrayname.push([new element/new array]);
// Normal array
let a = [1,5,78];
console.log("Before push:",a);
a.push(100);
console.log("After unshift:",a);
//Nested array
let b = [["rice",10],["wheat",5],["mango",10]];
console.log("Before push:",b);
b.push(["orange",5]);
console.log("After push:",b);
- Output:
Before push: [ 1, 5, 78 ]
After unshift: [ 1, 5, 78, 100 ]
Before push: [ [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ] ]
After push: [ [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ], [ 'orange', 5 ] ]
- It removes elements from the last of array using Arrayname.shift();
// Normal array
let a = [1,5,78];
console.log("Before shift:",a);
a.shift();
console.log("After shift:",a);
//Nested array
let b = [["rice",10],["wheat",5],["mango",10]];
console.log("Before shift:",b);
b.shift();
console.log("After shift:",b);
- Output:
Before shift: [ 1, 5, 78 ]
After shift: [ 5, 78 ]
Before shift: [ [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ] ]
After shift: [ [ 'wheat', 5 ], [ 'mango', 10 ] ]
- It removes element in the last of array using Arrayname.pop();
// Normal array
let a = [1,5,78];
console.log("Before pop:",a);
a.pop();
console.log("After pop:",a);
//Nested array
let b = [["rice",10],["wheat",5],["mango",10]];
console.log("Before pop:",b);
b.pop();
console.log("After pop:",b);
- Output:
Before pop: [ [ 'rice', 10 ], [ 'wheat', 5 ], [ 'mango', 10 ] ]
After pop: [ [ 'rice', 10 ], [ 'wheat', 5 ] ]
- Functions are called mini programs.
- It allows us to create reusabe code.
function functionName() {
--- set of statements.--
}
functionNmae();
function show()
{
console.log("I am simple function example");
}
show(); //This is function call (We can reuse the same function using this call)
- Output:
I am simple function example
- parameters are variables that aare placeholders for the values that are to be input to afunction when it is called.
- Argumrnts are values that are considered as inputs which is pased during function call.
function functionName(variable1,variable2) //This variables are parameters.
{
---Set of staements---
}
functionName(value for variable1,value for variable 2); //This values are arguents.
function add(a,b){
console.log(a+b);
}
add(10,45);
add(-56,-300);
- Output:
55
-356
-
Scopr refers to the visiblity of variables.
-
Global scope --> We can use anywhere in the program even in function.
-
NOTE: I consoles , the variables declared without any keyword will automatically consider as var keyword.But ,text editrs must require any keyword to assign variables.
var global = 10; //Declaring global
function fun1(){
local=50; //Declare variable without keyword (Considered as global)
}
function fun2(){
var output;
if(typeof global != 'undefined'){
output="Global:"+global;
}
console.log(output);
if(typeof local != 'undefined'){
output = "Local:"+ local;
}
console.log(output);
}
fun1();
fun2();
- Output:
Global:10
Local:50
- variables declared within the functions will not visible outside of the function.
- We cannot use thode variables out of the functions .If we try to do it , the reference error will be return.
function local(){
var a=67; //Declaring within function
console.log(a); //Using within function
}
local();
- Output:
67
function local(){
var a=67; //Declaring within function
console.log(a); //Using within function
}
local();
console.log(a); //Using in global produce error
- Output:
/home/guest/Documents/video/jsvideo/functions/referror.js:8
console.log(a);
^
ReferenceError: a is not defined
- Declaring different variables with same variable names , one as gloal and another one as function local.
- Then the functional local variable will override the glbal variable. it will be used while calling the function.
var same="hi"; // Declaring global
function demo(){
var same = "Hello"; //Declaring same variable inside function
return same;
}
console.log(demo()); //Function call return the inside function value
console.log(same); //global usage will not affect the inside function variable.
- Output:
Hello
hi
- return statement in function returns the some statement to the function call.
function fun(num){
return num*25;
}
console.log(fun(20));
- Output:
500
- There is no compeltion to contain return statement in the functions.
- Without return in functions will produce undefined while calling the function.
function fun(){
var sum =0;
sum += 28;
}
console.log(fun());
- Output:
undefined
- To overcome this problem we should use return staement inside the function.
function fun(){
var sum=0;
sum +=89;
return sum;
}
console.log(fun());
- Output:
89
- To overcome this problem we should use return or consle.log for the variable sum inside the function.
function fun(){
var sum =0;
sum +=28;
console.log(sum);
}
fun();
- Output:
28
- We can assign the return statement vaues to avariable by assigning a variable to the function call.
function math(a,b){
var value=1;
return (value*10)+a+b ;
}
let res=math(2,5);
console.log(res);
- Output:
17
- JSON>stringify converts mostly objects and arrays to string.
let a = [10,46];
console.log(a); //Print as array
console.log(JSON.stringify(a)); //prints as string
let obj = {
name: "vijay",
age : 10
}
console.log(obj); //prints as object
console.log(JSON.stringify(obj)); //prints as string
- Output:
[ 10, 46 ]
[10,46]
{ name: 'vijay', age: 10 }
{"name":"vijay","age":10}
- It is functionality of queue datastructure.
- Queue datastructure follows first in first out rule.
- This uses nextLine function logic in it.
var testarr=[1,2,3,4,5];
function nextInline(arr,item){
arr.push(item);
return arr.shift();
}
console.log("Before:" + JSON.stringify(testarr));
console.log(nextInline(testarr,6));
console.log("After:"+JSON.stringify(testarr));
- Output:
guest@stalin:~/Documents/video/jsvideo/standInline$ node inline.js
Before:[1,2,3,4,5]
1
After:[2,3,4,5,6]
-
Logical AND (&&)
-
it performs * operation that means,
- 0 0 --> 0
- 0 1 --> 0
- 1 0 --> 0
- 1 1 --> 1
-
In other words, If both conditiona are true, only Result is true.
-
Logical OR (||)
-
it performs + operation that means,
- 0 0 --> 0
- 0 1 --> 1
- 1 0 --> 1
- 1 1 --> 1
-
In other words if any one of the condition is true the result is true.
-
Logical NOT (!)
- 0 --> 1
- 1 --> 0
-
In other words Just opposite.
- Check for the condition inside the brackets , if it is true execute if part otherwise none.
function check(a)
{
if(a==100){
return "IF part executed";
}
}
console.log(check(100)); //condition true means execute if block
console.log(check(25)); //false means print undefined because nothing is defined.
- Output:
IF part executed
undefined
- Check for the condition inside the brackets , if it is true execute if part otherwise executes else part.
function check(a){
if(a%2==0){
return "number is even (IF part)"
}
else{
return "Number id odd (ELSE part)"
}
}
console.log(check(18));
console.log(check(105));
- Output:
number is even (IF part)
Number id odd (ELSE part)
- Check for the condition inside the brackets , if it is true execute if part otherwise check next condition in elseif if that is true executes elseif part otherwise executs else part.
function check(a){
if(a==0){
return "Number is 0 {IF PART executed}";
}
else if(a%2==0){
return "Number is even {ELSEIF part executed}";
}
else{
return "Number is odd{ELSE part executed}";
}
}
console.log(check(0));
console.log(check(1));
console.log(check(4886));
- Output:
Number is 0 {IF PART executed}
Number is odd{ELSE part executed}
Number is even {ELSEIF part executed}
- We can use more than one else if statements acoording to the conditions required.
- But we should focus on the procedence of conditions that we use.
function check(marks){
if(marks>=90){
return "O grade \n Outstanding{ IF }"
}
else if( marks>=80 && marks<90 ){
return "A+ grade \n excellent { 1 st ELSEIF}";
}
else if(marks>=70 && marks<80 ){
return "A grade \n very good{ 2 nd ELSEIF }";
}
else if(marks>=60 && marks<70 ){
return "B+ grade \n Good{ 3 rd ELSEIF }";
}
else if(marks>=50 && marks<60 ){
return "B grade \n Need to improve more { 4 th ELSEIF }";
}
else{
return "FAIL \n GOOD LUCK NEXTTIME{ ELSE }";
}
}
console.log(check(0));
console.log(check(50));
console.log(check(65));
console.log(check(70));
console.log(check(81));
console.log(check(100));
- Output:
FAIL
GOOD LUCK NEXTTIME{ ELSE }
B grade
Need to improve more { 4 th ELSEIF }
B+ grade
Good{ 3 rd ELSEIF }
A grade
very good{ 2 nd ELSEIF }
A+ grade
excellent { 1 st ELSEIF}
O grade
Outstanding{ IF }
var Nickname=["Hole-in-one","eagle","Birdie","Par","Bogey","Double bogey","Go home"];
function golf(par,stroke){
if(stroke==1){
return Nickname[0];
}
else if( stroke <= par-2 ){
return Nickname[1];
}
else if( stroke == par-1 ){
return Nickname[2];
}
else if( stroke == par ){
return Nickname[3];
}
else if( stroke == par+1 ){
return Nickname[3];
}
else if( stroke == par+2 ){
return Nickname[4];
}
else if( stroke >= par+3 ){
return Nickname[5];
}
}
console.log(golf(1,1));
console.log(golf(5,8));
console.log(golf(2,2));
console.log(golf(2,4));
- Output:
Hole-in-one
Double bogey
Par
Bogey
- Switch statements usually helpful for checking multiple conditions.
- It is more easy to understand and simple than nested if-else statements.
- Mainly it is used for menu and operatioj according to the selected menu.
- Always set switch ( true ) if there is more than comparison operation.
- break keyword is compulsary for every case otherwise it executes all the cases provided.
- use default keyword to display the error message usually.There is not compulsion to use default as last,we can use it anywhere.
switch(condition){
case 1:
set of statements;
break;
case 2:
set of statements;
break;
case 3:
set of statements;
break;
...
case N:
set of statements;
break;
default:
display error message;
break;
}
function com(a){
var display;
switch(a){
case 1:
display="a is equal to 1";
break;
case 2:
display="a is equal to 2";
break;
case 3:
display="a is equal to 3";
break;
default:
display="a is not 1 , 2 ,3 ";
}
return display;
}
console.log(com(1));
console.log(com(2));
console.log(com(3));
console.log(com(89));
- Output:
a is equal to 1
a is equal to 2
a is equal to 3
a is not 1 , 2 ,3
let choose;
console.log(" 1.addition \n 2.subtraction \n 3.Mutiplication \n 4.division");
function calci(choose,a,b){
switch(choose){
case 1:
res=a+b;
console.log("Addition of "+ a + " and " + b + " is : " + res);
break;
case 2:
res=a-b;
console.log("Subtraction of "+ a + " and " + b + " is : " + res);
break;
case 3:
res=a*b;
console.log("Multiplication of "+ a + " and " + b + " is : " + res);
break;
case 4:
res=a/b;
console.log("division quatient of "+ a + " and " + b + " is : " + res);
break;
default:
console.log( " Wrong input ");
break;
}
}
calci(1,10,67);
calci(2,67,879);
calci(3,670,879);
calci(4,60,89);
- Output:
1.addition
2.subtraction
3.Mutiplication
4.division
Addition of 10 and 67 is : 77
Subtraction of 67 and 879 is : -812
Multiplication of 670 and 879 is : 588930
division quatient of 60 and 89 is : 0.6741573033707865
- All conditional statemets usually return the boolean values true or false.
function boolean(a,b){
return a==b;
}
console.log(boolean(10,56));
console.log(boolean(10,10));
- Output:
false
true
- The function is terminated when it meets the return.
function demo(a,b){
return a+b; //eary return executes and produce output
return a-b; //this is omitted
}
console.log(demo(1,8));
- Output:
9
function card(value){
var count=0;
switch(value){
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
count++;
break;
case 8:
case 9:
case 10:
count=count;
break;
case "J":
case "Q":
case "K":
case "A":
count-- ;
break;
}
var result;
if(count>=0){
result="Hold";
}
else{
result="Bet";
}
return "count is " + count + " " + " So Need to " + result;
}
console.log(card(2));
console.log(card("A"));
console.log(card(0));
console.log(card("Q"));
- Output:
count is 1 So Need to Hold
count is -1 So Need to Bet
count is 0 So Need to Hold
count is -1 So Need to Bet
- Objects are similar to arrays which is alsi used to store multiple value with different datatypes.
- Objects contains properties and values within it.
- It is denoted with {}.
let family = {
name : "Vijay",
Mother:"Ponni",
Father:"Subramani",
age:20,
Village:"Valrasaplayam"
}
console.log(family);
- Output:
{
name: 'Vijay',
Mother: 'Ponni',
Father: 'Subramani',
age: 20,
Village: 'Valrasaplayam'
}
- we can access the properties of objects using . and [] notations.
- ObjectName.Property ; OR ObjectName["property"];
let object = {
date : 10,
day : "Wednesday",
year : 2022,
message : "stay happy"
}
console.log(object);
//Using .notation
console.log(object.day);
//Using [] notation
console.log(object["date"]);
console.log(object['message']);
- Output:
{ date: 10, day: 'Wednesday', year: 2022, message: 'stay happy' }
Wednesday
10
stay happy
-
We can update the properties of objects by assing new value to a current object property.
-
obj.property=Newvalue;
-
We can also add new object property by assinging the new property to new value.
-
obj.newProperty = newValue.
let timetable = {
monday : "Music class",
Tuesday : "Dance class",
Wednesday : "Kungfu class",
Thursday : "Violin class",
}
console.log( "Object before any updation : \n",timetable);
// Updating value of a existing property
timetable.Wednesday="Singing class";
console.log( "Object After Update new value to existing property : \n",timetable);
//Updating a property with new value
timetable.Sunday = "Cooking class";
console.log("Object After update new property : \n", timetable);
- Output:
Object before any updation :
{
monday: 'Music class',
Tuesday: 'Dance class',
Wednesday: 'Kungfu class',
Thursday: 'Violin class'
}
Object After Update new value to existing property :
{
monday: 'Music class',
Tuesday: 'Dance class',
Wednesday: 'Singing class',
Thursday: 'Violin class'
}
Object After update new property :
{
monday: 'Music class',
Tuesday: 'Dance class',
Wednesday: 'Singing class',
Thursday: 'Violin class',
Sunday: 'Cooking class'
}
- We can delete any object property by using delete objectName.Property method.
var workers = {
w1 : "Logesh",
w2: "Vijay",
w3 : "Vikram"
}
console.log("Before deleting : \n", workers);
delete workers.w1;
console.log("After deleting : \n", workers);
//Delete whole object
delete workers; //We can't delete whole object
console.log("After deleting the object using delete it still shows the object \n ",workers);
- Output:
Before deleting :
{ w1: 'Logesh', w2: 'Vijay', w3: 'Vikram' }
After deleting :
{ w2: 'Vijay', w3: 'Vikram' }
After deleting the object using delete it still shows the object
{ w2: 'Vijay', w3: 'Vikram' }
function lookup(value){
var res;
let dic = {
"apple" : "A fruit",
"Bring" : "fetch",
"cat" : "An small animal",
"dig" : "dig"
};
res=dic[value];
return res;
}
console.log(lookup("apple"));
console.log(lookup("cat"));
- Output:
A fruit
An small animal
- We can verify whether the particular proprty is available or not in the object using the hasOwnPrperty method.
- Syntax : objectName.hasOwnProperty(propertyname);
function check(value){
var res;
let obj = {
1 : "v1",
2 : "v2",
"hi": 675,
}
res = obj[value];
if(obj.hasOwnProperty(value)){
return "Yes here it is :"+obj[value];
}
else{
return "No"
}
}
console.log(check(1));
console.log(check(5));
console.log(check("hello"));
console.log(check("hi"));
- Output:
Yes here it is :v1
No
No
Yes here it is :675
- We can insert many objects inside the array.
let array = [
{
p1 : "Value",
p2 : "value",
p3 : [
1,2,3
],
},
{
p21 : "Value1",
p22 : "value2",
p23 : [
1,2,3,'j'
],
},
];
console.log(array);
console.log(array[0]);
console.log(array[1]);
- Output:
[
{ p1: 'Value', p2: 'value', p3: [ 1, 2, 3 ] },
{ p21: 'Value1', p22: 'value2', p23: [ 1, 2, 3, 'j' ] }
]
{ p1: 'Value', p2: 'value', p3: [ 1, 2, 3 ] }
{ p21: 'Value1', p22: 'value2', p23: [ 1, 2, 3, 'j' ] }
-
Object inside object is called nested object .
-
We can access the inner object properties through the sae . or [] notations
let obj = {
nested : {
n1: "Value",
n1a : "Value",
},
normal1 : 2,
normal2: 5,
}
console.log(obj.nested.n1a);
console.log(obj["nested"]["n1"]);
- Output:
Value
Value
- We can even access the object properties inside arrays using . and [] notations.
let array = [
{
p1 : "Value",
p2 : "value",
p3 : [
1,2,3
],
},
{
p21 : "Value1",
p22 : "value2",
p23 : [
1,2,3,'j'
],
},
];
//access object proprties
console.log(array[1].p23);
console.log(array[1].p23[3]);
console.log(array[0]["p1"]);
- output:
[ 1, 2, 3, 'j' ]
j
Value
var collection = {
"1" : {
"Name": "vijay",
"Things": ["bag,shirt"],
} ,
"2" : {
"Name": "Surya",
"age": 22,
"Things": ["bag,shirt","purse"],
} ,
"3" : {
"Name": "kumar",
} ,
}
var copy = JSON.parse(JSON.stringify(collection));
function update(id,prop,value){
if(value===""){
delete collection[id][prop];
}
else if(prop==="Things"){
collection [id][prop] = collection [id][prop] || [];
collection [id][prop].push(value);
}
else {
{
collection[id][prop]= value;
}
return collection;
}
update("1","Name","");
update("2","Name","Ashwin");
update("3","Name","jo");
update("3","Things","['a bag','a plate']");
console.log("Original data :\n",copy);
console.log("Updated data :\n",collection);
- Output:
Original data :
{
'1': { Name: 'vijay', Things: [ 'bag,shirt' ] },
'2': { Name: 'Surya', age: 22, Things: [ 'bag,shirt', 'purse' ] },
'3': { Name: 'kumar' }
}
Updated data :
{
'1': { Things: [ 'bag,shirt' ] },
'2': { Name: 'Ashwin', age: 22, Things: [ 'bag,shirt', 'purse' ] },
'3': { Name: 'jo', Things: [ "['a bag','a plate']" ] }
}
- Use the JavaScript function JSON.parse() to convert text into a JavaScript object.
- Make sure the text is in JSON format, or else you will get a syntax error.
- lopps allow us to execute same code multiple times.
- A while loop will iterate for an indefinite number of times until the specified condition (there is only one) evaluates to false.
let arr=[];
var i=0;
while(i<5){
arr.push(i);
i++;
}
console.log(arr);
- Output:
[ 0, 1, 2, 3, 4 ]
let arr=[];
for(let i=0;i<10;i++){
arr.push(i);
}
console.log(arr);
- Output:
[
0, 1, 2, 3, 4,
5, 6, 7, 8, 9
]
let odd=[];
for(let i=1;i<10;i+=2){
odd.push(i);
}
console.log("odd array : ", odd);
let even=[];
for(let i=0;i<10;i+=2){
even.push(i);
}
console.log("Even Array " , even);
- Output:
odd array : [ 1, 3, 5, 7, 9 ]
Even Array [ 0, 2, 4, 6, 8 ]
let nor=[];
for(let i=10;i>0;i--){
nor.push(i);
}
console.log(nor);
//reverse odd
let odd=[];
for(let i=9;i>0;i-=2){
odd.push(i);
}
console.log(odd);
//reverse even
let even = [];
for(let i=10;i>1;i-=2){
even.push(i);
}
console.log(even);
- Output:
[
10, 9, 8, 7, 6,
5, 4, 3, 2, 1
]
[ 9, 7, 5, 3, 1 ]
[ 10, 8, 6, 4, 2 ]
let a = [1,2,3,4,5,100,1000];
let t=0;
for(let i=0;i<a.length;i++){
t=t+a[i];
}
console.log(t);
- Output:
1115
function mul(arr){
let res=1;
for(let i=0;i<arr.length;i++){
for(let j=0;j<arr[i].length;j++){
res *= arr[i][j];
}
}
console.log(res);
}
mul([[1,1,36],[1,7],[10,78]]);
- Output:
196560
do{
--- set of statements ---
} while (condition);
-
do - while atleaset executes the statements once even the condition is false.
-
It is slightly different from while.
-
The do-while loop is mostly used in menu-driven programs where the termination condition depends upon the end user.
//do-while
let a = [];
var i=0;
do{
a.push(i);
i++;
}while(i>5) // condition false but executed one time
console.log(a);
// while
let b=[];
var j=0;
while(j>5){ // condition false so not executed
b.push(j);
j++;
}
console.log(b);
- Output:
[ 0 ]
[]
var contacts = [
{
"name" : "A",
"Number" : "1234567890",
"Likes" : ["book","food"]
},
{
"name" : "B",
"Number" : "4563782903",
"Likes" : ["swim"]
},
{
"name" : "C",
"Number" : "6428105424",
},
]
function pro(name,prop){
for(let i=0;i<contacts.length;i++){
if(contacts[i].name===name){
return contacts[i][prop] || "No such property"
}
}
return "No such contact";
}
console.log(pro("A","Number"));
console.log(pro("B","Likes"));
console.log(pro("D"));
console.log(pro("C","Likes"));
- Output:
1234567890
[ 'swim' ]
No such contact
No such property
- math.random() generates random fraction numbers between 0 to 0.99 and not 1.
function fun(){
return Math.random();
}
console.log(fun());
console.log(fun());
- Output:
0.9379829499406704
0.7898268261708992
- It returns down to the nearest whole number.
function fun(a){
return Math.floor(Math.random()+7) * a;
}
console.log(fun(23));
console.log(fun(13));
- Output:
161
91
function range(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(range(2,16));
console.log(range(6,100));
- Output:
11
40
- It takes string and returns as number.
function chech(a){
return parseInt(a);
}
console.log(89);
console.log("89");
console.log("^");
console.log("k");
- Output:
89
89
^
k
-
Radix specifies the base of number or string such as base 2 , base 10.
-
parseInt("string",2);
-
The parseInt method parses a value as a string and returns the first integer.
-
A radix parameter specifies the number system to use:
-
2 = binary, 8 = octal, 10 = decimal, 16 = hexadecimal.
-
If radix is omitted, JavaScript assumes radix 10. If the value begins with "0x", JavaScript assumes radix 16.
function fun(a){
console.log(parseInt(a,2));
console.log(parseInt(a,10));
console.log(parseInt(a,16));
console.log(parseInt(a,8));
}
fun("1010");
fun("76");
- Output:
10
1010
4112
520
NaN
76
118
62
-
The ternary operator has the form of: statement ? statement : statement
-
Statements can be expressions or a single value
-
NOTE : It does not support {} brackets or multiple statements
function check(a){
a==0 ? console.log("IF") : console.log("ELSE");
}
check(5);
check(0);
- Output:
ELSE
IF
function check(num){
return num>0 ? "positive" : num<0 ? "Negatie" : "Zero";
}
console.log(check(0));
console.log(check(56));
console.log(check(-8));
- Output:
Zero
positive
Negatie
- var is the old keyword in javascript we can reassign a variable again with a same name in var but let , const won,t allow.
var variable =10;
console.log(variable);
var variable ="Vijay"; //it accepts and overwrite the old value
console.log(variable);
var sum =0;
sum += variable;
console.log(sum);
- Output:
10
Vijay
0Vijay
let variable = 36;
console.log(variable);
let variable = "vijay"; // We cant use like this
console.log(variable);
- Output:
/home/guest/Documents/video/jsvideo/varAndLet/let.js:4
let variable = "vijay"; // We cant use like this
^
SyntaxError: Identifier 'variable' has already been declared
- NOTE : We must use new variable to assign the new value.
-
The strict mode is a feature available since ECMAScript 5 that allows you to place your entire program, or an isolated scope, in a ”strict” operating context.
-
This strict context prevents certain actions from being taken and throws an exception.
-
For example, in strict mode you cannot use undeclared variables. Without strict mode, using an undeclared variable will automatically create that variable.
- You cannot use delete keyword to delete variables in JavaScript
- No errer will be thrown but silently the delete is not working.
var number=78;
console.log(delete number); //No error thrown but nember not deleted
console.log(number);
- Output:
false
78
- But using strict will show error.
"use strict";
let variable =56;
delete variable ; //error message thrown because of using strict mode.
- Output:
delete variable ;
^^^^^^^^
SyntaxError: Delete of an unqualified identifier in strict mode.
- The strict mode doesn’t have to be enabled globally. It is possible to isolate a single block (or function) scope to strict mode:
- It will not throw error.
var name = "vijay";
var age =10;
if(1){
gender = "male"; //it is not declared with any keyword but it worked inside scope
console.log(gender);
}
function check(){
favourite = "books";
console.log(favourite); //it is not declared with any keyword but it worked inside scope
}
check();
- Output:
male
books
- It will throw error if we use undeclared variables.
var name="vijay";
var age = 20;
function check(){
"use strict";
gender = "male";
console.log(gender);
}
check();
- Output:
gender = "male";
^ReferenceError: gender is not defined
- If it is declaredc globally We can use anywhere in the program.
var global = 45; //declared globally
console.log(global); //global use accepted
if(1){
console.log(global); //block use accepted
}
function check(){
console.log(global); //function use accepted
}
check();
- Output:
45
45
45
- If we declare inside a block it is accesssable anywhere in the program.
var global=10;
if(1){
var block = "I am block"; // declaring inside block
console.log(block);
}
console.log(block); //Using in global accepted
function check(){
console.log(block); //using inside function accepted
}
check();
- Output:
I am block
I am block
I am block
- If we declare inside function , we should only use it indside function.
var global=56;
function check(){
var variable = "I am inside function"; //declaring inside function
console.log(variable); //Using inside function accepted
}
check();
console.log(variable); //Using globally not accepted throws error
if(1){
console.log(variable); //Using in another scope out of function not accepted throws error
}
- Output:
I am inside function
console.log(variable); //Using globally not accepted throws error
^
ReferenceError: variable is not defined
- If we declare it in global we can access it anywhere in the program.
let global = "I am global"; //Declared globally
console.log(global); //Using globally accepted
if(1){
console.log(global); //Using inside block accepted
}
function check(){
console.log(global); //Using inside function accepted
}
check();
- Output:
I am global
I am global
I am global
- Scope of let is limited to the block statement or expression that it was declared in.
let global="global";
if(1){
let block = "I am block"; //Declared inside block
console.log(block); //Accessing inside block is accepted
}
console.log(block); // Accessing in global is not accepted
function check(){
console.log(block); // Accessing in function is not accepted
}
check();
- Output:
I am block
/home/guest/Documents/video/jsvideo/scopeOfLet/letScopeBlock.js:8
console.log(block); // Accessing in global is not accepted
^
ReferenceError: block is not defined
- If we declare variable inside a functio we can't access it outside the function.
let global = "I am global";
function check(){
let variable = "Inside Function "; //Declared inside function
console.log(variable); // accessing inside function worked
}
check();
console.log(variable); //Accessing outsde function not worked
- Output:
Inside Function
/home/guest/Documents/video/jsvideo/scopeOfLet/letScopeFunction.js:9
console.log(variable);
^ReferenceError: variable is not defined
-
let keyword restricts it's scope where it declared.But if we want to redeclare the same variable name , we can use it in another scope it will not disturb the existing one.
-
Example: if we declare a variable a in golbal and set the value to 10. I want to use the same variable a in my function (Or any block) but with different value.
-
For that ,we can reassign the same variable with new value in the required function (or in the scope) .
-
consider the below example:
let same="I am global variable of let"; //declared in gobal
console.log(same); //Using in global produce global value
if(1){
let same = "I am block variable of let"; //declared and reassign in block
console.log(same); //Using inside block will only utilize the reassigned value
}
function check(){
let same = "I am function variable of let"; //declared and reassign in function
console.log(same); //Using inside function will only utilize the reassigned value
}
check();
- Output:
I am global variable of let
I am block variable of let
I am function variable of let
let same="I am global variable of let"; //declared in gobal
console.log(same); //Using in global produce global value
if(1){
let same = "I am block variable of let"; //declared and reassign in block
console.log(same); //Using inside block will only utilize the reassigned value
}
function check(){
let same = "I am function variable of let"; //declared and reassign in function
console.log(same); //Using inside function will only utilize the reassigned value
}
check();
- Output:
Block Scope is : block scope
Function scope i is : block scope
Block Scope is : block scope
Function scope i is : function scope
-
const keyword is used for read only variable.So we cannot reassign the variable again in const keyword.
-
Always try to follow capitalize the variable name which is declared using const keyword to specify and improve readability of the code.
const VARIABLE = 19; //declaring using const keyword
console.log(VARIABLE);
VARIABLE =49; // We can't reassign
console.log(VARIABLE);
- Output:
19
/home/guest/Documents/video/jsvideo/const/const.js:5
VARIABLE =49; // We can't reassign
^
TypeError: Assignment to constant variable.
-
Mutate means change
-
Assigning array with const , we cannot reassign the whole array to new .But we can update each elemets in the array with bracket notations.
const ARRAY =[1,56,789];
function edit(){
ARRAY = [3,78,654];
return ARRAY;
}
console.log(edit());
- Output:
ARRAY = [3,78,654];
^
TypeError: Assignment to constant variable
const ARRAY = [1,3,5];
function edit(){
"use strict";
ARRAY[0]=2;
ARRAY[1]=4;
ARRAY[2]=6;
ARRAY[3]=8;
return ARRAY;
}
console.log(edit());
- Output:
[ 2, 4, 6, 8 ]
- whenever we have a object and we don't want to change any property in the objct , we should use object.freeze function.
function demo(){
"use strict";
const MATH_CONST ={
PI : 3.14
};
Object.freeze(MATH_CONST);
try{
MATH_CONST.Pi = 66;
}catch( ex )
{
console.log(ex);
}
return MATH_CONST.Pi;
}
console.log(demo());
- Output:
guest@stalin:~/Documents/video/jsvideo/const$ node freeze.js
TypeError: Cannot add property Pi, object is not extensible
- Use arrow functions to write concise anonmuous functions.
- Funtions does not connatain function name instead declared with variable.
let anonymous = function(){
console.log("I am anonymous");
return new Date();
};
console.log(anonymous());
- Output:
I am anonymous
2022-05-06T06:58:47.339Z
- Whenever we have a anonymous function or normal function we can make it to arrow function using => symbol and removing function keyword from function.
let arrowFunction = () => {
console.log( "I am arrow function ")
return new Date() ;
}
console.log(arrowFunction());
- Output:
I am arrow function
2022-05-06T07:04:32.863Z
- It is similar to passing the parameters in normal function.
- Syntax to conactinate two arrays is:
- arrat1.concat(array2);
const arrayConcat = (arr1,arr2) => arr1.concat(arr2);
console.log(arrayConcat([1,4,6],[2,4,7]));
- Output:
[ 1, 4, 6, 2, 4, 7 ]
-
In Javascript, functions can be assigned to variables in the same way that strings or arrays can.
-
They can be passed into other functions as parameters or returned from them as well.
-
A “higher-order function” is a function that accepts functions as parameters and/or returns a function.
const radius = [1,4,7];
const diameter = function(radius){
return radius*2;
} ;
const cal = function (radius,logic) {
const res=[];
for(let i=0;i<radius.length;i++){
res.push(logic(radius[i]));
}
return res;
}
const zero = function(radius){
return radius - radius;
};
console.log(cal(radius,diameter));
console.log(cal(radius,zero));
- Output:
[ 2, 8, 14 ]
[ 0, 0, 0 ]
const array =["Vijay","Surya"];
const gap = function(array){
return " "+array+" ";
}
const display = function (array,init){
const final =[];
for(let i=0;i<array.length;i++){
final.push(init(array[i]));
}
return final;
}
console.log(display(array,gap));
- output:
[ ' Vijay ', ' Surya ' ]
const increament = (num,val=1) => {
return num+val;
}
const res = (logic) => {
return logic;
}
console.log(res(increament(12)));
- Output:
13
-
The rest operator allows us to create a function that takes a variable number of argumets.
-
... --> indicates rest operator.
function rest(...args) {
return args;
}
console.log(rest(10,78,77,78));
- Output:
[ 10, 78, 77, 78 ]
function sum(...args){
return args.reduce((a,b) => a+b,0)
};
console.log(sum(1,4,6,78));
- Output:
89
-
The spread operator expands the already existing array.
-
It also denoted with ...
const arr1=['Jan','Feb','Mar'];
arr2=[];
function get(arr2)
{
return arr2=[arr2,...arr1];
}
console.log(get("ji"));
console.log(get(78));
- Output:
[ [ 'ji' ], 'Jan', 'Feb', 'Mar' ]
[ [ 78 ], 'Jan', 'Feb', 'Mar' ]
- This is the syntax for neatly asssigning values taken directly from an object to a variable.
let object = {
a : 2.5,
b : 3.7,
c : 4.89
}
console.log(object);
let x = object.a;
let y = object.b;
let z = object.c;
console.log(x,y,z);
- Output:
{ a: 2.5, b: 3.7, c: 4.89 }
2.5 3.7 4.89
let object = {
a : 56,
b : 78,
c : 678
}
console.log(object);
const { a : x , b :y , c:z } = object; // NOTE : DON't use : object = const { } like thay.(It will show error)
console.log(x,y,z);
- Output:
{ a: 56, b: 78, c: 678 }
56 78 678
const AVG_TEMP = {
Monday : 97.0,
Tuesday : 91
}
console.log(AVG_TEMP);
function destruct(temp_list){
const { Monday : Today , Tuesday : Tomorrow }= temp_list;
console.log(Today,Tomorrow);
}
destruct(AVG_TEMP);
- Output:
{ Monday: 97, Tuesday: 91 }
97 91
let temp = {
Monday : { max : 93 , min : 88 },
Tuesday : { max : 95 , min : 80 }
}
console.log(temp);
function forcastOfToday(tempToday){
const { Monday : { max : high , min : low }} = tempToday
console.log("Today FORCAST :");
console.log("Expected High: " + high + "\n "+ "Expected Low : " + low);
}
forcastOfToday(temp);
- Output:
{ Monday: { max: 93, min: 88 }, Tuesday: { max: 95, min: 80 } }
Today FORCAST :
Expected High: 93
Expected Low : 88
-
It is slightlt differenet from objects .
-
Synatx : const {var 1 , var 2 ,..} = array;
-
We should give space between variables to assign particular variable ti paricular arry element.
let array = [10,4,67,4];
console.log(array);
const [ a, b, c,d ] = array; //Assigning variables a,b,cd
console.log(a,b,c,d);
let array2 = [1,6,7];
console.log(array2);
const [x, , y] =array2; //Assigning x=1 and y = 7 (need to give space between variable names according to our wish)
console.log(x,y);
- Output:
[ 10, 4, 67, 4 ]
10 4 67 4
[ 1, 6, 7 ]
1 7
let array = [1,2,3];
console.log(array);
const [a,,c]=array;
console.log(a,c);
let x=10;
let y=20;
console.log("Befor Switching : x and y: ", x,y);
swap = () => {
[x,y] = [y,x] ;
console.log("After Switching : x and y : " , x ,y);
}
swap();
- Output:
[ 1, 2, 3 ]
1 3
Befor Switching : x and y: 10 20
After Switching : x and y : 20 10
const arr = [1,2,3,4,5];
function lastTWo(){
const[a,b,c,...rest] = arr;
return rest;
}
console.log("Before : ", arr);
console.log("After : ", lastTWo());
- Output:
Before : [ 1, 2, 3, 4, 5 ]
After : [ 4, 5 ]
Passing object as parameter in function and utilizing only the necessary properties with destructing assignment
- It is mostly used in API calls and ajax methods .
let obj = {
num : 45,
num2 : 56
}
console.log(obj);
function add(para)
{
return para.num+ para.num2;
}
console.log(add(obj));
//destructing method
let object = {
a : 1,
b : 2
}
console.log(object);
const demo = (function(){
return function demo( {a,b } ){
return a + b;
}
})();
console.log(demo(object));
- Output:
{ num: 45, num2: 56 }
101
{ a: 1, b: 2 }
3
let obj = {
first : ["number1","number2"],
second : ["String1","String2"] ,
third : ["array1","Array2"]
}
function displayWithTemplate(arr){
let res=[];
for(let i=0;i<arr.length;i++){
res.push(`<li class="text-warning"> ${arr[i]}`);
}
return res;
}
console.log(displayWithTemplate(obj.first));
console.log(displayWithTemplate(obj.second));
- Output:
[
'<li class="text-warning"> number1',
'<li class="text-warning"> number2'
]
[
'<li class="text-warning"> String1',
'<li class="text-warning"> String2'
]
- It easily defines object literal.
console.log("Before simplifying : \n");
function demo(name ,age ){
return {
name : name,
age : age
}
}
console.log(demo("Vijay",20));
console.log("\n");
console.log("After Simplifying:\n");
let demo2 = (name ,age ) => ( {name ,age } ) ;
console.log(demo2("Vijay",20));
- Output:
Before simplifying :
{ name: 'Vijay', age: 20 }
After Simplifying:
{ name: 'Vijay', age: 20 }
const object = {
name : "hello",
method : function show(vari){
console.log(`I am ${vari} method `);
}
}
object.method("normal");
- Output:
I am normal method
let object = {
name : "vijay",
method(vari){
console.log(`I am ${vari} method `);
}
}
object.method("simple");
- Output:
I am simple method
-
A JavaScript class is not an object.
-
It is a template for JavaScript objects.
class ClassName {
constructor() { ... }
}
method_1(){
}
.
.
.
method_n(){
}
-
constructor is the default keyword to generate object properties and get the parameters as properties.
-
this.parametername is necessary inside constructor to create properties.
-
We can create n number of methods using any name .
-
After creating class , we must assign it to constructor with other name and it should be called as fllows:
let newClassName = new className("argument", argument);
class family {
constructor(name ,age){
this.name =name,
this.age = age
}
method(text){
return text;
}
}
const show = new family("vijay",89);
console.log(show);
console.log(show.method("Brilliant vijay"));
- Output:
family { name: 'vijay', age: 89 }
Brilliant vijay
function show(){
class vegetable {
constructor(name){
this.name=name;
}
}
return vegetable;
}
let func = show();
let veg = new func("petroot");
console.log(veg.name);
- Output:
petroot
-
Getters and setters allow you to define Object Accessors (Computed Properties).
-
JavaScript Getter (The get Keyword)
-
JavaScript Setter (The set Keyword)
-
NOTE: whenever we create a variable with _ , it is only accessable within the scope.
function makeclass(){
class thermostate{
constructor(temp){
this._temp = 5/9 * (temp-32);
}
get temperature(){
return this._temp;
}
set temperature(updatedTemp){
return this._temp = updatedTemp;
}
}
return thermostate;
}
const thermostate = makeclass();
const thermos = new thermostate(76);
let temp = thermos.temperature;
thermos.temperature=26;
temp = thermos.temperature;
console.log(temp);
- Output:
26
- Consider 2 .js files
- 1 .html file
- Write your functions in any one .js files to export them
- In another .js file just get the function using require keyword
- Just link the .js file which is getting to .html file.
- Kindly refer the following process.
<!DOCTYPE html>
<head>
<title> JAVA SCRIPT </title>
<script src="./vijay.js"> //just link the .js file
</script>
</head>
<body></body>
</html>
const { add } = require("./math.js"); //use require keyword ,call a
//.js file which contains functions
console.log(add(100,48)); //call the function here
console.log(add(12,56));
function add(a,b){
return a+b;
}
module.exports={ //use module.exports to export functions
add
}
- Here is the video reference : --> Click me
- A recursive function is a function that calls itself until it doesn’t. And this technique is called recursion.
function powerOfNumber(x,n){
if(n==1){
return x;
}
else{
return x * Math.pow(x,n-1);
}
}
console.log(powerOfNumber(2,1));
console.log(powerOfNumber(3,3));
- Output:
2
27
- closure is a function that remenbers it's outer variables and can access them.
let add = ( function (){
console.log("hi");
var count=0;
return function () { count+=1; return count ; }
} ) ();
console.log(add());
console.log(add());
console.log(add());
- output:
hi
1
2
3
-
It is other way of writing functions using new keyword.
-
we can pass function body as argument in this method.
-
It is rarely used and sometimes it does not have any alternative.
- let zfunctionName = new Function ('parameter1','parameter2','function body');
let sub = new Function('a','b','return a-b;' );
console.log(sub(1,1));
console.log(sub(3,1));
- Output:
0
2
- Allows us to run a certain function after particular time.
function show(){
console.log("Hi");
}
show(); //normal function call prints immediately
setTimeout(show,1000); //prints 1000 millliseconds afer delay
- Output:
Hi
Hi (delay)
- it allows to use certain function to use it in a particular interval of time.
let timer = setInterval( () => console.log("hi") , 2000 ); // it prinys hi for every 2000 millliseconds gap
setTimeout( () => { clearInterval(timer); } , 1000 ); // It stops the execution
-
function binding helps us to fix the this keyword bugs when objects are used as callbacks or arguments by binding the object with functions.
-
Syntax : let name = functionNmae.bind(context);
let display = {
name : "vijay"
}
function showName(){
console.log(this.name);
}
let functionBind = showName.bind(display);
functionBind();
- Output:
vijay
- By assignung with proto we can get the features of one objcet to object.
let dog = {
name : "tom"
}
let cat = {
healthy : "no"
}
cat.proto= dog;
console.log(cat.healthy);
console.log(cat.name); //not work outdated method
- Output:
no
undefined
- We should create new objetby Object.create method.
let pet = {
eats : true
};
let dog =Object.create(pet);
console.log(dog.eats);
console.log(Object.getPrototypeOf(dog)===pet);
Object.setPrototypeOf(dog,{})
- Output:
true
true
-
The errors need to be handled using try catch block.
-
the try block checks for error and catch block handles the error.
try {
console.log(a); //Using undeclared cariable
}catch( err ) {
console.log("error"); //this part executes
}
- Output:
error
-
Generators are special class of functions that simplify the task of writing iterators.
-
It produces series of resulr instead of single value.