UNIT II
ARRAY, FUNCTION AND STRING
Array:
An array is an object that can store a collection of items Arrays is useful when you
need to store large amounts of data of the same type like storing of details of 100 students. If
you are using variables, you will have to create 100 different variables but you can do the
same with a single array. You can access the items in an array by referring to its index
number and the index of the first element of an array is zero. An array in JavaScript can hold
different elements - We can store Numbers, Strings and Boolean in a single array.
Declaring an Array
There are basically two ways to declare an array
1. By array literal:
Syntax:
var arrayname=[value 1,value2,....,valueN];
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
const fruits = ["apple", "banana", "orange"];
[Link]("Length of Array ="+[Link]);
</script>
<body>
</body>
</html>
2. By creating instance of Array:
new keyword is used to create instance of array.
Syntax:
var arrayname=new Array();
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array(3);
[Link]("Length of Array ="+[Link]);
</script>
<body>
</body>
</html>
Defining an array element:
To declare an array with literal notation you just define a new array
using empty brackets. It looks like this: let myArray = []; You will place all elements within
the square brackets and separate each item or element with a comma.
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array(3);
a[0]="C";
a[1]="CPP";
a[2]="JAVA";
a[3]="VB"
[Link]("<br> Element at 0th place="+a[0]);
[Link]("<br> Element at 1th place="+a[1]);
[Link]("<br> Element at 2th place="+a[2]);
[Link]("<br> Element at 3th place="+a[3]);
</script>
<body>
</body>
</html>
Output:
Looping an array element:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array(3);
a[0]="C";
a[1]="CPP";
a[2]="JAVA";
a[3]="VB"
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
Output:
Adding an array element:
There are two different way to add array elements.
1) Using push() method
The push() method is used to add one or more elements to the end of an
array. It modifies the original array and returns the new length of the array after
adding the elements.
The method modifies the original array and appends the provided elements to the end.
You can push one or more elements in a single push() call, separating them with
commas.
The method does not create a new array; it operates on the existing array in place.
If you want to add a single element to the end of the array, you can simply pass that
element as an argument to push()
Syntax:
[Link](element1, element2, ..., elementN);
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]="C";
a[1]="CPP";
[Link]("Original length ="+[Link]+"<br>");
[Link]("Java");
[Link]("VB","PHP");
[Link]("New length after push method="+[Link]+"<br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
Output:
2) Using unshift() method
the unshift() method is used to add one or more elements to the
beginning of an array. It modifies the original array and returns the new length of the
array after adding the elements. Here are some detailed notes about the unshift()
method:
Syntax:
[Link](element1, element2, ..., elementN);
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]="C";
a[1]="CPP";
[Link]("Original length ="+[Link]+"<br>");
[Link]("Java");
[Link]("VB","PHP");
[Link]("New length after
unshiftmethod="+[Link]+"<br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
Output:
Sorting an array element:
1) sort() method:
the sort() method is used to sort the elements of an array in place. By default, it sorts
the elements as strings and modifies the original array.
Sort method always return the ascending order data.
Syntax:
[Link]();
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]=4;
a[1]=3;
a[2]=1;
a[3]=2;
a[4]=5;
[Link](" <br>Array element before sorting <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
[Link]();
[Link](" <br> <br>Array element after sorting
<br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
2) reverse() method:
the reverse() method is used to reverse the order of elements in an
array. It modifies the original array in place and does not create a new array.
Syntax:
[Link]();
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]=4;
a[1]=3;
a[2]=1;
a[3]=2;
a[4]=5;
[Link](" <br>Array element before sorting <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
[Link]();
[Link]();
[Link](" <br> <br>Array element after sorting
<br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
Combining array elements into string:
1) join() method:
The join() method is used to join the elements of an array into a single
string. It creates a new string by concatenating the elements of the array, separated
by a specified separator or a default comma if no separator is provided.
Separators = /,-,*
Syntax:
[Link](separator);
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]="C";
a[1]="CPP";
a[2]="JAVA";
a[3]="VB"
[Link](" <br>Array element <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
var r=[Link]("*");
[Link](" <br> <br>Array element <br>"+r);
</script>
<body>
</body>
</html>
2) concat() method:
The concat() method is used to merge two or more arrays. It does not
modify the original arrays and instead returns a new array containing the
combined elements.
Syntax:
[Link](array2, array3, ..., arrayN);
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var arr1=["C","CPP","JAVA"];
var arr2=["PHP","VB"];
[Link]("<br>before combining array elements<br>");
[Link](arr1);
[Link]("<br>");
[Link](arr2);
var r=[Link](arr2);
[Link]("<br>After combining array elements<br>");
[Link](r);
</script>
<body>
</body>
</html>
Changing array elements :
1) shift() method:
the shift() method is used to remove the first element from an array. It
modifies the original array and returns the removed element.
Syntax:
[Link]();
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]=4;
a[1]=3;
a[2]=1;
a[3]=2;
a[4]=5;
[Link](" <br>Array element before shift <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
[Link]();
[Link](" <br> <br>Array element after shift <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
2) pop() method:
the pop() method is used to remove the last element from an array. It
modifies the original array and returns the removed element.
Syntax:
[Link]();
<html><head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]=4;
a[1]=3;
a[2]=1;
a[3]=2;
a[4]=5;
[Link](" <br>Array element before pop <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
[Link]();
[Link](" <br> <br>Array element after pop <br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
} </script>
3) splice() method:
the splice()method used to change the contents of an array by removing,
adding, or replacing elements. It modifies the original array and returns an array
containing the removed elements.
Syntax:
[Link](start,delete, item1, item2, …,itemN);
Start:
The index at which to start changing the array. If negative, it counts
from the end of the array (-1 is the last element).
Delete:
It is optional. It represent the no of elements are removed.
item1,item2….:
It is optional. It represent the no of elements are inserted.
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=new Array();
a[0]="C";
a[1]="CPP";
a[2]="JAVA";
a[3]="VB"
[Link]("original length="+[Link]+"</br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
[Link](2,0,"PHP");
[Link]("</br></br>new length="+[Link]+"</br>");
for (var i = 0; i < [Link]; i++)
{
[Link]("<br> Element = "+a[i]);
}
</script>
<body>
</body>
</html>
Objects as Associative Array:
An associative array is a collection of key-value pairs, where each key
uniquely identifies a value in the collection. Although JavaScript does not have a separate
data structure called "associative array," objects can effectively serve as such data structures
due to their ability to store properties with key-value pairs.
Syntax:
Array= {key1:’value1’, key2:’value2’}
[Link]=value;
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var object1 = new Object;
[Link] = "Joanne";
[Link] = 27;
[Link] = "British";
[Link](“<br> property name: " + object1["name"] );
[Link]("<br> property age: " + object1["age" ] );
[Link]("<p> property nationality: " +object1["nationality" ] );
</script>
<body>
</body>
</html>
2)
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a = {“Name”:”Ram”,”Age”:23};
[Link](“<br>name= " +a["name"] );
[Link]("<br> age=" + a["age" ] );
</script>
<body>
</body>
</html>
FUNCTION
In JavaScript, functions are reusable blocks of code that can be defined
once and executed multiple times. Functions play a fundamental role in JavaScript
programming, allowing you to organize your code, improve code reusability, and create
modular and maintainable applications. Functions can take input parameters, perform actions,
and return results.
Declaration of function:
A function can be declared using the function keyword
followed by the function name, a list of parameters (optional), and a block of
code (function body) enclosed in curly braces {}.
Syntax:
function functionName()
{
// Function body: code to be executed when the function is called
// It may contain one or more statements.
}
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
function display()
{
[Link](“In Display Function”);
}
</script>
<body>
</body>
</html>
Function Parameters and Arguments:
Function parameters are variables listed in the function declaration,
representing the values passed to the function when it is called. Arguments are the actual
values passed to the function during the function call.
Syntax:
function functionName(parameter1, parameter2, ...)
{
// Function body: code to be executed when the function is called
// It may contain one or more statements.
}
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
function add(a, b)
{
[Link] (a + b);
}
add(3, 5); // Output: 8
</script>
<body>
</body>
</html>
Scope of Variable and Argument
The scope of a variable determines where in the code the
variable can be accessed and manipulated. JavaScript has two main types of
scope: global scope and local scope. The scope of a variable depends on where it
is declared, and it can have different visibility and lifetime within different parts
of the code.
1) Global Scope:
Variables declared outside of any function or block has global
scope. They are accessible from anywhere in the code, including inside
functions or blocks.
2) Local Scope:
Variables declared inside a function or block have local
scope. They are only accessible within that specific function or block and
are not visible from the outside.
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
Var a=”Jaihind”; //Globally declared variable
function display()
{
var b=”Polytechnic”; // locally declared variable
[Link](“Global value =”+a);
[Link](“<br>Local value =”+b);
}
</script>
<body>
</body>
</html>
Calling a function:
Calling a function with arguments in JavaScript involves passing values to the
function's parameters when invoking it. Arguments are values that you provide to the
function to perform a specific action or computation. Functions can accept multiple
arguments, and you can pass different data types, such as strings, numbers, arrays,
objects, or even other functions.
Syntax:
function functionName(parameter1, parameter2, ...)
{
// Function body: code to be executed when the function is called
// It may contain one or more statements.
}
Example:
<html>
<head>
<title> Array Demo </title>
</head>
<script language="Javascript" type="text/javascript">
var a=10,b=5;
function add(a, b) // Calling function with passing parameter
{
[Link] (a + b);
}
add(3, 5); // Output: 8
</script>
<body>
</body></html>