Learning Goals

In this lesson we’ll cover:

• JavaScript data types and variables
• Operators, concatenation and interpolation
• JavaScript functions with or without arguments and parameters
• Conditionals and when to use them
• for loops and iteration with JavaScript

History of JavaScript

Way back in the early days of the web, Brendan Eich created JavaScript. Legend has it that he wrote it in 10 days in 1995 while he was working as an engineer at Netscape. The language was first released with Netscape 2 in 1996. The name ‘JavaScript’ was an oh-so-clever marketing push to try to pick up on the momentum of Sun Microsystems’ popular language Java, but instead it led to years of confusion about the names of these two mostly unrelated programming languages.

What is JavaScript and Why?

JavaScript was created to make the web more dynamic. It is an object-oriented scripting language that can also be written functionally and is made to run inside a host environment like a web browser and provide programmatic control over the objects of that environment. For example, when you click a button and you want something about the webpage to change, you will use JavaScript.

JavaScript can be client-side and server-side, meaning that it can be used to control user-facing interfaces as well as handle the server-side extensions that connect with a database.

It’s a highly versatile and flexible language, and has become the most commonly used language of the web.

Now that we know a little bit about JavaScript, let’s talk about how to actually use it!

Note: ES6 is the most current version of the ECMA Script Spec. We will be using the ES6 syntax.

Variables & Data Types

Variables

In any programming language, variables are what we use to store data values so that we can access and reuse those values throughout our code. The name “variables” drives home the point that the stored data can change (or vary) along the way. Variables can start off holding one value and later be reassigned to hold a different value.

In Ruby, you declare a variable simply by assigning a value to it (person_age = 21, country_name = "Spain"). In JavaScript, you declare the variable using a keyword of either var, let, or const. You do not specify the data type.

Go to the js_fundamentals file of your Mod 2 Sandbox repo. Check out the JS syntax in the code there. Run it, break it, get weird with it.

var firstName = 'Ben';
var age = 26;
const isNice = true;

const policeSketchDescription = {
  hair: 'blond',
  eyes: 'brown',
  isTall: false,
  visibleTattoos: 1
}

let favoriteFoods = ['pizza', 'blueberries', 'ice cream', 'sushi']

let partnerName = null;
let jobTitle;

Data Types

We can see each of the 7 data types we’ll be working with in JavaScript in the syntax examples above. Let’s identify each as we go through them.

The basic (primitive) data types we’ll work with are BUNNS:

• Boolean
  • a true or false value (not in quotation marks)
• Undefined
  • the absence of a declared/defined value
  • maybe we declared a variable name but didn’t assign a value yet
• Null
  • an intentionally declared value of “nothing”
  • maybe a placeholder value until data comes through to replace it
• Number
  • any number - a negative, decimal or whole number (not in quotation marks)
• String
  • text data - any characters wrapped in quotation marks (including letters, numbers, symbols, spaces)
  • in JS you can use ‘single quotes’ or “double quotes”

The complex data types we’ll work with are:

• Objects
  • like hashes in Ruby - groupings of related data in key-value pairs
• Arrays
  • like, well, arrays in Ruby

We access data in objects and arrays similarly to how we would do so in Ruby - using dot notation or bracket notation.

Your Turn (in your js fundamentals file)

• Use console.log and dot notation to print the value “brown” from the policeSketchDescription object
• Use console.log and dot notation to print # of visible tattoos from the policeSketchDescription object
• Use console.log and bracket notation to print first element in the favoriteFoods array - ‘pizza’
• Use console.log and bracket notation to print last element in the favoriteFoods array - ‘sushi’

Your Turn (in your js fundamentals file)

• Declare 2 variables, one named “quantity” and one named “mythicalCreature”.
• Declare a variable named “creatureCount” but don’t assign it a value quite yet. If you console log it, it should give you “undefined”

Using Variables Together

Let’s make the value to our “creatureCount” variable be our “quantity” + our “mythicalCreature”.

let quantity = 3;
let mythicalCreature = " unicorns";
let creatureCount = quantity + mythicalCreature;

