Variables, Control Flow & Looping

INTRO TO FUNCTIONALITY

Functionality in JavaScript rests on a few very important concepts, and variables, control flow, and looping are among their strongest foundations. Variables allow us to store and reference meaningful information in memory, control flow enables us to run functionality based on certain conditions, and looping allows us to repeat behavior until some condition has been met.

By starting with this set of fundamental principles, you will be able to problem solve and communicate through almost any scenario in JavaScript.

VARIABLES

What happens when JavaScript code runs? First, the engine goes through the code one line at a time and stores the information (data) we have written using special declaration keywords called — you guessed it — variables. JavaScript saving that data allows us to reference, change, or run functionality on it later.

We can store data in many different formats (called data types) in different ways. For example...

let num = 6;
let name = ‘jane’;
const storeOfInfo = {
    name: ‘sebastien’, 
    home: [‘france’, ‘nyc’],
};
const randomList = [1,‘2’, [3], {4: undefined}];
let introToJavaScriptIsAwesome = true;

In this code, we store a number, a string, an object, an array, and a boolean to appropriately named variables.

CONTROL FLOW

Saving data to variables is the beginning of understanding functionality in JavaScript, but how can we move towards achieving that functionality? We can execute different functionality based on specific conditions. We call this control flow, and in JavaScript it can be facilitated using conditional statements. What does this look like? Well, we have the ability to chain control flow statements using the if, else if, and else keywords.

We can use multiple if statements on the same data. Each new instance of a single if keyword will be considered the start of a new control flow. We do not need the else condition if we do not have a default case.

const myGrade = 75;
if (myGrade <= 70) {
  console.log(myGrade + ‘is failing.’);
} else if(myGrade < 80) {
  console.log(myGrade + ‘is passing.’);
} else {
  console.log(myGrade + ‘is excellent.’);
}
if (myGrade === 100) {
  console.log(‘a perfect grade!’);
}
// what if we re-assign myGrade to 100?

In this example, we are checking if my grade lies within a certain range, and taking an action accordingly. If a condition is not met, the code for that condition does not run.

LOOPING

We store data so we can retrieve it later and run functionality on it. We have a built-in tool in JavaScript syntax known as a for loop, which lets us access each index of an array (one by one) and do something with that element. We refer back to our saved data using the label, or variable name, we gave it, and we can access an element from our array using square brackets (bracket notation).

Let’s consider an example where we want to sum up some numbers and then find the average (assuming possible score is 100).

const myGrades = [50, 75, 90];
let sum = 0;
for (let i = 0; i < myGrades.length; i++) {
  // what is sum?
  // what is i?
  sum = sum + myGrades[i];
  // now what is sum?
}
// what happens first and why?
let average = sum / myGrades.length;

NESTED LOOPING

What happens when we put a loop inside of another loop? Why would we might want to do this? It’s typically best practice to avoid nesting loops if possible; however, sometimes it’s necessary.

For example, if we want to see all possible sums for each number in an array, we would use a for loop to access each number in the array, and then we’d use an inner for loop to add each number in the array to the number we are iterating on in the outer loop.

const myNums = [50, 75, 90];
for (let i = 0; i < myNums.length; i++) {
  const num1 = myNums[i];
  // what is num1, i and myNums[i]?
  for (let j = 0; j < myNums.length; j++) {
    const num2 = myNums[j];
    // what is num2, j and myNums[j]?
    console.log(‘Sum: ’, num1 + num2);    
  }
};

When nesting loops, avoid using identical variable names in either loop. It is common to use i as the variable name for the outer for loop, and j for the inner.

COMBINING FUNCTIONALITY

We can use different combinations of functionality to accomplish our goals. What if we want to see if any two numbers in our array sum to the number 7?

We can use a combination of tools learned today (loops with control flow) to accomplish this task!

const myNums = [1, 2, 3, 4, 5];
for (let i = 0; i < myNums.length; i++) {
  const num1 = myNums[i];
  for (let j = 0; j < myNums.length; j++) {
    const num2 = myNums[j];
 
    if (num1 + num2 === 7) {
      console.log(‘Lucky Seven!’);
    }   
  }
}

Here, we are assigning an array to a variable called myNums, and using that variable in two for loops. In the inner for loop, we create a conditional to check if the numbers add up to 7 and, if they do, taking an extra action.

CONCLUSION

Variables, looping, and control flow comprise the fundamental principles of JavaScript. These foundational pieces of JavaScript let us store data and apply functionality on that data. This is the backbone of web development with JavaScript.

Let’s quickly go over what we’ve learned. Variables and execution refer to when we write code and run it we mainly store ‘data’ and run ‘functionality’ on it. There are different types of data we can store and different type of functionality. These are referred to as data types, and we can run code on that data. Control flow enables us to run some functionality based on different conditions, and looping enables us to run the same functionality over and over until a terminating status is attained.

As you’re hopefully beginning to see, we can use different combinations of functionality on available data to create powerful applications for solving engineering problems.