DEV Community: Kartik Malik

Cross compiling code between different js versions

Kartik Malik — Sun, 03 Mar 2019 14:02:17 +0000

The technologies we use keep evolving every day, with every update it makes our life easier. Although the updates have lots and lots of advantages keeping up with them can be exhausting at times. In this post, let's look at things you can do to keep your JavaScript code up to date with the latest features, don't worry about shipping to different versions.

With every new version of ECMAScript new features, get introduced into Javascript. That's great as development becomes easier and fun.
But to support these new features you need to upgrade node version if you are using node, users need to upgrade their browsers to the latest version in case your JavaScript runs inside the browser. Due to these factors, I have seen the following issues in a few JavaScript projects.

Node version is upgraded but no new features are used as support for older versions is required.
Node version is almost never upgraded. You might think that these are not such huge problems for you and you can live with it, but let me tell you that's not the case. If we don't use the full potential of the language we are delaying the inevitable, after few years code will become crippled with old features and a lot harder to upgrade. At this point, you won't even feel like upgrading any the cycle continues with every version that is released.

How to deal with this?

Well, the thing is to use a proper build pipeline. That is where Babel comes in. Using babel you can use the latest features of the language yet not worry about supporting older versions, babel will take care of it for you.
You can go to the Babel's website and take a look at the site.
You can type in the code that uses the latest features, and it will show you how the code will look after compilation. The documentation is nice and detailed too. It allows you to specify a config file in which you can define what features you want to support, the version of the language you are targeting the build. You can get builds for different versions by changing the target version. Using babel's config file you can customize your build process.

Using bundlers

Bundlers bundle all your code files into single file, process them (minify, uglify). Parcel is a bundler that comes with Babel out of the box, you can start using new features without having to deal with babel config file (you can add one if you want though). Install parcel, serve files with parcel and you are done. I prefer this approach as most of the times I want to serve only the dist file.

I hope you implement these tools in your code base. It will take a bit of time but you will be happy down the line. Stay tuned for more content, do share if you found it informative.

Cover Photo by Jose Soriano on Unsplash

Tools for writing better code

Kartik Malik — Sun, 03 Feb 2019 06:15:48 +0000

In this post, I will list down few tools that I use personally which have improved my coding skills and development experience. These tools are easy to set up and learn and will help you in the long run.

Git

Git allows you to version control your code, you can easily go back to your code which you wrote months ago just using a few clicks. Learning git has saved me huge amounts of time. You don't have to maintain separate copies of your code. Just create a branch when working on a new feature, previously i used to create a copy of my code if I wanted to try something. Also with online repository hosting like Github, you can have a copy of your code which you can then download on another machine. This also helps a lot when multiple people are working on the same project, changes will be merged automatically if there are no conflicts. Github even has a nice collection of posts and tutorials.

VS Code

VS code is nice looking, does not get in your way when you are coding yet provides all the features that you might need. It has a feature called Intellisense where it will suggest autocomplete options for variables and functions. If you hover over built-in methods you can see what arguments it requires, documentation at times which saves me a trip to the browser. Also if you have a hard time remembering too many shortcuts at once then it has got you covered, just remember one shortcut. Command palette, it is a searchable list of all the options you can perform. Once you find the action you were looking for just hit enter and you are done. On top of these features, it has great git support. It will help you resolve conflicts with ease. VS code also comes with a great number of extensions to help you code.

I will list a few of my favourite ones here.

Auto close tag & Auto rename tag: Things that help when writing HTML.
Bracket Pair Colorizer: Different color coding for each nested bracket, you can easily spot where a bracket is closed
Better comments: You can have Todo, Info comments with different colors so that you can spot them easily.
Debugger for Chrome: Allows you to debug client side JS using VS code.
Git History & GitLens: Extra Git superpowers inside VS code.
Live server: Serves the files you are working on, you can view the app in the browser, refreshes as you make changes in code.

Linters

Linters allow you to enforce coding guidelines throughout your codebase. This way if you will improve your coding skills, if a new person starts working on the same project there won't be multiple code styles throughout the project. For Javascript take a look at ESLint, there are many rules which you can enforce on your codebase.

Prettier

A neat looking code is not less than work of art. A clean looking code does not only look good to the eyes but will help you debug it quickly.
Formatting your code manually can be a bit irritating though, Prettier comes to the rescue. You can either install the prettier plugin for your ide or run the node package and it will format the code. If you are working on a project with many people this works even great as the styling will remain the same even after someone has changed the code. It allows you to have your own config file just in case you don't like the default rules.