In your file, console log your “creatureCount” variable. What do you get?

Concatenating Variable Values

In the example above, we used the + string operator to combine the values of two different variables. This is called concatenation. Concatenation is using the + string operator to essentially smash values together to form a bigger longer string.

We can concatenate html tags, text, numbers, and variable values. Let’s revisit our example above to concatenate a more readable phrase as the value of our creatureCount variable:

let quantity = 3;
let mythicalCreature = " unicorns";
let creatureCount = "<p>I have " + quantity + " very fancy" + mythicalCreature + "</p>"

This is very useful when we want to append data to our webpage, because it means we can write out an entire HTML tag and concatenate the data from our variable.

Interpolating Variable Values

Another syntax option for accomplishing the same goal is called interpolation. Interpolation lets us smash values together to form a bigger longer string using backticks. We can plug in variable values using ${}.

let quantity = 3;
let mythicalCreature = "unicorns"; //notice no extra space in the "unicorns" string
let creatureCount = `<p>I have ${quantity} very fancy ${mythicalCreature}</p>`

var name = "Hillary";
var age = 30;
var location = "Denver";

var concatenatedString = "My friend " + name + "is " + age + "years old and lives in " + location + "."

var name = "Hillary";
var age = 30;
var location = "Denver";

var interpolatedString = `My friend ${name} is ${age} years old and lives in ${location}.`

var num = 30;
var word = "Rock";
var showName = num + word;

//showName will be a string of "30Rock" because JavaScript coerced the number 30 into a string to accomplish the goal of combining the two differing data types.

Operators

Expressions rely on operators to calculate their single value. There are 5 basic types of operators to get you started:

1. Assignment operators assign a value to a variable. (hint: you’ve got these down already) var color = 'magenta';
2. Arithmetic operators perform basic math. var addTwo = 2 + 2;
3. String operators combine strings. var greeting = 'Hello! ' + 'Nice to meet you.';
4. Comparison operators compare two values and return a true or false. var buy = 3 > 5; // Value of buy is false
5. Logical operators combine expressions and return a Boolean value of true or false. var buy = (5 > 3) && (2 < 4);

Statements

A script is a series of instructions that a computer can follow one by one. Each individual instruction is known as a statement. Every line of code we’ve seen and written today is a statement.

Each statement in JavaScript is followed by a semicolon….sometimes. In JS, the semicolon is often optional and has no impact on the functionality of your code. Some devs love this “freedom”, some hate this “inconsistency”.

Example statements:

console.log('BOOM');
alert('POW');

Functions

Just like methods in Ruby, in JS functions are reusable blocks of code that group statements together to perform a specific task. To create a function, you must give it a name and then write the statements required for the function to achieve its task inside the function’s curly braces. Let’s work through the pieces and parts of a function.

Anatomy of a Function:

// ES 5 syntax for declaring a function
function logStatement() {
  let myFirstStatement = "Assigning a string to a variable called 'myFirstStatement'";
  alert('This is my second statement!');
  console.log(myFirstStatement);
}

// ES6 syntax for declaring a function (arrow function)
// const logStatement = () => {
//   let myFirstStatement = "Assigning a string to a variable called 'myFirstStatement'";
//   alert('This is my second statement!');
//   console.log(myFirstStatement);
// }

• You declare a function using the keyword function.
• You name the function based on what it does using a present-tense action verb. Then include a set of parentheses after the name, which can be empty or accept parameters.
• After the parenthesis you open a set of curly braces, which act as bookends to hold the set of statements you want the function to run when it is called.
• Calling, or “invoking” the function is different than how you’ve called methods in Ruby. In JavaScript you must put parenthesis after the function name to invoke it. Any arguments you’re passing to the function will go inside those parenthesis.

Call a Function:

// Calling a function without arguments
logStatement();

// Calling a function with arguments.  You can only pass arguments if you've created parameters to accept those values in the function declaration.
logStatement("arg1", "arg2");

When this code is read, logStatement() is “called”, and all three statements within the function’s body (those curly braces) get run.

