What Are Arrays in JavaScript?

Imagine you are studying JavaScript at your kitchen table, in a campus lab, or in a public library in Austin. You have three small tasks: open DevTools, read one example, and write one test. The list looks simple. Then someone asks: what happens if you add an item, remove one, search the list, or copy it?

That question is more useful than memorizing a definition. An array becomes a practical JavaScript skill when you can predict three things before running the code: which value is at each index, whether the original array changes, and what the method returns.

This is a hands-on study session. Use the browser console first. If you prefer files, run the same examples with Node.js. The scenes are illustrative, not reports of real students or employers.

Move 1: Treat the array like a map

Start with an ordered collection. JavaScript uses zero-based indexes, so the first value is at position 0, not 1.

const tasks = ["open DevTools", "read MDN", "write a test"];

console.log(tasks[0]);
console.log(tasks[2]);
console.log(tasks.length);

open DevTools
write a test
3

tasks.length gives the array’s length, and reading an index outside the available range returns undefined. The MDN array tutorial uses this same console-first approach to introduce creation, indexing, and length.

At this level, it is reasonable to think of length as the number of positions in a normal, densely filled array. Later, you will deliberately break that assumption. JavaScript arrays can have empty slots, so length is not always the same as the number of values that were actually assigned.

Move 2: Every method has a visible effect and a return value

Now imagine that your study list changes. Do not just ask “Does this method add something?” Ask two questions:

const tasks = ["open DevTools", "read MDN"];

const newLength = tasks.push("write a test");
console.log(tasks);
console.log(newLength);

const removed = tasks.pop();
console.log(removed);
console.log(tasks);

["open DevTools", "read MDN", "write a test"]
3
write a test
["open DevTools", "read MDN"]

push() changes the original array and returns the new length. pop() changes the original array and returns the removed item. The difference is easy to miss if you only look at the final list.

The same pattern applies at the beginning: unshift() adds values to the front and returns the new length; shift() removes the first value and returns that value. These four methods are useful when you intentionally want to update the existing array.

Choose a method by the question you are asking

Instead of memorizing a long API list, connect each method to a decision.

Here is the difference between transforming a collection and keeping the original:

const scores = [42, 88, 67];

const curved = scores.map(score => score + 5);
const passing = scores.filter(score => score >= 70);

console.log(scores);   // [42, 88, 67]
console.log(curved);   // [47, 93, 72]
console.log(passing);  // [88]

map() creates one output value for each visited item. filter() keeps the items whose callback returns a truthy value. find() stops at the first matching item and returns that item, or undefined if there is no match. The MDN Array reference is a useful place to check which methods mutate and which create a new array.

Break the easy rule on purpose

A good study session should include a controlled surprise. These two experiments are safe to run, easy to undo, and more useful than another list of definitions.

Experiment A: length is not always a count of filled values

const visits = [];
visits[2] = "library";

console.log(visits.length);
console.log(Object.keys(visits));
console.log(0 in visits, 1 in visits, 2 in visits);

visits.forEach((place, index) => {
  console.log(index, place);
});

3
["2"]
false false true
2 library

Assigning a value at index 2 makes the length 3, but indexes 0 and 1 are empty slots. Reading visits[0] produces undefined, but an empty slot is not exactly the same as an explicitly stored undefined. The MDN Array documentation explains sparse arrays, while the detailed rules live in the ECMAScript specification.

Do not use sparse arrays as your normal beginner storage format. The point is to learn why length, Object.keys(), and callback behavior can tell different stories when a program has holes.

Experiment B: a new array can share an object inside it

const studyCards = [{ topic: "arrays", done: false }];
const copy = studyCards.slice();

copy[0].done = true;

console.log(studyCards[0].done); // true
console.log(copy[0].done);       // true

slice() created a new outer array, but it did not deeply clone the object inside. Both arrays still point to the same object. This is called a shallow copy. The MDN explanation of shallow copies shows the same distinction.

This is why “copy” does not automatically mean “completely independent.” The same warning applies to concat(), spread syntax, filter(), and map() when the elements are objects or nested arrays. If you need a deep copy, choose a technique based on the data and environment; do not treat one universal shortcut as safe for every object type.

