JavaScript Tutorial Archives - Page 3 of 5

JS: slice() Method

The slice() method is part of JavaScript Array class. It extract certain elements from an array and returns a new array.

There are different ways to select elements using slice() in JavaScript.

The slice() method takes two parameters – start index and the end index of an array. It does not include the last element while returning a new array.

Examples of slice() method

In these examples, we will extract from an array using different forms of slice() syntax.

// declare the array
myArray = ["one", "two", "three", "four"];
// only start index is mentioned
var result1 = myArray.slice(2);
console.log(result1);

The slice() method will start extracting from index 2 and since the end index is not mentioned, it will extract the rest of elements from the array. The result of the above program is given below.

["three", "four"]

In the next example, we will mention both start as well as end index value. Here is the example script.

// declare the array
myArray = ["one", "two", "three", "four"];
// both start index and end index is mentioned
var result = myArray.slice(1,3);
console.log(result);

The array start with index 1 of the array. At index 1, the element is “two” and ends with index 2 because the end value 3 in slice(1,3) is not included.

The output is as follows.

Sometimes you want to extract elements starting from end to start of the array. It is also known as negative index.

// declare the array
myArray = ["one", "two", "three", "four"];
// negative index starts from -1
var result = myArray.slice(-3,-1);
document.body.innerHTML = result;

The negative index starts from -1. The element at -1 position is “three” in the above example array.

You cannot use index 0 because it is a positive index and starts from beginning of the array.

The output of the above code is as follows.

two,three

post

JS: shift() Method

The pop() method in JavaScript removes an element from the rear of the element.

What if we want to remove element from the front of the JavaScript array?

The JavaScript has a special method in the array class that removes just one element from the front of the array. It is the shift() method.

In this example, we will create an array and use the shift() method to remove an element from the front.

myArray = [200,56,100,44,76];
myArray.shift();
console.log(myArray);

In the above example, the shift() method will remove the first element from the front which is 200.

Though you can store the deleted value in a variable. We just want to display the status of the array after deletion.

[56, 100, 44, 76]

Note that the shift() method is like pop() and deletes only one element.

post

JS: unshift() Method

Sometimes you must push an element at the front of the array. This is not possible with the regular push() method of the array class.

Fortunately, JavaScript has a function called unshift() that push the elements at the front of the array.

The shift method can be used to push

single element
two or more element
a sub array

In this example, we will try to push a single element and a sub-array to a JavaScript array.

Consider the following example.

var myArray = new Array(23,44,5.5,'tomato');
myArray.unshift("pen");
myArray.unshift([23,66]);
console.log(myArray)

The output of the above script is given below.

[[23,66],"pen",23,44,5.5,'tomato']

post

JS:pop() Method

The JavaScript pop() method is to remove an element from the rear end of the array.

The pop() method deletes just one element from the array. The element is topmost element of the array.

In this example, we will pop() just one element from the array and store that element in a variable and display the deleted entry.

<script>
  var fruits = ['apple','orange','grapes'];
  var item = fruits.pop()
  console.log(item)
//output is "grapes"
</script>

The script will remove the last element of the array which is “grapes“. It is stored in the variable item and output to console.

post

JS: push() Method

The JavaScript push() method is part of array class. It pushes an element at the end of the array.

It is possible to push more than one element at the same time using this method.

The types of items that you can push using push() method are

single element
multiple element
sub arrays

In this article, we will push the above mentioned elements into an array called fruits.

Push Single Element

<script>
  var fruits = ['apple','orange'];
fruits.push('banana');
console.log(fruits);
//output = ['apple','orange','banana']
</script>

Push Multiple Elements

You can push more than one elements into the array using push() method.

<script>
  var fruits = ['apple','orange'];
fruits.push('banana','grapes','mango');
console.log(fruits);
//output = ['apple','orange','banana','grapes','mango']
</script>

Push a sub-array

When you push a sub-array into a JavaScript array, a two-dimensional array is created.

