Arjun Porwal

Posted on Jun 9, 2020 • Edited on Jun 17, 2020

Ultimate Road Map to Study JavaScript : Basics to Advanced

#javascript #codenewbie #webdev #productivity

JavaScript Reference Sheet

References
Basics
Functions
Arrays
Objects & Properties
Document Object Model (DOM)
ES6+
Asynchronous JavaScript

JavaScript Reference Sheet

Road Map to study JavaScript. Starting All the way from Basics to Advanced with references of useful links !

Link to Markdown in Github

A reference to Advanced JavaScript Concepts : JavaScript Behind the Scenes

References

Cheat Sheet : Link
All JavaScript Details : Javascript.info
JavaScript Documentation : MDN Docs
Books : Eloquent JS | You Don't Know JS

Basics

Console logging
Variable & Datatypes (using var)
- Number - Floating Point numbers & Integers
- Strings - For text
- Boolean - true/false logical data type
- Undefined - Data type of variable with no value
- Null - Doesn't Exist
- JavaScript is dynamic : data types are automatically assigned
- Camel Case & Naming Conventions
Comments
Mutation (Changing Data in variable) & Coercion (Data type conversion)
Math Operators & Logic Operators
- + , - , * , / , %
- < , > and <= , >= ...
- Compare letters according to Unicode ('a' < 'b')
- typeof & (== & ===)
- Operator Precedence & Multiple Assignments
- Operators Shorthand
Conditionals : If else, nested If, if else if
Ternary operator
Switch Statement
Boolean Logic : && , || , !
Truthy and Falsy values
- Falsy values : undefined , null , 0 , '', NaN
- Truthy values : all others give true on coercion
Loops & Iteration
For Loop
- While Loop
- Continue & Break
Error Handling
- Throw
- try , catch
Strict Mode ("use strict")
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.

Functions

Basic Functions ( declaration , returning data )
- Function Statement (direct declaration) and
- Function Statement returns Undefined on execution (if , while , function declaration)
- Function Expression (using variable)
- Function Expression always returns a value (typeof, variable function, 2+3)
Default Parameters
Callback Functions - Functions as Arguments & Return Functions from Functions
IIFE - Immediately Invoked Function Expression
- contain an anonymous function in braces and then call it at the same time
- only the content returned is accessible , abstraction & encapsulation.
Closures
- An inner function always has access to the variables and parameters of its outer function, even after the outer function has returned.
- It works because the Scope Chain is a pointer , so even when the function has returned in the execution stack , the scope chain still has access to the variables of the outer function.
Argument Object
Inbuilt String methods (indexOf , startsWith, substring)
Inbuilt Number Methods (MATH object)
Other Useful Inbuilt Functions :
- Date function
- Split & Join function
- Set timeout
- ParseInt

Arrays

Basic Arrays (declaration)
New Array () Syntax
Array Properties : length , index
Array Methods : pop , push , shift , unshift
Iterating Arrays : for...of , for...in , for each, map
Searching Arrays : indexOf , find , findIndex
Filtering arrays : filter , reduce
Sorting Arrays : sort
Altering Arrays : split and join functions
Useful Array Functions : splice , slice , concat , reverse , every , some

Objects & Properties

