Lesson 9: JavaScript Data Structures, Variables and Functions

JavaScript is what will turn your webpage into an experience. Up till now we have covered topics that don’t enable the user to interact with your web page. Now we will turn the corner and learn how to involve your users.

To begin with, we need to discuss what the basics of JavaScript are. If you have a background in programming, especially strictly typed languages, you might find some concepts hard to grasp. So lets jump into data-structures.

JS Data Structures

JavaScript is a loosely typed language, which means that variables are not declared with a type. The type is interpreted as the script runs. The following data types are defined in JavaScript:

Primitives (variables that are not objects and contain no methods)

• Boolean (true or false, also 1 or 0 respectively)
• Null (a variable that exists but does not contain a value)
• Undefined (a variable that does not exist)
• Number
• String
• Symbol

Non-Primitive

• Object (in JavaScript most things are derived from objects including functions and arrays, objects are key value pairs of data)

Variable Declarations

The Most Simple

The most simple variable declaration looks something like this;

var pizza = 'pepperoni';

Here we are setting the variable name to ‘pizza’ and giving it a name of ‘pepperoni’.

In JavaScript a semi-colon marks the end of the command.

After the variable is declared it can be referenced and changed using its name:

var pizza = 'pepperoni';
pizza = 'cheese';

Arrays

If you wanted to store all the types of pizzas in a single variable you would use an array:

var pizza = ['pepperoni', 'cheese', 'meat lovers', 'combination', 'hawaiian']

To reference an item in an array you can do something like this:

var myFavoritePizza = pizza[2] // meat lovers

Remember that in JavaScript like most coding languages indexes always begin with 0. Which means that pizza[2] is equal to ‘meat lovers’ and not ‘cheese’.

There will be a whole lesson on arrays and array methods in a future lesson.

Objects

This is the type of data and variable that you will work with most as a JavaScript developer. Objects deal with key value pairs and is the data type for data calls.

There are 2 terms you should know or have heard about: JSON — JavaScript Object Notation and AJAX — Asynchronous JavaScript And XML. AJAX is a type of HTTP request that returns JSON or XML. Most websites rely on JSON for their data.

Objects are declared just like simple variables:

var pizzas = {
    pepperoni: ['cheese', 'pepperoni'],
    cheese: ['cheese'],
    meatLovers: ['cheese', 'pepperoni', 'sausage', 'ham', 'bacon'],
    hawaiian: ['cheese', 'ham', 'pineapple']
};

In this case we name our object ‘pizzas’, it contains the types of pizzas as keys, and an array of their toppings as values to those keys. There are 3 ways to access a key value:

Dot Notation:

pizzas.meatLovers = ['cheese', 'pepperoni', 'sausage', 'hamburger', 'ham', 'bacon'];

Array Notation:

pizzas['meatLovers'] = ['cheese', 'pepperoni', 'sausage', 'hamburger', 'ham', 'bacon'];

Functions

A function is a set of commands that are performed based on an action. For instance if a user clicks a button we can listen for that action and run a set of commands for that user action. There are 2 methodologies to learn here, Object Oriented Programming (OOP), and Functional Programming. OOP suggests that code should be grouped into sets of code for a single action. Function Programming suggests that a function should only have 1 purpose and do 1 thing. Most code you will see falls somewhere between these methodologies. I will show examples of both.

The Basic Function

var name;
var setName = function(newName) {
    name = newName;
}

In the above example we have a variable that is set but not given a value. We then set another variable ‘setName’ to a function. The function accepts a parameter named ‘newName’. In the function body we set the original ‘name’ variable to the value of the ‘newName’ parameter. To call the function we would do this:

setName('Joe');

The above example is also an example of the functional approach in that the function does only 1 thing. The Object Oriented approach would look something like this:

var name = {
    firstName: null,
    lastName: null
};
var setName = function(firstName, lastName) {
    name.firstName = newFirstName;
    name.lastName = newLastName;
};

It is object oriented because we are changing the whole name and not just one value.

Anonymous Functions

Anonymous functions, or functions that do not have a variable name, are used mainly in a callback situation. JavaScript is inherently asynchronous, which means that it does not wait for a command to finish before moving on to the next command. Callback functions are a way to make sure things happen in order. The problem with callback functions is that they can get out of control and are hard to maintain. Here is an example:

var pizza;
var makePizza = function(toppings, callback) {
    let pizza = ['crust', 'sauce'];
    pizza = pizza.concat(toppings);
    callback(pizza);
}
makePizza(['pepperoni', 'sausage', 'ham'], function(finishedPizza) {
    pizza = finishedPizza;
})

Here we have a function that takes 2 arguments: toppings and callback. Toppings is expected to be an array of toppings and callback is the function that should be called after the pizza is complete. When we call the makePizza function we give it an array and an anonymous function that sets our pizza variable to the completed pizza.

Notice the usage of let to define a variable. Let allows us to use a variable called ‘pizza’ without updating the original ‘pizza’ variable. The let definition is only scoped to the ‘makePizza’ function.

Arrow Functions

This is a relatively new concept. It is a short hand way to define functions. It uses arrow notation, because the syntax ‘=>’ resembles an arrow. Here is the concept:

// Non Arrow
var makePizza = function(toppings) {
    let pizza = ['crust', 'sauce'];
    pizza = pizza.concat(toppings);
    console.log(pizza);
}
makePizza(['cheese']);
// Arrow
var makeArrowPizza = (toppings) => {
    let pizza = ['crust', 'sauce'];
    pizza = pizza.concat(toppings);
    console.log(pizza);
}
makeArrowPizza(['cheese']);

In the above example, a command of console.log is used. This is an excellent tool to use for debugging. Anything passed into this function will be printed in the browser developer console (or nodeJS terminal console)

Notice that for arrow functions the term ‘function’ is removed and ‘=>’ is inserted between the parenthesis and curly brackets. If there is only one command/operation to be performed in the function the curly brackets can be dropped also. Not only that, but in the above example the parenthesis can be dropped because only 1 parameter is declared. Here is what the most concise form of an arrow function might look like:

var makePizza = toppings => ['crust', 'sauce'].concat(toppings);

If makePizza was called like so makePizza(['cheese']); it would return ['crust','sauce', 'cheese']

This was a lot to go over in one lesson, but these are basic principles of developing JavaScript code. If you feel overwhelmed the best way to learn is with practice. Go to CodePen and begin to practice there, it is a great sandbox that will help you to learn some of the principles discussed here. Next we will go over event listeners, which are used to hook your scripts up to a user interface.