DEV Community: ELEZUA VICTOR

JavaScript Series.

ELEZUA VICTOR — Tue, 05 Jan 2021 21:08:06 +0000

What is JavaScript?

Mozilla Developer Network, MDN defined JavaScript as

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which are HTML and CSS.

So, basically JavaScript is used to make a web page become alive.

JavaScript was created in 1995 at Netscape by Brendan Eich. Netscape was a company that developed Netscape Navigator browser which was dominant browser before the browser war which included Microsoft's Internet Explorer.
Netscape created the Mozilla organization which developed the browser known as Firefox today.

Although initially, JavaScript was built to run on the browser and power web pages but currently JavaScript can run almost anywhere.

JavaScript Variables and Datatypes

When writing computer programs we need to be explicit about what we want to do. Telling a computer to do something is like telling it how to do it. I can tell a human to prepare noodles for me and he/she will do so. But I can't just tell a computer to prepare noodles for me. I need to tell it how to actually prepare the noodles. Telling a computer to prepare a noodle pack will look like this.

get a pack of noodle from the grocery store.
tear open the pack of noodle.
get the noodle out.
heat some water.
put the noodle in the boiling water.
add the seasoning and chili, then stir.
after 2 mins bring it down the pot of noodles.

Although being explicit can be time consuming, but it affords us the flexibility to be super specific. The program that cooks this noodle would most likely produce the same result every time unlike a human whose noodle will taste differently every single time.

This section of this article is talking about Variables and datatypes, so why all these stories? From the above step by step approach to prepare noodles we can pick out some nouns such as noodle, pot, water, seasoning, chili, grocery store.
In a program a noun can be represented as a variable and also the state of the noun, like the noodle can be in one of three states - raw, being cooked, cooked.
The reason we need to represent those nouns and states as variables is because we will need to refer to them at different points of our program in order to carry out an operation and execute the next step.

Different data have different types, and their types determine the kind of operations that can be carried out on them.
A person's name can be represented as a string(which means a string of characters). You can think of a string as plain text.
A person's age can be represented as a number, And whether a person is up to voting age can be represented as a boolean(true or false).

JavaScript has several data types which can be split into two broad categories.

Primitive types

Number
Boolean
String
BigInt
Symbol
null
undefined

Reference/Structural types

Object
Function

Primitive types represent simple basic data types that can represent simple pieces of information.

So now we have a little idea of what variables and data types are. But how do we define a variable in JavaScript.

var variableIdentifier = VariableValue;
var name = "Victor";
var age;
age = 16;

let isProgrammer = false;

const PI = 3.14;

So, basically we use var, let and const keywords to define variables in JavaScript code. But there are rules while naming a variable.

A variable identifier must not start with a number. e.g 123name, 9mobile.
A variable identifier must not be any JavaScript reserved keywords, such as let, if, new.
A variable identifier must start with a letter, dollar sign($) or underscore(_). A variable name should be short and descriptive as possible. By convention, variable identifiers should be in camel case. Camel case starts with small letters and start any other word in capital letter e.g myName, age, isOfAge.

What is the difference between var, let and const?

The difference between let and var can be confusing but we'll cover it in depth later in this series.
let behaves in a predictable way that is similar to other programming languages than var. So it's advisable to use let unless you really understand the caveat associated with using var.

While let and var allows you to declare variables, const enables you to declare a constant.
A constant is a value that can't change in a program. When you know the value of a variable shouldn't change, then declaring a constant can be a good thing in order to make sure the value can't be mutated. This allows us to have a predictable program with less chances of bugs caused by mutation of a value that shouldn't be mutated.

Let's look at each data type one by one.

Number

A number type is used to hold numeric values that represent pieces of information such as age, account balance, CGPA.
Number can be used to both integers and floating point numbers.

let age = 16;
let accountBalance = 1_000_000; // large number can be formatted like this
let CGPA = 4.95;

Note:

// means single line comment in JavaScript.
/* means
multi
line
comment
*/
Anything preceded by double slash is seen as a comment and ignored by JavaScript interpreter.
Anything in between /* and */ is seen as multi line comment and also ignored by JavaScript interpreter.

Boolean

Boolean type is used to represent a true or false value.
In our programs we need to ascertain if a certain condition is true or false in order to make decision. That's where booleans play a vital role.

let isRich = false;
let isSmart = true;
let isLearning = true;

String

String is a data type that we can be used to represent textual values, stuff like name, WhatsApp message or Facebook post.

/* String must be written within quotation marks or back ticks */
const name = "Victor"; // double quotation marks;
let department = "Biochemistry";
let bestLanguage = 'JavaScript'; // single quotation marks
let topic = `Data types`; // back ticks

