Category: Javascript

Understand the what, why and how of Promises in Javascript

What are Promises? Why to use them?

Say you are a celebrity blogger and people are waiting for your next blog. You promise to notify them once the blog is ready. You take their emails and once your blog is done notify them via email.

A promise in Javascript works similarly. If you have an asynchronous operation you can use a promise to let the consumer know about its outcome.

It’s a placeholder for an asynchronous operation outcome. It’s an object which has a state and a value.

let promise = new Promise(function (resolve, reject) {
  // DB call
  if(call was success) {
    resolve(value)
  }
  reject(error)
})

Promise has an executor function with two parameters – resolve and reject. These parameters are predefined by the javascript engine.

Promise object has a state and a result. State can be pending, fulfilled or rejected. Value can be undefined, value or error.

Problem with Promises – a chain of promises makes the code complex.

Gentle introduction to Callbacks in Javascript

What are callbacks and what is a callback hell. In this short video I provide a simple explanation to callbacks.

A Callback is a function that is passed to another function.

Callbacks in Javascript
/*
Three ways to work with asynchronous operations in Javascript
1. Callbacks
2. Promises
3. async / await
*/

/*
Callback is a function that is passed to another function
*/

setTimeout(function () {
  console.log('Done')
}, 3000)

function myFunction(param1, callback) {
  // some operations
  console.log(param1)
  callback()
}

function myCallbackFunction() {
  console.log('Ankur')
}

myFunction(123, myCallbackFunction)

What is ‘this’ in Javascript world?

In this short video tutorial I explain the basics of this keyword in Javascript. It’s a confusing concept for those starting out with Javascript.

-- QUICK INTRODUCTION TO this KEYWORD

-- If a function has a this reference in it, it points to an object. The object it points to depends on how the function was invoked.
-- It does not refer to the function itself.

function simpleFn() {
  console.log(this) // this points to an object
}

simpleFn() // -- window

let myObject = {
  myFunctionTwo: simpleFn,
  name: 'Ankur',
  age: 36
}

myObject.myFunctionTwo()

// strict KEYWORD
// .call(obj2)

What is Lexical Scoping in Javascript

In this short video tutorial I explain what is meant by Lexical Scoping.

Sample code snippet used for explaining.

// Lexical Scope
// Code in one scope can access variables in same scope or any scope outside // of it.

// Global variables
let x = 2

// function with an inner function
function outerFn() {
let y = 9
// can access x, y

function innerFn () {
let z = 44
// can access x,y,z
console.log(x, y, z)
}
}

Introduction to HTML

If you are wondering how to build websites or web applications then this Lecture will be helpful for you.

In this Lecture I will discuss

1. Technologies needed to build Websites or Web Applications
2. Introduction to HTML

Code is available on Github

Technologies needed to build Websites or Web Applications
The basic technologies required to create a website are HTML, CSS and Javascript.
We will explore HTML in this Lecture. CSS and Javascript are topics for coming lectures.

What is HTML?
Hyper Text Markup Language can be used to structure a web page. It is a Markup Language.

HTML Elements
You can use the following elements to build your Page.

  • Paragraph
  • Headings
  • Images
  • Lists

Learn about Conditional Statements in Javascript

In this Lecture we will discuss about conditional statements in javascript

  • if – else statement
  • switch statement
  • ternary operator

The code examples below are also available on Github

if…else

Syntax

if (condition) {
// code
} else {
// code
}

else if
To add more else conditions you can use else if clause

if (1<x<2) {

} else if (2<x<3) {

} else {

}

We can use conditional operators like <, >, <= etc.

if(x == ‘A’) {

}

From the documentation

Any value that is not false, undefined, null, 0, NaN, or an empty string (”) actually returns true when tested as a conditional statement, therefore you can simply use a variable name on its own to test whether it is true, or even that it exists (that is, it is not undefined.)

 

if (data) {
console.log(data);
}

Switch Case
If-else is good when we have few conditions to take care of. What if we want to add more conditions. Let us look at an example

let day = ‘Monday’
switch(day) {
case ‘Monday’:
console.log(‘Today is Monday’)
break;
case ‘Tuesday’:
console.log(‘Today is Tuesday’)
break;
case ‘Wednesday’:
console.log(‘Today is Wednesday’)
break;
default:
console.log(‘No Match’)
}

This example demonstrates how to use switch statements.

Ternary Operator
It’s a convenient way to write if-else in a compact manner.

Instead of writing

let x = 8

 

if(x>2) {
// print 3
} else {
// print 5
}

we can write

let x = 8
(x > 2) ? 3 : 5

Learn about some useful methods in Javascript Arrays

In this tutorial we will explore some methods which will help you to do certain operations on Javascript Arrays.

The code for this lecture is available on Github

Consider this string

let fruits = 'Mango, Peach, Banana';

What if we want to separate out the fruits from this String i.e. get an array of fruits.

To do this we can use the split() method.

split()
In order to use split() we need to pass the character which needs to be used to perform the split.

let fruitArray = fruits.split(',');
fruitArray // ['Mango', 'Peach', 'Banana']
fruitArray[0] // Mango

To combine all the array elements back, so that we can get a String, we can use the join() method.

join()

fruitArray.join('-') // 'Mango-Peach-Banana'

Alternatively we can use the toString() method.

How to add and remove elements to or from an Array?

To add or remove an element at the end of the Array you can use push() and pop()

push()
push() lets us add an element to the end of the Array.

fruitArray.push('Orange')

pop()
pop() lets us remove an element from the end of the Array.

fruitArray.pop()

Similarly, to add or remove an element at the start of the Array you can use unshift() and shift()

Arrays in Javascript – The Basics

What are Arrays ?

Arrays can be used to store a list of data items. Like a list of numbers or objects.

let ageList = [15, 17, 25, 16, 14]

So if we do not use arrays then we need to declare separate variables for all the ages. Imagine if we had 100 people. Declaring 100 variables will be very inefficient.

Each element in an array is stored at an index. Indexes start from 0.

Index : 0 1 2 3 4
Value : 15 17 25 16 14

How to access elements in an array ?

It is easy to access the elements stored in the array using index.

Like if we want to get element stored at the 3rd location we can use

ageList[3]

Similarly we can assign new value to an index

ageList[3] = 32

How to find number of items in the array ?

To find the length of array or number of items in the array we can use the length property.

ageList.length