DEV Community: Adeleye Jamiu

Understanding Arrays in Javascript

Adeleye Jamiu — Mon, 07 Dec 2020 11:44:45 +0000

Arrays are used to store multiple values in a single variable. Arrays can store any data type (including strings, numbers, and booleans). Arrays are ordered, meaning each item has a numbered position.

The article does the following:

Explain how to create an array
Explain how to access array elements
Explain how to update array elements
Explain arrays with let and const
Explain array methods like .length, .push, .pop, .slice etc.
Explain arrays and functions.
Explain nested arrays.

Creating an Array

One way we can create an array is to use an "array literal". An array literal creates an array by wrapping items in square brackets [].



const programmingLanguages = ['Javascript', 'PHP', 'Python'];

From the above

The array is represented by the square brackets [] and the content inside.
Each content item inside an array is called an element.

Another way to create an Array is by using the Array keyword.



var courses = new Array('Computer science', 'biology', 'physics');

Using typeof we can see that an array is an object



const programmingLanguages = ['Javascript', 'PHP', 'Python'];
var courses = new Array('Computer science', 'biology', 'physics');

console.log(typeof programmingLanguages); // Output: object
console.log(typeof courses); // Output: object

Accessing Elements

Each element in an array has a numbered position known as its index. We can access individual items using their index, which is similar to referencing an item in a list based on the item’s position.

Arrays are ordered, meaning each item has a numbered position known as its index. Arrays in JavaScript are zero-indexed, meaning the positions start counting from 0 rather than 1. Therefore, the first item in an array will be at position 0.



const programmingLanguages = ['Javascript', 'PHP', 'Python'];
console.log(programmingLanguages[1]); // outputs: PHP

from the code above we use the bracket notation, [] with the index after the name of the array to access the element.
programmingLanguages[1] will access the element at index 1 in the array programmingLanguages which points to PHP. programmingLanguages[1] can be thought of as accessing the space in memory that holds the string 'PHP'.

We can also access individual characters in a string using bracket notation and the index. For instance, We can write:



const accessMe = 'Access a Letter';
console.log(accessMe[9]);
// Output: L

The console will display L since it is the character that is at index 9.

Update Elements

The value of an array element can be updated Once we have access to the element in an array.



let programmingLanguages = ['Javascript', 'PHP', 'Python'];

programmingLanguages[2] = 'Java';
console.log(programmingLanguages);
//Output: ['Javascript', 'PHP', 'Java']

In the example above, the programmingLanguages array contained three programming languages.

The line, programmingLanguages[2] = 'Java'; tells our program to change the item at index 2 of the programmingLanguages array to be 'Java' instead of 'Python'.

Arrays with let and const

Conventionally variables can be declared with both the let and const keywords. Variables declared with let can be reassigned while Variables declared with the const keyword cannot be reassigned. However, elements in an array declared with const can be mutated. Meaning that we can change the contents of a const array, but cannot reassign a new array or a different value.

The code below illustrates this concept more clearly.



let programmingLanguages = ['Javascript', 'PHP', 'Python'];

const frameworks = ['React', 'Laravel', 'Django'];

programmingLanguages[0] = 'ES6';
console.log(programmingLanguages); // Outputs: ['ES6', 'PHP', 'Python']

programmingLanguages = ['Java'];
console.log(programmingLanguages); // Outputs: ['Java']

frameworks[0] = 'Vue';
console.log(frameworks); // outputs: ['vue', 'Laravel', 'Django'];

frameworks = ['Angular'];
console.log(frameworks); // Outputs: Uncaught TypeError: Assignment to constant variable.

We can see that when we assigned a different array to the programmingLanguages array declared with the let keyword it worked but throws an error when we assigned another array to the frameworks array declared with the const keyword.

Array Methods

Some built-in JavaScript methods make working with arrays easier. These methods are specifically called on arrays to make common tasks, like adding and removing elements, more straightforward.

Below are some array methods in Javascript.

The `.length` property

One of an array’s built-in properties is length which returns the number of items in the array. We access the .length property just like we do with strings.



const frameworks = ['React', 'Laravel', 'Django'];

console.log(frameworks.length); // Output: 3

In the code above, we use dot notation, chaining a period with the property name to the array, to access the length property of the frameworks array which when logged outputs 3.

When we want to know how many elements are in an array, we can access the .length property.

The `.push()` Method

One method, .push() allows us to add items to the end of an array. Here is an example of how this is used:



const frameworks = ['Vue', 'React', 'Angular'];

frameworks.push('Laravel', 'Django');

console.log(frameworks);
// Output: ['Vue', 'React', 'Angular', 'Laravel', 'Django'];

From the code above

We access the push method by using dot notation, connecting push to frameworks with a period.
Then we call it like a function. That’s because .push() is a function and one that JavaScript allows us to use right on an array.
.push() can take a single argument or multiple arguments separated by commas. In this case, we added two elements: 'Laravel' and 'Django' to frameworks.
.push() changes, or mutates, frameworks. .push() can also be referred to as a destructive array method since it changes the initial array.

The `.pop()` Method

.pop(), removes the last item of an array.



const frameworks = ['Vue', 'React', 'Angular'];

const removedFrameworks = frameworks.pop();

console.log(frameworks); // Output: ['Vue', 'React']

console.log(removedFrameworks);// Output: 'Angular'

In the code above, calling .pop() on the frameworks array removed Angular from the end.

.pop() does not take any arguments, it simply removes the last element of an array.

.pop() returns the value of the last element. In the example, we stored the returned value in a variable removedFrameworks which can be used later on.

.pop() is a method that mutates the initial array.

More Array Methods

