Essential Javascript Concepts

Yatin Gupta
4 min readAug 10, 2020

Table of Contents
- Introduction
- Syntax
— == vs ===
— Arrow-function
— Map vs filter vs for loop
— Const
— Spread Operator
— Export & Import
— Super
- Asynchronous programming in Node.js
— Introduction
— Async + Await != Sync
- Callbacks
- Additional Tips
— Using promise.all() saves time

Introduction

Reference

JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). However, the language itself does not include any input/output (I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides those APIs.

JavaScript engines were originally used only in web browsers, but they are now embedded in some servers, usually via **Node.js**. They are also embedded in a variety of applications created with frameworks such as Electron and Cordova.

Javascript basic syntax idiosyncrasies

== vs ===

The === operator is called a strict comparison operator and it differs from the == operator.

Lets take 2 vars a and b.

For “a == b” to evaluate to true a and b need to be the same value.

In the case of “a === b” a and b must be the same value and also the same type for it to evaluate to true.

Arrow-function

Arrow functions allow us to write shorter function syntax:

In fact, if you have only one parameter, you can skip the parentheses as well.

Arrow Function Without Parentheses:

( Map vs filter vs for loop )

The map method is used to convert each item of an array, while the filter method is used to select certain items of an array.

Eg : Getting Id of Like which is to removed from post

Correct way

// so basically map gives you the id and filter will give you the object.

while filter will return id.

Doing the same thing with for loop

Although both for loop and map achieves the same result, the map is preferable because -

In the same way that the code inside of our for loop is called as long as the condition is true, the code inside of map() is called one time for each element in the array.This does the same thing as our for loop, but the big difference is that the conditions for iteration are handled for us giving more readable code.

Const

Variables defined with const behave like let variables, except they cannot be reassigned:

Const cannot be reassigned

Spread Operator

When …arr is used in the function call, it ‘expands’ an iterable object arr into the list of arguments

Export & Import

Super

By calling the super() method in the constructor method, we call the parent’s constructor method and gets access to the parent’s properties and methods:

Asynchronous programming in Node.js

Event Loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be&t=12s

Introduction

* Node.js is a single-threaded language which in the background uses multiple threads to execute asynchronous code.

* Node.js is non-blocking which means that all functions ( callbacks ) are delegated to the event loop and they are ( or can be ) executed by different threads. That is handled by Node.js run-time.

Async + Await != Sync

  • Your async code block is waiting for the await call to return to continue, however, the rest of your application isn’t waiting and can still continue like normal.
  • In contrast, an asynchronous call would make your entire application or thread wait until the code finished executing to continue on with anything else.

Callbacks

More complexly put: In JavaScript, functions are objects. Because of this, functions can take functions as arguments and can be returned by other functions. Functions that do this are called higher-order functions. Any function that is passed as an argument is called a callback function.

Why do we need Callbacks?
For one very important reason — JavaScript is an event-driven language. This means that instead of waiting for a response before moving on, JavaScript will keep executing while listening for other event

* Callbacks are a way to make sure certain code doesn’t execute until another code has already finished execution.

We’ve passed the alertFinished function definition as an argument during our doHomework() function call!

output : starting followed by finished.

The main difference between callbacks and promises is that with callbacks you tell the executing function what to do when the asynchronous task completes, whereas with promises the executing function returns a special object to you (the promise) and then you tell the promise what to do when the asynchronous task completes.

Additional Tips

Using promise.all() saves time

Reference

References

1. https://en.wikipedia.org/wiki/JavaScript
2. https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced
3. https://stackoverflow.com/questions/38425751/returning-chrome-storage-api-value-without-function
3. https://itnext.io/javascript-promises-vs-rxjs-observables-de5309583ca2
4. https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be&t=12s
5. https://gosink.in/common-javascript-promise-mistakes-beginners/

--

--