Unit-2 Array, Function and String

UNIT NO:02 14 M
ARRAY,FUNCTION
AND STRING
JAVASCRIPT ARRAY
 JavaScript array is an object that represents a
collection of similar type of elements.
 There are 3 ways to construct array in JavaScript
 By array literal
 By creating instance of Array directly (using new

keyword)
 By using an Array constructor (using new keyword)
1) JAVASCRIPT ARRAY LITERAL
 The syntax of creating array using array literal is
given below:
var arrayname=[value1,value2.....valueN];
 As you can see, values are contained inside [ ] and
separated by , (comma).
 Example:
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}
</script>
2) JAVASCRIPT ARRAY DIRECTLY (NEW KEYWORD)
 The syntax of creating array directly is given below:
var arrayname=new Array();
or var arrayname=new Array(Number length)
 Here, new keyword is used to create instance of array.

 Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
{
document.write(emp[i] + "<br>");
}
</script>
3) JAVASCRIPT ARRAY CONSTRUCTOR (NEW
KEYWORD)
 Here, you need to create instance of array by
passing arguments in constructor so that we don't
have to provide value explicitly.
 The example of creating object by array constructor
is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
{
document.write(emp[i] + "<br>");
}
</script>
INITIALIZING AN ARRAY
 Initialization is the process of assigning values to an
array. While initializing an array ,all the elements
should be placed in parenthesis and separated by
commas.
 var items=new Array(“one”,”two,”three”);

document.write(“length of the array=”+items.length);
DEFINING ARRAY ELEMENTS
 Defining array elements Array contain a list of
elements, each element in the array is identified
by its index. always index start from zero.
 Assignment operator(=)is used to assign values to
an array elements.
 Elements are retrieved by its index.
var items=new array(3);

items[0]=“one”;
items[1]=“two”;
items[2]=“three”;
document. write(“ ”+items[0]);
LOOPING AN ARRAY
 In java script ,for loop iterate over each item in an array.
• Array are zero based, which means the first item is referenced
with an index zero.
• Last element is accessed with index length-1.
<html>
<head></head>
<body>
<script>
var a=[4,5,6,8,10];
document.write("array elements are");
for(var i=0;i<a.length;i++)
{
document.write("<br>"+a[i]+"<br>")
}
</script>
</body>
</head>
<html>
Q:Write a Java script that initializes an array called flowers
with the names of 3 flowers. The script then displays array
elements.
<html>
<head>
<title> Display Array elements</title>
</head>
<body>
<script >
var flowers = new Array();
flowers[0] = 'Rose ';
flowers[1] = 'Mogra';
flowers[2] = 'Hibiscus';
for (var i = 0; i < flowers.length; i++)
{
document.write(flowers[i] + '');
}
</script>
</body>
</html>
DIFFERENT METHODS OF ARRAY
 reverse() method → Returns the reverse order of items
in an array.
 sort() method → Returns the sort array.
 pop() method → Remove the last item of an array.
 shift() method → Remove the first item of an array.
 push() method → Adds an array element to array at

last.
 unshift() method → Adds an array element to array at
beginning.
 join() method->join the elements of array into string.
 splice() method-> used to replace the items of an

existing array by removing and inserting new elements
at the required index.
ADDING AN ARRAY ELEMENT
 We can add elements into array by following ways:
 push() method of array
 unshift() method of array
 push() method appends the given element(s) in the last of the

array and returns the length of the new array.
array.push(element1, ..., elementN);
• element1, ..., elementN : elements add to the end of the
array.
 unshift() method adds one or more elements at the begining
of the array.it returns updated array with change in length.
array.unshift(element1, ..., elementN);
//program to demonstrate push and unshift method of
array
<html>
<head></head>
<body>
<script>
var a=[4,5,6,8,10];
document.write("array elements are");
a.push(12);
a.unshift(14);
{
document.write("<br>"+a[i]+"<br>")
}
</script>
</body>
</head>
<html>
SORTING AN ARRAY ELEMENTS
 Index of array specifies the order in which elements appear in an array