More arrays methods that are available in JavaScript include: .join(), .slice(), .splice(), .shift(), .unshift(), and .concat() amongst many others. Using these built-in methods make it easier to do some common tasks when working with arrays.

Below, we will explore more methods. We will use these methods to edit a soccerPlayers list.



const soccerPlayers = ['Messi', 'Ronaldo', 'De-bruyne', 'Neymar', 'Mbappe', 'Lewandowski'];

From the example above we can use the following methods:

`.shift()` method

.shift() removes an item from the beginning of an Array.



soccerPlayers.shift();
console.log(soccerPlayers); // Outputs: ['Ronaldo', 'De-bruyne', 'Neymar', 'Mbappe', 'Lewandowski'];

`.unShift()` method

.unShift() Add an item to the beginning of an Array.



soccerPlayers.unshift('Haaland');
console.log(soccerPlayers); // Outputs: ['Haaland', 'Messi', 'Ronaldo', 'De-bruyne', 'Neymar', 'Mbappe', 'Lewandowski'];

`.splice()` method

.splice() method can be used to add new elements to an array by an index position and also remove elements from an array by an index position.

Below is an example of how we can use it to add new elements by index position.



soccerPlayers.splice(2, 0, 'Xavi', 'Iniesta');
console.log(soccerPlayers); // Outputs: ['Messi', 'Ronaldo', 'Xavi', 'Iniesta', 'De-bruyne', 'Neymar', 'Mbappe', 'Lewandowski'];

The first parameter 2 defines the position where new elements should be added (spliced in) and the position where the item(s) should be removed.
The second parameter 0 defines how many elements should be removed in our case no item was removed

We can also use .splice() to remove elements from an array by an index position without having to add new elements to the array



soccerPlayers.splice(2, 1);
console.log(soccerPlayers); // Outputs: ['Messi', 'Ronaldo', 'Neymar', 'Mbappe', 'Lewandowski'];

`.slice()` method

.slice() slices out a piece of an array into a new array.



const slicedPlayers = soccerPlayers.slice(1, 4);
console.log(slicedPlayers); // Outputs: ["Ronaldo", "De-bruyne", "Neymar"]

The slice() method takes two arguments like .slice(1,4).

The method then selects elements from the start argument, and up to (but not including) the end argument.

`.indexOf()` method

.indexOf() tells the index of an element in an array.



const neymarIndex = soccerPlayers.indexOf('Neymar');
console.log(neymarIndex); //Outputs: 3

There are many more array methods than just the ones mentioned above. We can check for more array methods on the Mozilla Developer Network (MDN) array documentation.

Arrays and Functions

Arrays can also be mutated inside a function and keep the change after the function call.

Taking a look at the following example where we call .push() on an array inside a function. We know that .push() method mutates, or changes, an array:



const soccerPlayers = ['Messi', 'Ronaldo', 'De-bruyne', 'Neymar', 'Mbappe', 'Lewandowski'];
function addPlayer(arr) {
  arr.push('Xavi');
}

addPlayer(soccerPlayers);

console.log(soccerPlayers); // Output: ["Messi", "Ronaldo", "De-bruyne", "Neymar", "Mbappe", "Lewandowski", "Xavi"]

From the code snippets above:

The function addPlayer() has a parameter of arr and uses .push() to add a 'Xavi' element into arr.
We called addplayer() with an argument of soccerPlayers which will execute the code inside addPlayer.
We checked the value of soccerPlayers and it now includes the 'Xavi' element! The array was mutated!

So when we pass an array into a function, if the array is mutated inside the function, that change will be maintained outside the function as well. This concept can also be explained as pass-by-reference since we are passing the function as a reference to where the variable memory is stored and changing the memory.

Nested Arrays

When an array contains another array it is known as a nested array or Two-dimensional array. Examine the example below:



const nestedplayers = [['Messi'], ['Ronaldo', 'Neymar']];

To access the nested arrays we can use bracket notation with the index value, just like we did to access any other element:



const nestedplayers = [['Messi'], ['Ronaldo', 'Neymar']];

console.log(nestedplayers[1]); // Output: ['Ronaldo', 'Neymar']

Notice that nestedplayers[1] will grab the element in index 1 which is the array ['Ronaldo', 'Neymar']. Then, if we wanted to access the elements within the nested array we can chain, or add on, more bracket notation with index values.



const nestedplayers = [['Messi'], ['Ronaldo', 'Neymar']];

console.log(nestedplayers[0]); // Output: ['Messi']
console.log(nestedplayers[1]); // Output: ['Ronaldo', 'Neymar']
console.log(nestedplayers[1][0]); // Output: 'Ronaldo'

In the third console.log() statement, we have two bracket notations chained to nestedplayers. We know that nestedplayers[1] is the array ['Ronaldo', 'Neymar']. Then to grab the first element from that array, we used nestedplayers[1][0] and we get Ronaldo.

For more reading

w3schools Javascript arrays
w3schools Javascript arrays methods
MDN Array

# Understanding Conditional Statements in javascript

Adeleye Jamiu — Mon, 23 Nov 2020 18:21:59 +0000

Conditional statements are statements that check a specific condition(s) and perform a task based on the condition(s).

The article does the following:

Explain the if statement.
Explain if...else statement.
Explain comparison operators.
Explain logical operators.
Explain truthy and falsy.
Explain truthy and falsy assignment.
Explain ternary operators.
Explain else...if statements.
Explain the switch keyword.

If Statement

Often a task will be performed based on a condition. For example, If we’re tired, then we’ll rest. another example is If our laptop's battery level is below 10% then we want the laptop to hibernate.

This can also be performed in programming using an if statement:



