JavaScript 101 — again

Learning JavaScript for the fourth time

I suck at JavaScript. It’s my Achilles heel.

When a friend asked me to co-lead and co-create an Intro to JavaScript Workshop back in 2012, I said yes even though I was terrified. But in her good-natured way, she calmed my nerves and said “Don’t worry, it’s just an intro course.” You know what? It turned out just fine.

One thing about teaching is being prepared for the inevitable “why?” When you get used to doing something, it just becomes muscle memory (brain memory?). When someone asks “Why do I have to put a semi-colon here but not here?” you can’t just say “because.”

But in true use-it-or-lose-it fashion, I’m constantly learning and forgetting, re-learning and forgetting, since I end up writing JavaScript very sporadically.

In an effort to drill terminology, definitions, syntax, basic principles and rules into my head, I made some notes for myself and I’ve decided to share it here.

Hopefully, the fourth time will be the charm for me! Preamble, done.

JavaScript Overview

Programming: In general, turns data into a sequence of 0s and 1s to communicate with the computer. In JavaScript, data is separated into values.

Values: Every value has a type, which determines the role it plays. There are seven basic types listed below.

Types:

• Numbers — Integers & decimals (e.g. 10, 10.001)
• Strings — characters including spaces. Must be contained within quotes (e.g. “How are you today?”)
• Booleans — true or false (keyword)
• Undefined — means “I don’t have a value”
• Null — means “I have a value of nothing” — note that this is similar to (but logically distinct from) Undefined
• Objects — see below
• Functions — see below

Comments: Used to leave notes within the code but is not included as part of the instructions for the computer to execute.

// single line comment
/* 
  Comments that are
  longer than one line. 
*/

Expression: Instructions given to the computer, a fragment of code that always produces a value. Can be any JavaScript type. A value can also be an expression.

There are two types of expressions: those that simply have a value and those that assign a value to a variable.

REPL Chrome console example:

> 1 + 1  // expression
> 2  // value
> 2  // expression
> 2  // value
> variableName = 1 + 1  // expression
> 2  // value

Statements: Also instructions given to the computer but does not always return a value. Can consist of one or more expressions, keywords, or operators. Statements end with a semi-colon to indicate the end of the instruction.

REPL Chrome console example:

> 1 + 1;  // can be an expression or statement
> 2  // value
> variableName = "hello"; // can be an expression or statement
> "hello" // value
> var variableName = "hello"; // statement only — doesn't return a value
> undefined

Keyword: Special words reserved in JavaScript to denote specific behaviours. MDN Keyword List

Block Statements: Used to group zero or more statements. Enclosed by a pair of curly brackets { } to create the block. Single line statements must end in a semi-colon but the block itself does not. Generally used with control flow statements.

var singleLineStatement = "hello"; // needs semi-colon
if (condition === "something"){
    var singleLineStatement = "hello"; // needs semi-colon
    var anotherStatement = "hi"; // needs semi-colon
} // does not need semi-colon

Variables

Update: Oct 23, 2017 — check out this article about using var vs let vs const.

Used as a container to hold a value and/or grab data to be used later, as needed. The keyword var is used to declare the variable and bring it into existence. The actual variable name is created by you, the programmer.

To get a variable to hold onto a value, it needs to be assigned by using the = operator. Values can be assigned to a variable using one or two statements.

var greeting; // no value assigned yet
greeting = "Hello!"; //value assigned here
// variable declared and value assigned in one line
var greeting = "Hello!"; 

Functions

Used to group code/instructions & stores them into descriptive names. Contains reusable chunks of code. Define the function first but it will not run until you call the function. Functions can be used inside other functions.

JavaScript contains many built in functions to make the code do various thing. Example: alert() creates a pop-up and prompt() create a pop-up that asks for user input.

Defining a function
Create your own functions using the keyword function. Functions need to be defined to bring it into existence. The name of the function is created by you, the programmer. Choose a descriptive name.

Functions also have to be called in order for it to actually run and execute the instructions. Functions are called by using the function name, followed by parenthesis.

alert(); // calling the alert function

There are two ways to define a function, as a declaration or as an expression. Both work similarly but the browser loads & executes the code slightly different.

Function declarations
Generally, Javascript executes code from top to bottom but function declarations are loaded before any code can run. In this case, the function will execute even if it was called before the function was defined.

Syntax

function nameOfFunction(){
    // code to be executed
}

Example

myFunction(); // calling the function
// defining the function
function myFunction() { 
    alert("This is a function declaration!"); 
} 

Function Expression
Function expressions load only when the program reaches that line of code. In this case, if you call a function expression before it’s defined, it will return an error because the computer thinks the function is not defined yet.

