DEV Community

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


Discussion

pic
Editor guide
Collapse
z2lai profile image
z2lai

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.

Collapse
zinox9 profile image
Arjun Porwal Author

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

Collapse
usmandj3334 profile image
Muhammad Usman Yaseen

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

Collapse
zinox9 profile image
Collapse
st0ik profile image
Collapse
zinox9 profile image
Arjun Porwal Author

That's Really Useful, Thanks For Sharing ! 🀘

Collapse
anilpank profile image
Anil

Nice collection. But nothing beats Mozilla docs on Javascript

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

Collapse
z2lai profile image
z2lai

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?

Collapse
zinox9 profile image
Arjun Porwal Author

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.

Collapse
zinox9 profile image
Collapse
adetoroe787 profile image
Ezekiel Adetoro

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.

Collapse
zinox9 profile image
Arjun Porwal Author

Good Luck on your journey !

Collapse
andrematias profile image
AndrΓ© Matias

Oww community, how I love you :)
Tanks for that.

Collapse
zinox9 profile image
Arjun Porwal Author

Glad To Help 😊

Collapse
saurabh37414118 profile image
Saurabh Kumar

Great I really like this Doc.

Collapse
zinox9 profile image
Arjun Porwal Author

Thank You ! 😊

Collapse
paras594 profile image
Paras

Nice Reference sheet !!

Collapse
zinox9 profile image
Arjun Porwal Author

Thanks ! 🀘

Collapse
rajeshmanne profile image
Rajesh-Manne

Thanks, this was very helpful.

Collapse
zinox9 profile image
Arjun Porwal Author

Happy that you found it helpful. 😊

Collapse
eddsaura profile image
Jose E Saura

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

Collapse
zinox9 profile image
Arjun Porwal Author

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

Collapse
tarekarar profile image
TarekArar

Great article, thanks a lot !

Collapse
zinox9 profile image
Arjun Porwal Author

You are Welcome ! 😊

Collapse
mjcoder profile image
Mohammad Javed

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

Collapse
zinox9 profile image
Arjun Porwal Author

Happy that you found it useful ! πŸ˜„

Collapse
jumoyz profile image
Junior MOISE

Great! Thank you so much

Collapse
zinox9 profile image
Arjun Porwal Author

I'm Happy to Help 😊

Collapse
luismartinezs profile image
Luis Martinez Suarez

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

Collapse
zinox9 profile image
Arjun Porwal Author

Try them out, you might find something new !

Collapse
rembrandtreyes profile image
Rembrandt Reyes (He/Him)

Nice! Pretty comprehensive. Thanks for taking the time and making this available for everyone πŸ™Œ

Collapse
zinox9 profile image
Arjun Porwal Author

Happy to help 😊

Collapse
rvakid82 profile image
rvakid82

Thank you for this. I have been really struggling with JavaScript for months and it's helpful to finally see how it's broken down.

Collapse
zinox9 profile image
Arjun Porwal Author

It's nice to know that you found it useful. 🀘

Collapse
rahilka profile image
Rahilka Simonova

Great list, thanks for sharing :)

Collapse
zinox9 profile image
Arjun Porwal Author

Happy that it was useful for you 😊