const batteryLevel = 7;
if (batteryLevel <= 10) {
  console.log('I have to hibernate!');
}
// Prints: I have to hibernate!

If the condition (batteryLevel <= 10) which means batteryLevel should be less than or equals to 10 evaluates to true, the code inside the curly braces {} will be executed and if the condition evaluates to false, the block won’t execute. Since our batteryLevel is 7 which is less than 10 then the block would run and I have to hibernate! will be logged.

If...Else Statements

Sometimes we would want to add another task in case our if statement evaluates to false, this is achieved by using adding the else statement to the if statement. This is referred to as an if...else statement.



const batteryLevel = 11;
if (batteryLevel <= 10) {
  console.log('I have to hibernate!');
} else {
  console.log('I don't have to hibernate at the moment!');
}

// Outputs: I don't have to hibernate at the moment!

In the example above, the batteryLevel is 11 which is greater than 10 making the statement to be false therefore the else block will be executed.

Comparison Operators

Sometimes we would need to use different types of operators to compare values. These operators are referred to as comparison operators.

Below is a list of some handy comparison operators and their syntax:

Less than: <
Greater than: >
Less than or equal to: <=
Greater than or equal to: >=
Is equal to: ===
Is not equal to: !==

Comparison operators compare a value on the left with another value on the right. like below:



7 < 10; // Evaluates to true

Logical Operators

There are also operators that work with boolean values(true or false) which are known as logical operators. These logical operators are used to add more sophisticated logic to our conditionals. There are three logical operators:

the and operator (&&)
the or operator (||)
the not operator, otherwise known as the bang operator (!)

The && operator is used to check that two things are true:



if (firstname === 'Adeleye' && lastname === 'Jamiu') {
  console.log('Adeleye Jamiu');
} else {
  console.log('Unauthorized user!');
}

When using the && operator, both conditions must evaluate to true for the entire condition to evaluate to true and execute. Otherwise, if either condition is false, the && condition will evaluate to false and the else block will execute.

If we need to check for atleast one condition being true, we can use the || operator:



if (user === 'Adeleye' || user === 'Jamiu') {
  console.log('Authorized user!');
} else {
  console.log('Unauthorized user!');
}

When using the || operator, only one of the conditions must evaluate to true for the overall statement to evaluate to true. In the code example above, if either user === 'Adeleye' or user === 'Jamiu' evaluates to true the if‘s condition will evaluate to true and its code block will execute. If the first condition in an || statement evaluates to true, the second condition won’t even be checked. Only if user === 'Adeleye' evaluates to false will user === 'Jamiu' be evaluated. The code in the else statement above will execute only if both comparisons evaluate to false.

The ! not operator reverses, or negates, the value of a boolean:



let exposed = true;
console.log(!exposed); // Prints false

let covered = false;
console.log(!covered); // Prints true

From the above it can be seen that the ! operator will either take a true value and pass back false, or it will take a false value and pass back true.

Truthy and Falsy

Taking consideration how non-boolean data-types like strings or numbers are evaluated when checked inside a condition

In cases where we want to check if a variable exists and don't want it to equal a specific value, we can check if the variable has a value like below:



let foodFlask = 'not empty';

if (foodFlask) {
  console.log(foodFlask);
} else {
  console.log('Food flask is empty.');
}

// Prints: not empty

The code block in the if statement will run because foodFlask has a truthy value. Although the value of foodFlask is not explicitly the value true, it evaluates to true because it has been assigned a non-falsy value, when used in a boolean or conditional context,

Below is a list of falsy values:

0
Empty strings like "" or ''
null which represent when there is no value at all
undefined which represent when a declared variable lacks a value
NaN, or Not a Number

Here’s an example with numbers:



let score = 0;

if (score) {
  console.log('you won');
} else {
  console.log('You lose');
}

// Prints 'You lose!'

The code block in the else statement will run as the condition evaluates to false because the value of the score is 0 and 0 is a falsy value.

Truthy and Falsy Assignment

Say I have a website and want to use a user’s username to make a personalized greeting. Sometimes, the user does not have an account, making the username variable falsy. The code below checks if username is defined and assigns a default string if it is not:

say we want to have a personalized greeting feature on our website, sometimes we have a user who is authenticated and sometimes we have a user who is not. We can use the code below to if a user's username is defined and assign it his/her name or assign them a default value if username is not defined



let assignedName;
if (username) {
  assignedName = username;
} else {
  assignedName = 'Guest';
}

Combining the knowledge of logical operators a short-hand can be used for the code above. In a boolean condition, JavaScript assigns the truthy value to a variable if the || operator is used in the assignment:



let assignedName = username || 'Guest';

Because || or statements check the left-hand condition first, the variable assignedName will be assigned the actual value of username if is truthy, and it will be assigned the value of 'Guest' if username is falsy. This concept is also referred to as short-circuit evaluation.

Ternary Operator

We can also use ternary operators, which is also a short-hand notation

Take a look at the if...else statement below:



let isHalfTime = true;

if (isHalfTime) {
  console.log('Take a break!');
} else {
  console.log('Keep Playing!');
}

// Prints: Take a break!

We can use a ternary operator to perform the same functionality:



isHalfTime ? console.log('Take a break!') : console.log('Keep Playing!');

In the example above:

The condition, isHalfTime, is provided before the ?.
Two expressions follow the ? and are separated by a colon :.
If the condition evaluates to true, the first expression executes.
If the condition evaluates to false, the second expression executes.

Like if...else statements, ternary operators can be used for conditions that evaluate to true or false.

Else If Statements

The else if statement can be added to the if...else which allows for more than two possible outcomes. We can add as many else if statements as we would like, to make more complex conditionals!

The else if statement always comes after the if statement and before the else statement. The else if statement also takes a condition.



let grade = 50;

if (grade >= 70) {
  console.log('You passed with a Distinction!');
} else if (grade >= 60 && <= 69) {
  console.log('You passed with an Excellent result!');
} else if (grade >= 50 && <= 59) {
  console.log('You passed with an Average result!');
} else if (grade >= 40 && <= 49) {
  console.log('You passed with a good result!');
} else {
  console.log('You Failed!');
}

// output: You passed with an Average result!

if/else if/else statements are read from top to bottom, so the first condition that evaluates to true from the top to bottom is the block that gets executed.

The `switch` keyword

else if statements are a great tool if I need to check multiple conditions. In programming, we often find ourselves needing to check multiple values and handling each of them differently. For example:



let shirt = 'Long sleeves';

if (shirt === 'Short sleeves') {
  console.log('Short sleeves are $1.69');
} else if (shirt === 'Long sleeves') {
  console.log('Long sleeves are $3.25');
} else {
  console.log('Invalid shirt');
}

// Prints: Long sleeves are $3.25

In the code above, we have a series of conditions checking for a value that matches a shirt variable. The code works fine, but imagine if I needed to check 100 different values! Having to write that many else if statements sound like a pain!

A switch statement provides an alternative syntax that is easier to read and write. A switch statement looks like below:



let shirt = 'Long sleeves';

switch (shirt) {
  case 'Short sleeves':
    console.log('Short sleeves are $1.69');
    break;
  case 'Long sleeves':
    console.log('Long sleeves are $3.25');
    break;
  case 'Medium sleeves':
    console.log('Medium sleeves are $2.29');
    break;
  default:
    console.log('Invalid shirt');
    break;
}

// Prints 'Long sleeves are $3.25'

The switch keyword initiates the statement and is followed by ( ... ), which contains the value that each case will compare. In this case, it is shirt.
Inside the block, { ... }, there are multiple cases. The case keyword checks if the expression matches the specified value that comes after it. The value following the first case is 'Short sleeves'. If the value of shirt equaled 'Short sleeves', that case‘s console.log() would run.
The value of shirt is 'Long sleeves', so the second case runs— Long sleeves are $3.25 is logged to the console.
The break keyword tells the computer to exit the block and not execute any more code or check any other cases inside the code block.

Note: Without the break keyword at the end of each case, the program would execute the code for all matching cases and the default code as well. This behavior is different from if/else conditional statements that execute only one block of code.

At the end of each switch statement, there is a default statement. If none of the cases are true, then the code in the default statement will run.

For extra reading

Understanding Loops in Javascript

Adeleye Jamiu — Sun, 15 Nov 2020 21:57:05 +0000

A loop is to iterate(repeat) over a set of code until a specified condition is reached.

The article does the following:

Explain How tasks can be manually repeated
Explain For Loop
Explain Looping in reverse
Explain nested loops.
explain while loops.
Explain Do...While statements.
Explain the break keyword.

Before we start to work with loops, we will see how cumbersome having to write a repeated task can be:



const myNames = ['Adeleye', 'Oluwaloseyi', 'Jamiu'];

console.log(myNames[0]);
console.log(myNames[1]);
console.log(myNames[2]);

/*Outputs:
Adeleye
Oluwaloseyi
Jamiu
*/

The example above might not look so cumbersome as it only involves three values. Imagine we had over one hundred values. It would be easier to use loops than have to console.log each value.

A loop is best used when a process has to be repeated multiple times in a row. Loops allow the creation of efficient code that automates processes to make scalable, manageable programs.

The `For` Loop

Instead of writing out the same code over and over, loops allow computers to repeat a given block of code on its own. One way to give computers these instructions is with a for loop.

A for loop contains three expressions separated by ; inside the parentheses:

An iterator variable is initialized which starts the loop.
The iterator variable is checked against a stopping condition. If the condition evaluates to true the code block will run, and if it evaluates to false the code will stop.
An iteration statement is used to update the iterator variable on each loop.

Iterator variable can have any name, but it’s best practice to use a descriptive variable name.

from the example above where we manually logged our names we can instead use a for loop like below:



const myNames = ['Adeleye', 'Oluwaloseyi', 'Jamiu'];

for (let i = 0; i < myNames.length; i++) {
  console.log(myNames[i]);
}

/*Outputs:
Adeleye
Oluwaloseyi
Jamiu
*/

We notice that we get the same output as when we manually repeat the codes. Even if we have over a hundred values for myNames, we would only need to write the same line of code.

From the code example above

The initialization is let i = 0 and the iterator variable is i, so the loop will start counting at 0.
The stopping condition is i < myNames.length, meaning the loop will run as long as the iterator variable, i, is less than the length of myNames variable.
The iteration statement is i++. This means that after each loop, the value of counter will increase by 1. For the first iteration i will equal 0, for the second iteration i will equal 1, and so on.
The code block is inside of the curly braces, console.log(myNames[i]), will execute until the condition evaluates to false. The condition will be false when i is greater than or equal to myNames.length.

Looping in Reverse

With simple modifications to the expressions, the for loop can be made to run backward and display results in reverse.

To run a backward for loop:

Set the iterator variable to the highest desired value in the initialization expression.
Set the stopping condition for when the iterator variable is less than the desired amount.
The iterator should decrease in intervals after each iteration.



const myNames = ['Adeleye', 'Oluwaloseyi', 'Jamiu'];

for (let i = myNames.length; i >= 0; i--) {
  console.log(myNames[i]);
}

/*Outputs:
Jamiu
Oluwaloseyi
Adeleye
*/

Nested Loops

Nested is when there exists a loop running inside another loop. This is useful when comparing the elements of two arrays. For each round of the outer for loop, the inner for loop will run completely.



const firstNumbers = [6, 19, 20];
const secondNumbers = [19, 81, 2];
for (let i = 0; i < firstNumbers.length; i++) {
  for (let j = 0; j < secondNumbers.length; j++) {
    if (firstNumbers[i] === secondNumbers[j]) {
      console.log('Both loops have the number: ' + secondNumbers[j]);
    }
  }
} //OutPuts: Both loops have the number: 19

For each element in the outer loop array, firstNumbers, the inner loop will run in its entirety comparing the current element from the outer array, firstNumbers[i], to each element in the inner array, secondNumbers[j]. When it finds a match, it prints a string to the console.

The While Loop

A for loop can be converted into a while loop:



// A for loop that prints 1, 2, and 3
for (let counterOne = 1; counterOne < 4; counterOne++) {
  console.log(counterOne);
}
// A while loop that prints 1, 2, and 3
let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}