Syntax

var nameOfFunction = function(){
    // code to be executed
};

Example

myFunction(); // calling function
// defining function
var myFunction = function() { 
    alert("This is a function expression!"); 
};
> TypeError: undefined is not a function

When using a function expression, the function must be called after it’s been defined in order to execute the code. Here’s a helpful Stack Overflow discussion.

Self-Executing / Immediately Invoked Function Expressions (IFFE)
A self-invoking function means a function which invokes immediately after it has been defined. And that’s all I’m going to say. Read this post for more info.

Syntax

(function() {
    // code to be executed
}());

// alternative syntax
(function() {
    // code to be executed
})();

Functions and semicolons

Function declarations are contained in a block denoted by the { } so it does not require a semicolon.

function myFunction() {
    // do stuff here
}

Function expressions require a semicolon because the function is assigned to the variable which makes it a statement. Statements require a semicolon.

var myFunction = function() {
    // do stuff here
};

Self invoking functions also requires a semicolon.

(function () {
    // do stuff here
})();

Another useful Stack Overflow discussion.

Functions with Parameters/Arguments

Functions can be more flexible and reusable with different options by defining parameters. Functions can be used with zero or more parameters.

function myFunction(){
    alert("No parameters!");
}
function anotherFunction(param1, param2){
    alert("The two parameters are: " + param1 + "," + param2);
}

When a function is called, data that is passed are referred to as arguments. These arguments are then passed into the parameters of the function.

// calling a function with no parameters
myFunction();
/* 
  calling the function and passing two different 
  sets of arguments into param1 and param2 
*/
anotherFunction("hello", "hi");
anotherFunction("goodbye", "bye");

Functions and return

return is a statement that specifies the value to be returned by the function. If return is used with no expression, it immediately stops at the point where return is called and doesn’t executes any of the commands that come after.

return with no expression

function myMessage(){
    alert("First message.");
    return;
    alert("Second message will not log.");
}
myMessage();

Will only alert “First message.”

return with an expression

function makePizza(toppings){
    return toppings;
}
var myPizza = makePizza("pepperoni & mushrooms");
alert(myPizza);

The makePizza function has been assigned to the variable myPizza. The argument “pepperoni & mushrooms” is passed into the toppings parameter. The alert will then show “pepperoni & mushrooms”.

Objects

Objects are similar to variables because it can be used to hold values BUT it can hold a collection of values instead of just one. An object is also a special kind of data, with properties and methods.

Creating an object
Just like variables, an object needs to be defined first before it can be used.

Defining an empty object

var myObject = new Object();
var myObject = {};

Both examples above can be used to define an object, { } is shorthand for new Object()

Adding values to the object
Variables are called properties when they’re associated with objects.
Functions are called methods when they’re associated with objects.

When assigning a value to a variable, the = operator is used. When assigning a value to a property, use a colon instead. Just like variables, the property name can be created by the programmer.

Methods are also assigned as a value to the property. Each property/value pair, also referred to as a key/value pair, must be separated by a comma unless it’s the last item.

var myObject = {};
myObject = {
    myProperty : "value",
    anotherProperty : "another value",
    myMethod : function(){ 
        // code to be executed 
    } // closes function
};

It can also be defined and assigned values in one step.

var myObject = {
    myProperty : "value",
    anotherProperty : "another value",
    myMethod : function(){
        // code to be executed 
    } // closes function
};

Adding properties & methods to an object
There are many ways (of course) to add new properties and methods to an object after it’s been created:

// defining object with 2 properties
var myDinner = {
    appetizer: "salad",
    main: "chicken"
};

Adding Properties with Dot Notation
Syntax: objectName.propertyName

myDinner.side = "rice";
myDinner.dessert = "ice cream";
myDinner.dinnerTime = function(){
    // start eating
}

Adding Properties with Square Bracket Notation
Syntax: objectName[“propertyName”]

myDinner["side"] = "rice";
myDinner["dessert"] = "ice cream";
myDinner["dinnerTime"] = function(){
    // start eating
}

Another handy Stack Overflow discussion.

Retrieve an item from an object
You can retrieve properties from an object using the same syntax as adding a property (dot notation or square bracket notation).

myDinner.side; // will return "rice"
myDinner["dessert"]; // will return "ice cream"

Executing a Method
A method is a function, except that it’s associated to an object. Calling the method uses the same syntax as calling a function but use dot notation to attach it to a specific object.

myDinner.dinnerTime(); // will run the dinnerTime function

Variables & Objects
Variables can be treated like objects. That means, methods can be associated to a variable, since it is an object too.

