DEV Community: Christian Graves

Arrays in JavaScript

Christian Graves — Tue, 27 Nov 2018 20:05:17 +0000

Arrays are one of, if not the most important object in the JavaScript language. It can be used to represent and store large amounts of almost any data type that you will use for your apps or websites. At the basic level they can be used to store lists of things, such as names or numbers. Below is a simple example of an array of names.

let names = ["Bill", "James", "Larry", "Tim"]

The list of names above is being stored in a variable called names. This allows you to have access to the list in any part of your code depending on the scope or position where the variable is declared. You can access the names in the array by the position number of the items starting from left to right. Do note that positions do not start at 1, but 0 in arrays. You will also need to use bracket notation for the position.

let leader;
let names = ["Bill", "James", "Larry", "Tim"]
leader = names[2]; //leader is set to Larry

As you can see from the above example, we set the variable leader to be the name Larry from the array by accessing it's position of 2. Again, it would not be 3 because the positions start at 0. What really makes arrays great besides being able to store large amounts of data, are the built in array properties and methods(actions) that let you manipulate the data. I have included a couple in the example below.

let names = ["James", "Bill", "Tim", "Larry"]
names.length// returns length of array: 4
names.sort(); //items in array are sorted: ["Bill", "James", "Larry", "Tim"]
names.push("Willy");/**item is added to the end of array and the length of array is returned: 
["Bill", "James", "Larry", "Tim", "Willy"] length of 5**/
names.pop();//the last item in the array will be removed and the item will be returned: "Willy"

The above are just some of the many methods that you can use on arrays to help manipulate the data in the way that you need. A very good reference for the other arrays methods can be found at w3schools here.

JavaScript Switch Statement

Christian Graves — Thu, 15 Nov 2018 16:54:03 +0000

I'm going to stick with my theme of conditional statements this week and introduce the switch statement. The switch statement is basically the cousin of the if-else if statement. It provides the same functionality of the else if statement but instead of using an evaluated conditional for the initial if and subsequent else if's, it uses one evaluated expression instead with cases. I have provided the syntax of the switch statement below.


switch(expression){

    case 0:
        //some executed code
        break;

    case 1:
        //some executed code
        break;

    case 2: 
        //some executed code
        break;

    default:
        //some executed code
}

From the above syntax you can see that the switch statement takes in an expression and not a conditional. Also you can see that “cases” replace the else if statements from the conditional statement. The expression that is taken in is evaluated and the value that is generated should match one of the cases to execute the code for that case. I say the value "should" match one of the cases, but if it does not, that is why the default case is there. It acts as the else statement if no cases match. Also like the else in a conditional statement, the default case is optional and is not needed. Do note, you need the break statement at the end of each case so the program knows to move out of the switch statement. You can see a simple example below and I have included an interactive jsbin also.


const x = 3;
let month = "";

switch(x){
  case 1:
    month = "January";
    break;

  case 2:
    month = "February";
    break;

  case 3:
    month = "March";
    break;

  case 4:
    month = "April";
    break;

  case 5:
    month = "May";
    break;

  case 6:
    month = "June";
    break;

  default:
    month = "Not one of the first 6 months";

}

In the example you can see that the value of x is evaluated to be 3 as that is what the variable is set to. The switch statement will compare the value of 3 to each case number using strict comparison (===). Since x matches case 3 the variable month will be set to "March".

Another thing to note about cases in the switch statement is that they do not have to be numbers but any value. We could have set the variable x to a month name string and changed the case values to the first six months of the year. As long as the values for the cases are also strings the switch statement would still work. The last thing I want to say about switches is that multiple cases can be used to execute the same code. This can help save you time writing code and improve the readability of your code. I have a small example below.

const x = "April";
let quarter = "";

switch(x){
  case "January":
  case "February":
  case "March":
    quarter = "Month is in Q1";
    break;

  case "April":
  case "May":
  case "June":
    quarter = "Month is in Q2";
    break;

  default:
    quarter = "Month is not in Q1 or Q2";

}

Conditional Statements in JavaScript

Christian Graves — Thu, 08 Nov 2018 19:57:01 +0000

Continuing from my blog post last week about comparison and logical operators, I wanted to build on that and talk about conditional statements this week. Conditional statements can control the flow of execution of your code. In doing so, they act as gatekeepers to some blocks of code that you want execute when certain conditions are met. Conditional statements use the comparison and logical operators to evaluate a condition and return a true or false value based on the evaluation. I have listed the three conditional statements below.

