Pankaj Parkar
Indian | 30 | Ex MVP | Angular GDE
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
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
Understanding Crux of Javascript
By Pankaj Parkar
