ABCs of Programming Constructs

A. Variables

Variable – is a container to store a reference to a SINGLE data type. A reference is code in a computer memory that can be "refer" to later easily.

There are several actions usually done first when creating a variable in this order:

• DECLARE IT: the key word var is used to declare it as a variable.
  • EXAMPLE: var
    
  • EXCEPTIONS: You will see later that you can pass a variable as a function's parameter. In which case, you do not use the "var" keyword (e.g., function myFunction (myVar)). Also, once you declare a variable you should not use the var keyword again when referring to that variable elsewhere in the code; if you do re-declare a variable, you will get the same result as the first instance unless you changed its value again.
• NAME IT: a name is given to it.
  • EXAMPLE: var firstName
    • A descriptive name is typically used. While var a = l*w is correct to use, it does not easily convey the meaning of the variables. Instead var area = length * width gives meaning and clarity to the variables. So the more descriptive you are, the easier and faster it is for you or someone else to read your code.
    • no spaces are used in variable name (e.g., cannot use first Name)
  • must begin with a letter and not a number (e.g., cannot use 1firstName)
  • cannot use a reserved word that is used by the programming language (e.g., function), otherwise, you may get an error.
  • can only use alphanumeric characters with the dollar sign ($) or underscore (_). Some programming languages (e.g., jQuery, PHP) require you to start a variable with a dollar sign ($).
  • It is common practice to use what is referred to as camelCase where you start with a lowercase letter and then use an uppercase for every other word in the name (e.g., getTotalScore). TIP: When writing in camelCase, just remember where ever you intent to put a SPACE put a CASE (uppercase, that is.)
  • name is case-sensitive (e.g., myVar is different from myvar).
    
• ASSIGN IT: an equal sign (=)—technical term is an assignment operator—and a value may be assigned to the variable.
  
  • EXAMPLE: var firstName = “Bob”
• CLOSE IT: a semicolon (;) is used to close the variable statement. Optional in some programming languages like JavaScript, but highly recommended.
  • EXAMPLE: var firstName = “Bob”;
  • While adding semicolons are optional in JavaScript, you should be aware that the semicolon is required in some programming language (i.e., Java). As a result, you may want to make it a habit if you use other languages. So, if you move between programming languages you would be less likely to inadvertently forget to include them.
  • The semicolon is also used so that you can add more than one statement on a single line. However, this is typically not recommended.
  • However, be careful to place a semicolon at the end of a statement or end of a complete code block.

MEMORY TIP: DNA - Declare, Name, and Assign. Closing is optional but highly recommended in JavaScript.

NOTE: Flash and some other programming languages also require you to type the variable:
TYPE IT: a colon (:) and a data type name is used to define variable type (Flash and some other languages)

• EXAMPLE: var firstName:String
• The data type name denotes this variable as a string and not a number or any other data type.

function helloWorld();
  {
    alert("Hello,World");
   };

function helloWorld()
  {
    alert("Hello,World");
  };

function helloWorld() 
  {
    alert("Hello,World");
   };

A variable can be DECLARED, NAMED, ASSIGNED and CLOSED all at the SAME time:

var lastName = “Jones”;    

Or, it can be declared, named and closed but assigned at a LATER time when it is needed in the code:

var lastName;
// more code goes here...
lastName = “Jones”

If a variable is created and not assigned a value, it will result in the word undefined if traced with a built-in function like alert().

var lastName;
alert(lastName); // Returns undefined  

var footerInfo = document.getElementById("footer_copyright");
footerInfo.innerHTML = "Something else";

var footerInfo = document.getElementById("footer_copyright").innerHTML;
footerInfo = "Something else";

document.getElementById("footer_copyright").innerHTML = "Something else";

var myNumbers=2+5;  or var myNumbers = 2 + 5;

var myNumber1 = 5;
var myNubmer2 = 2;
var myNubmer3 = myNumber1 % myNumber2; 
alert(myNubmer3); // Returns  a reminder of 1

var myNumber = 5;
myNumber ++;
alert(myNumber) // Returns 6;