Git hooks

Wouldn't it be nice if you could format your code or run the tests before you commit, push anything? It will save you time and effort wouldn't it?
You could run linter on your code and if it fails the changes would not be committed. Well, git hooks let you do exactly the same. Check out this site to learn more. If you are using node you can use this awesome package: husky. Just add what you want to do before commit, push in pacakge.json and let husky handle the rest for you.

Nodemon

If you were developing API using Node you would often have to restart the node process manually once you make changes. This is frustrating when you are coding, with nodemon you won't face this issue. Just run the script using nodemon and it will restart once you make any changes to the script or files in the same folder.

What is ECMAScript? What are its new features?

Kartik Malik — Sun, 13 Jan 2019 08:28:15 +0000

According to Wikipedia, "ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations."

The committee that standardizes ECMAScript is called TC39. Its members are major browser vendors, other companies. You can read more about TC39 and how it works here.These specifications lay the foundation of the Javascript language and its evolution. It is important to note that Javascript has extra features which are not part of the specification. The good thing about the specifications is that it brings new features to the language which improves the developer experience.

The different versions of ECMAScript are named as ES# (ES1, ES2, ES3, ES5 ....) or by the year in which they were added ES2016. We also have something called as ESNext, these are the features which are not currently finalized and added to the specification. You can read more about naming and history of ECMAScript from this Wikipedia article.

New features that were released

ES5

This version released array methods.map(), .reduce(), .filter() .., along with new JSON, string, date functions. Check the full list here.

ES6

This version had a lot of useful features lets go through a few of them in detail,

let and const

Using these keywords now you could create block-scoped variables.
Using const you could create block scoped constants.

Template strings

What do you do when you want to display a message which consists of two different things? That's simple you use a + operator and concatenate them.

  'Hello there, ' + username + ' welcome to our app.'

The problem with this is ad the number of variables increases the syntax becomes too large, repetitive and difficult to read.
Template strings allow you to form a string using the back-tick character. You put the string inside back-ticks, and use ${} to insert values of a variable in the string. The above string would become this

  `Hello there, ${username} welcome to our app.`

Destructuring

With destructuring, you can extract certain properties from an object and create variables with their values. This reduced the amount of code you write and made it more readable.

  //before
  let name = user.name
  let age = user.age
  //now
  let { name, age } = user

Here you could extract and create variables directly.

Promises
Promises made the async world a bit simpler, saving us from undefined result issue, and the callback hell.
Import / Export statements
Previously you had to use module.exports to export and require() to require modules.
Now you can export anything from a file using the export keyword and import a module to your file using the import keyword.

I have not covered all the features here as the list is quite big, you can go through this article to get to know all of them in detail.

ES7

This version brought two cool things

Array.includes() method.

Before this to check if an element exists in an array or not you hade to use
Array.indexOf(element), it returned -1 that means the element was not part of the array else it was. With .include() you can skip this extra check. IT will return a boolean value, true if elements exist false otherwise.

Exponential operator

'**' is the exponential operator. Now you don't need to use Math.pow() you can use this operator directly.

  console.log(2 ** 3)
  Output: 8

ES8

This version brought many features to Object, String types. You can read all about them here.
The feature that I loved the most was async/ await. Made async programming even simpler.

New features of 2018

The features that I liked the most were rest and spread regex capture groups. Check the full list here.

Woah that was a lot to take in, right? All of these are cool and all but,
You might be wondering how to keep track of this? You can do this simply by following some blogs, newsletters.

2ality, an awesome JS blog.
JS weekly , you will get great JS articles, news that were published.
Dev cominity, use the Javascript tag and you will see awesome things people have written about new features, techniques and whatnot.
FreeCodeCamp publication on medium.

By following these things and being regular you will be able to level up your skills.

If you like this post, do share it. Also, check out my other posts where we have discussed a few of the above features in detail.

Async operations in JavaScript

Kartik Malik — Sun, 06 Jan 2019 01:48:28 +0000

Synchronous tasks/programs are the ones in which each instruction is executed step by step, each blocking the processor until it completes execution. Asynchronous on the other hand does not block the processor but execute the tasks in parallel or use a mechanism that makes it look like they work in parallel. To achieve parallelism most programming languages use the concept of threads. The main thread spawns other threads to do some work so that the main program is not blocked.

