DEV Community: Codecupdev

Learn how to use instanceof in JavaScript

Codecupdev — Tue, 18 Oct 2022 19:53:27 +0000

Introduction
In JavaScript instanceof is an operator. An operator is either used for calculations or for logic. The instanceof operator will see if an operand (what we perform the operation on) is an instance of the value we pass. When we use instance of we place the operand on the left and the value we pass on the right. This is shown in the example below:

someoperand instanceof somevalue

Examples
When we use the instanceof operator it will check whether the operand is an instance of the value we pass and it will also check the prototype chain of the value. The return value will always be a Boolean (true or false). Let’s start by looking at some basic examples.

const pets = {
  amount: 4
};
pets instanceof String
//Returns ---> false
pets instanceof Number
//Returns ---> false
pets instanceof Object
//Returns ---> true

In the above example we create an object literal stored in a variable called pets. Inside of the pets object we create a property called amount with a value of four. Next we use the instanceof operator to check whether pets is an instance of String, Number and Object. Both String and Number return false. Even though the value stored inside of pets is a number we are checking the the object itself not the properties inside of the object. As pets is an object when we then go ahead and check whether pets is an instance of Object we get true.

Let’s look at another example.

const greeting = "Hello"
greeting instanceof String
//Returns false

In the above example we declare a variable called greeting and assign to this the string Hello. Next we check whether greeting is an instance of String. We get false. This may surprise you. When we use the instanceof operator we are checking whether it is an instance of the String object we are not checking the type. When we create the greeting variable we use a string literal so it is not actually an instance of String. If we wanted this to return true we would need to do the following.

const greeting = new String("Hello")
greeting instanceof String
//Returns ---> true

The instanceof operator can be useful when you are working with classes and you want to check whether something is an object of a class. Let’s look at an example of this.

class Car {}
const honda = new Car()
honda instanceof Car
//Returns ---> true

I will wrap up this article with one last example.

const arr = [1, 2, 3]
arr instanceof Array
//Returns ---> true
arr instanceof Object
//Returns ---> true

In the above example i declare a variable called arr and I assign to this an array containing some values. Next using the instanceof operator I check whether arr is an instanceof Array. It is so I get true returned. Next i check whether it is an instance of Object. I also get true returned. You can expect functions to work in a similar way. The reason for this is that they inherit from Object in the prototype chain.

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

Callbacks in JavaScript

Codecupdev — Thu, 13 Oct 2022 07:04:45 +0000

What is a callback?
When we pass a function as an argument to another function and that function is invoked within the outer or parent function we are creating a callback. If you have used in-built methods in JavaScript then it is likely that you have already used a callback. Let’s look at a basic example.

function greet(cbFunc) {
  cbFunc();
  cbFunc();
}
function sayHello() {
  console.log("Hello");
}
greet(sayHello);
//Returns --->
'Hello'
'Hello'

In the above example, we create a function declaration called greet which accepts a parameter cbFunc. Inside the function body, the cbFunc gets invoked twice. We then create another function declaration called sayHello and inside the body of this function we console.log Hello. This will be our callback function. We then call the greet function and pass in sayHello as the argument so it becomes the callback function.

When we use callback functions we often use an anonymous function as opposed to an existing function. The reason for this is that if the callback function is not going to be used elsewhere then there is no need to store a named function within the code for the callback. In the following example, we update the code to use an anonymous function:

function greet(cbFunc) {
  cbFunc()
  cbFunc()
}
greet(function() {
  console.log("Hello");
})
//Returns --->
'Hello'
'Hello'

We declare a function declaration called greet which accepts a parameter called cbFunc. This will be the callback function and it gets invoked twice inside the function body. We then call the greet function and pass in the anonymous function directly as the argument. We get the same output when the function runs.

If you have used setTimeout in JavaScript then you have already been using a callback. The setTimeout function accepts a callback and executes this after a certain period of time has passed. Let’s take a look at an example.

setTimeout(() => {
  console.log("Hello");
}, 1000);
//Returns ---> 'Hello'

