• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
EDUCBA

EDUCBA

MENUMENU
  • Resources
        • Java Tutorials

          • Cheat Sheet Java
          • Cheat Sheet Python
          • C# vs Js
        • Java Tutorials
        • Python Tutorials

          • Angular 5 vs Angular 4
          • Careers in Python
          • Kali Linux vs Ubuntu
        • Python Tutorials
        • Top Differences

          • Cheat Sheet JavaScript
          • Python Interview Questions
          • Cloud Computing or Virtualization
        • Top Differences
        • Others

          • Resources (A-Z)
          • Top Interview Question
          • Programming Languages
          • Web Development Tools
          • HTML CSS Tutorial
          • Technology Basics
          • Technology Careers
          • View All
  • Free Courses
  • All Courses
        • Certification Courses

          Software Development Course 2
        • All in One Bundle

          All-in-One-Software-Development-Bundle
        • Become a Python Developer

          Python-Certification-Training
        • Others

          • Java Course
          • Become a Selenium Automation Tester
          • Become an IoT Developer
          • Ruby on Rails Course
          • Angular JS Certification Training
          • View All
  • 600+ Courses All in One Bundle
  • Login

Arrays Methods in JavaScript

Home » Software Development » Blog » JavaScript » Arrays Methods in JavaScript

Arrays Methods in JavaScript

Introduction to Arrays Methods in JavaScript

Javascript offers arrays to hold data like integers, string, and user-defined objects. The use case scenario is similar to the concept of arrays we find in other languages. In this topic, we are going to learn about Arrays Methods in JavaScript.

Javascript is front end language that adds dynamic behavior to a webpage, these arrays are used to hold data to be rendered in the web page, like you have a list of books with their name, author name, date of publishing and cost, so this all can be placed in an object and such multiple objects generated in the meantime can be stored in these arrays which can either be passed to the controller for processing or in the same way controller can send that to the view for rendering.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Array declaration in Javascript is done like this

var arr = new Array();

or

var arr=[];

or

var arr = [1,2,3,4];

Here you can see one thing that we gave integer values to the array and marked it as of type var, in Javascript all the elements will be stored with type var only and if they are to be treated and integers or otherwise data types which you see they appear like, then parsing into that type has to be done during usage of data from array.

Methods of Arrays in Javascript

For the processing of array data we have multiple methods available, they will help us to perform some operations which are required during data processing and manipulations.

1. Foreach

This method is used to loop over the array data and we can have each individual element rendered at its desired placeholder at the webpage.

var country = [‘India’,’Australia’,’South Africa’];

we will iterate from index 0 to length-1, where length is the size of the array, which is 3 here.

Popular Course in this category
Cyber Week Sale
JavaScript Certification Training (39 Courses, 20 Projects) 39 Online Courses | 20 Hands-on Projects | 221+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (2,383 ratings)
Course Price

View Course

Related Courses
Angular JS Certification Training (9 Courses, 5+ Projects)Vue JS Training (1 Courses, 2 Project)

Now let’s iterate over them using the forEach method –

Example 

var country = [‘India’,’Australia’,’South Africa’];
country.forEach(function(indexElement,index,array)
{
console.log(indexElement, index);
} );

Output –

array method output 1

2. Push

Whenever you have an existing array, and, in the meantime, you are performing some computation where that array will likely be receiving some data value to be added to it. In that case push function shall be used.

Let’s add a country to the above-defined list and we will reiterate over it this time and also the changed length will be displayed too.

Remember that push will be done at the last index available in the array.

Example 

// this line gives current length i.e. 3
console.log(country.length + ' is current length')
// here we push one more country
country.push('USA')
//print updated length
console.log(country.length + ' is current length')
// print each element and index
country.forEach(function(indexElement,index,array)
{
console.log(indexElement, index);
} );

Output –

array method output 2

3. Pop

We can also have a requirement where we need to delete the data elements from the array, pop is used to delete the element from the end of array i.e. the last element of the array will be deleted and so on.

Let’s take an example to see the same –

// this line gives current length i.e. 4
console.log(country.length + ' is current length')
// pop the last element, it doesn’t take any argument
Country.pop()
// this line gives current length i.e. 3, as the array lost one element
console.log(country.length + ' is current length')

Output –

array method output 3

4. Shift()

You may have a requirement where you need to take out the element from front of array, so you can’t use pop for that as it will delete all your data first and then will make you reach your first element, for this we have shift() method, this will directly remove element from beginning of the array.

Let’s see an example below for this –

Here we will run the forEach loop to show which element has been deleted.

// line below will remove India, which was the first element
country.shift() ;
//let’s print the elements now
country.forEach(function(indexElement,index,array)
{
console.log(indexElement, index);
} );

Output –

array method output 4

In the above picture, you can see that the whole array actually got shifted to left the element “Australia” has moved from index 1 to index 0. So this operation leads to shifting of all the elements of the array and can be expensive when the data is really huge, so this shall be used with proper analysis and right coding techniques shall be followed.

5. Unshift()

Here the requirement is to add the data to the front of the array, rather than adding to end of it, this method is called unshift() and this will also add an overhead of moving all the exiting elements of the array to right by one index in one insertion operation.

This can also turn out to be a costly operation when performance is to be at par.

Let’s see an example on how to do this unshifting –

Please see the index where the newly added element ‘Canada’ appears in the snapshot.