when for loop is used to display array sometimes we want elements to
appear in sorted order.
 sort() method sorts the elements of an array in ascending order.
 Syntax:
arrayObj.sort();
<html>
<head>
<title>JavaScript Array sort Method</title> </head>
<body>
<script type = "text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var sorted = arr.sort();
document.write("Returned string is : " + sorted );
</script>
</body>
</html>
 Array reverse() method:
sort method sort all elements in ascending order,
we can use reverse method to display sorted element in
descending order.
 Syntax: array.reverse();
NUMERIC SORT
 By default, the sort() function sorts values as strings.

 This works well for strings ("Apple" comes before
"Banana").
 However, if numbers are sorted as strings, "25" is
bigger than "100", because "2" is bigger than "1".
 Because of this, the sort() method will produce
incorrect result when sorting numbers.
 You can fix this by providing a compare function:
arr.sort(function(a, b){return a - b});
<html>
<head></head>
<body>
<script>
var a=new Array();
a[0]=20;
a[1]=13;
a[2]=5;
a[3]=2
a.sort(function (a,b){return a-b});
{
document.write(a[i]);
}
</script>
</body>
COMBINING AN ARRAY ELEMENTS
 Sometime there is need to combine all elements of an
array into a single string.
 Array elements can be combined in two ways:
Using the concat() method

Using the join() method
 join() this function joins all elements of an array into
a string. array.join() or
array.join(separator);
 Parameter Details: separator − Specifies a string to
