JavaScript 101-#3 – Variables and data types Pt2

In previous part we discussed variables and some data types including numbers, strings and boolean. If you did not read that post, I suggest you to look at it first to understand how to create variables because they are fundamental aspect of any programming language, including JavaScript. Without knowledge about variables you will not be able to master programming in JavaScript which, I hope, is your goal.

Stop piffle about past and move to present. Topic for today are arrays. They are more advanced so we rather dive in immediately.

Arrays

In JavaScript, arrays are used to store multiple values (data or information) in single variable. These data are then accessed via their index. Indexes are numbers indicating position of the value. If you know CSS, you probably saw them before. Some examples can be :nth-child(n) or :nth-of-type(n) selectors where “n” is index or order of an element. In JS, indexes start with 0, so to access first value in array you would use index “0”, for second “1” and so on.

Array begin and end with square brackets and the values (data or information) are inside divided by commas. The last value is without comma. This also applies if you want to store only one value – no comma after it. In arrays, you can store whatever data types you want. It can be numbers, strings, boolean, another array, objects or mix of them. Few examples of basic arrays …

JavaScript:

var array1 = [12];
var arrayTwo = [“JavaScript”];
var array3 = [“Python”, 1158, false, 'PHP'];

When you want to access some value stored in array, use name of the variable followed by squared brackets containing index of that value. Remember – indexes start with 0 not 1. If you left the brackets empty, JavaScript will return error.

JavaScript:

// accessing values
var array3 = [“Python”, 1158, false, 'PHP'];
array3[2]; // return false
array3[0]; // return “Python”
array3[]; // does NOT work – will cause error

– note: use console.log() or alert() methods to see the data:

JavaScript:

alert(array[3]);
console.log(array[]);

Multidimensional Arrays

When you store another array in an array, it is called multidimensional array or n-dimensional array according to number of arrays stored inside. For example, array with two arrays stored inside is two dimensional array, with five arrays is called five dimensional array and so on. In order to store an array inside another, create new variable and inside square brackets (indicating arrays) write another square brackets – these brackets mark new array. Inside these second brackets you can, again, write whatever data type you want. Just like with other data types, nested arrays are divided by commas. Some examples to know how these arrays look.

JavaScript:

// basic one dimensional array
var oneDimensionalOne = [1];
var oneDimensionalTwo = [true, “Eich”];
// Two dimensional array
var twoDimensionalOne = [[13, false, 'gather'],[true, “design”, “Vignelli”]];
var twoDimensionalTwo = [[1, 2, 3],[2, 4, 6]];

Accessing values in multidimensional array is similar to one dimensional. Write name of the array followed by square brackets. However, in case of multidimensional array you have to use two or more indexes, so two or more brackets. First index indicate the position of the nested array and the second, for two dimensional array, indicate the value you want to access. Example:

JavaScript:

var twoDimensionalOne = [[13, false, 'gather'],[true, “rating”]];
var twoDimensionalTwo = [[1, 3],[12, false]];
twoDimensionalOne[1][0]; // will return true – 1 = second value in “parrent array”, 0 = first value in nested array
twoDimensionalTwo[0][0]; // will return 1
twoDimensionalOne[0][2]; // return 'gather'
twoDimensionalTwo[1][1]; // will return false

As you could notice, nested arrays are independent so they don’t have to store same number of values or elements. You can store one value in one and thousand in second if you want.

JavaScript:

var array1 = [[15, 83, 'variable', 'skills'],[0]];

There is also no limit on how many arrays you can nest. The only thing is to be able to orient in them.

JavaScript:

// arrays can sometime cause you a headache ...
var extremeArr = [['sketch', 'design'],[56, true, [1, [[15, 165, 'star wars']], 'nested'], false],[12, 56, false]];
extremeArr[1][2][1][0][2]; // will return 'star wars'

Headache?

Summary

Let’s end it here so you can give yourself a break to grasp all the information and practice a bit with arrays. Make sure you understand this subject because you will deal with arrays very often in the future. I will also write some more posts on arrays to provide you with more material for learning. Thank you very much for your attention and see ya later. AD

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal