Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 6 / 12Arrays
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Arrays
01 / 09Overview

Arrays

You'll learn to read and change arrays, lists of values in order, using positions that start at 0.

Why it mattersMessages, contacts, habits, players: almost every screen in an app shows a list, and lists are arrays.
about 75 min·needs: Values and variables, Loops, Functions in, values out
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Arraysjavascript.info · 20 min · English
MMamun's noteRead "Declaration", "Methods pop/push", "Loops" and "A word about length". Skip "Internals" and "Performance".
Video
JavaScript arrays crash courseYouTube · Web Dev Simplified · 6 min · English
MMamun's noteSix minutes on creating arrays, reading items by index and adding items. Watch it all.
ArticleOptional
indexOf and includesjavascript.info · 5 min · English
MMamun's noteRead only this short section. Skip lastIndexOf; you'll rarely need it.
ArticleOptional
ArraysMDN · Learn web development · 20 min · English
MMamun's noteA second explanation with small examples you can try in the browser. Read it if the first one felt fast.
03 / 09

Explanation

You want to keep many values together, in order: the batting order of a cricket team, or the marks of every student in a class. A list of values in order is called an array. You write it in square brackets:

const players = ["Tamim", "Shakib", "Mushfiq"];
console.log(players[0]);     // "Tamim"
console.log(players.length); // 3

Each item has a position number, called its index. The index starts at 0, not 1. So the first player is players[0] and the third is players[2]. length tells you how many items there are.

Because counting starts at 0, the last item is always at length - 1. People often write players[players.length], which is one step past the end. That gives undefined, not an error, so the bug can hide for a while.

A few tools you'll use all the time:

  • players.push("Liton") adds an item to the end.
  • players.includes("Shakib") answers true or false: is it in the list?
  • players.indexOf("Shakib") gives its index, here 1, or -1 if it is not there.

An array can hold any values: numbers, strings, booleans, even objects or other arrays. In a real app you will mostly see arrays of objects, like a list of users.

When you read code with [ ] after a name, ask: which position is this, counting from 0?

Words to recognise
arrayitemindexlengthpushincludesindexOf[ ]
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js6 notes
const scores = [45, 12, 78];
Mentor note · line 1
An array of three cricket scores. The order is kept.
2
console.log(scores[0]); // 45
4console.log(scores.length); // 3
console.log(scores[scores.length - 1]); // 78
6
scores.push(33);
8console.log(scores); // [45, 12, 78, 33]
9
10console.log(scores.includes(78)); // true
console.log(scores.indexOf(100)); // -1
12
const mixed = ["Rafi", 21, true];
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const players = ["Tamim", "Shakib", "Mushfiq"];
2players.push("Liton");
3console.log(players.length, players[1]);
What does this print?
DrillFind the bug2 / 2
lastItem should give back the last item of any list. Fix it so all three checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With const days = ["Sat", "Sun", "Mon"];, what is days[1]?
  2. 2 / 3With the same days, what is days[days.length]?
  3. 3 / 3What is ["Rafi", "Nusrat"].indexOf("Sadia")?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Arrays?

09 / 09

Done

You can now
Read code that uses an array and say which item sits at each position and how long the list is.
Next: Objects Back to Phase 2
On this page
  1. 01Arrays
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Arrays
01 / 09Overview

Arrays

You'll learn to read and change arrays, lists of values in order, using positions that start at 0.

Why it mattersMessages, contacts, habits, players: almost every screen in an app shows a list, and lists are arrays.
about 75 min·needs: Values and variables, Loops, Functions in, values out
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Arraysjavascript.info · 20 min · English
MMamun's noteRead "Declaration", "Methods pop/push", "Loops" and "A word about length". Skip "Internals" and "Performance".
Video
JavaScript arrays crash courseYouTube · Web Dev Simplified · 6 min · English
MMamun's noteSix minutes on creating arrays, reading items by index and adding items. Watch it all.
ArticleOptional
indexOf and includesjavascript.info · 5 min · English
MMamun's noteRead only this short section. Skip lastIndexOf; you'll rarely need it.
ArticleOptional
ArraysMDN · Learn web development · 20 min · English
MMamun's noteA second explanation with small examples you can try in the browser. Read it if the first one felt fast.
03 / 09

Explanation