//if statement
if(//conditional){
    /**executed code if conditional is true**/
}
//continue with code


//if with else statement 
if(//conditional){
    /**executed code if conditional is true**/
}else{
    /**executed code if conditional is false**/
}

//if with else if statement
if(//conditional){
    /**executed code if conditional is true**/
}else if(//conditional){
    /**executed code if first conditional is false and else if conditional is true*//
}

The easiest way to think of how the logic of the conditional if statement works, is to think of it as a statement you may make with your friend. Maybe they ask if you want to grab lunch at 12 PM. You tell them you will be able to make it if you are able to finish some work you are behind on by 10 AM. The conditional being evalutated is if you are able to finish your work by 10 AM. If you are able to finish your work, the condition will be true and you will be able to go to lunch with your friend. If you are not able to finish your work, the condition will be false and you will not be able to go to lunch with your friend and have to continue working. I have included an example below of an if conditional statement showing the logic.

let x = 10
let message = ""

if(x<15){
    message = "x is smaller"
}

With the above example you can see that the condition is true and so the message variable was set to the string of "x is smaller". If the condition was false the browser would have skipped the rest of the conditional statement and would have carried on executing the next block of code. The condition being false now brings us to the second conditional statement of if else.

In the friend example in the second paragraph, you could give them a second option instead of telling them you won't be able to make it to lunch if you do not finish your work. You can say you will meet them for lunch if you finish your work, or else you will meet them for dinner. The if else statment works the same way, and I will expand on the JS example above showing that.

let x = 10
let message = ""

if(x<5){
    message = "x is smaller"
}else{
    message = "x is larger"
}

In this example the first condition fails and so message is set to the second string. After that the browser will continue to execute the next block of code. Now maybe you want to check another condition and do something else if the first condition fails or is false.

From the friend example, maybe you want to check with them to see if they are free for dinner first before telling them you'll go to dinner if you cannot make it to lunch. You say you will meet them for lunch if you finish your work or else, if they are free you will meet them for dinner. An example of that using our JS example is below using the else if statement.

let x = 10
let message = ""

if(x<9){
    message = "x is not 10"
}else if(x<11){
    message = "x is 10"
}

A cool feature of the else if statement is that you can chain multiple else if statements together to check multiple conditional statements for different executions. The only issue with that, is it can tend to hurt the readability of your code. If you want to chain multiple else if statements together I would suggest to look into the switch statement. It has the same functionality but keeps your code cleaner and easy to read.

Comparison and Logical Operators in Javascript

Christian Graves — Thu, 01 Nov 2018 21:49:26 +0000

Comparison and Logical Operators are two of the main features of most if not all programming languages. They coupled with conditional statements form one of the basic building blocks of phone apps, programs, or functional interactions of websites. They are based off of the same logical and comparison operators that you find in math with only a little difference. I have listed the logical and comparison operators below and will go through some of examples of how they are used in programming with JavaScript.


//Comparison Operators
//Equal to and strict equal to
==
===
//Not equal to and strict not equal to
!=
!==
//Greater than and greater than or equal to
>
>=
//Less than and less than or equal to
<
<=

//Logical Operators
//And
&&
//Or
||
//Not
!

As you can see above, there are two different operators for equal to and not equal to. The equal to and not equal to operators allow you to compare the values of two variables regardless of the type and will return true or false depending on the matching values. The strict equal to operator requires that the variables and variable values match in order to return true. The strict not equal to returns true if the values or types do not match. You can see both in the below examples along with examples for the greater than and less than operators and a sample conditional statement.

let x = 3
let y = 4

x == 3 //true
x === “3” //false

x!=5 //true
x!== “5” //true
X!== 3 //false 

y > 5 //false
y >= 3 //true


y < 5 //true
y <= 2 //false

if (x === 3){
    /**comparison in if conditional
    is true, so perform some code here**/
}

Logical operators in basic form are used to evaluate a compound conditional statement. They will return a Boolean value of true or false depending on the evaluation. JavaScript allows for the returning of different types and short-circuit evaluations, but that is for another post. Below are examples of the two logical operators.


let x = 15
let y = 23

x > 12 && y < 25 // True
x < 2 && y >12 // False

x > 12 || y > 25 // True
x < 2 || y < 12 // False 

if (x < 45 && 32 > y){
    /**compound comparison in if conditional
    is true, so perform some code here**/ 
}