JavaScript - The Arrays Object




JavaScript - The Arrays Object

JavaScript is more than just strings and numbers. JavaScript lets you create objects and arrays. Objects are similar to classes. The objects are given a name, and then you define the object's properties and property values. An array is an object also, except arrays work with a specific number of values that you can iterate through. This article discusses how to create and work with objects including arrays.

Before you can write an object variable, you should understand the premise of an object. An object defines a set of properties related to a specific part of your application. For instance, if you have an ecommerce site, you have different parts of your site related to the store. You have customers, orders, products, and information related to these objects. Let's take a customer, for instance. A customer has an address, phone number, first name and last name. The amount of properties for a customer is up to you and how you design your application. But, let's start with creating a customer object with some standard properties.

var customer = {

            first_name: 'Joe',

            last_name: 'Smith',

            phone: '999-999-9999'

};

We've seen the "var" keyword before. This keyword tells JavaScript that we're creating a variable. In this example, we've created a custom object named "customer." We've then created properties named "first_name," "last_name," and "phone." After the colon, we've defined values for these properties.

What if you don't have data that you want to use for an object? No problem. JavaScript lets you create standard objects without defining any custom data on-the-fly. The following code also creates a customer object, but the data isn't filled until after the object is created.

var customer = new Object();

customer.first_name = 'Joe';

customer.last_name = 'Smith';

customer.phone = '999-999-9999';

Notice that this code instantiates the internal "Object()" object. This is the base object to create custom objects within your code. This object gives you the ability to instantiate an object without giving it any data. Both methods work for your JavaScript code, and you can instantiate an object as many times as you need to fill a database with information. You can also return data to the web page and print it on the user's browser. This will involve using a new method we haven't seen yet.

The "document" object contains a number of methods that help you interact with a web page's HTML. We'll discuss JavaScript with HTML in later chapters, but the "document.write()" method is convenient when you want to test your JavaScript code. Let's take the previous customer object and print it on the web page.

document.write(customer.first_name);

document.write("<br/>");

document.write(customer.last_name);

The above statement writes the customer's first and last name to the web page. This snippet of code is used to give you an example of how you can return data you stored in an object's properties. If you notice, the code that prints the text on the web page is similar to the customer object. That's because the document object is native to the JavaScript language. This object contains several properties and methods that you'll use to interact with a web page's document object model (DOM). We'll discuss the DOM in later lessons.

What is an JavaScript Arrays Object ?

An Array object is used to store a set of values in a single variable name. Each value is an element of the array and has an associated index number. You can refer to a particular element in the array by using the name of the array and the index number. The index number starts at zero. You create an instance of the Array object with the "new" keyword.

var family_names=new Array(5)

The expected number of elements goes inside the parentheses, in this case 5. You assign data to each of the elements in the array like this -

family_names[0]="Tove"
family_names[1]="Jani"
family_names[2]="Ståle"
family_names[3]="Hege"
family_names[4]="Kai"

And the data can be retrieved from any element by using the index of the particular array element you want. Like this -

mother=family_names[0]
father=family_names[1] 

JavaScript arrays are used to store multiple values in a single variable.

Example

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Swift", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Output

Swift,Volvo,BMW

Arrays are a a powerful and comprehensive tool of Javascript. They are very intuitive to use and you can do almost everything with it. However, there are important differences between arrays in Javascript and other mainstream languages. Knowing them will help you unleash their true potential. In this article we will go through the important aspects of arrays that are imperative to every JS developer and we will see the variety of usages they have.

Arrays are data structures that store information in a set of adjacent memory addresses. In practice, this means is that you can store other variables and objects inside an array and can retrieve them from the array by referring to their position number in the array. Each variable or object in an array is called an element. Unlike stricter languages, such as Java, you can store a mixture of data types in a single array. For example, you could have array with the following four elements: an integer, a window object, a string and a button object.

In addition, JavaScript arrays are always expandable, meaning that the number of elements in a JavaScript array is not constrained after the array is first declared or initialized. Why should you learn about arrays? Here are three good reasons, They can greatly simplify your programming. The DOM stores objects as arrays and you can reference them as elements in an array. You can store small tables of information in them.

The details of each of these points will be explained below. To reference an element in an array, one appends square brackets to the end of the array name. For example, let us name the array mentioned above "arrayList". It's structure would look like this -

arrayList[0] = 7           // an integer 
arrayList[1] = newWind     //a window object ref 
arrayList[2] = "blue suede shoes"   // a string   
arrayList[3] = input       // a button reference     

(where input = newWind.document.formName.buttonName) 

The notation arrayList[1] is read "arrayList sub 1".

The position number of an element in an array is called the index number. Note that the first element in an array has index number 0, not 1. This is called zero-based indexing and can be confusing to novice programmers. The index number of an element is one less than it's position. For example, the third element of arrayList has index number 2. Thus, the string "blue suede shoes" is the third element in arrayList. Forgetting this can lead to what are called "off-by-one errors".

JavaScript Arrays Table

For Example
Properties Description
push() To push(add) elements at the end of an array.
pop() To pop(remove) and return the last elements of an array
concact() To concat elements elements from one array to another array.
join() To join the elements of an array using a seperator to form a string.
shift() To remove and return the first element of an array .
slice() To create a new array from elements of an existing array.
toLocaleString() To return the string representation of a given array in a local format.
toString() To return the string representation of a given array.
unShift() To add elements at the start of an array.