Breaking down what’s happening with the while loop syntax:

The counterTwo variable is declared before the loop which can be accessed inside the while loop since it’s in the global scope.
We start the loop with the keyword while followed by the stopping condition, or test condition. This will be evaluated before each round of the loop. While the condition evaluates to true, the block will continue to run. Once it evaluates to false the loop will stop.
Next, we have the loop’s code block which prints counterTwo to the console and increments counterTwo.

If we didn’t increment counterTwo, it would always have its initial value, 1. That would mean the testing condition counterTwo < 4 would always evaluate to true and the loop would never stop running(infinite loop). Infinite loops can take up all of our computer’s processing power potentially freezing our computer and it’s something we always want to avoid.

The syntax of a for loop is ideal when the number of times the loop should run is known, but this is not always known in advance. While In situations when there is a need for a loop to execute an undetermined number of times, while loops are the best choice.

`Do...While` Statements

do...while statement comes in is a case where there is a need to run a piece of code at least once and then loop based on a specific condition after its initial run.

A do...while statement says to do a task once and then keep doing it until a specified condition is no longer met.



let countInt = 0;
let i = 0;
do {
  countInt = countInt + i;
  i++;
} while (i < 5);
console.log(countInt);

// Outputs: 10

In this example, the code block makes changes to the countInt variable by adding i variable to it. First, the code block after the do keyword is executed once. Then the condition is evaluated. If the condition evaluates to true, the block will execute again. The looping stops when the condition evaluates to false.