separate each element of the array. If omitted, the
array elements are separated with a comma.
<html>
<head>
<title>JavaScript Array join Method</title>
</head>
<body>
var arr = new Array("First","Second","Third");
var str = arr.join();
document.write("str : " + str );
var str = arr.join(“|");
document.write("<br />str : " + str );
var str = arr.join(" + ");
document.write("<br />str : " + str );
</script>
</body>
</html>
 Javascript array concat() method returns a new array
comprised of this array joined with two or more arrays.
 The syntax of concat() method is as follows −
array.concat(value1, value2, ..., valueN);
 This method returns an array object representing the resultant
array, a concatenation of the current and given array(s).
<html>
<head>
<title>JavaScript Array concat Method</title>
</head>
<body>
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
document.write("alphaNumeric : " + alphaNumeric );
</script>
</body>
</html>
CHANGING ELEMENTS OF AN ARRAY
 Using Index number: We can change the elements of an array
using index number.
 JavaScript array splice() method changes the content of an array,
adding new elements while removing old elements.
 Syntax:
array.splice(index, howMany, [element1][, ..., elementN]);

 Parameter Details:
index −
: index at which to start changing the array.
howMany −An integer indicating the number of old array elements to
remove. If howMany is 0, no elements are removed.
element1, ..., elementN −The elements to add to the array. If you
don't specify any elements, splice simply removes the elements
from the array.
 //program to demonstrate splice method
<html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
var arr = ["orange", "mango", "banana"];
document.write(“Before Array is: " + arr );
arr.splice(1, 1, "water");
document.write("<br />After Array is: " +arr);
</body>
</html>
CHANGING ELEMENTS OF AN ARRAY
 shift() method: this method used to remove first
element from an array and returns the removed
single value of an array.
 Syntax:
array.shift();
 pop() method : this method is used to remove
last element and returns the removed element
from an array.
 Syntax:
array.pop();
OBJECT AS ASSOCIATIVE ARRAY
 Associative array are dynamic objects that the user
redefines as needed .
 When user assigns values to keys in a variable of type
Array, it transforms into an object and loses the
attributes and methods of previous data type.
 We can create it by assigning a literal to a variable.
 Syntax:
<name of the array> = {key1:’value1’, key2:’value2’,

key3:’valu3’…..};
 Example:
var a={“one”:1,”two”:2,”three”:3};
 //program to demonstrate associative array
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var array = { "alpha": 1, "beta": 2, "gama": 3 };
var x = array["beta"];
document.write(x);
</script>
</body>
</html>
JAVASCRIPT FUNCTIONS
 A JavaScript function is a block of code designed to
perform a particular task.
 A JavaScript function is executed when "something"
invokes it (calls it).
 There are mainly two advantages of JavaScript
functions.
 Code reusability: We can call a function several times so
it save coding.
 Less coding: It makes our program compact. We don’t
need to write many lines of code each time to perform a
common task.
 A JavaScript function can be defined
using function keyword.
//defining a function

</script>
 Example: Define and Call a Function

function ShowMessage()
{
alert("Hello World!");
}
CALLING A FUNCTION
 To invoke a function somewhere later in the script, you
would simply need to write the name of that function.
//calling a function
 Syntax:
function-name(); //without argument

Or
function-name(values for parameter) //with argument
ShowMessage(); //call function

ADDING AN ARGUMENT
 We can add arguments in a function, which are used to hold
data to perform some task.
<html>
<head>
<title> function example</title>
</head>
<body>
<script>
function myfunction(message)
{
document.write(message);
}
myfunction(“hello this is my first function”);
</script>
</body>
</html>
FUNCTION PARAMETERS(ARGUMENTS):
 A function can take multiple parameters separated by
comma.
<html>
<head>
function sayHello(name, age)
{ document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body> <p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value =
"Say Hello">
</form> <p>Use different parameters inside the function and
then try...</p>
</body>
</html>
SCOPE OF VARIABLE AND ARGUMENTS
 Global scope: All the variables that you declare, is
default defined in global scope. when a variable is
declared outside a function with a var keyword then
that variable is a global variable because it is available
through all parts of script.
 Local scope: all variables which are declared using
var keyword within function are called local variables
and they are accessible within function only.
EXAMPLE OF LOCAL AND GLOBAL VARIABLE
// program to print a text
<html>
<body>
<script language=“javascript”>
var a = "hello"; //Global Variable
function greet ()
{
var i=“hi”; //Local Variable
document.write(i);
document.write(a);
}
greet();
</script>
</body>
</html>
 Output:
hi hello
WRITE JAVASCRIPT TO CALL FUNCTION FROM HTML
 In JavaScript functions can be called from HTML code in response of any
particular event like page load,page unload,button click etc.
 Code:
<html>
<head>
<title> calling function from html</tittle>
<script>
function welcome()
{
alert("Welcome students");
}
function goodbye()
{
alert("Bye");
}
</script>
</head>
<body onload="welcome()" onunload="goodbye()“>
</body>
</html>
FUNCTION CALLING ANOTHER FUNCTION:
 In JavaScript we can call one function inside another
function.
<html>
<body>
<script>
function accept(s)
{
document.write(“your city:”+s);
}
function display()
{
accept(“mumbai”);
}
display();
</script>
</body>
</html>
THE RETURN STATEMENT
There are some situations when we want to return
some values from a function after performing some
operations. In such cases, we can make use of the
return statement in JavaScript.
A JavaScript function can have an
optional return statement.
function calcAddition(number1, number2)

{
return number1 + number2;
}
STRING
 The JavaScript string is an object that represents a
sequence of characters.
 There are 2 ways to create string in JavaScript
 By string literal
 By string object (using new keyword)
1) By string literal
 The string literal is created using double quotes. The
syntax of creating string using string literal is given
below:
var stringname="string value";
 Example:
<script>
var str="This is string literal";
document.write(str);
</script>
 o/p:This is string literal
2) By string object (using new keyword)
 The syntax of creating string object using new
keyword is given below:
var stringname=new String("string literal");
 Here, new keyword is used to create instance of
string.
 Let's see the example of creating string in JavaScript
by new keyword.
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
 o/p:hello javascript string
MANIPULATE STRING: JAVASCRIPT STRING
METHODS
JOINING A STRING
 String concat(str) Method: The JavaScript
String concat(str) method concatenates or joins
two strings.
 Syntax: s1.concat(s2);
<script>
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
</script>
 o/p:javascript concat example
RETRIEVING A CHARACTER FROM GIVEN POSITION
 JavaScript String charAt(index)
Method:each character in a string is an array
element that can be identified by its index.
 The JavaScript String charAt() method returns
the character at the given index.
 Syntax: string.charAt(index);
<script>
var str="javascript";
document.write(str.charAt(2));
</script>
 o/p:v
RETRIEVING A POSITION OF CHARACTER IN A STRING
 JavaScript String indexOf(str) Method:The JavaScript String
indexOf(str) method returns the index position of the given string.
 Syntax: string.indexOf(‘character’);
<script>
var s1="javascript from javatpoint indexof";
var n=s1.indexOf("from");
document.write(n);
</script>
 o/p:11
 JavaScript String lastIndexOf(str) Method: The JavaScript
String lastIndexOf(str) method returns the last index position of the
given string
<script>
var s1="javascript from javatpoint indexof";
var n=s1.lastIndexOf("java");
document.write(n);
</script>
 o/p: 16
DIVIDING STRING
 JavaScript String split() Method:
Splits a String object into an array of strings by
separating the string into substrings.
string.split([separator], [limit]);
 separator − Specifies the character to use for
separating the string. If separator is omitted, the
array returned contains one element consisting of the
entire string.
 limit − Integer specifying a limit on the number of
splits to be found
EXAMPLE:
<html>
<head>
<script>
var str = 'Welcome to the javaTpoint.com'
var arr = str.split(" ", 3);
document.write(arr);
</script>
</head>
<body>
</body>
</html>
 o/p: Welcome,to,the
COPYING A SUBSTRING
 JavaScript String substring() Method
 The JavaScript string substring() method fetch the
string on the basis of provided index and returns the
new sub string.
 It works similar to the slice() method with a
difference that it doesn't accepts negative indexes.
This method doesn't make any change in the original
string.
 Syntax:
string.substring(start,end)
 Parameter:
 start - It represents the position of the string from
where the fetching starts.
 end - It is optional. It represents the position up to
which the string fetches.
EXAMPLE:
<script>
var str="Javatpoint";
document.writeln(str.substring(0,4));
</script>
 Output:Java
STRING SUBSTR() METHOD
 The JavaScript string substr() method fetch the part
of the given string and return the new string. The
number of characters to be fetched depends upon the
length provided with the method. This method doesn't
make any change in the original string.
 Syntax:
string.substr(start,length)
 Parameter:
 start - It represents the position of the string from

where the fetching starts.
 length - It is optional. It represents the number of
characters to fetch.
EXAMPLE:
<script>
var str="Javatpoint";
document.writeln(str.substr(0,4));
</script>
Output:
Java
 slice() method is used to fetch the part of the string and returns
the new string.
 It required to specify the index number as the start and end
parameters to fetch the part of the string. The index starts from
0.
 Syntax: string.slice(start,end)
 Parameter:
 start - It represents the position of the string from where the
fetching starts.
 end - It is optional. It represents the position up to which the
string fetches. In other words, the end parameter is not included.
<script>
var str = "Javatpoint";
document.writeln(str.slice(2,5));
</script>
 o/p:
vat
CHANGING THE CASE OF STRING
 JavaScript String toLowerCase() Method
 The JavaScript String toLowerCase() method returns
the given string in lowercase letters.
 Syntax: string. toLowerCase() ;
<script>
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
</script>
 o/p:javascript tolowercase example
 JavaScript String toUpperCase() Method
 The JavaScript String toUpperCase() method
returns the given string in uppercase letters.
 Syntax: string.toUppercase();
<script>
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);
</script>
 o/p:JAVASCRIPT TOUPPERCASE EXAMPLE