var myNumber = 5;
myNumber --;
alert(myNumber) // Returns 4;

var myNumber = 5;
myNumber += 2;
alert(myNumber) // Returns 7; 

var myNumber = 5;
myNumber -= 2;
alert(myNumber) // Returns 3;    

var myVar = 50 + 20 * 3; 
alert(myVar); // Results 110

var myVar = (50 + 20) * 3; 
alert(myVar); // Results 210

var myVar = 50 + 20 - 3; 
alert(myVar); // Results 67

var myString1 = "Hello,";
var myString2 = " World";
var myString3 = myString1 + myString2;
alert(myString3); // Returns "Hello, World";
myString3 += " and Goodbye, World.";
alert(myString3) // Returns "Hello, World and Goodbye World."

var NumberOrString  = "5" + 5; 
alert(NumberOrString) 
// Returns string concatenation of  "55" instead of 10

B. Arrays

Array – is a container for an "array" of MULTIPLE data types including other arrays. In contrast, string and numeric variables are sometimes called SCALAR because they can only hold a single data type. There are two type of arrays: Indexed and Associative. An indexed array REFERENCE its array elements by its index number starting from zero. Whereas, an associative array REFERENCE its array element by is associated name instead of number.

An array is a special variable (notice it starts with the keyword var) that is created by using a set of square brackets so that it can hold MULTIPLE elements of different data types separated by commas. This type of array is called a literal array (as opposed to an associative array discussed later).

• Example: var myArray = [5, "lastName", true, ["this", "is","another", "array"], {property:value}, VarArrayOrObjectFunction ]
• An array is a great way to "see" the various data types side-by-side and how they are formatted:
  • A number will always be a number without quotes (e.g., 5)
  • A string will always have single or double quotes (e.g., "lastName")
  • A boolean will always be the lowercase true or false (e.g., true)
  • Another array may be in square brackets (e.g., ["this", "is","another", "array"]) or a reference to an existing array name (e.g., myArray).
  • An object may be in curly braces (e.g., {property:value}) or a reference to an existing object name (e.g., myObject).
  • A function may have a function syntax (e.g., function()) or a reference to an existing function (myFunction).
  • A word without quote refers to another existing variable, array, object, or function that has been previously defined  (e.g., VarArrayOrObjectFunction)

Why use an array. Well, you could use a series of variables like this:

var fruit1 = "apple";
var fruit2 = "banana";
var fruit3 = "orange";
var fruit4 = "grapes";

The problems with multiple variables is that it requires a lot of individual variables each with a different variable name (e.g., fruit1, fruit2, etc.) and you cannot loop around them easily. This is where an array comes in handy. In fact, arrays and loops are "kissing cousins" because you see them together all the time.

Or, you could group these multiple related variables into a single array like this:

var myFruits = ["apple", "banana", "orange", "grapes"];
alert(myFruits);  // Returns apple, banana, orange, grapes

And then loop around this array to get to its elements. (Looping will be discussed later.)

Another way to create a literal array is to use the new constructor. However, the previous example is preferred and the most common format.

var myFruits = new Array("apple", "banana", "orange", "grapes");
alert(myFruits); // Returns apple, banana, orange, grapes

CAUTION: You should avoid using the new constructor when creating an array because you may not get the result you expected. For example, if you create an array like this:

var myArray = [10]; 
alert(myArray); // Returns an array with one element with a value of 10.

However, if you create an array like this, you may not get the results you expected.

var myArray = new Array(10);
alert(myArray); // Returns an array of 10 undefined elements ( ,,,,,,,,,, )

CAUTION: Also, be careful not to place a comma after the last element in a literal array or you make get an error.

While there is one property of an array (e.g., length) that returns the total number of elements in an array, there are dozens of methods. However, the two most popular methods are the push() and pop().

Adding elements to an array:

While you typically add elements you need to an array when you create an array (See example above), there are times when you may want to add a new element to an array after it has been created.

You could use the array's square bracket alone with an index value to add an element to an array and then assign it a value.

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits [4] = "watermelon";
alert(myFruits); // Returns apple, banana, orange, grapes,watermelon