In the above example, we pass in an anonymous function as a callback to setTimeout. The callback returns a console log that prints the string Hello. After one second this is printed on the screen.

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

What is bind() in JavaScript?

Codecupdev — Tue, 11 Oct 2022 19:34:07 +0000

I recently published an article on using Call() and Apply() in JavaScript. Bind is often discussed with these methods but it works slightly differently.

When we use the bind method we are creating a new function but the value of this is set to whatever is passed in when we call the method. Let’s start by looking at a basic example.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore() {
  return `${this.name} scored ${this.score}.`
};
const result = studentScore.bind(studentOne);
console.log(result());
//Returns ---> Abby scored 80.

In the above example we create a studentOne object. Inside of this object we set properties for the students name and score. Next we use a function declaration and create a function called studentScore. This function returns a template literal with the students name and score. We go on to declaring a variable called result and assign to this the result of calling the studentScore function but using the bind method. We pass in the studentOne object as the parameter to bind. Lastly inside of a console log we return the result of invoking result.

When bind is called in the above example a new function is created and stored inside of the variable result. This is stored with the context for this. It is only when we invoke this later inside of the console log that this function actually runs. So to clarify, unlike with call() and apply() the bind method does not execute immediately. It simply returns a new function with the value of this set to what we pass in to the parameters.

Passing parameters to bind
We can expand upon our prior example by looking at how we can pass additional parameters to bind. If our studentScore function had a parameter, when we call bind we can pass the argument for this in at the same time. Let’s look at an example of this.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result());
//Returns ---> Abby scored 80 in Art.

We expand upon our prior example by setting subject as a parameter to the studentScore function. Now when we call bind we pass the string Art as an argument. We could equally achieve the same result by passing the Art argument when we called result as shown below.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne);
console.log(result("Art"));
//Returns ---> Abby scored 80 in Art.

One caveat to note here is that additional arguments will be ignored.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art.