CONVERTING STRING TO NUMBER
 JavaScript Number parseInt() method:
The JavaScript number parseInt() method parses a string
argument and converts it into an integer value. With string
argument, we can also provide radix argument to specify the
type of numeral system to be used.
 Syntax:
Number.parseInt(string, radix)
 Parameter:
 string - It represents the string to be parsed.
<script>
var a="50";
var b="50.25"
var c="String";
var d="50String";
var e="50.25String"
document.writeln(Number.parseInt(a)+"<br>");
document.writeln(Number.parseInt(b)+"<br>");
document.writeln(Number.parseInt(c)+"<br>");
document.writeln(Number.parseInt(d)+"<br>");
document.writeln(Number.parseInt(e));
</script>
 o/p: 50 50 NaN 50 50
 JavaScript Number parseFloat() method:
The JavaScript number parseFloat() method parses
a string argument and converts it into a floating point
number. It returns NaN, if the first character of given value
cannot be converted to a number.
 Syntax:
Number.parseInt(string)
 Parameter
 string - It represents the string to be parsed.

EXAMPLE:
<script>
var a="50";
var b="50.25"
var c="String";
var d="50String";
var e="50.25String"
document.writeln(Number.parseFloat(a)+"<br>");
document.writeln(Number.parseFloat(b)+"<br>");
document.writeln(Number.parseFloat(c)+"<br>");
document.writeln(Number.parseFloat(d)+"<br>");
document.writeln(Number.parseFloat(e));
</script>
 o/p: 50 50.25 NaN 50 50.25