Basic Objects (declaration , accessing , mutating)
- new Object () Syntax
- Functions in objects (Are methods)
Prototypes & Prototype chains
- Prototypes are methods of objects that can be inherited
- Every inherited object can access its parents prototype
- Therefore , we write those methods in prototype that we want other objects to inherit
- The prototypes of constructor is the prototype of all its instances too
- We can check the prototype ,using object.property or object.__proto__
- hasOwnProperty lets us know if the property is inherited or not
- instanceOf can be used to check what is instance of what
Constructors - used as a blueprint to create multiple objects
Constructor Functions - used to initialize data of object for every instance
- Creating Constructor using Function
- convention is to keep first letter capital of constructor
- object variables are assigned values using this statement
- new object is created using , new constructorName() and assigning it to a variable
- We can create a prototype using , object.prototype
- We can inherit other constructors by using call method with parameters of parent constructor
- Constructors can also be created using Object.create , where we specify the prototype first and then specify the data
- Object.create(parent.prototype) can inherit the prototype of parent to child prototype
Primitives & Object
- Primitives hold the data directly (number , strings)
- Objects point the data to other object (objects, arrays)
- In JavaScript almost Everything is an Object
- Primitives : Numbers , Strings , Booleans, Undefined and Null are not.
- Primitives can be converted to objects using autoboxing when methods like string.length are executed
- Everything else is object, Arrays, Functions, Objects...
Two objects are only equal if they take the same space and position in memory , they wont be equal no matter the keys and properties.
Bind, Call & Apply
- Call can be used to give a different this pointer and call the function immediately
- Apply , same as call , but the arguments can be passed only as array
- Bind , sets this and other arguments to the function , then gives the functions so that it can be called with those arguments later

Document Object Model (DOM)

DOM
- structured representation of HTML
- DOM connects webpages to scripts like JS
- for each HTML box there is an object in DOM that we can access and interact with
DOM Methods - querySelecor, getElementById
Event Listeners - storage , UI listener (mouse)
Data Storage CRUD - local Storage
window.location - assign , hash
window - inner width , inner height, console, document, addeventlistner(to work on multiple tabs)

ES6+

let and const
- are only blocked scoped (any block if, while) , whereas normal var is function scoped only
- cant be used before declaration , whereas var gives a value of undefined
- IIFE can be created in es6, just in a block {} without variables
Template Strings
Arrow Functions (lexical this keyword functionality)
Destructuring : { name , length } = object , [name , length] = array
Spread Operator : spread array , objects
Rest Parameters
Maps : same like object , but keys can be numbers, functions anything
- we can loop through them
- functions : get,set, size , has, delete, clear, entries
Class : syntactical sugar for es5 constructor and inheritance
- Class Constructor
- Class methods
- Subclasses , Super & Extends
- Getters and Setters

Asynchronous JavaScript

Asynchronous Functions can run in background
HTTP requests & response (Old Way)
- XMLhttprequest , readystatechange
- readyState, open, send
Promises
- Object that keeps track about whether a certain event has happened or not
- Determines what happens after the event
- Implements the concept of a future value that were expecting
- 4 states = Pending -> Settled/Resolved -> Fulfilled, Rejected
- Checking : resolve, reject,
- Performing Actions using .then & .catch
- Promise chaining
Async/Await alternative way to consume promises
- we can use the response promise given by await to check and catch errors.
Fetch Api - gives promises that can be consumed using Async/await or promises
Axios - alternative to fetch , directly returns data in JSON
API - Application Programming Interface (Remote Server has a part that works as API)
JSON - JavaScript Object Notation (json function is available inbuilt in js)
AJAX - Asynchronous Javascript and XML
CrossOrigins

This is Just the Beginning of your Journey in JavaScript , there's always soo much more to explore !

A reference to Advanced JavaScript Concepts : JavaScript Behind the Scenes

Oldest comments (35)

Saurabh Kumar • Jun 9 '20

Great I really like this Doc.

Arjun Porwal • Jun 9 '20

Thank You ! 😊

Paras 🧙‍♂️ • Jun 9 '20

Nice Reference sheet !!

Arjun Porwal • Jun 9 '20

Thanks ! 🤘

Anil • Jun 9 '20

Nice collection. But nothing beats Mozilla docs on Javascript

developer.mozilla.org/en-US/docs/W...

Arjun Porwal • Jun 9 '20

That's True !

z2lai • Jun 12 '20

I didn't see a list/reference sheet of all JS concepts on that page you linked. Is there a reference sheet on Mozilla docs that you saw?

Arjun Porwal • Jun 13 '20

No I didn't take reference from any place , and even I don't know if Mozilla has any concept list like this. Mozilla is just a good place for explanation and detailed info, that's why I shared it as a reference.