Note that the while and do...while loop is different. Unlike the while loop, do...while will run at least once whether or not the condition evaluates to true.



const firstChoice = 'Soccer!';
const secondChoice = 'Rugby!';
// A do while with a stopping condition that evaluates to false
do {
  console.log(firstChoice);
} while (true === false);
// A while loop with a stopping condition that evaluates to false
while (true === false) {
  console.log(secondChoice);
}

//Outputs: Soccer!

The results only output Soccer!.

The break Keyword

The break keyword is used to break away from a loop after a certain condition has been met even if the stopping condition has not been met.

The break keyword allows programs to “break” out of the loop from within the loop’s block.



for (let i = 0; i < 99; i++) {
  if (i > 2) {
    break;
  }
  console.log('Am still in the loop.');
}
console.log('Glad I broke out of the loop!');
// This is the output for the above code:
/*
Am still in the loop.
Am still in the loop.
Am still in the loop.
Glad I broke out of the loop!
*/

We notice that we were able to break out of the loop even as the stopping condition i < 99 is still true. break statements can be especially helpful when looping through large data structures. With breaks, we can add test conditions besides the stopping condition, and exit the loop when they’re met.

For extra reading:

Understanding Variables in Javascript

Adeleye Jamiu — Sun, 08 Nov 2020 15:23:32 +0000

A variable is a container for storing data. It is used to label data with a descriptive name. Variables are not values instead they contain values and represent them with a name.

The article does the following:

Explain how to create Variables in Javascript using "var" and "let" keywords
Explain the similarities between "var" and "let" keywords.
Explain dissimilarities between "var" and "let" keywords
Explain how to create Variables in Javascript using "const" keywords.
Explain the general rules for naming variables.
Explain the mathematical assignment operators.
Explain the increment and decrement operator.
Explain String Concatenation with Variables in Javascript.
Explain String Interpolation(Template Literals) in Javascript.
Explain Thereof operator in Javascript.

Creating a Variable

`var`

The var keyword was used in ES5 to create a variable before the introduction of const and let in ES6.



var myName = 'Jamiu';
console.log(myName); // Output: Jamiu

`let`

The let keyword was introduced in ES6. The let keyword is used to declare a variable that can later be reassigned to a different value.



let sport = 'Soccer';
console.log(sport); // Output: Soccer
sport = 'Basketballl';
console.log(sport); // Output: Basketball

Similarities of `var` and `let` keywords

Both the var and let can be used to declare a variable without assigning a value to it. In this case, the variable will automatically be initialized with a value of undefined:



let field;
console.log(field); // Output: undefined
field = 'javascript';
console.log(field); // Output: javascript



var field;
console.log(field); // Output: undefined
field = 'javascript';
console.log(field); // Output: javascript

From the examples above, it can be established that the value of both variables can be reassigned.

Disimilarities between `var` and `let` keywords

the difference between them is that var is function scoped and let is block scoped. example:



console.log(num);
var num = 6;
console.log(num); //Output: undefined, 6