A small before-and-after experiment

Run this slowly. Predict the state after each line:

const numbers = [1, 2, 3];

const pushedLength = numbers.push(4);
const removed = numbers.pop();
const firstEven = numbers.find(n => n % 2 === 0);
const doubled = numbers.map(n => n * 2);
const odd = numbers.filter(n => n % 2 === 1);
const deleted = numbers.splice(1, 1, 20);
const part = numbers.slice(1, 3);
const merged = numbers.concat([40, 50]);

console.log({ numbers, pushedLength, removed, firstEven, doubled, odd, deleted, part, merged });

After running it, write down which variables refer to the same changed array and which variables refer to new results. The most important contrast is not “which method is modern?” It is “did I intend to change the original data?”

Where to run the examples

Browser route: open Developer Tools, select the Console, and paste one small snippet at a time. This is the easiest route when you are studying at home, in a campus lab, or at a library computer because it requires no project setup.

File route: create a file named arrays-practice.js, paste the examples into it, and run:

node arrays-practice.js

Node.js is available from the official Node.js download page. Node lets you run JavaScript outside a browser. These examples use standard JavaScript, so they do not need document or window. If a future example uses the DOM, remember that browser APIs and Node’s runtime are different environments.

From a study list to a front-end task

Now imagine a small interface that receives work items from an API, a form, or a local data file. The front-end developer does not merely “know arrays”; they need to prepare data for a visible interface and handle states such as open, completed, empty, or failed.

const workItems = [
  { title: "Fix mobile layout", status: "open" },
  { title: "Update copy", status: "done" },
  { title: "Check keyboard focus", status: "open" }
];

const openItems = workItems.filter(item => item.status === "open");
const titles = openItems.map(item => item.title);

console.log(titles);
// ["Fix mobile layout", "Check keyboard focus"]

This is a small example of a larger workflow. The U.S. Bureau of Labor Statistics describes web developers and digital designers as people who create, maintain, and test websites, layout, functions, and navigation. The O*NET profile for Web Developers includes evaluating code, testing sites, checking browser and device compatibility, analyzing user requirements, and documenting test results.

Arrays are one tool inside those larger tasks. Learning them does not guarantee a job or make a learner job-ready. It does give you a way to explain how a collection moves from input to filtered data to something a user can see.

Three ways to keep studying in the United States

If you are learning at home, you can follow the free, self-directed MDN Curriculum, which places JavaScript alongside HTML, CSS, accessibility, version control, testing, and security. You can also use freeCodeCamp’s JavaScript curriculum for guided exercises and projects. Neither route should be treated as an automatic substitute for a degree, paid experience, or a hiring decision; both can give you a structured place to practice.

If you want local support, check resources rather than assuming every city offers the same program. The Austin Public Library coding guide lists online learning resources that include HTML, CSS, and JavaScript. In New York, NYPL TechConnect lists free technology classes and a front-end-focused Project_Code program. In St. Louis, the St. Louis Public Library courses and training page lists technology learning platforms, including JavaScript-related options.

For a more formal sequence, community colleges can be useful, but always check the current catalog, schedule, prerequisites, cost, and eligibility. For example, LaGuardia Community College’s web development program describes a progression from HTML/CSS fundamentals to interactive sites with JavaScript. Cascadia College’s JavaScript programming certificate includes web authoring, programming, user-interface development, and scripting, while noting that its professional outcomes assume relevant experience. These are examples of possible paths, not rankings or guarantees.

Your five-card study board

For your next practice session, replace workItems with a list that belongs to your life: assignments, project tasks, appointments, or books you want to read. Do not add a framework yet. First make yourself predict what each array method changes, what it returns, and which data remains connected underneath.

That is the difference between recognizing array syntax and being able to reason about a JavaScript program.

Alex Carter

Alex Carter is the editorial name behind Vandutz Academy, a programming blog for beginners. Alex reviews and tests the examples and explanations published on the site, with a focus on making Python, JavaScript, web development, and developer tools easier to understand.