Understanding Crux of Javascript

Pankaj Parkar

Senior Software Engineer

TSS Consultancy PVT LTD

  • Microsoft MVP (twice)
  • Community Contributor
  • Daily Code in .Net and Angular
  • Stackoverflow Topuser

GitHub @pankajparkar Twitter Follow

What is Javascript?

JavaScript, often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language

Javascript

  • Created in 1995 by Brenden Eich
  • Initial version was created in 10 days
  • The worlds most misunderstood programming language
  • Has nothing to do with Java
  • Object oriented and functional programming

Javascript is Everywhere

  • Can also run on client side - Browser
  • Can run on server side - Node JS
  • Can also have database in Javascript - PouchDB

How browser understands it?

  • Syntax Parsers

  • Execution Context

  • Lexical Environment

Syntax Parsers

A program that reads your code and determines what it does and it its grammar is valid

var a = 'Hello'
function foo(){

}

Parser

variable a

function foo

Object

  • Key = Value pair

Name = "James"

Address = "1st Lane, USA"

{
   "FirstName": "James",
   "LastName": "Bond",
   "Address": {
      "State": "NY",
      "Country": ""
   }
}

Setup

Atom

Bracket

Sublime Text

VS Code

WebStrom

Simple JS App running on browser

Execution Context in Javascript

Global Execution Context

Globals

this

(context)

Outer

context

Global Execution Context

Globals

this

(context)

Outer

context

var a = 'Hello World';

function b(){

}
var a = 'Hello World';

function foo(){
   console.log("Function B Ran");
   bar();
}

function bar(){
   console.log("Function bst Ran");
}

console.log(a);

foo();

Global Execution Context

Globals

this

(context)

Outer

context

Execution Context

Globals

this

(context)

Outer

context

Execution Stack

Execution Context

Globals

this

(context)

Outer

context

Execution phases

  • Creation Phase
  • Execution Phase

Multiple execution context

Data Types

Number

undefined

object

string

Array


Single Threaded and Synchronous

Q & A

References

  • https://addyosmani.com/blog/faster-javascript-memoization/

  • http://jamesknelson.com/5-types-react-application-state/

  • https://www.youtube.com/watch?v=esDKcn_1aic

  • https://github.com/mgechev/angular-performance-checklist

Feed

SourceId

Source Type

Server Side

Client Side

Users []

SelfieImage

.

.

.

Retrieve Feeds for user

Retrieving record from server

Based on Source Type + Source Id

All feeds are retrieved

Browser

Made with Slides.com