if an undeclared variable is logged to the console and later declared with var and assigned a value, it will return undefine and the value assigned to it, an error will be returned if let is used in declaring such variable. example:



console.log(num); // output: ReferenceError: x is not defined
let num = 6;
console.log(num); //The code doesnt reach this line

Using the let keyword the code breaks and doesn't reach the third line.

`const`

Just like with var and let we can store any value in a const variable. The way we declare a const variable and assign a value to it follows the same pattern as let and var.



const myName = 'Jamiu';
console.log(myName); // Output: Jamiu

However, the difference here is that a const variable cannot be reassigned because it is constant. If we try to reassign a const variable, we’ll get a TypeError.

Constant variables must be assigned a value when declared. If we try to declare a const variable without a value, we’ll get a SyntaxError.

NOTE: let is the preferred way to declare a variable when we expect the variable to be reassigned, and const is the preferred way to declare a variable with a constant value.

General Rules for Naming Variables:

There are rules to keep in mind when naming variables,

Variable names cannot start with numbers.
Variable names are case sensitive, so myName and myname would be different variables. It is bad practice to create two variables that have the same name using different cases.
Variable names cannot be the same as keywords. For a comprehensive list of keywords check out MDN’s keyword documentation.
Retrived from codecademy.com.

Mathematical Assignment Operators

Variables and math operators can be used to calculate new values and assign them to a variable.



let num = 7;
num = num + 2;

console.log(w); // Output: 9

from the example above the variable, num was assigned the value of 7. Then the num variable was reassigned the addition of itself and 1.

Use built-in mathematical assignment operators is another way that the num variable can be reassigned. We could re-write the code above to be:



let num = 7;
num += 2;

console.log(num); // Output: 9

In the second example, the += assignment operator is used to reassign num. We’re performing the mathematical operation of the first operator + using the number to the right, then reassigning num to the computed value.

Other mathematical assignment operators we also have access to are: -=, *=, and /= which work similarly.



let num = 25;
num -= 5; // Can be written as num = num - 5
console.log(num); // Output: 20

let numTwo = 50;
numTwo *= 3; // Can be written as numTwo = numTwo * 3
console.log(numTwo); // Output: 150

let numThree = 8;
numThree /= 2; // Can be written as numThree = numThree / 2
console.log(numThree); // Output: 4

The Increment and Decrement Operator

The increment operator will increase the value of the variable by 1. The decrement operator will decrease the value of the variable by 1. For example:

The increment operator is used to increase the value of a variable by 1 while the decrement operator is used to decrease the value of a variable by 1.



let num = 17;
num++;
console.log(num); // Output: 18



let numTwo = 20;
numTwo--;
console.log(numTwo); // Output: 19

Like the previous mathematical assignment operators (+=, -=, *=, /=), the variable’s value is updated and assigned as the new value of that variable. We should note logging numTwo directly will not immediately increment it.



let numTwo = 20;
console.log(numTwo++); // Output: 20

This is because the ++ coming after the numTwo variable doesn't increment the value immediately, as the code means that we are logging the value of numTwo first and when we call numTwo again on another line the value gets incremented. like below:



let numTwo = 20;
console.log(numTwo++); // Output: 20
console.log(numTwo); // Output: 21

This is also the same for the decremental operator -- coming after a variable.

The decremental and increamental operator can also come before a variable, the difference doing this as oppose to coming after the variable is that variable is increamented first and then the variable is called.



let numTwo = 20;
console.log(++numTwo); // Output: 21

This is also the same for the decremental operator -- coming before a variable.

String Concatenation with Variables

The String Concatenation operator (+) can be used to combine two string values even if those values are being stored in variables:



let myLanguage = 'javascript';
console.log('I code in ' + myLanguage + '.'); // Output: 'I code in javascript.'

In the example above, we assigned the value javascript to the myLanguage variable. On the second line, the + operator is used to combine three strings: I code in, then the value saved to myLanguage, and ..

String Interpolation(Template Literals)

Variables can be inserted or interpolated into strings using template literals. example:



let myLanguage = 'javascript';
console.log(`I code in ${myLanguage}.`); // Output: 'I code in javascript.'

Notice that:

in using a template literal we wrapped the whole string by backticks.
Inside the template literal, we use a placeholder, ${myLanguage} making The value of myLanguage to be inserted into the template literal.
When we interpolate I code in ${myLanguage}., the output printed is the string: I code in javascript.

One of the biggest benefits of using template literals is the readability of the code. Using template literals, one more easily tells what the new string will be. Also, there won't be a need to worry about escaping double quotes or single quotes.

`Typeof` Operator

The typeof operator is used to check the data type of a variable’s value. It returns a string of the data type of the variable.



const tellMeTheType1 = 109;

console.log(typeof tellMeTheType1); // Output: number

const tellMeTheType2 = 'Jamiu';

console.log(typeof tellMeTheType2); // Output: string

const tellMeTheType3 = true;

console.log(typeof tellMeTheType3); // Output: boolean

For extra reading:

Understanding Scope in Javascript

Adeleye Jamiu — Thu, 05 Nov 2020 11:52:58 +0000

A scope defines where variables can be accessed or referenced in a program. Some variables can be accessed from anywhere within a program, while other variables may only be available in a specific context.

The article does the following:

Explain a Block of code
Explain Global Scope
Explain Block Scope
Explain Scope pollution in Javascript.
Explain the best practice of Scoping in Javascript.

Block

A block is a code enclosed inside a set of curly braces {}. Blocks help in grouping one or more statements together and serve as an important structural marker for our code.

A block of code could be a function, like below:



const tellThePeriod = () => {
  let period = 'morning';
  console.log(period); // morning
};

We can notice that the function body is a block of code.