In the above example we pass in Art as the argument when we call bind. When we call result we then pass in Maths as an argument. This does not replace Art, instead it just adds an additional argument and as the studentScore function only takes one parameter this then gets ignored. If it took two parameters however it would work.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subjectOne, subjectTwo) {
  return `${this.name} scored ${this.score} in ${subjectOne} & ${subjectTwo}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art & Maths.

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

Call() & Apply() in JavaScript

Codecupdev — Sun, 09 Oct 2022 18:56:08 +0000

Introduction
When we use call and apply we are usually working with objects. By using these methods we can inherit object methods from one object to another. So for example if a method was defined on object one it can be called by object two.

Whilst the concepts behind call and apply are similar the important difference to note is that when you use call you pass the parameters explicitly whereas with apply you pass the second argument as an array. Let’s look at an example to clarify this. We will start by looking at the call method.

Call

const person = {
  details: function() {
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

In the above example we create a person object. Inside of the object we then create a method called details. This method returns a template literal with the persons name. Next, we create another object called bob, bob has a name property and value set. Lastly in a console log we return the result of calling the details method with the call() method and pass in bob as the parameter. If we did not use the call method here we would get the following result.

console.log(person.details)
'My name is undefined'

So by using call we can use the details method defined on the person object but on our separate bob object. The this refers to what you pass in as a parameter to call. If we console log the value of this inside of the details method we can be sure of this.

const person = {
  details: function() {
    console.log(this)
    //returns ---> {name: 'Bob'}
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

Apply
Apply is very similar to call except that we must pass an array as the second parameter. Let’s start by adding a parameter to our initial example which used call.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob, 12));
//Returns ---> My name is Bob and I am 12 years old.

In the above example we now set a parameter for age in the details method which is used in the template literal. When we use the call method we pass in the value for this argument after we pass in the bob object. If we had used apply we would need to use an array here. This is shown in the example below.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.apply(bob, [12]));
//Returns ---> My name is Bob and I am 12 years old.

If we had not passed in an array when we used apply we would get the following error.

Uncaught TypeError: CreateListFromArrayLike called on non-object
    at <anonymous>:9:28

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

Tutorial: Nested For Loops in JavaScript

Codecupdev — Sat, 24 Sep 2022 13:35:26 +0000

Introduction

I will start by briefly giving an example of a for loop in JavaScript.

const arr = [1, 2, 3, 4, 5, 6];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns --->
1
2
3
4
5
6

In the above example, we start by declaring a variable called arr and assign to this an array that contains the numbers one through to six.
Next, we create a for loop, We initialise a variable called i which acts as the counter for the loop.
Next, we use a condition for when the loop should stop running. In our case, we will keep running the loop whilst i is less than the length of the arr array.
Lastly, for the updater, we say every time the loop runs we should increment i.
Inside the body of the loop, we use a console log to print out the element of the arr array which is at the index of i when the loop runs.

The result of this is that every element in the arr array gets printed out.

Sometimes you may find yourself presented with a more complex data structure such as a nested array. Let’s start by looking at what happens when we use the loop above with this type of data structure.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns ---> 
[1, 2]
[3, 4]
[5, 6]

In the above example we use the same for loop but this time the arr array contains three nested arrays, and each nested array contains two values. When the loop runs we get each of the nested arrays returned. What if we wanted to access the individual elements of the nested arrays? This is where nested for loops become useful.

Nested loops

By using a nested loop we can access the individual elements in the nested arrays. Let’s look at an example of how this would work with the example above.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}
//Returns --->
1
2
3
4
5
6

The result of our nested loop is that we are able to list out each individual element within the nested arrays. Now let’s break down what is going on here. We already know that the outer loop accesses each of the nested arrays. When this happens the inner loop goes through each element in the nested array. So the console log is essentially saying for the array element of i, which is the array containing 1 and 2 using j iterate through these elements. Let’s break this down a bit further. For the first iteration of the loop we get the following:

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2

So the outer loop returns the first nested array which contains the elements 1 and 2. The inner loop then loops through each of the elements of the nested array in turn. Therefore we get 1 and then we get 2.

This process runs for the entire array of nested arrays. Therefore the final output with these console logs is below.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2
I am the outer loop 3,4
I am the inner loop 3
I am the inner loop 4
I am the outer loop 5,6
I am the inner loop 5
I am the inner loop 6

Arrays of Strings

This approach can be equally useful if you have an array of words and you want to loop through each individual letter. Let’s look at an example.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
//Returns --->
Abby
Bobby
Freddy

Using the for loop we iterate through the names array and we can access each element in the names array. This is great but if you want to access the individual elements of the names then a nested loop is a very useful pattern.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(`I am the outer loop ${names[i]}`)
  for(let j = 0; j < names[i].length; j++) {
    console.log(`I am the inner loop ${names[i][j]}`)
  }
}
//Returns --->
I am the outer loop Abby
I am the inner loop A
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Bobby
I am the inner loop B
I am the inner loop o
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Freddy
I am the inner loop r
I am the inner loop e
I am the inner loop d
I am the inner loop d
I am the inner loop y

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

Primitive Data Types in JavaScript

Codecupdev — Wed, 14 Sep 2022 10:06:42 +0000

What is a primitive type?

Data can come in all shapes and sizes. We use the term data type to specify the type of a specific value.

In our everyday language use, we differentiate between letters and numbers and usually, we will use them for different purposes. In programming, it is no different. We call the most basic data types primitives.

The main features of a primitive data type are:

It is not an object (a collection of keys and values)
It does not have its own methods (property of an object which is a function)
It is immutable (it cannot be changed and is read-only).

The primitive data types in JavaScript

The primitive data types in JavaScript are:

Number
Boolean
String
Null
Undefined
Symbol
BigInt Let's briefly take a look at each of these types!

Number

In JavaScript, there is only one type of number and this can be any numerical value with or without decimals. We can use whole numbers, positive numbers and negative numbers. We can also use decimals (also known as floating-point values).

50
//Whole number
1
//Positive number
-1
//Negative number
0.1
//Decimal

Boolean

One of two values true or false (Not wrapped in quotes). A bit like saying yes or no.

true
false

String

The string data type refers to any set of characters wrapped inside single or double-quotes. The following would both be examples of strings:

"I am a string";
'I am a string';

Null

Represents nothing or a nonvalue but often this is intentionally set. You could create a variable and intentionally set the value of the variable to null. For example:
let myEmptyVariable = null;

Undefined

Undefined also represents no value. As opposed to null, variables that are defined with no value or variables which have not been declared (created at all) will be given the value of undefined.

let a;
console.log(a);
// ---> Returns undefined

Undefined is often given to us in the form of an error. Functions will return undefined if no return value is set.

Symbol

Symbols were introduced in the ES6 version of JavaScript. They are unique identifiers that cannot be mutated and can be created using the function Symbol().

const firstSymbol = Symbol();
const secondSymbol = Symbol();
console.log(firstSymbol === secondSymbol);
// ---> Returns false

BigInt

Useful for representing large numerical values, Specifically those over 15 digits long. You can create this by placing n at the end of a literal number. It can also be created by using the BigInt constructor and passing the value into the parameters.

const ourInteger = 1118998854361892n;
const ourSecondInteger = BigInt(1118998854361892);
console.log(ourSecondInteger);
// ---> Returns 1118998854361892n

Please feel free to post any comments, questions or feedback!

What is String.raw() in JavaScript?

Codecupdev — Tue, 30 Aug 2022 11:22:59 +0000

A video of this article is available below:

Introduction

In this article, I will be introducing raw strings in JavaScript.

Sometimes when we work with template literals we use them to convert characters. Let’s clarify this with an example.

console.log(`Monday\nTuesday\nWednesday`);
//Returns --->
Monday
Tuesday
Wednesday

In the above example we console log a template literal or a template string which contains Monday, Tuesday and Wednesday each separated with the newline character. When this runs each of the words is printed on a new line.

String.raw()

JavaScript provides us with the String.raw() tag function which enables us to access the raw string from a template literal. This means we are able to access the string where the escape characters are not processed. Let’s expand on the above example with this.

String.raw`Monday\nTuesday\nWednesday`;
//Returns ---> 'Monday\nTuesday\nWednesday'

In the above example we use the String.raw() method and pass the template literal as the parameter. We get the same string returned without the newline characters processed.

Interpolation

When you use the raw method anything interpolated into the string will be processed. Let’s look at an example of this.


console.log(`Sum: ${4+5}`);
//Returns ---> Sum: 9

In the above example inside of a console log we use string interpolation to sum 4 and 5. We get the string with the sum returned. Now let’s try doing this with the raw method.

String.raw`Sum: ${4+5}`;
//Returns ---> 'Sum: 9'

In the above example we use the raw method and pass in the template literal with the interpolated sum. We get the returned string with the completed sum because anything we pass in to be interpolated does get processed by the method.

Unicode

Another time that the raw string method is useful is if you are using unicode characters.

console.log(`\u2605`);
//Returns ---> ★

In the above example, we use the Unicode character to access a star symbol and this is returned to us. Now let's use the raw method on this template literal.

String.raw`\u2605`;
//Returns ---> '\\u2605'

We go on to use the raw method passing in the Unicode character. Nothing is processed and we get the raw string returned.

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!

JavaScript String Escape Characters?

Codecupdev — Mon, 11 Jul 2022 06:05:11 +0000

Introduction

In JavaScript when we are working with strings sometimes we want to break up the string in some way. We have some escape characters which we can use to help us with this challenge.

\’ Single quote
\” Double quote
\n Newline
\ Backslash

Quotes

When you are working with strings if you want to use a quote within the string you cannot use the same quote marks for the quote inside the string as the ones you wrap the string in. Let’s look at some examples.

const quote = "A famous quote is "I think, therefore I am" "
//Returns ---> Uncaught SyntaxError: Unexpected identifier
const secondQuote = 'A famous quote is 'I think, therefore I am' ';
//Returns ---> Uncaught SyntaxError: Unexpected identifier

In the above example we start by declaring a variable with the identifier quote and assign to this a string enclosed in double quote marks which contains a quote which is also enclosed in double quote marks. Next we create a second variable called secondQuote which repeats the same steps again but this time it uses single quote marks. Both of these return a syntax error. One way around this problem would be to use different quote marks for the quote as is shown in the example below.

const quote = "A famous quote is 'I think, therefore I am' "
const secondQuote = 'A famous quote is "I think, therefore I am" ';

In the above example the string stored inside the variable quote uses single quote marks for the quote and double quote marks for the string. The string for the secondQuote variable uses single quote marks for the string and double quote marks for the quote. Both of these work. Alternatively we could use the escape characters for these as shown in the example below.

const quote = "A famous quote is \"I think, therefore I am\" "
const secondQuote = 'A famous quote is \'I think, therefore I am\' ';

In the above example we use a backslash and the double quote mark at the start and end of the string stored inside the quote variable. We repeat the same steps but we use a backslash and a quote mark for the string stored inside the secondQuote variable.

Another time this is useful is if you wish to use apostrophes within the string.

const phrase = 'You\'ve had eight cookies';
//Returns ---> "You've had eight cookies"

Newline

When you want to break up your string over multiple lines, one option available is to use the newline character. We place this where we want the new line to appear. Let’s look at an example.

"Monday, Tuesday, Wednesday";
//Returns ---> 'Monday, Tuesday, Wednesday'
"Monday,\nTuesday,\nWednesday";
//Returns ---> 
"Monday,
Tuesday,
Wednesday"

Backslash

If you want to use a backslash within your string you need to use two back slash characters. Given we use the backslash when we use an escape character we can’t just use a single backslash in a string. Let’s look at some examples.

"Hello \";
//Returns ---> Uncaught SyntaxError: Invalid or unexpected token
"Hello \\";
//Returns ---> 'Hello \'

Introducing Promises in JavaScript

Codecupdev — Sat, 25 Jun 2022 09:07:41 +0000

If you would like to see a video of this article it is available below.

What is asynchronous?
Usually, when you hear about promises in JavaScript, you also hear the word asynchronous. What is asynchronous? First, we have synchronous which means something which is performed step by step. When you are walking you put one foot in front of the other and you don’t do both at the same time unless you are jumping! Another example is waiting for a kettle to boil before you make a cup of tea. Asynchronous on the other hand means you can do other things in the background without everything stopping and waiting. It’s a bit like saying you might watch some tv whilst you wait for the kettle to boil as opposed to standing and staring at the kettle waiting on it.

JavaScript is what we call a single-threaded language, this means only one thing can happen at once and at one time. Asynchronous JavaScript is the way in which background tasks (such as requests to servers) can happen without everything grinding to a halt due to waiting for a single task to complete. It means that the asynchronous tasks get run outside of the main flow of the program.

Introducing promises
In your day-to-day life, you often promise people something in advance of actually doing it. Perhaps you said, “I promise I will clean the dishes,” or, “I promise I will buy some milk.” This is essentially how promises in JavaScript work. When you use a promise, you are usually writing asynchronous code and you are making a promise or a transaction for something that is going to be done.

Once the promise is done, then the task is either fulfilled or failed. This is like you either fulfilled your promise of buying milk or you forgot so your promise failed.

There are two parts to understand when you are working with promises. Creating the promise and then how to use the promise.

Creating a promise
A promise is a constructor function so you must use the new keyword and a promise becomes Promise when you create one. The promise takes a function as the argument with two parameters: resolve and reject.

Resolve and reject are functions that can be called so they need to be executed with parentheses. Resolve and reject get used to determine what happens when the promise runs. Let’s look at the basic syntax for creating a promise.

const ourPromise = new Promise((resolve, reject) => {
});
console.log(ourPromise);

In the above example, we use const and declare a variable called ourPromise. Initially, this is uninitialised but then we use the keywords new and Promise (promise is a constructor function). We pass in the resolve and reject parameters.

Promise states
There are three states which promises can have. Pending, fulfilled and rejected. The ourPromise we created does not resolve or reject anything so it will remain indefinitely in the pending state. It’s a bit like someone waiting on you to go out and buy your milk.

To complete a promise, we use resolve or reject. Resolve means that the promise succeeds and reject means it fails. Any argument can be passed into resolve and reject but often when we work with promises we are making data requests so it is an object that you would extract some data from.

Resolving and Rejecting
Let’s update our example to show the outcome of resolving and then rejecting the promise.

const ourPromise = new Promise((resolve, reject) => {
  resolve();
});
console.log(ourPromise);

const ourPromise = new Promise((resolve, reject) => {
  reject();
});
console.log(ourPromise);

When we resolve our promise the state becomes fulfilled. When we reject it the state becomes rejected. Now we will also update our example so it better represents a request.

const ourPromise = new Promise((resolve, reject) => {
  let didGetMilk = true;

  if(didGetMilk) {
    resolve("We got the milk");
  } else {
    reject("Ooops we did not get the milk");
  }
});
console.log(ourPromise);
//Returns ---> Promise {<fulfilled>: 'We got the milk'}

In the above example, we create a variable called didGetMilk which can fake a response from a server. We are setting this to true for demonstration purposes. We then use an if/else statement which resolves or rejects the promise with a message based on the value of the didGetMilk variable.

When we run this because didGetMilk is true the promise gets resolved with the message. If we set didGetMilk to false the promise would be rejected as shown in the example below.

const ourPromise = new Promise((resolve, reject) => {
  let didGetMilk = false;

  if(didGetMilk) {
    resolve("We got the milk");
  } else {
    reject("Ooops we did not get the milk");
  }
});
console.log(ourPromise);
//Returns ---> Promise {<rejected>: 'Ooops we did not get the milk'}

Using promises and understanding then
We can use then to run code once the promise has been resolved. Then is a method which will be executed immediately after the promise has been fulfilled.

We can pass a callback to then which has the code which will be run once the promise is fulfilled. Let’s update our example to show this.

const ourPromise = new Promise((resolve, reject) => {
  let didGetMilk = true;

  if(didGetMilk) {
    resolve("We got the milk")
  } else {
    reject("Ooops we did not get the milk");
  }
});
ourPromise.then(res => {
  console.log(res, "RES");
});
console.log(ourPromise);
//Returns ---> 
Promise {<fulfilled>: 'We got the milk'}
We got the milk RES

In the above example, we set didGetMilk back to true so the promise will be resolved. We go on to use the then method on our promise. We set a parameter res for the result and we console log the result of this.

When the promise runs we get the fulfilled status but we also see the res parameter printed. The res gets passed from the argument we give to the resolve method. Let’s change the argument we give to resolve to solidify our understanding of this.

const ourPromise = new Promise((resolve, reject) => {
  let didGetMilk = true;

  if(didGetMilk) {
    resolve({message: "We got the milk"})
  } else {
    reject("Ooops we did not get the milk");
  }
});
ourPromise.then(res => {
  console.log(res.message, "RES");
});
console.log(ourPromise);
//Returns ---> 
Promise {<fulfilled>: 'We got the milk'}
We got the milk RES

In the above example we change the argument we pass to resolve to be an object. The object has a message key with the string as the value. We update the console log of the then callback to print the message from the object.

Catch
When the promise gets rejected we handle this by using catch. It works in a similar way to when we use then for resolving the promise. Catch will be executed immediately after the promise is rejected. Let’s look at an example.

const ourPromise = new Promise((resolve, reject) => {
  let didGetMilk = false;

  if(didGetMilk) {
    resolve({message: "We got the milk"})
  } else {
    reject("Ooops we did not get the milk");
  }
});
ourPromise
.then(res => {
  console.log(res.message, "RES");
})
.catch(error => {
  console.log(error);
})
console.log(ourPromise);
//Returns ---> 
Promise {<rejected>: 'Ooops we did not get the milk'}
Ooops we did not get the milk

This time when the code runs the promise gets rejected so the code in the catch gets run and we get the argument we passed to the call to reject printed to the console.

I hope you enjoyed this article, please feel free to post any comments, questions, or feedback, and follow me for more content!

What are Template Literals in JavaScript

Codecupdev — Sat, 21 May 2022 07:36:20 +0000

What are Template Literals?

In the ES6 version of JavaScript, template literals were introduced. Before ES6 if we had a variable that we wanted to use within our strings we would have to do something like the following example.

function printDrink() {
  var drink = "Tea";
  return "My favourite drink is" + " " + drink;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea

In the above example, we create a function declaration called printDrink. Inside the function, we create a variable called drink. We assign to the variable the string “Tea”. The function returns a string which uses concatenation (the addition symbols) to print out a string and the drink variable. When the function is invoked we get the string returned.

Template literals offer a clean way to interpolate (inject) the variables or expressions into the string as opposed to having to do the concatenation. A template literal is enclosed in back-ticks instead of the usual double or single quote marks. String interpolation describes when variables are injected into a string. The variable you wish to interpolate is wrapped inside curly braces and started with a dollar sign. The variable itself is placed inside the curly braces.

Let’s look at the prior example but this time using a template literal.

function printDrink() {
  var drink = "Tea";
  return `My favourite drink is ${drink}`;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea

In the above example we keep the same function declaration and drink variable. This time we use a template literal. The template literal is enclosed within back ticks and returns the string. Using interpolation the drink variable is injected into the template literal. When the function is invoked we get the same return value.

Multi line strings

Another useful feature of template literals is that we can span our string over multiple lines. Prior to ES6 you would have to either use string concatenation or a new line character (\n) to achieve this. I briefly show an example of this below:

var ourString = "First line\nSecond line\nThird line\n";
console.log(ourString);
//Returns ---> 
First line
Second line
Third line

With template literals we no longer have to worry about this. If we want to create a multi line string we can do so by enclosing the string in back ticks and separating the lines.

let ourString = `First line
Second line 
Third line`;
console.log(ourString);
//Returns ---> 
First line
Second line
Third line

I hope you enjoyed this article! If you would like to watch a video tutorial it is available here.

An Introduction to Logical Operators in JavaScript

Codecupdev — Mon, 09 May 2022 10:56:43 +0000

A video of this article can be found below.

There are three logical operators in JavaScript the AND operator, The OR operator and the NOT operator. Logical operators enable us to make the logic in our code a bit more complex and allow us to check two or more conditions at once.

If we had an application that allowed customers to order groceries, we may have a scenario where a customer wanted to order some bananas. Before we can allow them to go ahead and place the order we need to check we have bananas in stock. Things get a little more complex if we also want to make sure a customer is not ordering all the bananas we have in stock because this could annoy other customers meaning they could not order any. Now we have a situation where when a customer orders some bananas we must check that we have bananas in stock and that the customer is ordering 5 or less bananas. This is the sort of scenario where a logical operator would be handy…

AND

We will start by looking at the AND operator. The AND operator consists of two ampersand symbols and it checks whether two conditions evaluate to true. To be clear when we say a condition this might be whether 2 is greater than one. Going back to the stock example, checking whether the number of bananas in stock greater is than zero is one condition and then whether a customer is ordering less than or equal to 5 bananas is another condition.

When we use the AND operator the possible outcomes are as follows:

If both conditions evaluate to be true the return value will be true.
If none of the conditions evaluate to be true the return value will be false.
If only one condition is false the entire group of conditions will evaluate to false.

Above is an example of using the AND operator where the return value is true, this is the case because 5 is less than 100 AND 10 is less than 100.

So now we will try this again but this time we will set the first expression to a condition that evaluates to true and the second expression to a condition that evaluates to false.

This time we get false as the return value because whilst 5 is less than 100, 1000 is not less than 100, therefore the whole expression does not evaluate to true.

OR

Moving on to the OR operator. The OR operator is made up of two pipe characters (||). Using the or operator we can check whether one of a set of conditions is true.

If one of the conditions is true then the next condition will not even be checked because the OR operator only checks the remaining conditions if the prior conditions were false. In this case, the return value would be true.
If none of the conditions are true then false is the return value.

In the above example, we first check whether 8 is less than 9. This evaluates to true so the second expression does not even need to be checked and we get true as the return value.

Now we try this again and check whether 100 is less than 9 or whether 100 is less than 11. As the first expression here is false we move on and check the second condition, the second condition is also false therefore the return value is false.

NOT

Lastly, we have no operator. The NOT operator (!) reverses or negates the value of a boolean so the NOT operator will return false if the value is true and true if the value is false. The return value of the NOT operator will always be a boolean.

The NOT operator can be used with non-boolean data types but these values will be converted into booleans based on whether the value is truthy or falsy before being negated and you can find a list of the false values on the mdn site here.

In the above example, we initialize a variable passwordIsRequired with the boolean value false. In the console.log we negate this value with the NOT operator. This means that we get true as the return value.

Let's try another example so if we say is 20 less than 30 we will get true. Now if we use the not operator and perform this again we get false because the return value is now negated. The final two examples show what happens if we use the not operator with the boolean values true and false. Again the values get negated so !true returns false and !false returns true.

Please feel free to post any comments, questions or feedback!

Introducing Comparison Operators in JavaScript

Codecupdev — Sun, 01 May 2022 14:55:05 +0000

JavaScript provides us with a set of operators called comparison operators. Comparison operators let us compare values and return a boolean (true or false).

If you would like to watch a video of this post you can view it here:

The first set of these operators we will look at are:

Greater than: Checks if a value is greater than something.
Less than: Checks if a value is less than something.
Greater than or equal: Checks if a value is greater than or it is equal to something.
Less than or equal: Checks if the value is less than or it is equal to something.

If we were making a program that was based on supermarket stock we might encounter a situation where we only want the user to be able to place an order if we had bananas in stock. To do this we would want to check that the number of bananas available was greater than 0, this would be an example of using the greater than operator.
Later we may then want to limit the amount of bananas a customer is able to order in one go to 5 to ensure the order system was fair. In this case, we would want to check that the order count of bananas was less than or equal to 5 and we would use the less than or equal to operator.

We will start with a simple example of using the greater than operator. We will check if one is less than 2 and we get true.

1 < 2
// ---> Returns true

Now we move on and check whether one is greater than two and we get false.

1 > 2
// ---> Returns false

Now let’s do an example with the less than or equal operator. We will check if 5 is less than or it is equal to 5, we get true.

5 <= 5
// ---> Returns true

The next set of comparison operators let us check whether a value is equal to another value and return a boolean based on whether or not this is the case. These operators consist of the following:

Equality operator (sometimes called loose equality)
Inequality operator(sometimes called loose inequality)
Strict equality
Strict inequality

In JavaScript, we have what is called loose equality and also strict equality. When we use the loose equality operator, Javascript performs what is called type coercion.

Type coercion is the automatic conversion of one data type to another data type. So if we wanted to compare the integer zero to a string containing zero the comparison using loose equality would return true. This is because the string zero will be coerced to the integer type and then the comparison performed would be the number 0 compared with number 0. On the other hand, if we performed the same comparison using the strict equality operator the return value would be false because the strict equality operator does not perform any type coercion.
So let’s start by trying out the equality operator. We will compare the integer five with the string 5. As you can see we get true because the string five is coerced to the integer type before the comparison is performed.

5 == '5'
// ---> Returns true

Now let’s try this again but compare the integer 5 to the string 6. These are not equal so we get false.

5 == '6'
// ---> Returns false

If we did this again and use the inequality operator we get true because the inequality operator checks to see that the values are not equal to one another.

6 != '6'
// ---> Returns true

Lastly, we will look at the strict equality operator. We will compare the integer ten to the integer ten. These values are both the same so we get true.

10 === 10
// ---> Returns true

Let’s try changing this a bit and compare the integer ten to the string ten. Now we get false and this is because we are using the strict equality operator and therefore this time the string will not be coerced.

10 === '10'
// ---> Returns false

However, if we check that these values are not equal using the strict inequality operator we will get true because they are not from the same data type.

10 !== '10'
// ---> Returns true

Please feel free to post any comments, questions, or feedback!