BigInt

BigInt is a numeric datatype, but it differs from the number type in some ways. BigInt hold values with greater precision, values that are very big(above 2⁵³ - 1).
A limitation to this type is that it doesn't work with floating point values. When declaring a BigInt literal, we append an "n" to the number.

let astronomicalValue = 400_000_000_000_000_000_000_000_000n;

Symbol

Symbol is a primitive type that guarantees a new and unique every time it's created.

let sym1 = Symbol();
let sym2 = Symbol('id');

We'll Discuss more about the symbol type in an article covering Object Oriented Programming.

Null

null is the only value of it's type. It represents an empty value.

Undefined

undefined is also the only value of it's type. It represents no value at all.

Undefined vs Null

These two might seem alike but there are subtle differences.
When a variable is set to null, it means that the variable contains a value representing nothing. While undefined means that the variable contains nothing, not even the placeholder value, null.

So, let's look at our structured/reference types.

Object

An object in JavaScript can be thought of as a data type which can represent real world objects in code. Things like Arrays, Date, window, document are objects. Objects have properties and methods(functions).

/*since window object is already available to us in the browser, we can access one of it's properties*/
let currentUrl = window.location.href;
console.log(currentUrl);

let date = new Date();
let fullYear = date.getFullYear(); // calling the getFullYear method of date object.
console.log(fullYear);

let person = new Person();
person.name // accessing the name property of person

To create a new instance of an object we use the new keyword.

Function

Functions are a way to group pieces of code that does a particular task together, and can be called later.

function logCurrentUrl() {
    let url = window.location.href;
    console.log(url);
}
logCurrentUrl(); // calling the function

Objects and Functions are referred to as structural/reference types because they have an internal state or structure. We'll learn more about objects in OOP section.

Operators

JavaScript operators enable us to write and evaluate expressions. We will cover several categories of operators.
JavaScript has unary, binary and ternary operators which acts on one, two and three operands respectively.

Assignment operators.
Comparison operators.
Arithmetic operators.
Logical operators.
Conditional operators.

Arithmetic Operators

+ is known as addition operator. It is used to add two numbers together.

let sum = 10 + 5;
console.log(sum) // outputs 15

This addition operator can also be used on strings. When used on strings, the two strings are concatenated together as one larger string.

let firstName = "Victor";
let lastName = "Elezua";
let fullName = firstName + lastName;
console.log(fullName); // outputs VictorElezua

NB: When using + operator. JavaScript does implicit type conversion. When adding a string and a number, JavaScript converts the number to a string and concatenates both. If JavaScript encounters booleans, it converts true to 1 and false to 0. + is the only arithmetic operator that works on operand of string type.

let hiFive = "Hi" + 5; // results to Hi5
let truth = true + true; // results to 2
let nullPlus = null + null // results to 0
let undefinedPlus = undefined + undefined // results to NaN
let hiNull = "Hi" + null // results to Hinull

You can test these out in your browser console to see what you'll get.

- unlike the addition operator, subtraction operator doesn't work with operands of string type. This operator is used to, as you already know, subtract one number from another.

let yearOfBirth = 1995;
let currentYear = 2020;
let age = currentYear - yearOfBirth;
console.log(age); // outputs 25

/ is division operator. It is used to divide one number by another number.

const PI = 22/7;
console.log(PI);

* is multiplication operator. It is used to multiply two numbers.

let totalNumberOfColors = 256 * 256 * 256;
console.log(totalNumberOfColors); // outputs 16777216

** is the exponentiation operator. It's used to raise a number to the power of another number.

let age = 4 ** 2;
console.log(age); // outputs 16

% is the modulus operator. It's used to get the remainder of a division.

let remainder = 11 % 2;
console.log(remainder); // outputs 1

++ is called increment operator. This operator can be prefixed or post-fixed to a number variable in order to increment by one. There is a subtle difference ++n and n++.

let x = 0;
console.log(++x); // outputs 1
console.log(x); // outputs 1

let y = 0;
console.log(y++); // outputs 0
console.log(y); // outputs 1

The prefixed increment operator increments the variable and then returns the new value. While the post-fixed increment operator return the current value, then increments the variable.

-- is called the decrement operator. It decrements the value of a variable by one. It's used in a similar manner as the increment operator.

Assignment Operators

= is the assignment operator. It is used to assign an operand at the right side to a variable at the left side.

let x;
console.log(x); // outputs undefined
x = 5;
console.log(x); // outputs 5

+= is the addition assignment operator. It is a shorthand syntax for adding the value of both operands and assigning the result to the variable at the left side.