You want to keep many values together, in order: the batting order of a cricket team, or the marks of every student in a class. A list of values in order is called an array. You write it in square brackets:

const players = ["Tamim", "Shakib", "Mushfiq"];
console.log(players[0]);     // "Tamim"
console.log(players.length); // 3

Each item has a position number, called its index. The index starts at 0, not 1. So the first player is players[0] and the third is players[2]. length tells you how many items there are.

Because counting starts at 0, the last item is always at length - 1. People often write players[players.length], which is one step past the end. That gives undefined, not an error, so the bug can hide for a while.

A few tools you'll use all the time:

  • players.push("Liton") adds an item to the end.
  • players.includes("Shakib") answers true or false: is it in the list?
  • players.indexOf("Shakib") gives its index, here 1, or -1 if it is not there.

An array can hold any values: numbers, strings, booleans, even objects or other arrays. In a real app you will mostly see arrays of objects, like a list of users.

When you read code with [ ] after a name, ask: which position is this, counting from 0?

Words to recognise
arrayitemindexlengthpushincludesindexOf[ ]
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js6 notes
const scores = [45, 12, 78];
Mentor note · line 1
An array of three cricket scores. The order is kept.
2
console.log(scores[0]); // 45
4console.log(scores.length); // 3
console.log(scores[scores.length - 1]); // 78
6
scores.push(33);
8console.log(scores); // [45, 12, 78, 33]
9
10console.log(scores.includes(78)); // true
console.log(scores.indexOf(100)); // -1
12
const mixed = ["Rafi", 21, true];
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const players = ["Tamim", "Shakib", "Mushfiq"];
2players.push("Liton");
3console.log(players.length, players[1]);
What does this print?
DrillFind the bug2 / 2
lastItem should give back the last item of any list. Fix it so all three checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With const days = ["Sat", "Sun", "Mon"];, what is days[1]?
  2. 2 / 3With the same days, what is days[days.length]?
  3. 3 / 3What is ["Rafi", "Nusrat"].indexOf("Sadia")?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Arrays?

09 / 09

Done

You can now
Read code that uses an array and say which item sits at each position and how long the list is.
Next: Objects Back to Phase 2
On this page
  1. 01Arrays
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want to keep many values together, in order: the batting order of a cricket team, or the marks of every student in a class. A list of values in order is called an array. You write it in square brackets:

const players = ["Tamim", "Shakib", "Mushfiq"];
console.log(players[0]);     // "Tamim"
console.log(players.length); // 3

Each item has a position number, called its index. The index starts at 0, not 1. So the first player is players[0] and the third is players[2]. length tells you how many items there are.

Because counting starts at 0, the last item is always at length - 1. People often write players[players.length], which is one step past the end. That gives undefined, not an error, so the bug can hide for a while.

A few tools you'll use all the time:

  • players.push("Liton") adds an item to the end.
  • players.includes("Shakib") answers true or false: is it in the list?
  • players.indexOf("Shakib") gives its index, here 1, or -1 if it is not there.

An array can hold any values: numbers, strings, booleans, even objects or other arrays. In a real app you will mostly see arrays of objects, like a list of users.

When you read code with [ ] after a name, ask: which position is this, counting from 0?

Words to recognise
arrayitemindexlengthpushincludesindexOf[ ]

You want to keep many values together, in order: the batting order of a cricket team, or the marks of every student in a class. A list of values in order is called an array. You write it in square brackets:

const players = ["Tamim", "Shakib", "Mushfiq"];
console.log(players[0]);     // "Tamim"
console.log(players.length); // 3

Each item has a position number, called its index. The index starts at 0, not 1. So the first player is players[0] and the third is players[2]. length tells you how many items there are.

Because counting starts at 0, the last item is always at length - 1. People often write players[players.length], which is one step past the end. That gives undefined, not an error, so the bug can hide for a while.

A few tools you'll use all the time:

  • players.push("Liton") adds an item to the end.
  • players.includes("Shakib") answers true or false: is it in the list?
  • players.indexOf("Shakib") gives its index, here 1, or -1 if it is not there.

An array can hold any values: numbers, strings, booleans, even objects or other arrays. In a real app you will mostly see arrays of objects, like a list of users.

When you read code with [ ] after a name, ask: which position is this, counting from 0?

Words to recognise
arrayitemindexlengthpushincludesindexOf[ ]