JavaScript is a synchronous language, it is single threaded. Javascript takes on parallelism with the help of something called event loop. The workings of the event loop are amazing but out of the scope of this post. I would recommend you to watch this talk by Philip Roberts. He explains it in-depth and in a fun way. In simple terms event loop makes it look like different tasks in our program are executing in parallel but that's not the case. Asynchronous code looks different and behaves differently then synchronous one. If you are not careful then you might face issues such as undefined being used rather than the actual value of the async operations.

Why not just go Synchronous?

Well if we just went with Synchronous operations then our programs, UI would be unresponsive during the operation. Imagine if you could not interact with the page each time it made an API call, all the websites would feel laggy and you would get irritated. If your program was dealing with some CPU heavy task other tasks also would have to wait. This would not be a good world to live in.
Input-output operations, Network calls are few examples of async operations.

Dealing with async operations

There are different mechanisms that help you deal with async operations lets get into them.

Callbacks

A callback is a function that will be executed when an async operation is completed. You pass the callback to the async operation and it calls the function when it's done executing.
Let's take an example of reading from a file. To do this we will use the fs module from Nodejs.

const fs = require('fs') // syntax to load a module
fs.readFile('/file-path', (err, data) => {
  if (err) console.log(err)
  console.log(data)
})

A thing to note about callbacks for most of the operations is their function signature. The convention is that the first argument will be an error object if some error occurred null/undefined otherwise, and the second will be the result of the operation.

Although callback helped us dealing with async operations it created another problem for us, the callback hell.

Callback hell

Consider this situation, you have file1 that has the name of the file2 that you want to read data from. Well, this exact scenario with files is strange but this happens commonly when dealing with API calls when you need to call the second API based on the result of the first one.

const fs = require('fs') // syntax to load a module
fs.readFile('/file1', 'utf8', (err, file2) => {
  if (err) console.log(err)
  fs.readFile(`${file2}`, (err2, data) => {
    if (err) console.log(err2)
    console.log(data)
  })
})

You have callback inside another callback if you had to do another operation add more callback and so on. The code becomes difficult to look at, debug. As your codebase grows this will lead to bugs, maintenance issues.

Promises

Promises are alternatives to a callback, to use this you need a function that returns a promise object. A promise can either resolve (be successful) or reject (some error occurred), pending: still executing.

This makes the syntax much simpler

readFile('file-path')
  .then(res => {})
  .catch(err => {})

.then() and .catch() also return a promise so you can have another async operation inside of your then without having to go through callback hell.

The .catch() block helps you handle any error that occurs in the .then() chain.

There are few operations that still don't support promises, as of this writing the fs module does not support promises, to solve this you would rather write a wrapper around this, use fs-extra npm package or if you are using node 8 and above use util.promisify() method.

const util = require('util')
const fs = require('fs')

const readFile = util.promisify(fs.readFile)

readFile('./test.txt', 'utf8')
  .then(res => {
    console.log('File data ', res)
  })
  .catch(err => {
    console.log(err)
  })

Async/ Await

While promises made our life easy async await has made it even easier. This is a different syntax internally async-await uses promises, generators.
The syntax is so clean that an async piece of code looks synchronous. This is amazing as debugging becomes simpler. There are two steps when using this, use the async keyword before a function that is asynchronous, use the await keyword to wait for the async function to return data. You can use the await keyword only inside an async function.

async function getData() {
  let data = await readFile("./test.txt", "utf8");
  console.log(data);
}
getData();

Error handling in Async / Await

Since Async await are just promises you can just chain a catch block after the async operation, just like with normal promises. If you are not a fan of this you can also use a traditional try-catch block.

If you are starting with node I hope this article helps, in the future article we will take a look at how much asynchronous code helps when dealing with API calls. If you are facing issues with the result of asynchronous operations do check how you have handled them.

Do share the post if you liked it.

Cover Photo by Héctor J. Rivas on Unsplash

Object Oriented programming in JS

Kartik Malik — Sun, 30 Dec 2018 13:44:25 +0000

In Object orientated programming you group data and methods into a single entity called class and create different instances of the class called objects. These objects will have different data. Inheritance is another OOP feature, it allows us to reuse code by creating parent and child classes. Parent class has code which is common to all the children. Children are a specialization of the parent.

Javascript's inheritance model

JavaScript follows a prototype bases inheritance model. The prototype is a property that a JS engine will add to the function. This prototype object intern has constructor property by default. To check the properties available on the prototype you can use Object.getOwnPropertyNames(functionName.prototype)
to check what properties exist on a prototype.

Creating a class and its instance

Let's first take a look at how you create a specific class object in JS.
To create an object you need to make use of a constructor function. You can use constructor function to get objects of the specific type. You must have already seen new keyword used in new Array(), new Date().
In the following case, we are creating a constructor function for Transport type. The convention is to name your constructor function as you would name class.