let age = 17;
age += 1; // similar to age = age + 1;
console.log(age); // outputs 18

-= is the subtraction assignment operator. It is a shorthand syntax for subtracting the value of the operand at the right side from the value of the operand from the left side, and assigning the result to the variable at the left side.

let age = 17;
age -= 1; // similar to age = age - 1;
console.log(age); // outputs 16

Other binary arithmetic,and some logical operator can be used as the above.

Comparison Operators

A comparison operator compares it's operands and returns a boolean value.

== is known as equality operator. It returns true if both operands are equal, else false. This operator tries to coerce the types of the operands into compatible before checking for equality.

const adultAge = 18;
let age = 18;
let isOfAge = age == adultAge;
console.log(isOfAge); // outputs true

coerces types before comparison
console.log("20" == 20); // outputs true

// type coercion before comparison
console.log("" == 0); // outputs true

!= is the inequality operator. It returns true if operands are not equal to each other, else false. This operator also coerces types just like == operator. It's just the exact opposite of ==.

console.log("vic" != "vic"); // outputs false
console.log(20 != 18); // outputs true

=== is known as strict equality operator. This operator doesn't coerce types. It first checks the type before comparing equality between the operands. If the types are not the same it returns false.

console.log("20" === 20); // outputs false
console.log(20 === 20); // outputs true

!== is known as strict inequality operator. This operator is the exact opposite of ===. It returns true if the type of the values are same and the values are unequal.

console.log(20 !== 23); // outputs true
console.log(20 !== "20"); // outputs true

< is less than operator. It checks if the value on the left side is lesser than the value on the right side. When comparing strings, strings are compared based on their alphabetical or lexicographic ordering. Basically, if a word come before another word in the dictionary, then it is less than the latter. This comparison coerces types.

console.log("vic" < "victor"); // outputs true
console.log(99 < 100); // outputs true
console.log(90 < 49); // outputs false
console.log(false < true); // outputs true
console.log(1 < ""); // outputs false

> is called the greater than operator. This is used to check if the operand at the left side is greater than that at the right side. It is the exact opposite of < operator.

console.log(5.0 > 4.5); // outputs true
console.log(true > 0); // outputs true

<= is less than or equal to operator. This operator check if the operand at the left side is less than or equal to the operand on the right side.

console.log(10 <= 19); // outputs true
console.log(10 <= "10"); // outputs true
console.log(20 <= 9); // outputs false

>= is the greater than or equal to operator. This operator is the exact opposite of <= operator. It checks if the operand at the left side is greater than or equal to the operand at the right side.

Logical Operators

These operator are typically used with boolean values. When used with boolean values, usually they return a boolean result.

&& is called Logical AND operator. This operator returns true when both boolean operands are true. This operator is not strictly used with only boolean operands. This operator functions in a rather surprising manner. If the left side operand is truthy, this operator then goes on to check the truthiness of the operand at the right side. Anytime a falsy value is encountered, it returns it, else it returns the truthy value at the right side. In short, this operator looks for a falsy value to return, if none, it returns the truthy value at the right side.

console.log(true && true); // outputs true
console.log(true && false); // outputs false
console.log(false && true); // outputs false
console.log(false && false); // outputs false
console.log(null && true); // outputs null
console.log(null && undefined); // null
console.log(undefined && null); // undefined
console.log(0 && true); // 0

Truthiness is a concept in JavaScript which allows the evaluation of non-boolean expressions/values in a boolean context.
false, 0, "", null and undefined are all falsy values. Any other value aside from the aforementioned ones are truthy.

|| is the logical OR operator. This operator is typically used with boolean operands. It returns true when at least one of it's boolean operands is true. This operator also works with non-boolean operands. Basically, this operator looks for a falsy value to return, if none, returns the truthy value at the right side.

console.log(true || true); // outputs true
console.log(true || false); // outputs true
console.log(false || false); // outputs false
console.log(false || true); // outputs true
console.log("" || 1); // outputs 1
console.log(null || true); // outputs true
console.log(false || null); // outputs null

! is called logical NOT operator. This operator coerces the type of the operand into a boolean value then negates and return the value.

console.log(!true); // outputs false
console.log(!false); // outputs true
console.log(!0); // outputs true
console.log(!null); // outputs true
console.log(!""); // outputs true
console.log(!undefined); // outputs true
console.log(!"Hello"); // outputs false
console.log(!20); // outputs false

Conditional Operator

Also known as ternary operator - it takes three operands. The first operand is an expression which should resolve to a boolean value, the second operand is the expression to be evaluated and returned to be if the first operand resolves to a truthy value. The third operand is an expression to be evaluated and returned if the value of the first operand is falsy.