When we also observe the block in an if statement:



if (dusk) {
  let period = 'evening';
  console.log(period); // evening
}

Global Scope

variables can exist either outside of or within blocks.

When a variable is declared outside of blocks, the variable is said to be globally scoped. These variables are referred to as global variables. As global variables are not bound inside a block, they can be accessed by any code in the program, including code in blocks.

Taking a look at an example of global scope:



const period = 'morning';

const returnPeriod = () => {
  return period; // morning
};

console.log(returnPeriod()); // morning

We can see that even though the period variable is defined outside of the block, it can be accessed in the function block, making it a globally scoped variable.
Therefore, color can be accessed within the returnPeriod function block.

Block Scope

A variable defined inside a block is said to be block scoped as it is only accessible to the code within the curly braces {}.
Variables that are declared with block scope are known as "local variables" because they are only available to the code that is part of the same block.

Taking a example below:



const tellThePeriod = () => {
  let period = 'afternoon';
  console.log(period); // afternoon
};

tellThePeriod(); // afternoon
console.log(period); // ReferenceError

We’ll notice that within the function tellThePeriod, the period variable is only available within the curly braces of the function. When we tried to log the same variable outside the function, we get a ReferenceError

Scope Pollution

Having too many global variables can cause problems in a program.

Global variables when declared, go to the global namespace. This global namespace allows the accessibility of these variables from anywhere in the program. The global namespace can fill up quickly as these variables remain there until the program finishes

Scope pollution having too many global variables existing in the global namespace or reusing variables across different scopes. This can make it difficult to keep track of our variables as globally scoped variables can collide with other variables that are more locally scoped, causing unexpected behavior in our code.

Taking a look at an example of scope pollution:



let number = 77;

const logNumber = () => {
  number = 157;
  console.log(number);
};

logNumber(); // Prints 157
console.log(number); // Prints 157

Notice That:

We first declared a variable number with the let keyword which means the variable can be reassigned to another value.
Inside the function logNumber(), we mistakenly reassigned the value of number to 157 perhaps we intended to name the variable as something else.
When logNumber() was called, number gets reassigned to 157, which affected the global variable num
We won’t get an error as reassignment is allowed here, so if we decided to use number later on, we’ll be using the new value of number.

Another case is declaring a variable with the same name outside and inside of a block like below:



let number = 77;

const logNumber = () => {
  let number = 157;
  console.log(number);
};

logNumber(); // Prints 157
console.log(number); // Prints 77

We declared a variable number outside and inside of logNumber() block. in this case, both variables though have the same name are different. Therefore the number variable inside of the logNumber() would only be available in the block while the one outside will be available inside and outside of the block.

With this, it is better not to always make every variable to be globally scoped.

Block scoped variables allow defining variables with precision, and not pollute the global namespace hence If a variable does not need to exist outside a block— it shouldn’t!.

For extra reading:

INTRODUCTORY CONCEPTS TO LEARNING JAVASCRIPT

Adeleye Jamiu — Wed, 23 Sep 2020 20:24:16 +0000

The objective of this article is to present an introduction to the Javascript programming language.

This Article does the following:

Explain Console in Javascript
Explain Comments in javascript
Explain Data Types in Javascript
Explain Arithmetic Operators in Javascript
Explain String concatenation in Javascript
Explain Properties in Javascript
Explain Methods in Javascript
Explain Built-In-Objects in Javascript.

JavaScript is a powerful, flexible, and fast programming language being used for web development and beyond!

console

The console is a panel that displays important messages to the debugging console of our browsers.

In JavaScript, the console keyword is an object, a collection of data and actions, that we can use in our code. Keywords are words that are built into the JavaScript language, that the computer will recognize and treat specially.

One action, or method, that is built into the console object is the .log() method. When we write console.log() the parameter passed inside the parentheses will get printed, or logged, to the console.



console.log('Jamiu');

This example logs Jamiu to the console. The semicolon denotes the end of the line or statement. Although in JavaScript our code will usually run as intended without a semicolon, it is recommended to end each statement with a semicolon so we never leave one out in the few instances when they are required. console.log() can be used to print different types of data.

Comments

Comments can explain what the code is doing, leave instructions for developers using the code, or add any other useful annotations.

There are two types of code comments in JavaScript:

A single line comment will comment out a single line and is denoted with two forward slashes // at the beginning or after a line of code.



// Prints Jamiu to the console
console.log("Jamiu");
console.log("Jamiu");  // Prints Jamiu

A multi-line comment will comment out multiple lines and is denoted with /* to begin the comment, and */ to end the comment.



/*
This is all commented
console.log(Jamiu);
None of this is going to run!
console.log(Adeleye);
*/

This syntax can also be used to comment something out in the middle of a line of code:



console.log(/*IGNORED!*/ Jamiu);  // Still just prints Jamiu

Data Types

Data types are the classifications of the different kinds of data that are used in programming. In JavaScript, there are seven fundamental data types:

Number: Any number, including numbers with decimals: 4, 8, 1516, 23.42.
String: Any grouping of characters on our keyboard (letters, numbers, spaces, symbols, etc.) surrounded by single quotes: ' ... ' or double quotes " ... ".
Boolean: This data type only has two possible values— either true or false (without quotes). It’s helpful to think of booleans as on and off switches or as the answers to a “yes” or “no” question.
Null: This data type represents the intentional absence of a value, and is represented by the keyword null (without quotes).
Undefined: This data type is denoted by the keyword undefined (without quotes). It also represents the absence of a Value though it has a different use than null.
Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding.
Object: Collections of related data.

The first 6 of those types are considered primitive data types. They are the most basic data types in the language. Objects are more complex.