function Transport(mode, travelSpeed, ticketCost) {
  this.mode = mode
  this.travelSpeed = travelSpeed
  this.ticketCost = ticketCost
}

let bus = new Transport('Road', 'Slow', 'Cheap')
console.log(bus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap" }

So here we created a constructor function, that creates an object of type Transport.

To check if an object is an instance of a class using the 'instance of' operator.

bus instanceof Transport
// Output: true

You can also check the properties on the protype object.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor" ]

Adding mehods to the class

When working with classes we should methods on the prototype, since this way we can change the method on the prototype and will reflect in all the instances.

Transport.prototype.showInfo = function() {
  console.log(this.mode, this.travelSpeed, this.ticketCost)
}
bus.showInfo()
// Output: Road Slow Cheap

If you check the prototype property of transport now you will see the method that we just added.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor", "showInfo" ]

Creating a child class

Now let's create a separate type of class for Bus, as this object which will have properties which are not required not common to the Transport class.

function Bus(mode, travelSpeed, ticketCost, busType) {
  Transport.call(this, mode, travelSpeed, ticketCost)
  this.busType = busType
}

let interCityBus = new Bus('Road', 'Slow', 'Cheap', 'Sleeper')
console.log(interCityBus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap", busType: "Sleeper" }

In the above example, we have created a child-parent relationship by calling the Transport constructor function from within the Bus constructor function. Transport.call() is like a super() operator call.

Inheritance is not completely achieved here though, let's check the prototpe property of the bus class

console.log(Object.getOwnPropertyNames(Bus.prototype))
// Output:  Array [ "constructor" ]

This does not have the methods which were defined on the parent. To have the properties from the parent
you need to merge the child and parent prototype, it is explained very nicely and in detail in this MDN post, and this post on Digital Ocean communiy. To know more about prototypes in JavaScript read these posts (JavaScript Prototype in Plain Language, Prototypes in JavaScript). Also you can overide methods in the children by assigning a value to it in the prototype of the child class.

Easier way to work with classes

Working with prototypes can become a bit tedious and confusing. There is another way to tackle inheritance though, ES 2105 brought new syntax to create a class. Internal inheritance mechanism remains the same though. Let's convert the above example to a class-based solution.

class Transport {
  constructor(mode, travelSpeed, ticketCost) {
    this.mode = mode
    this.travelSpeed = travelSpeed
    this.ticketCost = ticketCost
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost)
  }
}

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

There we have it, doesn't it look neat and clean?
We made use of super() operator to pass values to the constructor of the parent class. Also, this way we don't need to merge the prototypes of parent and base class as it is handled by JavaScript for us. If we wanted to change the behavior of showInfo() method we can do it simply redefining it in the child class.

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost, this.busType)
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

You don't always have to set all the properties inside the constructor, at times you might want to set and read only particular value, you can read about getters and setters here.

If you like this post do share it, follow me to keep updated with my posts :).

Cover Photo by Hal Gatewood on Unsplash

Function context in JavaScript

Kartik Malik — Sun, 23 Dec 2018 14:06:58 +0000

If you know any object orientated language you will be very familiar with the this keyword. In these languages "this" refers to the current instance of the class. While this is true in JS, you might have also seen it being used inside functions. The value of this is also called context in JS.

The function context depends on how the function is being called. Also, arrow functions don't have their own scope, the scope of it's containing element is passed to it.

JavaScript also allows you to change the context of the function using call(), apply(), bind() methods. These methods are the properties that exist on a function object.

The call() method

Using it you can pass context and arguments to a function.

Syntax

functionName.call(contextObject, funtcion args)

Lets us say you have the following functions

function multiplyByN(n) {
  console.log(this.multiplier * n)
}

If you run this you will get NaN as the output since this does not have a context, making multiplier to be undefined.

Now if you want to give the function context using call you would do the following

multiplyByN.call(context, n)

so if you want to multiply 3 by 2

multiplyByN.call({ multiplier: 2 }, 3)
// Output: 6

The apply() method

The apply method works in a similar way but here the arguments are passed as an array.

multiplyByN.apply({ multiplier: 2 }, [3])
// Output: 6

The bind() method

Bind returns you a new method with the value of the context bound to it.
Here is the syntax

boundFunction = functuinName.bind(context)

So the above example will become

multiplyBy2 = multiplyByN.bind({ multiplier: 2 })
multiplyBy2(3)
// Output: 6