However, this is not the best method because you may not always know what the last index value is readily if the array is large or if the array is coming from an external source.

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits [8] = "watermelon";
alert(myFruits); // Returns apple, banana, orange, grapes,,,,, watermelon

CAUTION: Notice the five commas (,,,,,) in the return because the fourth through seven indexes were "SKIPPED OVER."

Array length property

So, the easiest way to ensure that you add an element to the end of an array is to use the array's length property. While properties and methods will be discussed in more detail later, they will be discussed briefly here.

To get an array's length, use the array name followed by a period and then the length property:

var myFruits = ["apple", "banana", "orange", "grapes"];
alert(myFruits.length); // Returns 4 because that is the number of elements in the array. 

As a result, you can use the length property to ascertain the total number of elements in an when you want to ADD an element to the end of an array using the following format:

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits[myFruits.length] = "pear";alert(myFruits); // Returns apple, banana, orange, grapes, pear 

The length property also prevents you from inadvertently added elements that will creates "undefined" element in the array:

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits[10] = "pear";
alert(myFruits) // Returns apple, banana, orange, grapes,,,,,,,, pear 

Notice the extra commas denote empty elements. If you attempt to access an element that is empty, you will get an undefined error.

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits[10] = "pear";
alert(myFruits[8]) // Returns undefined

While using the length property is good to add a SINGLE element to the end of an array, you can use another method called push() to add MULTIPLE elements to the END of an array:

var myArray = ["One", "Two", "Three"]
myArray.push("Four", "Five")
alert(myArray); // Returns One,Two,Three, Four, Five

While the push() method will add elements to an array, if traced, it will can be used to return the total number of elements like the length property. However, it is best practice to use the length method:

myArray = ["One", "Two", "Three"]
alert(myArray.push("Four")) 
// Returns 4alert(myArray); // Returns One,Two,Three, Four

Removing elements from an array:

The pop() method REMOVE ONE ELEMENT from the END of an array. Unlike, the push() method which ADDS one or more elements to the END of an array.

var myArray = ["One", "Two", "Three"]
myArray.pop();
alert(myArray); // Returns One,Two

Like the push() method, the pop() method  can also return the name of the element that was removed from an array:

var myArray = ["One", "Two", "Three"];
alert(myArray.pop()); // Returns Three

NOTES ON ADDING AND REMOVING ELEMENTS:

• Since the push() and pop() methods both will add or remove the last element in an array, it is best to have these method return some useful information when executed (the number of elements in an array or the name of the element that was deleted from an array.)
• While push() and pop() will add or remove elements at the END of an array, respectively. Unshift() and Shift will add or remove elements to or from the BEGINNING of an array, respectively. However, these methods are not used as often as push() or pop() because the order is usually not important where the element is added. When removing an element from an array, you typically assigned it to a variable (e.g., var removeStudent = student.pop() ).  To remove all elements in an array, you can create a loop with a pop() method in it. Like the push () method, the unshift () method can be used to add multiple items to beginning or an array.
• It is important to note that the push and unshift methods after executing their command returns the number of items that are in an array.
  
• Notice that the push() method require a parameter and the pop() method does not. Other array methods are use to sort, add/remove from the front of the array, add/remove in between the array elements, etc.

Array sort() method

Since the order of the elements in an array is the order in which they were written, there are times when you may need to sort the elements in the array from A-Z or Z-A. To sort elements in an array, use the array name followed by a period and then the sort method( ):

var myFruits = ["apple", "banana", "orange", "grapes"];
alert(myFruits.sort()); // Returns  apples, banana, grapes, oranges

Accessing elements in an array:

Once an array is created, you will have need of accessing elements in the array. To do this, you have to use a number to "index" the array to get an element. The important thing to remember is that arrays are zero-based indexed which mean that you get to the first element by starting with the number zero instead of the number one when using the array access operator:

var myFruits = ["apple", "banana", "orange", "grapes"];
myFruits [0]; // apple
myFruits [1]; // banana
myFruits [2]; // orange
myFruits [3]; // grapes

