loading...

JavaScript Arrays

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

In computer science arrays are indexed data structures starting at zero.

In basic definition data structure determines how data is stored in a computers memory. Technically speaking data structures are defined as:

... a data organization, management, and storage format that enables efficient access and modification.
Wikipedia

When you use the right data structure at the right time in your application you'll get the best performance possible. JavaScript performance is an entire topic on its own and will not be covered in this post nor in this series.

JavaScript arrays are quiet easy to start with but, as you'll discover later there are lot of methods for manipulating arrays in JavaScript.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.


There are two ways you can create an array in JavaScript. They are:

  • The square bracket notation → []
  • The new Array() syntax → new Array()

The second syntax is the object oriented format and can be intimidating, on the other hand the square bracket notation is beginner friendly, therefore we will use it in our code examples.

Switch over to your browser and make sure you have turned on the multi-line code editor.

Type the following code:

// create an empty array
var a = [];

// check the array
a;

Then click the Run button to execute the code.

An array created in Javascript

Now lets add some element using index numbers starting at zero.

// Add the elements
a[0] = "Linux";
a[1] = "macOS";
a[2] = "Microsoft Windows";

// check if there are elements in the array
a;

Switch over to the console editor and run the code.

Arrays in JavaScript

You can retrieve these element using their index number.

Arrays in JavaScript

When you make an attempt to retrieve a non-existence element you will get undefined.

Arrays in JavaScript


Every array has a length property which is the number of elements in the array.

The format is:

  • array.length

Using our previous example:

a.length;

// Expected output: 3

When the code is executed in the console you will get the same output.

Arrays in JavaScript

Under the hood JavaScript arrays are objects, therefore we can use the delete operator to remove an element from the array.

delete a[1]; // delete element at index 1

// Expected output: true

In the console this will also return true:

Arrays in JavaScript

Now, when we check the array, we get undefined in the place of the array that was deleted.

Arrays in JavaScript

When we deleted an element in the array, it created an hole in the array which led to undefined which is undesirable.

This can be remedied if we use the splice() method. The splice() method will take a starting index and the number of elements to remove from the array. After the removal all elements will be rearranged and their index will change respectively.

The best way to see this in action is to add more elements to our array, then delete some with the splice() method. After that we'll list the element in the array and you will observe that their index has changed.

First let's empty the array, we can do this by assigning an empty array ([]) to our variable a:

Arrays in JavaScript

Next, we add some element.

// seven elements will be added to
// the array

a[0] = "Linus Torvalds";
a[1] = "Dennis Ritchie";
a[2] = "William H. Gates";
a[3] = "Time Berners-Lee";
a[4] = "Stephen Hawking";
a[5] = "Lawrence Page";
a[6] = "Paul Allen";

In the console:

Arrays in JavaScript

Next, we will remove three element between index 2 and index 4.

// This will remove three elements

a.splice(2, 3);

// the removed element 
// Array(3) [ "William H. Gates", "Time Berners-Lee", "Stephen Hawking"]

In the console:

Arrays in JavaScript

When the you check the array, you will realize the elements have been rearranged.

Arrays in JavaScript


There is more to JavaScript arrays than what we've discussed here but, this is enough to get you started.

Up next, Objects.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on Dec 26 '19 by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide
 

Hey,
Just wanted to say, i really like the way you break down and cover the pieces of js indvidually.
Thank You

 

Just wanted to say, i really like the way you break down and cover the pieces of js individually.

I am glad i could help.

Thank You

You are welcome sir.

Extra: You have a typo → indvidually