Out of these three, bind() is very interesting since it returns a new function with the context we specified. This allows you to pass this new function to array methods, callbacks. This way you can have reusable function blocks.

Let's take a look at a detailed example.
Let's calculate the return amount you will receive on your 1year savings.
Now the purpose of this example is to demonstrate the use of bind() method, the calcReturns() function is very basic, you can change it to whatever you like.

let savings = [2000, 3000]

let calcReturns = function(ammount) {
  return ammount + ammount * (this.interest / 100)
}

let calWith3percent = calcReturns.bind({ interest: 3 })

savings.map(calWith3percent)

// Output: [ 2060, 3090 ]

This would have not been possible if we had interest as an argument, as the callback of the array function has its own arguments

or if you want to check for different interest rates than

let interests = [3, 4, 7]

interests.forEach(interest => {
  let calculate = calcReturns.bind({ interest: interest })
  console.log(savings.map(calculate))
})

// Output: [ 2060, 3090 ] [ 2080, 3120 ] [ 2140, 3210 ]

With some proper logic in the calculate returns function you can have a pretty decent investment calculator.

Why would you use context you can pass parameters to the function?

Yes, you can just use arguments most of the times, but as you can see from the examples above at times using context will allow you to write very reusable code. You should check this StackOverflow post to get much more clarity on it.

That's it for this post, you can read more about using bind() in this post which I had written a long while back.

If you like this post do share it :).

Better loops in JavaScript

Kartik Malik — Sun, 16 Dec 2018 13:52:37 +0000

In this post, we will take a look at forms of for loop, array methods using which you can make your code simpler, more readable. These loops / methods are useful when you want to manipulate data in an array or object.

for in loop

With this kind of loop you don't have to iterate over array indices, object keys manually.

//iterating over an array
let arr = [1, 2, 3, 4, 5]
for (let index in arr) {
  console.log(arr[index])
}
// Output: 1,2,3,4,5

//iterating over object keys
let obj = { id: 1, msg: 'hello' }
for (let key in obj) {
  console.log(obj[key])
}
// Output: 1, hello

for of loop

Using this loop you can get the value at a particular index. This loop only works on arrays.

for (let val of arr) {
  console.log(val)
}
// Output: 1,2,3,4,5

Array methods

Now let's take a look at a few array loop methods. When processing arrays the loops tend to become too large, we have to explicitly push items into another array and so on. The following methods make it easier to deal with such scenarios. The following methods take a callback function as an argument that will be executed for each element in the array. Let's look at a few examples.

Iterating over an array

For this, you can use the array.forEach() method. For-each takes a callback as an argument and executes it for each array element.

// display index and value
arr.forEach((value, index) => console.log(`Index = ${index} Value = ${value}`))

Transforming an array

To transform an existing array into another form you can use array.map() method. The map() method takes a callback as an arguement and returns a new array. The elements in the new array will be values that were returned by the callback.

Let's say you have an array of objects, each object has id, name. You want an array that contains just the ids.

with for loop

let data = [
  { id: 1, name: 'Phone', type: 'electronic' },
  { id: 2, name: 'Laptop', type: 'electronic' },
  { id: 3, name: 'Shirt', type: 'clothing' },
]
let ids = []
for (let i = 0; i < data.length; i++) {
  ids.push(data[i].id)
}

with map

let ids = data.map(function(val) {
  return val.id
})

or even shorter and simpler with an arrow function

let ids = data.map(val => val.id)

Filtering elements from the array

To filter elements from the array you can make use of array.filter() method. The filter() method expects a callback, this callback will be executed for each element in the array & returns a new array that contains filtered items. If the callback function returns true for a given element that element will be in the filtered array.

Selecting electronic items

let electronics = data.filter(item => item.type == 'electronic')

Searching for an element in the array

If you want to search for an element in the array you can use array.find() method. Like all the other methods discussed here, this method also requires a callback. The callback function should return true or false. The the first value for which the callback returns true will be the output of this method. If there is no match, the function will return undefined.

Searching for name 'Phone'

data.find(val => val.name == 'Phone')

Getting a single value from an array

To obtain a single value from an array you can use the array.reduce() method. The reduce() method, takes a callback function, initial value as an argument. The callback intern has an accumulator, currentValue as mandatory arguments. Accumulator contains the value that was obtained from the previous execution of the callback, currentValue is the array element under processing.

Sum and product of the array

let arr = [1, 2, 3, 4, 5]

//sum of array elements
arr.reduce((accumulator, currentValue) => (accumulator + currentValue), 0)
// where 0 is the initial value
// Output: 15

