Arjun Porwal

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

Ultimate Road Map to Study JavaScript : Basics to Advanced

#javascript #webdev #codenewbie #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

Top comments (35)

z2lai • Jun 12 '20

Very extensive list and good breakdown of the sub-topics! I think the list is missing a few key fundamentals like scope and execution context. It has "closures" but it's probably more important to understand what lexical scope is first. Execution context relates to how the engine runs the code and includes concepts like hoisting and "this" binding.

Arjun Porwal • Jun 13 '20

Yeah Right , these topics come in the inner working of JavaScript and are important too. I have already planned to share a full explanation of all those topics soon. 😉

Dimitris Stoikidis • Jun 10 '20

Nice collection, I've also found 33 Concepts Every JavaScript Developer Should Know very useful

Arjun Porwal • Jun 10 '20

That's Really Useful, Thanks For Sharing ! 🤘

Anil • Jun 9 '20

Nice collection. But nothing beats Mozilla docs on Javascript

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

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.

Arjun Porwal • Jun 9 '20

That's True !

Paras 🧙‍♂️ • Jun 9 '20

Nice Reference sheet !!

Arjun Porwal • Jun 9 '20

Thanks ! 🤘

Ezekiel Adetoro • Jun 29 '20

This is everything I needed to start learning Javascript. I have started before but it wasn't flowing. I will just follow this guide. This guide is comprehensive and very detailed.