In JS, seeing () after the function name is how you know it is a function being invoked.

Your Turn

Let’s go ahead and declare logStatement() in the console together and then call it. What do you notice about the code as it is being run? What do you notice about the code being run if you swap the 2nd and 3rd statements?

Create your own functions in the console:

• Write a function called “greetPerson” that declares a firstName variable and a lastName variable, then prints a greeting message that incorporates the full name, and then prints a random number just for fun.
• Write a function that assigns three different math equations to three different variables:
  • an “addition” variable with a simple addition equation
  • a “subtraction” variable with a simple subtraction equation
  • a “multiplication” variable with a simple multiplication equation
  • then, add up the values of all three variables and log it to the console

Pass Information to a Function:

Functions often need data to do their job. We pass data into function with parameters and arguments. You declare your parameters inside the () parenthesis of the function declaration. Parameters act like variables INSIDE the function. They get their values when you pass arguments in the function invocation and you can use the parameters within the function just like you would use variables.

Parameters vs. Arguments

There’s a subtle difference. Parameters are the placeholders declared in the function declaration (similar to declaring a variable). Arguments are the assigned values you provide for each parameter/placeholder each time you invoke the function.

// parameters named on declaration of function
function myDreamCar(make, model) {
  return "Buy me " + make + " " + model;
}

// arguments "Audi" and "R8" passed into the invocation of the function
myDreamCar("Audi", "R8");

Getting A Value from Functions

Sometimes we have functions that need to do some sort of calculation or data manipulation, then give us back the result so that we can use that value elsewhere in our code. Often, we will take that returned value and use it to update what is being displayed to our user in an application.

For example:

• A user enters their birthday.
• We have a function that takes in that birthdate and uses it to calculate their age.
• Our function will then return their age value.
• We use that returned age value in our code that displays user info on the webpage.

You will often be invoking functions within other functions and using their return values elsewhere as you build your code. Some functions return something, other functions just do something.

To get a value back from a function, you have to use the return keyword.
Let’s practice in our file:

function addTwoNumbers(num1, num2) {
  console.log('Boom');
  return num1 + num2;
}

var result = addTwoNumbers(4, 7)

We are capturing the value being returned from the function invocation in our “result” variable. If we console.log the “result” variable, we should see 11 printed to the console after “Boom” is printed.

return;
return true;
return false;
return x;
return x + y / 3;

Conditionals

Sometimes we want to perform an action based on some kind of condition. In English, we can say “If this thing is true, then do that.” Let’s look at the basic structure of a conditional in JavaScript:

if (expression) {
  statement;
} else {
  statement;
}

If the expression evaluates to true, then the statement(s) for that condition will run. Otherwise, if the expression is false, then the statement(s) will not run at all. The expression will usually contain an operator to make a comparison (that evaluates to true or false).

Some examples of expressions we could use for a conditional are:

• myNum < 5
• userCity === "Denver"
• isTired === true

Now for some real conditional examples.

function identifyCookie(cookie) {
  if (cookie === "chocolate chip") {
    console.log("This cookie is a chocolate chip cookie!");
  } else if (cookie === "oatmeal raisin") {
    console.log("This should not even be called a cookie :(");
  } else {
    console.log("I bet you wish you had a chocolate chip cookie");
  }
}

identifyCookie("chocolate chip")
identifyCookie("oatmeal raisin")
identifyCookie("sugar")

Your Turn

• In your file, copy/paste the function skeleton and invocations below.
• Build the “guts” of the function so that it looks at the hoursOfSleep parameter and responds based on the value that is passed as an argument on the invocation.
  • Your function should log “I am groggy.” for less than 6 hours of sleep.
  • Your function should log “I feel fantastic!” for 6 or more hours of sleep.

function evaluateSleep(hoursOfSleep) {  
  //Add your code here
}

evaluateSleep(8)
evaluateSleep(4)

for loops

All programming languages have ways to loop (or iterate) through data. JS is no exception.

Copy/paste this JavaScript for loop into your file and run it to see how the value of “i” changes on each “loop”

for (let i = 0; i < 10; i++) {
  console.log(i);
}