// product of array elements
arr.reduce((accumulator, currentValue) => (acc * currentValue), 1)
// Output: 120

Checking if a condition is true for at least one element in the array.

For this use array.some() method. This method will return true if the condition is true on at least one element in the array, otherwise it will return false.

let friends = [13, 15, 16, 18] //ages of group of friends

// checking if at least one of them is 18 or above
friends.some(val => val >= 18)

Checking if a condition is true for all the elements in the array

For this use array.every() method. This method will return true if a condition is true for all the elements in the array, otherwise it will return false.

let giftPrices = [300, 350, 399, 400]
let budgetPerGift = 450

let checkBudget = price => price <= budgetPerGift

giftPrices.every(checkBudget) // true

budgetPerGift = 300

giftPrices.every(checkBudget) // false

Things to take care of

The array methods are slightly slower than normal for loop, but they offer a lot of advantages, and their performance will improve with changes to JS engines.
All the methods that we have discussed above (except some(), find()), execute on the entire array. If you don't want to do this than these methods are of no use to you. You can't use break to stop the callback.

That's it for today. These methods have lot's of potential, go through their documentation on MDN, try these out.

If you like this post do share it :).

Built in data structures in Javascript

Kartik Malik — Sat, 08 Dec 2018 23:40:23 +0000

