JavaScript Array and Its Methods
Table of Contents
JavaScript Array and Its Methods
Introduction to Arrays in JavaScript
In JavaScript, arrays are special objects used to store multiple values in a single variable. Arrays can hold elements of any type, including numbers, strings, objects, or even other arrays. Arrays are zero-indexed, meaning the first element is at index 0.
Example:
let fruits = ['Apple', 'Banana', 'Mango'];
console.log(fruits); // Output: ['Apple', 'Banana', 'Mango']Creating Arrays
2.1. Using Array Literal Notation
You can create arrays by specifying values inside square brackets [].
let colors = ['Red', 'Green', 'Blue'];2.2. Using the Array Constructor
You can also create arrays using the Array() constructor.
let numbers = new Array(1, 2, 3, 4);2.3. Sparse Arrays
You can leave gaps between elements, creating sparse arrays where certain indices are undefined.
let sparseArray = [1, , 3]; // Second element is undefined3. Array Methods
3.1. Length Property
length: Returns the number of elements in the array.
let fruits = ['Apple', 'Banana'];
console.log(fruits.length); // 23.2. Accessing Array Elements
You can access array elements using their index (starting from 0).
let fruits = ['Apple', 'Banana', 'Mango'];
console.log(fruits[0]); // 'Apple'3.3. Modifying Array Elements
You can modify array elements by assigning new values to specific indices.
let fruits = ['Apple', 'Banana'];
fruits[1] = 'Orange';
console.log(fruits); // ['Apple', 'Orange']3.4. Adding and Removing Elements
3.4.1. push()
push(): Adds one or more elements to the end of an array.
let fruits = ['Apple', 'Banana'];
fruits.push('Mango');
console.log(fruits); // ['Apple', 'Banana', 'Mango']3.4.2. pop()
pop(): Removes the last element from an array.
let fruits = ['Apple', 'Banana', 'Mango'];
fruits.pop();
console.log(fruits); // ['Apple', 'Banana']3.4.3. unshift()
unshift(): Adds one or more elements to the beginning of an array.
let fruits = ['Banana', 'Mango'];
fruits.unshift('Apple');
console.log(fruits); // ['Apple', 'Banana', 'Mango']3.4.4. shift()
shift(): Removes the first element from an array.
let fruits = ['Apple', 'Banana', 'Mango'];
fruits.shift();
console.log(fruits); // ['Banana', 'Mango']3.5. Concatenating Arrays
concat(): Joins two or more arrays and returns a new array.
let array1 = ['Apple', 'Banana'];
let array2 = ['Mango', 'Orange'];
let result = array1.concat(array2);
console.log(result); // ['Apple', 'Banana', 'Mango', 'Orange']3.6. Finding Elements
3.6.1. indexOf()
indexOf(): Returns the index of the first occurrence of an element, or -1 if it is not found.
let fruits = ['Apple', 'Banana', 'Mango'];
console.log(fruits.indexOf('Banana')); // 13.6.2. includes()
includes(): Returns true if the array contains the specified element, otherwise false.
let fruits = ['Apple', 'Banana'];
console.log(fruits.includes('Apple')); // true
console.log(fruits.includes('Orange')); // falseImportant Note: The includes() method is not supported in Internet Explorer.
3.7. Array Transformation Methods
3.7.1. map()
map(): Creates a new array with the results of calling a provided function on every element.
let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9]3.7.2. filter()
filter(): Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]3.7.3. reduce()
reduce(): Executes a reducer function on each element of the array, resulting in a single output value.
// Define the accumulator function
function accumulator(acc, num) {
return acc + num; // Adds the current number to the accumulated total
}
// Initialize the array
let numbers = [1, 2, 3, 4];
// Use the reduce method with the accumulator function
let sum = numbers.reduce(accumulator, 0); // Start with an initial value of 0
// Output the result
console.log(sum); // 103.8. Array Searching and Sorting Methods
3.8.1. find()
find(): Returns the value of the first element that satisfies the provided testing function.
let numbers = [1, 2, 3, 4];
let found = numbers.find(num => num > 2);
console.log(found); // 3Important Note: The find() method is not supported in Internet Explorer.
3.8.2. sort()
sort(): Sorts the elements of an array in place and returns the sorted array.
let fruits = ['Banana', 'Apple', 'Mango'];
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Mango']3.8.3. reverse()
reverse(): Reverses the order of the elements in an array in place.
let fruits = ['Banana', 'Apple', 'Mango'];
fruits.reverse();
console.log(fruits); // ['Mango', 'Apple', 'Banana']3.9. Joining Arrays
join(): Joins all elements of an array into a string.
let fruits = ['Apple', 'Banana', 'Mango'];
let fruitString = fruits.join(', ');
console.log(fruitString); // 'Apple, Banana, Mango'3.10. Array Iteration Methods
3.10.1. forEach()
forEach(): Executes a provided function once for each array element.
let fruits = ['Apple', 'Banana', 'Mango'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// Apple
// Banana
// Mango3.10.2. every()
every(): Tests whether all elements in the array pass the provided function.
let numbers = [1, 2, 3, 4];
let allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true3.10.3. some()
some(): Tests whether at least one element in the array passes the provided function.
let numbers = [1, -2, 3];
let hasNegative = numbers.some(num => num < 0);
console.log(hasNegative); // trueImportant Note: The some() method is not supported in Internet Explorer.
4. Multidimensional Arrays
Arrays in JavaScript can hold other arrays as elements, allowing you to create multidimensional arrays.
Example:
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6Summary
Arrays are a fundamental data structure in JavaScript, providing a wide range of methods to work with collections of data. Mastering array methods such as push(), map(), filter(), and others will enable you to manipulate and transform data efficiently.
Discussion
Kalpesh Shewale
I am grateful to have completed my Full Stack Development with AI course at Apnaguru. The faculty's support and interactive classes helped me discover my potential and shape a positive future. Their guidance led to my successful placement, and I highly recommend this institute.
Kalpesh Shewale
I am grateful to have completed the Full Stack Development with AI course at Apnaguru. The faculty's dedicated support and hands-on approach during the classes enabled me to unlock my potential and shape a promising future. Their guidance helped me secure a placement with a good package. I highly recommend this course, and for those interested, I also suggest doing the offline version at the center for an enhanced learning experience.
Raveesh Rajput
Completing the Full Stack Development with AI course at Apnaguru was a game-changer for me. I secured an internship through this course, which gave me invaluable hands-on experience. I strongly recommend this course to anyone looking to break into the tech industry. For the best experience, I suggest attending the offline sessions at the center, where the interactive learning environment really enhances the overall experience.
swapnil shinde
Apnaguru’s Full Stack Development with AI course provided me with more than just knowledge—it opened doors to an internship that gave me real-world, hands-on experience. If you're serious about a career in tech, this course is a must. I highly recommend attending the offline sessions for the most immersive and interactive learning experience!
Kalpana Waghmare
I recently completed the Full Stack Developer with AI course on ApnaGuru, and I couldn’t be more impressed! The structure of the course, with well-organized topics and self-assessment MCQs after each section, really helped reinforce my learning. The assignments were particularly valuable, allowing me to apply what I learned in a practical way. Overall, it’s an excellent program that effectively combines full-stack development and AI concepts. Highly recommended for anyone looking to enhance their skills!
Completing the Full Stack Development with AI course at Apnaguru was a pivotal moment in my career. It not only deepened my understanding of cutting-edge technologies but also directly led to an internship that provided practical, real-world experience. If you're aiming to enter the tech field, this course is an excellent stepping stone. I especially recommend attending the in-person sessions at the center, where the dynamic, hands-on learning approach truly maximizes the benefits of the program.
Mahesh Bhosle
I completed the Full Stack Development course at Apnaguru, and it was a valuable experience. The focus on live assignments and projects gave me real-world insights, helping me apply my skills in a professional setting. The interactive live sessions, mock interviews, and question banks were excellent for job preparation. Apnaguru’s company-like environment also helped me get accustomed to real work dynamics. Overall, this course equipped me with the skills and confidence needed for a career in full-stack development. I highly recommend it to anyone seeking hands-on learning and industry relevance.
I recently completed the Full Stack course at ApnaGuru, and I’m genuinely impressed! The curriculum is well-structured, covering both front-end and back-end technologies comprehensively. The instructors are knowledgeable and provide hands-on experience through practical projects. The supportive community and resources available made learning enjoyable and engaging. Overall, it’s a great choice for anyone looking to kickstart a career in web development. Highly recommend!
Adarsh Ovhal
I recently participated in the Full Stack Development With AI Course program, and it has been incredibly beneficial. The guidance I received was tailored to my individual needs, thanks to their advanced use of AI tools. The Trainers were knowledgeable and supportive, helping me explore various educational and career paths. The resources and workshops provided were practical and insightful, making my decision-making process much clearer. Overall, I highly recommend this program to any student looking for IT Field and personalized career guidance!
Shirish Panchal
I’m currently pursuing the Full Stack Developer with AI course at ApnaGuru Training Center, and I'm impressed with what I've experienced so far. The curriculum is well-structured, covering key concepts in both front-end and back-end development, along with AI fundamentals. The instructors are knowledgeable and supportive, which makes it easy to engage and ask questions. I particularly appreciate the hands-on projects that help reinforce what I’m learning. While I’m still in the process of completing the course, I feel that I'm building a strong foundation for my future in tech. I would recommend ApnaGuru to anyone looking to explore full stack development with AI!
Apnaguru Training Center stands out as a top-notch institute for IT education. They provide a wide array of courses, including Full Stack Development, Java Full Stack, Python, Automation Testing, DevOps, and MERN/MEAN Stack, all designed to meet the demands of the modern tech industry.
Mahesh Bhosle
Apnaguru Training Center is a fantastic place for IT education! They offer a variety of courses, including Full Stack Development, Java Full Stack, and Python, all taught by knowledgeable instructors who are committed to student success. The curriculum is up-to-date and includes hands-on projects that enhance learning.
dandewar srikanth
I had an excellent experience with the full-stack web development program at APNAGURU. The instructor had in-depth knowledge of both frontend and backend technologies, which made the concepts easy to grasp. From working on HTML, CSS, JavaScript, and React for the frontend to Node.js and MongoDB for the backend, the learning curve was very smooth.