If we break this down, we see that our loop is constructed from the following parts:

• the keyword for
• a set of rules, or conditions (var i = 0; i < 10; i++ )
  • let i = 0 is the initialization. Creating a variable “i” and starting it at a value of 0.
  • i < 10 is the condition. Stating “keep looping as long as the current value of i is less than 10”.
  • i++ is the increment. Adding 1 to the value of i after each loop.
• opening and closing curly braces that contain the code statements we want executed on each loop. In this case: console.log(i);

We can use for loops to execute some code a certain number of times, like we’re doing above. More commonly, we can use for loops with arrays to access each element in the array one at a time using i and bracket notation, and then do something to that element or with that element.

Copy/paste the following examples into your file and run the code.

//Example 1
let fruits = ['apples', 'oranges', 'bananas'];

function bragYourFruits() {
  for (let i = 0; i < fruits.length; i++) {
    console.log("I have some " + fruits[i]);
  }
}

bragYourFruits()

//Example 2
let kids = ['chris', 'heather', 'erica', 'rachel', 'becca'];

function shoutForChildren() {
  for (let i = 0; i < kids.length; i++) {
    console.log(kids[i].toUpperCase());
  }
}

shoutForChildren()

// Practice 1
let points = [7, 3, 0, 14];

function calculateTotalPoints() {
  // add code here to loop over the points array, adding up all the numbers as you go until you get the total sum
  // return the total sum as the return value of the function
  // Hint!  You'll probably need a variable to keep track of the running sum total as you add it all up


}

console.log(calculateTotalPoints()) //this invocation is inside a console log so we can see the return value printed to the console

let points = [7, 3, 0, 14];

function calculateTotalPoints() {
  let counter = 0
  for (let i = 0; i < points.length; i++) {
    counter += points[i]
  }
  return counter
}

console.log(calculateTotalPoints())

// Our function should return 24

function printTotalPoints() {
  return `Your team scored ${calculateTotalPoints()} points!`;
}

console.log(printTotalPoints());
// expected output: "Your team scored 24 points!"

var counter = 0;
counter += 1  //adds one to the previous value of counter and saves it as counter's new value

Debugging in Javascript

In Ruby, debugging often involves using tools like pry to insert breakpoints and inspect the state of the program. Ruby’s interactive console allows you to pause execution and explore variables, methods, and the call stack. In JavaScript, especially on the client-side, debugging is done within the browser’s developer tools. You can use the console.log() method to print values to the console, or the debugger statement to pause execution and inspect the state of the program. Modern browsers provide a rich set of tools for stepping through code, setting breakpoints, and examining the call stack and variables.

Because client-side JS is run entirely in the browser, the technique for troubleshooting broken code is more complicated than debugging in Visual Studio. Luckily, modern browsers provide a collection of options for digging into your code.

1. Developer Tools

One of the first things you should familiarize yourself with when working with JavaScript (or HTML… or CSS…) are the dev tools. You can find a cool tutorial to dive deeper with Code School’s Discover-DevTools Tutorial. (Chapters 3 & 4 are particularly helpful)

To open developer tools in Chrome:

• on Mac: command + option + i
• (or) Right click on the browser window and select inspect
• (or) Select View in the navbar, then Developer, then Developer Tools.

When working with JavaScript, it is useful to keep your console open at all times to watch for errors and anything you’ve told your code to print out. Bringing us to…

2. console.log()

console.log() prints whatever is provided as an argument to the console.

Given the following function called printStuff(), adding console.log() will print the value of myVariable to the console.

const printStuff = function(){
  var myVariable = 5 + 5
  console.log(myVariable);
}

printStuff()
=> 10

If you’re confused about what a variable or function is returning, throw console.log() into your code or directly into the dev console in your browser to confirm/deny suspicions.

3. Debugging In the Console

You can stick debugger; within a function to pause the browser from running the script when it hits a particular part of your code.

// index.js
let var1 = 5
let var2 = "Ilana"
const myMath = (var1, var2) => {
  var1 * var2
  debugger;
}