Arithmetic Operators

An operator is a character that performs a mathematical operational task in our code. JavaScript has several built-in arithmetic operators, that allow us to perform mathematical calculations on numbers. These include the following operators and their corresponding symbols:

Add: +
Subtract: -
Multiply: *
Divide: /
Reminder: %



console.log(3 + 4); // Prints 7
console.log(5 - 1); // Prints 4
console.log(4 * 2); // Prints 8
console.log(9 / 3); // Prints 3
console.log(11 % 3); // Prints 2

The remainder operator, sometimes called modulo, returns the number that remains after the right-hand number divides into the left-hand number as many times as it evenly can: 11 % 3 equals 2 because 3 fits into 11 three times, leaving 2 as the remainder.

String Concatenation

The process of appending one string to another is called concatenation.



console.log('hi' + 'ya'); // Prints 'hiya'
console.log('wo' + 'ah'); // Prints 'woah'
console.log('I love to ' + 'code.') // Prints 'I love to code.'

Just like with regular math, we can combine, or chain, our operations to get a final result:



console.log('One' + ', ' + 'two' + ', ' + 'three!'); // Prints 'One, two, three!'

Properties

Properties are used to check pieces of information on a data type.

Every string instance has a property called length that stores the number of characters in that string. we can retrieve property information by appending the string with a period and the property name:



console.log('Teaching the world how to code'.length); // prints 30

The . is another operator! We call it the dot operator.

In the example above, the value saved to the length property is retrieved from the instance of the string, 'Teaching the world how to code'. The program prints 30 to the console because 'Teaching the world how to code' has thirty characters in it.

Methods

Methods are actions we can perform. JavaScript provides several string methods.

these methods are called, or used by appending an instance with a period (the dot operator), the name of the method, and opening and closing parentheses: e.g. 'example string'.methodName().

When we use console.log() we’re calling the .log() method on the console object.

Some methods are explained below:

.toUpperCase() method: This method returns a string in all capital letters.



console.log('hello'.toUpperCase()); // Prints 'HELLO'

.toUpperCase() method is called on the string instance 'hello'. The result is logged to the console. This method returns a string in all capital letters: 'HELLO'.

.startsWith() method:

This method takes in an argument as checks if the string to which it is appended starts with that argument. If it starts with the argument then it prints true and if it does not start with the argument it prints false.



console.log('Hey'.startsWith('H')); // Prints true

the .startsWith() method is called on the string instance 'Hey'. This method also accepts the character 'H' as an input, or argument, between the parentheses. Since the string 'Hey' does start with the letter 'H', the method returns the boolean true.

.trim() method The .trim() method is used to remove white spaces at the beginning and end of a string.



console.log('    Remove whitespace   '.trim());// prints Remove whitespace

Built-in Objects

In addition to console, there are other objects built into JavaScript. These objects have methods.
For example, the built-in Math object in javascript is used to perform more complex mathematical operations than arithmetic. An example is calling the .random() method from the built-in Math object:



console.log(Math.random()); // Prints a random number between 0 and 1

In the example above, we called the .random() method by appending the object name with the dot operator, the name of the method, and opening and closing parentheses. This method returns a random number between 0 and 1.

To generate a random number between 0 and 50, we could multiply this result by 50, like below:



Math.random() * 50;
//expected output: 17.793075626901476

The example above will likely evaluate to a decimal. To ensure an answer is a whole number, we can take advantage of another useful Math method called Math.floor().

Math.floor() takes a decimal number, and rounds down to the nearest whole number. we can use Math.floor() to round down a random number like below:



Math.floor(Math.random() * 50);
//expected output: 11

Math.ceil() takes a decimal number, and rounds up to the nearest whole number. we can use Math.ceil() to round up a random number like this:



Math.ceil(Math.random() * 50);

// Expected output: 13

DEV Community: Adeleye Jamiu

Understanding Arrays in Javascript

Creating an Array

Accessing Elements

Update Elements

Arrays with let and const

Array Methods

The .length property

The .push() Method

The .pop() Method

More Array Methods

.shift() method

.unShift() method

.splice() method

.slice() method

.indexOf() method

Arrays and Functions

Nested Arrays

For more reading

# Understanding Conditional Statements in javascript

If Statement

If...Else Statements

Comparison Operators

Logical Operators

Truthy and Falsy

Truthy and Falsy Assignment

Ternary Operator

Else If Statements

The switch keyword

For extra reading

Understanding Loops in Javascript

The For Loop

Looping in Reverse

Nested Loops

The While Loop

Do...While Statements

The break Keyword

For extra reading:

Understanding Variables in Javascript

Creating a Variable

var

let

Similarities of var and let keywords

Disimilarities between var and let keywords

const

General Rules for Naming Variables:

Mathematical Assignment Operators

The Increment and Decrement Operator

String Concatenation with Variables

String Interpolation(Template Literals)

Typeof Operator

For extra reading:

Understanding Scope in Javascript

Block

Global Scope

Block Scope

Scope Pollution

For extra reading:

INTRODUCTORY CONCEPTS TO LEARNING JAVASCRIPT

console

Comments

Data Types

Arithmetic Operators

String Concatenation

Properties

Methods

Built-in Objects

Suggested Reading

The `.length` property

The `.push()` Method

The `.pop()` Method

`.shift()` method

`.unShift()` method

`.splice()` method

`.slice()` method

`.indexOf()` method

The `switch` keyword

The `For` Loop

`Do...While` Statements

`var`

`let`

Similarities of `var` and `let` keywords

Disimilarities between `var` and `let` keywords

`const`

`Typeof` Operator