Javascript Guide: Arrays
Javascript Guide: Arrays
Arrays
Arrays areJavaScript’s ordered lists that can store any data types including Strings, Numbers, and Booleans.
Each item inside of an array is at a numbered position.
Syntax
- An array is represented by square brackets and the content inside.
- Elements within an array should be separated by commas.
let colors = ["red", "blue", "green", "yellow"];
Copy to clipboardlet colors = ["red", "blue", "green", "yellow"];Access & Update Elements
To access or change an individual item in an array, we use its numbered position. The positions in an array arezero-indexed, meaning the positions start counting from 0.
Follow the name of the array with the index of the item within brackets to be accessed or updated.
console.log(colors[3]);
Copy to clipboardconsole.log(colors[3]);Output:
yellowTo update an item, set the array and index equal=to the new value.
colors[1] = "purple";console.log(colors);
Copy to clipboardcolors[1] = "purple";console.log(colors);[ 'red', 'purple', 'green', 'yellow' ]Arrays with let and const
The contents of an array declared with the keywordconstandletcan be changed; however theconstdeclared array cannot be reassigned a new array or different value.
const capitals = ['Athens', 'Paris', 'London', 'Tokyo'];capitals[1] = "Berlin";console.log(capitals);
Copy to clipboardconst capitals = ['Athens', 'Paris', 'London', 'Tokyo'];capitals[1] = "Berlin";console.log(capitals);[ 'Athens', 'Berlin', 'London', 'Tokyo' ]When we try to reassigncapitalsa new value, we get an error.
capitals = "Moscow";
Copy to clipboardcapitals = "Moscow";TypeError: Assignment to constant variable.Built-in Properties & Methods
Properties are used to retrieve certain information about the instance of a data type.
To utilize a property, follow the name of the array with a period and the property name.
Thelengthproperty returns the number of elements in the arraycapitals.
const capitals = ['Athens', 'Paris', 'London', 'Tokyo'];console.log(capitals.length);
Copy to clipboardconst capitals = ['Athens', 'Paris', 'London', 'Tokyo'];console.log(capitals.length);Output:
4Methods are called on an array to execute certain tasks like adding and removing elements.
To utilize a method, follow the name of the array with a period and the method name.
.push()is a method that adds items to the end of an array.
const seasons = ['Winter', 'Spring', 'Summer']; seasons.push('Autumn'); console.log(seasons);
Copy to clipboardconst seasons = ['Winter', 'Spring', 'Summer']; seasons.push('Autumn'); console.log(seasons);[ 'Winter', 'Spring', 'Summer', 'Autumn' ].pop()is a method that removes the last element of an array.
const seasons = ['Winter', 'Spring', 'Summer'];seasons.pop();console.log(seasons);
Copy to clipboardconst seasons = ['Winter', 'Spring', 'Summer'];seasons.pop();console.log(seasons);[ 'Winter', 'Spring' ]Both.pop()and.push()mutate or change the array on which they are called.
Arrays and Functions
If an array is mutated within a function, that change will be maintained outside of the function as well.
const names = ['John', 'Maria', 'Will', 'Anna'];
function addName(arr) { arr.push('Samuel'); }
addName(names); console.log(names);
Copy to clipboardconst names = ['John', 'Maria', 'Will', 'Anna'];
function addName(arr) { arr.push('Samuel'); }
addName(names); console.log(names);[ 'John', 'Maria', 'Will', 'Anna', 'Samuel' ]Nested Arrays
Arrays can be nested or contain other arrays.
To access the elements within the nested array, chain more bracket notation with index values.
const pizzaOrders = [['Pepperoni', 'Coke'], ['Margherita', 'Pepsi']];console.log(pizzaOrders[1]);console.log(pizzaOrders[1][0]);
Copy to clipboardconst pizzaOrders = [['Pepperoni', 'Coke'], ['Margherita', 'Pepsi']];console.log(pizzaOrders[1]);console.log(pizzaOrders[1][0]);[ 'Margherita', 'Pepsi' ]
Margherita'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Complete Payment to Unlock Full Guide & Source Code
You are viewing the 30% preview. Join TopCourseAI Pro to unlock the remaining 70% of this article, unblur all code snippets, and gain full access to all 412 technical projects and guides.
Ready to access the complete step-by-step tutorial?
Gain full unhindered access to all 412 technical projects and guides, unblur all source code snippets, and download runnable scripts.
Related Blueprints & Guides
View all 166 →Accessibility on the Platform
Codecademy is committed to providing a high-quality learning experience for all learners. That includes accommodating different usage forms such as auditory, motor, or visual restrictions, limited hardware, or other acce...
Web developmentAffordances, Signifiers, and Clickability
For users on the web, the mouse click is perhaps the most fundamental human-computer interaction. The webbecamethe web partially through the power ofhypertext, or text in one document that links to other documents or res...
Web developmentAuthentication and OAuth
Authenticationis the process used by applications to determine and confirm identities of users. It ensures that the correct content is shown to users. More importantly, it ensures that incorrect content is secured and u...
Ready to build production-grade AI systems?
Enjoyed this guide? Continue exploring our library of 166+ production blueprints, multi-agent swarms, and autonomous agent systems with 100% unblurred, executable source code.