As mentioned earlier, arrays are often used with loops. So, it is important to know how many elements there are in an array to determine how many times to loop around it.

While using the technique above is OK, it is common practice to loop around an array to get to all of its elements at one time. While looping will be discussed later, below is a typically syntax to loop around an array using a "for" loop and the array length property discussed earlier:

var myFruits = ["apple", "banana", "orange", "grapes"];
for (var i=0; i< myFruits.length; i++)
  {
    alert (myFruits[i]); // Returns apple, banana, orange, grapes
  }

Array Properties and Methods

The real power of JavaScript arrays are the built-in array properties and methods. See w3Schools for detail examples of array properties and methods.

Key Characteristics of Arrays

It is important to remember the following characteristics about an array:

• An array is a special variable that can hold multiple data types. Notice in the examples above, it uses the var keyword to declare it as a variable.
• While you can place multiple data types in an array, an array is typically used to hold an "array" or list of related elements.
• An array is most of the time identified by the square brackets. If you create an array from a Class (discussed later), you will use parenthesis instead of square brackets (e.g., var myArray = new Array(5, true, "Bob");).
• The most important property of an array is its length that is typically used with a loop.
• An array is zero-based index which means that to get to the first element in the array you start with the number zero instead of the number one.
• Arrays and loops are "kissing cousins" because you see them together most of the time.
• Because an array is just a special variable, it has the same name conventions as a variable.
• An array is treated as an object. If you wrap the array in the typeof() method, it will return an object.
• You typically CREATE and POPULATE an array at the SAME time.
• If you place an array inside of an array, you create what is known as multi-dimensional arrays that is used to emulate a table-like or database-like structure where the OUTER array represents the COLUMNS and the INNER array represents the ROWS.
  GIVE EXAMPLE HERE OF A MULTIDEMINSIONAL ARRAY

var myArray = ["Bob", "Jones"];
myArray[2] = "Engineering";
alert(myArray[2]);  // Returns Engineering

var myArray["firstName"] = "Bob"; 

var myObject = new Object(); 
myObject.firstName = Bob; myObject.lastName = 'Jones';

var myObject = {firstName: "Bob", lastName: "Jones"};

var myObject = new Object();
myObject.firstName = "Bob"; myObject.lastName = "Jones";
for (var index in myObject)  
    {
      alert("property = " + index + ", value = " + myObject[index]); 
      // Returns property = firstName, value = Bob 
      // Returns property = lastName, value = Jones
    }

C. Properties

Property – is a container to store references to VARIABLES of an object. The key phrase is "of an object." Hence, properties only refer to objects.

While a variable is a container for a SINGLE data type; an array is a container for MULTIPLE data type. A property is a container for PROPERTIES of an object data type.

Before, we see how properties are variables of an object, we must first create an object programmatically. More details on objects can be found if you click the menu item Blueprints / Object Containers:

var myEmployee  = { firstName: "Bob", 
                                    lastName: "Jones", 
                                    position: "Engineering"
                                   };
alert(myEmployee.firstName);  // Returns "Bob"

Note that objects are variables too (see keyword "var") but it can hold multiple values. Like arrays, there are two ways to create an object. Here is another way:

var myEmployee  = new Object ();
myEmployee.firstName = "Bob";
myEmployee.lastName = "Jones";        
myEmployee.position =  "Engineering";
alert(myEmployee.firstName);  // Returns "Bob"

In the above example, firstName, lastName, and position are variables of the myEmployee object. While NOT correct coding, it may be helpful to write the code in a manner so that you can "see" these variables better. Notice how the colons were replaced with equal signs:

var myEmployee  = { firstName = "Bob",
                                   lastName  =  "Jones",									      
                                   position =  "Engineering"
                                  };
alert(myEmployee);  // Returns "object Object"
alert(myEmployee.firstName);  // Returns "Bob"

Properties are variables of an object much like methods are functions of an object (See Action Containers menu).

IMPORTANT NOTE: It is important to note that you don't talk the the object directly (e.g., myEmployee); otherwise, you get "object Object". You talk to a property of an object (e.g., myEmployee.firstName) to get a property value.