//add Canada
country.unshift('Canada');
//print elements
country.forEach(function(indexElement,index,array)
{
console.log(indexElement, index);
} );

Output –

array method output 5

6. Splice

This method is used to remove the elements based on some index passed by the user, we till yet saw push and pop, shift and unshift, those all dealt with last and first indexes, if we are supposed to do remove operation with middle indexes then we need splice method and we can pass the element index to be removed from array.

Let’s take an example where we have given a starting index from where onwards all elements have to be removed from the array.

I have added Newzealand into the existing array and made its size 4 again.

//the following statement will target index 2 and 3 to be removed.
country.splice(2),/code>

Output –

array method output 6

7. isArray()

This method checks whether a variable is of type array or not.

Let’s do this from the following snapshot

array method output 7

Conclusion

Here we saw multiple methods for data manipulation with javascript, which comes handy when you develop games or develop web pages.

Recommended Articles

This is a guide to Arrays Methods in JavaScript. Here we discuss multiple methods that will help us to perform some operations which are required during data processing and manipulations. You may also have a look at the following articles to learn more –

  1. Constructor in JavaScript
  2. Arrays in JavaScript
  3. What is JavaScript?
  4. Overriding in JavaScript
  5. Arrays in PHP

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Reader Interactions
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar
Technology Blog Tutorials
  • JavaScript
    • Multi-Dimensional Array in JavaScript
    • Do While Loop in JavaScript
    • Random Number Generator in JavaScript
    • Recursive Function in JavaScript
    • Recursive Function in JavaScript
    • Errors in JavaScript
    • String Array in JavaScript
    • Abstract Classes in JavaScript
    • Insertion Sort in JavaScript
    • Encapsulation in JavaScript
    • Break Statement in JavaScript
    • Palindrome in JavaScript
    • Reverse in JavaScript
    • JavaScript Compilers
    • Factorial Program in JavaScript
    • Quick Sort in JavaScript
    • Node.js Tools
    • For Loop in JavaScript
    • JavaScript Objects
    • AngularJS Versions
    • Case Statement in JavaScript
    • Conditional Statements in JavaScript
    • Patterns in JavaScript
    • AngularJS Events
    • What is ES6?
    • Arrays Methods in JavaScript
    • What is AngularJS
    • jQuery Ajax Methods
    • JavaScript MVC Frameworks
    • While Loop in JavaScript
    • Comparison Operators in JavaScript
    • Merge Sort in JavaScript
    • AngularJS Unit Testing
    • AngularJS Directives
    • Features of JavaScript
    • Bubble Sort in JavaScript
    • jQuery Methods
    • jQuery Effects
    • Regular Expressions in JavaScript
    • Arrays in JavaScript
    • Overriding in JavaScript
    • Constructor in JavaScript
    • JavaScript Tools
    • AngularJS Architecture
    • AngularJS Alternatives
    • JavaScript Math Functions
    • How Analytics.JS Works
    • Is Javascript Object Oriented
    • Introduction To JavaScript
    • Career In AngularJS
    • Uses Of Node.js
    • Cheat sheet JQuery
    • Cheat Sheet JavaScript
    • Uses of React JS
    • Uses of Angular JS
    • Uses Of JQuery
    • Angular JS Application
    • What is MeteorJS
    • Career in Node.js
    • jQuery Alternatives
    • Angular Alternatives
    • What is JavaScript?
    • Node.js Alternative
    • What is Backbone.js
    • Vue.JS vs React.JS
    • Node.js Commands
    • What is jQuery
    • What is React
    • Switch Statement in JavaScript
    • How Node.JS Works
    • What is ExpressJS
  • Database Management (71+)
  • Ethical Hacking Tutorial (33+)
  • HTML CSS Tutorial (47+)
  • Installation of Software (54+)
  • Top Interview question (188+)
  • Java Tutorials (196+)
  • Linux tutorial (32+)
  • Network Security (85+)
  • Programming Languages (232+)
  • Python Tutorials (89+)
  • Software Development Basics (321+)
  • Software Development Careers (38+)
  • SQL Tutorial (33+)
  • String Functions (12+)
  • Technology Commands (38+)
  • Top Differences (368+)
  • Web Development Tools (33+)
  • Mobile App (60+)
Technology Blog Courses
  • JavaScript Certification Training
  • Angular JS Certification Training
  • Vue JS Training
Footer
About Us
  • Who is EDUCBA?
  • Sign Up
  •  
Free Courses
  • Free Course Programming
  • Free course Python
  • Free Course Java
  • Free Course Javascript
  • Free Course on SQL
  • Free Course on Web Design
  • Free HTML Course
  • Free Android App Development Course
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • Ruby on Rails Course
  • ASP.NET Course
  • VB.NET Course
  • Bootstrap Training Course
  • Become a Linux System Administrator
  • PHP Course
  • Joomla Training
  • HTML Course
Resources
  • Resources (A To Z)
  • Java Tutorials
  • Python Tutorials
  • Top Differences
  • Top Interview Question
  • Programming Languages
  • Web Development Tools
  • HTML CSS Tutorial
  • Technology Basics
  • Technology Careers
  • Ethical Hacking Tutorial
  • SQL Tutorials
  • Digital Marketing
Apps
  • iPhone & iPad
  • Android
Support
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions

© 2019 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

Let’s Get Started
Please provide your Email ID
Email ID is incorrect

Cyber Week Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) View More

Cyber Week Offer - Cyber Week Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) View More