var age = 20;

var result = age > 18 ? "You can vote" : "Naaa, you can't vote";
console.log(result) // you can't vote

// similar to

if (age > 18) {
    result = "You can vote"
} else {
    result = "Naaa, you can't vote"
}

JavaScript has a lot more operators, but those covered above are frequently used operators. To learn more about JavaScript operators check out MDN.

Introduction to Using Async/Await in Python

ELEZUA VICTOR — Sun, 26 Apr 2020 23:59:11 +0000

You probably might have heard about Async/Await keywords in other languages such as JavaScript or Dart, and how we use them for asynchronous programming. In this article we'll see how to utilize them and write asynchronous program.

What is Asynchronous Programming?

Computer programs are typically synchronously on a single thread, this implies that that one task must complete before another task runs. This can be fine in small programs that doesn't do any form of I/O.

Asynchronous programming has to do with writing programs that executes multiple tasks concurrently in order not to leave the CPU idle.

Why write Asynchronous code?

Let's assume that we write a program that fetches data from a web service, the program fetches a list of users and a list of latest posts.

def fetch_posts():
    result = request('url')
    display(result)

def fetch_users():
    result = request('url')
    display(result) 

def main():
    fetch_posts()
    fetch_users()

main()

In the pseudo-code above, the code runs synchronously. Network requests usually take time to get a response, while the program is waiting a response the CPU lies idle. Let's assume a network request takes 2 secs to resolve it means that the above program will take a little above four seconds to resolve. But if we write the program asynchronously we can run the two tasks(fetch_posts() and fetch_users()) concurrently.

Lets see an example that emulates a synchronous approach and another example that take an asynchronous approach.

Synchronous approach

If you run the above program it takes a little over three seconds to complete, that is because the fetch_users() function waits for the fetch_posts() function to complete before it starts running.

Let's look at an asynchronous way of writing the same program.

The program above runs in approximately 2 secs as opposed to the 3 secs which the synchronous approach takes. In this case the difference seems small but when working on real world applications, the difference can be huge.

So, we all know how to write synchronous programs, lets see the APIs that enable us write asynchronous code in python.

Writing Asynchronous code in python

Event Loop

In order for us to write asynchronous code, we need an event loop.

An event loop is a programming construct that waits for and dispatches events or messages in a program. The event loop is basically what executes each task in a single threaded application. The event loop can be found in the asyncio package.

Coroutines

You also need a coroutine. What is a coroutine? A coroutine in python a function or method that can pause it's execution and resume at a later point. Any task that needs to be run asynchronously needs to be a coroutine. You define a coroutine with async def. Coroutines are awaitable and can not be executed by simply calling the function. Prior to Python 3.5 the async keyword was not available in python, coroutines were created as a generator functions decorated with @asyncio.coroutine. You can read more about them here.

Let's see how they all work together.

One on the rules of writing asynchronous code is that coroutines can not contain blocking code. time.sleep(secs) is a blocking code. Using time.sleep(secs) in our asynchronous example will make it run synchronously. asyncio.sleep(secs) is not a blocking code. asyncio.sleep(secs) represents an asynchronous task that can be awaited. Trying to await a non-awaitable task results to en exception.
One common mistake people new to writing asynchronous in python make is forgetting to await coroutines and other awaitables.

As someone who has written a fair amount of JavaScript, I expected functions marked with async to behave exactly as the one in JavaScript.

Some differences between JavaScript and Python Async Functions.

JavaScript async functions run on a seperate thread and returns to the main
thread on completion but Python async functions run a single thread and only
switch to another coroutine when an asynchronous I/O operation is encountered.

Consider this program.

In this program I made the event loop switch to another coroutine after every 1000 count. When you run the program, you'll notice that the second coroutine finishes before the first. All coroutine should be awaiting something in order for your code to be asynchronous. Remember everything runs on a single thread, so it's your responsibility to manage it. You can play with the repl to get used to async/await and asyncio.

Here is the same program written using different asyncio API.

From the code above you can see that i didn't call asyncio.get_event_loop(), this is because asyncio.run() is equivalent to loop = asyncio.get_event_loop() and loop.run_until_complete.
One of the benefits of using asyncio.gather() over asyncio.wait() is the ease of getting return values of the coroutines. asyncio.gather() when awaited returns a list containing all return values.

Check out this Stackoverflow question If you want to know how to get back your return value from your coroutines.

Check this out for a summary of commonly used asyncio APIs.
asyncio documentation.

Thanks for reading and I hope you enjoyed the article.