var firstName = "Christina";
// apply existing javascript property .length using dot notation
var numberOfLetters = firstName.length;
alert(numberOfLetters);

A popular javascript object/method combo is console.log(). Instead of using alert(), which can get annoying, console.log(argument) will log whatever argument you pass into the browser’s console. Very handy when debugging and testing.

Arrays

Arrays can also be used to hold a collection of values BUT, arrays hold its values in a numerical index rather than labels. Think of arrays as egg cartons. All the eggs are in one carton but each egg has its own slot.

Arrays are declared using the keyword var and square brackets are used to hold the values, separated by commas. It can hold any JavaScript value type.

var eggCarton = [ ];
eggCarton = ["chicken egg", "duck egg", "quail egg", "no egg"];

Array indexes ALWAYS start at ZERO. STARTS AT ZERO. ALWAYS.
The first item in the array has an index of 0. Values in an array can also be assigned to the index number.

eggCarton[0] = "chicken egg";
eggCarton[1] = "duck egg";
eggCarton[2] = "quail egg";
eggCarton[3] = "no egg";

Adding a new value
push() is a built-in method use to add an item, which goes to the end of the array.

eggCarton.push("goose egg");

Get items from an array
The index number is also used to access the value from the array. In this example, the second item of the array will be logged into the browser console.

console.log(eggCarton[1]);

Control Flow

By default, statements are executed one after the other, in the order they are written. Control flow refers to techniques used to specify alternate courses for the program flow based on logical decisions. (e.g. if, for, while statements)

if conditional statements
Used to make decisions with your code based on possible circumstances. Starts with the keyword if followed by round brackets ( ) to hold a condition to test. The curly braces { } denote a block statement to group statements to be performed if that condition is true. If the condition is false, nothing happens.

if (condition to check for) {
    // statements to be executed if condition is true
}
if (3 > 1) {
    console.log("Three is bigger than 1.");
}

if / else conditional statements
The else keyword can be added as a fallback block of code that will run if the condition isn’t met. It’s optional.

if (5 < 2){
    console.log("Condition is false. Will not run.");
} else {
    console.log("This statement will run instead.");
}

if / else if / else conditional statements
Test multiple conditions by using else if before else. There is no limit to the amount of else if statements that can be used.

var weather = "sunny";
if (weather === "snowy") {
    console.log("Ugh.");
} else if (weather === "sunny"){
    console.log("Yay! Let’s go to the beach.");
} else if (weather === "clear"){
    console.log("I can live with that.");
} else {
    console.log("I don’t know what the weather is.")
}
> Yay! Let’s go the beach.

Complex conditionals
Logical operators can be used to create complex conditional statements.

&& represents “and” || represents “or” ! represents “not”

var smallNumber = 1;
var bigNumber = 100;
if(smallNumber < 10 && bigNumber > 50){
    console.log("Will log if both conditions are true.");
} 
if(smallNumber > 10 || bigNumber > 50) { 
    console.log("Will log if at least one condition is true.");
}
if(smallNumber !== 2){
    console.log("Will log because this condition is true.");
}

Loops

Loops are used to execute repetitive code for a specified number of times or through a list of values. Loops will execute the same code continuously, using conditional statements to determine when to begin and stop.

while loops
Creates a loop that executes a statement(s) and repeats as long as the condition evaluates to true.

If the condition is never false, the while loop will keep going and crash the browser.

// declaring index variable
var i = 0;
while (i < 3) {
    i++; // increments the value of i by 1 after each loop
    console.log(“The index is “ + i);
}

In each iteration, the loop increments i by 1.
- First pass: The index is 1
- Second pass: The index is 2
- Third pass: The index is 3

For Loops
Can also be used to repeat a set of instructions. Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons.

for (start; stop; increment) {
    // statements to run as long as condition is true
}
for (var i = 0; i < 5; i++) {
    console.log(“The current count of the loop is “ + i);
}

The variable name can be anything but using i is common because it refers to an index. In this example, the index starts at 0, stops at 4 and adds 1 to the index until the condition is false.

Loops & arrays
for loops can be used to iterate through all the items within an array. You can’t assume that you will always know how many items will be in the array so the .length method is used to grab the total number of items in the array.

The index variable starts at 0 because array indexes are zero based meaning the first item has an index of 0, the second item is 1, etc.

var myMeals = ["breakfast","second breakfast","lunch","dinner"];
for(var i = 0; i < myMeals.length; i++){
    console.log("It's " + myMeals[i] + " time.");
}

Logs:
It’s breakfast time.
It’s second breakfast time.
It’s lunch time.
It’s dinner time.

And that’s all folks!

If you found this useful, check out my HTML & CSS YouTube series, Decoded by Christina!