loading...
Cover image for Ultimate Road Map to Study JavaScript : Basics to Advanced

Ultimate Road Map to Study JavaScript : Basics to Advanced

zinox9 profile image Arjun Porwal Updated on ・5 min read

Table Of Contents

JavaScript Reference Sheet


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


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


Posted on Jun 9 by:

zinox9 profile

Arjun Porwal

@zinox9

A developer, always getting into new stuff, exploring things and learning from experiences.

Discussion

markdown guide
 
 

That's Really Useful, Thanks For Sharing ! 🀘

 

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.

 

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. πŸ˜‰

 

Thanks for sharing this beautiful article with us. Keep it up. If you need data for your local business from Google Maps then you should try this Google Map Extractor

 
 

Nice collection. But nothing beats Mozilla docs on Javascript

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

 
 

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?

 

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.

 

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.

 

Good Luck on your journey !

 

I think the only things I don't know are XMLhttprequest and Axios

 

Try them out, you might find something new !

 

Thanks Arjun. This article will definitely come in handy. πŸ‘

 

Happy that you found it useful ! πŸ˜„

 
 

I'm Happy to Help 😊

 

Great article, thanks a lot !

 

You are Welcome ! 😊

 

Thanks, this was very helpful.

 

Happy that you found it helpful. 😊

 

That was exactly my path, even I had to recheck some points and go deeper in DOM and ajax, api and crossorigins.

 

Correct ! Getting Deeper into concepts is never ending. πŸ˜‰

 
 

Great I really like this Doc.

 
 

Great list, thanks for sharing :)

 

Happy that it was useful for you 😊