CONVERTING NUMBER TO STRING
 This method returns a string representing the specified object.
The toString() method parses its first argument, and attempts to
return a string representation in the specified radix (base).
 Syntax:
number.toString( [radix] )
 Parameter Details:
 radix −An integer between 2 and 36 specifying the base to

use for representing numeric values.
 Return Value
 Returns a string representing the specified Number object.

EXAMPLE:
<script>
var a=50;
var b=-50;
var c=50.25;
document.writeln(a.toString()+"<br>");
document.writeln(b.toString()+"<br>");
document.writeln(c.toString());
</script>
 o/p:50 -50 50.25
FINDING A UNICODE OF CHARACTER-
CHARCODEAT()
 The JavaScript string charCodeAt() method is used to
find out the Unicode value of a character at the specific
index in a string.
 The index number starts from 0 and goes to n-1, where
n is the length of the string.
 It returns NaN if the given index number is either a
negative number or it is greater than or equal to the
length of the string
 Syntax:
string.charCodeAt(index)
 Parameter:
 index - It represent the position of a character.
EXAMPLE:
<script>
var x="Javatpoint";
document.writeln(x.charCodeAt(3));
</script>
 o/p:97
FROMCHARCODE()
 JavaScript fromCharCode() method is used to
convert the Unicode values into characters.
 It is a static method of the String object so the syntax
will remain always same.
 Syntax: String.fromCharCode(n1, n2, ..., nX)
// use of fromCharCode() let string1 =

String.fromCharCode(72, 69, 76, 76, 79);
// printing the equivalent characters console.log(string1);
 Output: // HELLO
QUESTIONS:
1. Differentiate between concat() and join()
methods of array object.
2. Write the use of chatAt() and indexof() with
syntax and example.
3. Write a JavaScript that will replace following
specified value with another value in string.
String = “I will fail” Replace “fail” by “pass”.

Unit-2 Array, Function and String

Uploaded by

Unit-2 Array, Function and String

Uploaded by

UNIT NO:02 14 M

 By creating instance of Array directly (using new

 Here, new keyword is used to create instance of array.

 var items=new Array(“one”,”two,”three”);

var items=new array(3);

 pop() method → Remove the last item of an array.

 shift() method → Remove the first item of an array.

 push() method → Adds an array element to array at

 splice() method-> used to replace the items of an

 push() method appends the given element(s) in the last of the

 By default, the sort() function sorts values as strings.

Using the concat() method

array.splice(index, howMany, [element1][, ..., elementN]);

<name of the array> = {key1:’value1’, key2:’value2’,

 Example: Define and Call a Function

function-name(); //without argument

ShowMessage(); //call function

function calcAddition(number1, number2)

 start - It represents the position of the string from

 o/p:JAVASCRIPT TOUPPERCASE EXAMPLE

 string - It represents the string to be parsed.

 radix −An integer between 2 and 36 specifying the base to

 Returns a string representing the specified Number object.

// use of fromCharCode() let string1 =

You might also like