JavaScript Programming/Arrays
This lesson introduces JavaScript arrays.
Objectives and Skills
editObjectives and skills for this lesson include:[1]
- Declare and use arrays
- Single-dimensional arrays; multi-dimensional arrays; iteration; initialization; define an array; sort and search an array; use push, pop, shift, and unshift methods; use the length property; access an array element;
Readings
editMultimedia
edit- YouTube: JavaScript Tutorial for Beginners - 17 - Arrays
- YouTube: JavaScript Arrays with different data types
- YouTube: How to Create Arrays in JavaScript
- Youtube: JavaScript Tip: 7 Ways to Iterate Over an Array
- YouTube: Push, Pop, Unshift and Shift Array Methods
- YouTube: Multidimensional array tutorial
- YouTube: 7.2: Arrays and Loops - p5.js Tutorial
Examples
edit- W3Schools: JavaScript Arrays
- W3Schools: JavaScript Array Methods
- W3Schools: JavaScript Sorting Arrays
- W3Schools: JavaScript Array Iteration Methods
- TutorialRepublic: JavaScript Arrays
- The Modern Javascript Tutorial: Arrays
- Example Code
- Arrays | MDN Web Docs
- Average or Arithmetic mean of an array using Javascript
Activities
editComplete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.
- Extend any of the activities from JavaScript Programming/Loops to use an array to hold the information generated during processing (values only) and display the results from the array (add HTML formatting) after processing is complete.
Lesson Summary
edit- The first element of the array has an index of
0
. The second element has an index of1
. The last element has an index ofarrayName.length - 1
.[2] - JavaScript arrays are used to store multiple values in a single variable.[2]
- An array that has multiple arrays in it is called a multi-dimensional array. [2]
- Arrays are commonly used to loop across a set of elements.
- In JavaScript, an array is not actually an explicit data type, but a predefined object of elements. [3]
Key Terms
edit- array
- Arrays allow us to store multiple values in a single variable.[4]
- array methods
- Built-in functions to work with arrays in JavaScript.[5]
- index or subscript
- An integer that defines an element position within an array and is used to access that element.[2]
- indexOf() method
- The indexOf() method searches the array for the specified item, and returns its position (index). [6]
- multi-dimensional array
- An array whose elements consist of other arrays.[9]
- pop() method
- This method removes the last element from an array.[10]
- push() method
- Is the easiest way to add a new element to an array.[2]
- array.reduce() method
- Runs a function on each array element to produce (reduce it to) a single value.[11]
- sort() method
- The sort() method sorts an array alphabetically. [12]
- filter() method
- The filter() method allows you to exclude array elements that match specific criterias. [13]
See Also
edit- GeeksforGeeks: How to Create Two-Dimensional Arrays in JS
- GeeksforGeeks: JavaScript Basic Array Methods
- GeeksforGeeks: Ways of iterating over an array in JavaScript
- JavaScript Tutorial: The Beginner's Guide to JavaScript Array with Examples
- JavaScript.info: Arrays
- Medium: JavaScript Multi-Dimensional Arrays
- TutorialsPoint: JavaScript - the Arrays Object
- W3Resource: Array Exercise
- Khan Academy - Intro to Arrays
- JavaScript Array indexOf() Method
- sebhastian.com: Understanding JavaScript 2D array
- sebhastian.com: Filter JavaScript array element with multiple conditions
- TheModernJavaScript: JavaScript Arrays
References
edit- ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
- ↑ 2.0 2.1 2.2 2.3 2.4 https://www.dyn-web.com/javascript/arrays/multidimensional.php
- ↑ "Indexed collections - JavaScript | MDN". developer.mozilla.org. Retrieved 2021-03-16.
- ↑ https://www.w3schools.com/js/js_arrays.asp
- ↑ https://www.w3schools.com/js/js_array_methods.asp
- ↑ https://www.w3schools.com/jsref/jsref_indexof_array.asp
- ↑ https://www.w3schools.com/jsref/jsref_obj_array.asp
- ↑ https://www.w3schools.com/jsref/jsref_length_array.asp
- ↑ https://www.dyn-web.com/javascript/arrays/multidimensional.php
- ↑ "JavaScript Array Methods". www.w3schools.com. Retrieved 2020-10-13.
- ↑ "JavaScript Array Iteration Methods". www.w3schools.com. Retrieved 2021-03-11.
- ↑ https://www.w3schools.com/js/js_array_sort.asp
- ↑ https://sebhastian.com/javascript-filter-array/