<script>
  var fruits = ['apple','orange'];
fruits.push('banana',['plums','mango']);
console.log(fruits);
//output = ['apple','orange','banana',['plums','mango']]
</script>

The sub-array is indicated using another square bracket.

post

JS: charAt() Method

JavaScript programming treat the strings as array and each character of the string has an index.

Suppose we want to know the character at index 1. The JavaScript string class has method called charAt() that returns the character at a index from the string.

The charAt(1) will return a character from string at index location 1.

<!DOCTYPE html>
<html>
<head>
   <title>JS: charAt() Method</title>
   <meta charset="utf-8">
</head>
<body>
<script>
  var country = "HOLLAND";
  console.log(country.charAt(4));
//output = 'A'
</script>
</body>
</html>

In the above script, we want to know which character is located at index location 4. The charAt() method will return ‘A’ from the string.

post

JS: Join() Method

The join() method from string class, join the characters or words of a string.

This method is useful in some operations where we have to split the string into an array. The join() will concatenate it into a string again.

The example program for join operation is given below.

<!DOCTYPE html>
<html>
<head>
   <title>JS: join() Method</title>
   <meta charset="utf-8">
</head>
<body>
<script>
var name = "woodchuck";
//split the string into a character array
var split_name = name.split('');
//join the characters together to form string
var out = split_name.join('');
console.log(split_name);
//output = ['w','o','o','d','c','h','u','c','k']
console.log(out);
//output = 'woodchuck'
</script>
</body>
</html>

The above script will join the character only, However, if you want to join words use a join(' '); 

You must add more white space in join() method. The following code will show the difference.

string = ['h','e','l','l','o','','w','o','r','l','d'];

string.join('');
//output = "helloworld"

string.join(' ');
//output = 'hello world'

string.join('=');
//output = h=e=l=l=o=w=o=r=l=d

post

JS: lastIndexOf() Method

In previous example, we saw how JavaScript treat string as an array and allow us to access its character using indexOf() method.

But sometimes, there are more than one occurrence of a character in the string. To know the index of last occurrence of a string. JavaScript has lastIndexOf() method in the string class.

Here is an example of the method – lastIndexOf().

<!DOCTYPE html>
<html>
<head>
   <title>JS: lastIndexOf() Method</title>
   <meta charset="utf-8">
</head>
<body>
<script>
   var animal = "elephant";
var out = animal.lastIndexOf('e');
console.log(out);
//outputs = 2
</script>
</body>
</html>

In the above example, there are two occurrence of character ‘e’. The lastIndexOf() method returns the index value of last occurrence of ‘e’ which is 2.

post

JS: indexOf() Method

The JavaScript string has some of the properties of array. You may access a character of the string using index.

In order to find the correct index of a character , you can use indexOf() method of string class.

Here is an example program to demonstrate the usage of this method.

<!DOCTYPE html>
<html>
<head>
   <title>JS: indexOf Method</title>
   <meta charset="utf-8">
</head>
<body>
<script>
var answer = "Lion is the king of Jungle!";
var res = answer.indexOf('king');
console.log(res);
//output = 12
</script>
</body>
</html>

The above program will result in 12. The array or string index always start at 0 in JavaScript programming.

The substring ‘king’ starts at index 12. The script goes through all the characters one-by-one and finally reaches the character ‘k’ which is at index 12.

post

JS: toLowerCase() Method

In JavaScript programming, sometimes you wish to change the characters of a string to lowercase. You can do this with the help of toLowerCase() method of JavaScript class String.

Here is the example program in which a string in uppercase is converted to lowercase using toLowerCase() method.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScrtipt:toLowerCase()</title>
   <meta charset="utf-8">
</head>
<body>
<script>
  var name = "PETER PAN";
//convert the name into a lowercase 

console.log(name.toLowerCase();");//output = peter pan
</script>
</body>
</html>

Output of the above program

peter pan

post