In this post, we will take a look at different data structures that are available to us out of the box in JavaScript (out of the box since you don't have to code these data structures yourself). We will also take a look at a few methods that will help us process these data structures.

JavaScript has built in support for the following data structures:

Array
Set
Map

Array

An array is a collection of items. In JavaScript, you can have an array that contains different types of data. In practice, you will encounter arrays with same data type though.

There are three ways to create an array.

Define a variable and assign it
new Array([1....n])
new Array(array length)

Array operations

Accessing elements from the array:
Array elements have an index, index starts from 0 and goes to array.length -1. To access an element at any particular index use the following syntax arrName[index].
To add elements to an already existing array use array.push().
To find the number of elements in the array use array.length property.
To check if an element exists use array.indexOf() or array.includes().
To remove an element from an array, we can use array.splice() method. If you want to remove the last element you can use array.pop() method.
Splice modifies the existing array, to remove an element at particular index use array.splice(index, 1).
You can combine two arrays using array.concat() method.

Set

Like Array, Set is also a collection of items, the difference being in a set a value will appear only once.

You can create a set as follows:

let set = new Set([1, 2, 3, 4, 5, 6, 6, 6])

set will contain 1,2,3,4,5,6

Set operations

To get the number of elements in the set use the size property of the Set (set.size).
To add value use set.add(), returns the set.
To remove an element use set.delete(value), to remove all the elements from the set use set.clear()

Set is useful when you need a unique collection of items if you used an array for the same task you will need to have extra logic that eliminates the duplicates.

Map

Is a collection of key-value pairs, so is it the same as an object?
At the top level, they appear to be the same however, there are few differences.

Keys of an object can only be Strings, that's not the case for maps.
Keys are stored in insertion order in a Map.
You can also get the size of the Map with size property.
A Map is iterable, so you can directly use .forEach on Map. For objects, you will have to get the keys first to get that key's value.
Along with these, Map prototype has a few helper methods.
For example, to check if a key is present in the map you could do
map.has(key).

You can create a Map as follows:

let map = new Map([['name', 'John'], ['age', '21']])

Map operations

To get number of elements in the Map use the size property.
You can't access values from the map as you would do with an Object. You need to use .get() method on the map.

To add value to the map you need to use the .set() method.

Now that you know the basics of these data structures go ahead and try them out, implement something.

References

If you like this post, do share it.

Conditional statements in JavaScript

Kartik Malik — Sun, 02 Dec 2018 04:29:25 +0000

Photo by Jens Lelie on Unsplash

In this post, let's take a look at what are conditional statements, different types of conditional statements and their use cases.

Conditional statements help you write code that you want to execute only when a certain condition is met.
There are two types of conditional statements.

Branching: Taking one of the possible options
Looping: Repeating an action

Branching

Javascript has three branching statements:

If else(-if)

You can use if else expression when you need to take one of the possible paths.

Syntax:

  if (expression) {
    //do something
  } else {
    // do something else
  }

You can also have multiple else if statements.

Examples:

Checking if variable is null

let val
if (val) {
  // do some processing
} else {
  // assign value, throw error
}

Checking if a number is positive, negative or zero

if (val > 0) {
  console.log('Value is positve.')
} else if (val < 0) {
  console.log('Value is negative.')
} else {
  console.log('Value is zero.')
}

Switch case statement

The Switch statement is similar to if else(if), switch evaluates your condition and matches one of the case statements. If your else-if chain is getting longer and longer you should think about switching to switch case statement. When using switch case statement you have access to another handy keyword, the default keyword. When the expression does not match any of the case statements, the code inside the defualt block will be executed.

Syntax:

switch (expression) {
  case 1: //do something
    break
  case 2:
    break

  default: // What to do when expression does not match any case
}

There is a break keyword inside each case statement so that the execution of the switch case statement stops once it finds a match.

Example:

switch (color) {
  case 'red':
    console.log('Stop')
    break
  case 'green':
    console.log('Go')
    break
  case 'yellow':
    console.log('Slow down')
    break
  default:
    console.log('Invalid')
}

Conditonal operator(?:) You will love the syntax for this one, it consise and clear.

  expression ? code block 1: code block 2

If the value of the expression is true, code block 1 will be executed, otherwise code block 2 will be executed.

Looping

There are two different types of loops in Javascript:

#### For loop

You would use a for loop when you know the number of iterations in advance.

Syntax:

  for(initilize expression, condition, increment expression){
    // awesome stuff
  }

There are three important expression in a for loop

initilize: Initilize loop count variable
condition: Expression that will be checked before each loop pass.
increment: Expression that will be executed after each loop pass.

Examples:

// display a message n times
for (let i = 0; i < 5; i++) {
  console.log('Loops are cool!')
}

let arr = [1, 2, 3, 4, 5]
for (let i = 0; i < 5; i++) {
  console.log(`Value at index ${i} is ${arr[i]}`)
}

While loop

You would use a while loop when you do not know the number of iterations in advance.

Syntax:

while (expression) {
  //do something
}

Example:
Incrementing a value until it crosses a limit

while (val < limit) {
  val += val
}

There is a variant of while loop, the do while loop. The difference being the syntax and the fact that it will be executed atleast once, as the condtion is checked at the end of the loop.

Syntax:

do {
  //some awesome stuff
} while (expression)

Break and continue

Loops would be incomplete without these keywords. These keywords allow us to control loops in a way.

The break keyword allows us to stop the loop execution. Why would you want this? Well lets take a look at
increment a value code from above

let val = 2
let limit = 50

while (val < limit) {
  val += val
  console.log(val)
}
/*
Output: 
4 
8 
16 
32 
64 // Opss
*/

Clearly 64 should not have been in the output, why is it even there?
Well when val was 32, the loop expression was true since 32 < 50. Now to fix this we would need to add a check on the new value that is generated.

let val = 2
let limit = 50
while (val < limit) {
  let temp = val + val
  if (temp > limit) {
    break
  }
  val += val
}
/*
Output: 
4 
8 
16 
32 
*/

While break stops all the next passes of the loop, the continue statement just skips the current pass.

Let's write a code that prints non-zero elements from the array.

let arr = [1, 0, 0, 2, 3, 0, 0, 4, 5, 0]
for (let i = 0; i < 10; i++) {
  if (arr[i] == 0) continue
  console.log(arr[i])
}

That's it you know know about branching and looping statements. Do experiment with these to get a hang of them, these are the basics that will help you in the long run.

If you like this post, do share it.

Types in JavaScript

Kartik Malik — Sun, 25 Nov 2018 13:46:29 +0000

Data can be of different forms, numbers, strings, booleans etc. The type system of a programing language helps us to store various kind of data. In this post, we will talk about types of typed languages, typing and types in Javascript, some useful features.

How do different languages handle types?

Typing in a programing language can be either static or dynamic.

Static typing: You assign the variable its type during declaration.
Dynamic typing: You just declare the variable, assign it any type of data during runtime. You can also change the type of data assigned to it during runtime.

How does Javascript handle types?

Javascript is a dynamically typed language. This way you don't have to specify the types, you just declare the variables and use them as you like. While this is fun, you have to be careful as if you assign the wrong type to a variable it can lead to bugs. In Javascript, you can also check the type of the variable at runtime using the typeof operator.

Different types in Javascript

There are 7 primitive types in Javascript.

They are:

String: String allows you to store a collection of letters.
Number: Numerical data is useful for arithmetic operations, Javascript also has a Math library using which you can perform operations like power, absolute easily.
Boolean: Value can either be true or false, useful for flags.
Null
Undefined
Object: A collection of key-value pairs.
Symbol: According to MDN "Symbol value may be used as an identifier for object properties; this is the data type's only purpose". You don't need to learn about it at this point, you can take a look at it after you get other Javascript concepts clear.

Null and Undefined are values a variable can have. They both convey that the variable does not store any data. There are a few differences between the both, null is explicit, undefined is implicit. In case you want to have a variable with no data, remove the data that it has, just assign it to null. If you, create a variable and do not assign it any value it will be undefined. Another funny thing about the null type, type of null returns "object" (you can read more about it here).

Type conversions

Often you would want to convert one type of data into another.
For these Javascript provides many helper functions. For example to convert a string to a number you can use parseInt() method, and to convert a number to string you can use toString() method.

Truthy and falsy values

Javascript has another useful feature, it treats values as truthy and falsy.
This is how the value will be treated when used in a boolean expression. A truthy value means the value is considered to be true, falsy is for false. You can then use this feature to check if a variable is defined, or not before processing it.

Along with the basic types, Javascript also has data structures like arrays, sets and maps, we will take a look at them in the next post. If you liked this post do share it.

What is Scope in Javascript?

Kartik Malik — Sun, 18 Nov 2018 04:01:38 +0000

While programming we often deal with data, we need to store and manipulate data to derive useful results. In this article, we will learn about variables in Javascript, what is the scope and how it affects your variables.

What is Scope in JS?

The scope is the region within which declared variables are accessible.

There are three levels of scope in JS:

Global: Variable is available throughout the program
Function level: Variable is available only in the function
Block level: Variable is available only in the declared code block. Statements if, for etc are examples of code blocks. You can create a code block without using these statements, just write your code inside {}. Having block level variables is useful since you can reuse the variable name in some other code block without worrying.

Javascript has 3 different keywords that allow you to declare(create) variables.
They are var, let, const. These keywords dictate the variables scope.

The var keyword creates a variable with function level scope if declared inside a function. The let, const keywords create a variable with block level scope. This way you won't accidentally override some global value. The const keyword has another speciality, using it you can create constants which are useful to store messages, math constants etc.

Do note that if you create a variable at top of your function using any of these keywords, it will be global since it's scope is the entire file

You can also create variables without using var, let const keywords. When you do this in strict mode(more on this in a later post) it will throw an error, but in the normal mode, it will create a global variable which will lead to bugs in the future.

What should I use?

To avoid unintentional bugs you should always use let for variables you intend to mutate and const for constants.

How to create variables?

The syntax to create (declare) a varible is = value. In case of let and var, assigning a value at declaration is not compulsary, but for const if you don't assign a value it will throw an error.

There are also few rules which govern the naming of your variables, check this link for more information.

What can NodeJS do?

Kartik Malik — Sun, 11 Nov 2018 13:56:11 +0000

This post was originally posted on my blog

In this post, I will just pour my heart about node and what it has to offer. I have broken down the article into a series of questions and answers so that it becomes easy to grasp.

What is Node?

According to the Official site, "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.". In simpler terms, NodeJS is a server-side programming framework, that allows you to write server side code using Javascript. It's open source and free to use. You can install NodeJS on a variety of operating systems, and being Javascript it's very easy to learn too.

Why Node?

With so many different options out there why should you choose it?

There are many reasons for this:

Easy to install, learn, work with.
Excellent support for dependency management. Node comes with 'npm', npm allows you to install any dependencies you need. This way setting your code up on any machine is a breeze.
Good community support. With npm, you have access to loads of packages you can use within your code. If you are stuck with something you will find many people willing to help on Github and Twitter.
Easy to deploy.
Asynchronous programming (Initially this will be difficult to grasp, but once you get hang of this you will love it.)
And finally, Javascript.

What can it do?

With node, you can build different types of applications, scripts, web scrapers, CLI apps, web servers, web application, IOT apps. It has numerous open source packages that will help you get your project moving quickly. Using sockets you can also build an app that needs real-time data. There are libraries that will allow you to fetch data from many data stores, templating engines to build web apps. This way you can build a variety of apps using Node.

How to get started?

So if you are interested to just install NodeJS on your machine,fire up your favorite IDE. If you are on Linux or Mac I would suggest that you use nvm insted. With nvm, you can have multiple node versions installed on your machine and switch between them with easily with just one command. If you are using Windows, you can search for a similar tool online.

That's all I have to say, give NodeJS a try and see for yourself how fun it is. In the next few posts, I will cover important Javascript concepts you should know, tutorials on how to build apps. So stay tuned!

Cover Photo by Patryk Grądys on Unsplash