250+ JS Resources to Master Programming 💥  Cheat Sheet
Tags: javascript, webdev, productivity, beginners
Published: 2021-04-20 13:30:49

`Hello World!` I felt bored after completing the [Ultimate Cheat Sheet Compilation](https://dev.to/worldindev/the-ultimate-compilation-of-cheat-sheets-100-268g), so I just decided to create another one! The most complete javascript cheat sheet and resource compilation you can find online!

🔖 - Waaait, don't leave this page without bookmarking it!! <a name="top"></a>

Read also:
{% link https://dev.to/worldindev/400-javascript-interview-questions-with-answers-2fcj %}

---

⚡ Giveaway ⚡ 
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> [Subscribe to our Newsletter](https://worldindev.ck.page/) <-- Very important

PS: It took me around 10 hours to complete the article - So please remember the **like ❤️** and **super like 🦄**

{% collapsible Table of content %} 
* [My cheat Sheet](#delta)
* [Projects ideas to become a javascript master ](#projects)
* [Other resources](#alpha)
  1. [Complete Javascript cheat sheets](#1da)
  2. [JS promises](#1db)
  3. [JS Arrays](#1dc)
  4. [JS loops](#1dd)
  5. [Preprocessor](#1de)
    * [CoffeScript](#1df1)
    * [EJS](#1df2)
    * [Babel](#1df3)
  6. [JS Frameworks & Libraries](#frameworks)
    * [Angular](#2f)
    * [Vue](#2g)
    * [React](#2g+)
    * [JQuery](#2g+++)
    * [Others](#2g++)
    * [Node](#2c)
  7. [Other resources](#oother)
* **Remember the like ❤️ and maybe super like🦄**
{% endcollapsible %}

---

{% collapsible For beginners %} 

## What is JS (Javascript)
> JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies. [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uggvpcrg4eolng5deqkc.png)

## What it used for?
> To put things simply, JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. Things like menus, animations, video players, interactive maps, and even simple in-browser games can be created quickly and easily with JavaScript. JavaScript is one of the most popular programming languages in the world. [BitDegree - What Is JavaScript Used For And Why You Should Learn It](https://www.bitdegree.org/tutorials/what-is-javascript-used-for/#:~:text=To%20put%20things%20simply%2C%20JavaScript,pages%2C%20enhancing%20the%20user%20experience.)

## Hello World In Javascript:
```js
alert("Hello World") — Output data in an alert box in the browser window
confirm("Hello World") — Opens up a yes/no dialog and returns true/false depending on user click
console.log("Hello World") — Writes information to the browser console, good for debugging purposes
document.write("Hello World") — Write directly to the HTML document
prompt("Remember the like!") — Creates a dialogue for user input
```

## Resources to learn it:
[Mozilla’s JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
JavaScript track on Codecademy: Interactive tutorials for beginners.
JavaScript for Cats by Max Ogden
Eloquent JavaScript by Marijn Haverbeke
Wikibooks’ JavaScript book
JavaScript Lectures by Douglas Crockford
You Don't Know JS - Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
braziljs/js-the-right-way - An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web.
JSbooks - Directory of free JavaScript ebooks.
Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base.
SJSJ - Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
How to Write an Open Source JavaScript Library - A comprehensive guide through a set of steps to publish a JavaScript open source library.
JavaScript Tutorials - Learn Javascript online from a diverse range of user ranked online tutorials.
Functional-Light JavaScript - Pragmatic, balanced FP in JavaScript.
Clean Code JavaScript - Clean Code concepts adapted for JavaScript.
[List at GitHub - Awesome Javascript - By Alexandru Gherasim](https://github.com/ShinobiWPS/awesome-javascript#worth-reading)

### At Reddit - [What 10 Things Should a Serious Javascript Developer Know Right Now?](https://www.reddit.com/r/javascript/comments/6mlc9d/what_10_things_should_a_serious_javascript/)
- **Scope.** If you don't understand this intimately then you aren't that serious about this language. This is the number one point intentionally and I cannot stress it enough.

- **Architecture.** You don't have to be a master software architect, but if you cannot perform some basic planning and put pieces together without massive layers of tooling you are an imposter. Expecting frameworks and other tools to simply do it for you isn't very impressive.

- **DOM.** It is very common to see developers hiding from the DOM by layers of abstractions and other stupid crap. querySelectors are great, but are also 2800x slower than the standard DOM methods. That isn't trivial. These methods are super simple, so there is no valid excuse for developers fumbling over this or hiding in fear. http://prettydiff.com/guide/unrelated_dom.xhtml

- **Node.js** If you are a serious developer should have a pretty solid grasp of how to walk the file system. You should understand how to conveniently read files as text or less conveniently read files as bit for bit binary buffers.

- **Timing and asynchronous operations.** Events, timers, network requests are all asynchronous and separate from each other and exist both in Node and in the browser. You have to be able to understand how to work with callbacks or promises.

- **Accessibility.** The interactions imposed by JavaScript can present accessibility barriers. A serious JavaScript developer is already familiar with WCAG 2.0 and knows how to work within its recommendations or when to push back on violating business requirements.

- **Security.** You need to have at least a basic understanding of security violations, security controls, and privacy. You don't need to be a CISSP, but you need to be able to supply recommendations and avoid obvious failures. If you cannot get this right in the most basic sense you aren't a serious developer.

- **Data structures.** You need to understand how to organize data in a way that allows the fastest possible execution without compromising maintenance. This is something that is learned through academic study and repeated experience writing applications.

- **Presentation and semantics.** You really need to have a basic understanding how to properly organize the content your users will consume and how to present in a consumable way efficiently. This is something almost completely learned from experience only. You might think CSS and HTML are simple skills that can be picked up when needed, but you would be absolutely wrong.

- **Knowing when to avoid the bullshit.** Many developers lack the years of experience to be confident in their performance.... so some of these developers will try to fake it. Don't be an imposter, because everybody will see straight through it. Hoping mountains of abstractions, tooling, frameworks, compilers, and other bullshit will save you just bogs down your application and screws over your teammates. If you aren't confident then be honest about that and seek mentorship or get involved with open source software outside of work.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/727auzola6gykhln320v.png)
[Source](https://www.mindmeister.com/283065198/getting-started-with-javascript?fullscreen=1) 

{% endcollapsible %}

## JS Cheat Sheet: <a name="delta"></a>

--> Download the PDF Version of this Cheat Sheet [here](https://worldindev.ck.page/)

### Include Javascript:
```js
<script type="text/javascript"></script>

// or Include it in an external file (this is a comment)
/* This is also another way you can insert comments,
Multiline normally */

<script src="myscript.js"></script><code></code>

// PS: Remember to sub to our newsletter for the Giveaway!
```

---

### Variables:

```js
var myVariable = 22; //this can be a string or number. var is globally defined

let myVariable = 22; //this can be a string or number. let can be reassigned

const myVariable = 22; //this can be a string or number. can't be reassigned
```

[JavaScript Variables - w3schools](https://www.w3schools.com/js/js_variables.asp)

{% link https://dev.to/devlorenzo/js-hide-and-show-32og %}

---

### Data Types:

```js
//string
let string = 'ASCII text';
//int
let integer = 123456789;
//float
let float = 123.456;
//boolean, can be true or false
let t = true;
let f = false;
//undefined
let undef;//defaults to undefined
let undef = undefined;//not common, use null
//null
let nul = null;
//array
let arr = ['Hello','my','name','is','Dr.Hippo',123,null];
//object
let person = {'name':'John Smith','age':27};
//function
let fun = function(){
    return 42;
}
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnspq17g3uocqimoe334.png)

[Source - Datatypes In JavaScript - c-sharpcorner.com](https://www.c-sharpcorner.com/article/datatypes-in-javascript/) 

---

### Operators

Basic Operators
```js
+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator, operations within brackets are executed earlier than those outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers
```

{% link https://dev.to/devlorenzo/js-change-text-on-hover-3945 %}

Comparison Operators
```js
== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
```

Logical Operators
```js
&& Logical and
|| Logical or
! Logical not
```

Bitwise Operators
```js
& AND statement
| OR statement
~ NOT
^ XOR
<< Left shift
>> Right shift
>>> Zero fill right shift
```

---

### Loops

for - loops through a block of code a number of times.
```js
for (statement 1; statement 2; statement 3) {
  // Coooode
}
```

for/in - loops through the properties of an object.
for/of - loops through the values of an iterable object.

while - loops through a block of code while a specified condition is true.
```js
let i=0;
while (i < 10) {
	console.log(i);
	i++;
}
```

Break and Continue
> When you use break without a label, it terminates the innermost enclosing while, do-while, for, or switch immediately and transfers control to the following statement.
When you use break with a label, it terminates the specified labeled statement.

> When you use continue without a label, it terminates the current iteration of the innermost enclosing while, do-while, or for statement and continues execution of the loop with the next iteration. In contrast to the break statement, continue does not terminate the execution of the loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the increment-expression.
When you use continue with a label, it applies to the looping statement identified with that label.

[Source - Loops and iteration - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement)

---

{% link https://dev.to/devlorenzo/js-on-scroll-events-4232 %}

### Strings

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8e2qr70cnaopqss42w8.png)
[dev.to Article - 10 JavaScript string methods you should know - by @frugencefidel ](https://dev.to/frugencefidel/10-javascript-string-methods-you-should-know-4l76)

Escape characters
```js
\' — Single quote
\" — Double quote
\\ — Backslash
\b — Backspace
\f — Form feed
\n — New line
\r — Carriage return
\t — Horizontal tabulator
\v — Vertical tabulator
```

---

### Array and array methods

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s2uyc4ksif42rtm810r.png)
[Top 10 JavaScript Array Methods You Should Know - By Rachel Cole at morioh.com](https://morioh.com/p/3ba421a8a63d)

```js
concat(arr1,[...]) // Joins two or more arrays, and returns a copy of the joined arrays
copyWithin(target,[start],[end]) // Copies array elements within the array, to and from specified positions
entries() // Returns a key/value pair Array Iteration Object
every(function(currentval,[index],[arr]),[thisVal]) // Checks if every element in an array pass a test
fill(val,[start],[end]) // Fill the elements in an array with a static value
filter(function(currentval,[index],[arr]),[thisVal]) //	Creates a new array with every element in an array that pass a test
find(function(currentval,[index],[arr]),[thisVal]) // Returns the value of the first element in an array that pass a test
findIndex(function(currentval,[index],[arr]),[thisVal]) // Returns the index of the first element in an array that pass a test
forEach(function(currentval,[index],[arr]),[thisVal]) // Calls a function for each array element
from(obj,[mapFunc],[thisVal]) // Creates an array from an object
includes(element,[start]) // Check if an array contains the specified element
indexOf(element,[start]) // Search the array for an element and returns its position
isArray(obj) // Checks whether an object is an array
join([seperator]) // Joins all elements of an array into a string
keys() // Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf(element,[start]) // Search the array for an element, starting at the end, and returns its position
map(function(currentval,[index],[arr]),[thisVal]) // Creates a new array with the result of calling a function for each array element
pop() // Removes the last element of an array, and returns that element
push(item1,[...]) // Adds new elements to the end of an array, and returns the new length
reduce(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going left-to-right)
reduceRight(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going right-to-left)
reverse() // Reverses the order of the elements in an array
shift() // Removes the first element of an array, and returns that element
slice([start],[end]) // Selects a part of an array, and returns the new array
some(function(currentval,[index],[arr]),[thisVal]) // Checks if any of the elements in an array pass a test
sort([compareFunc]) // Sorts the elements of an array
splice(index,[quantity],[item1,...]) // Adds/Removes elements from an array
toString() // Converts an array to a string, and returns the result
unshift(item1,...) // Adds new elements to the beginning of an array, and returns the new length
valueOf() // Returns the primitive value of an array
```

---

### Functions

Syntax
```js
function name(parameter1, parameter2, parameter3) {
  // code to be executed
}
```

Examples
```js
function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

// Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
```

[Source - JavaScript Functions - w3schools](https://www.w3schools.com/js/js_functions.asp)

---

### Maths

Methods
![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fnz754dotv0ki73p5sa.png)

{% link https://dev.to/worldindev/finally-how-to-understand-math-awesome-resource-list-4end %}

Properties
```js
E — Euler’s number
LN2 — The natural logarithm of 2
LN10 — Natural logarithm of 10
LOG2E — Base 2 logarithm of E
LOG10E — Base 10 logarithm of E
PI — The number PI
SQRT1_2 — Square root of 1/2
SQRT2 — The square root of 2
```

---

### Date

{% link https://dev.to/devlorenzo/js-how-to-get-current-date-1km %}

Javascript date objects allow us to work with date and time. We can retrieve information for it by creating a date and assign and assigning it to a variable:

```js
let d = new Date(); // We usually call it d or date
```

Date object provide us a lot of different methods, the most used are year, month, day, hours, minutes, seconds, and milliseconds. Remember that you always have to precise the entire year (1950 and not only 50), that we always start with 0 (so, for example, December is the eleventh, a minute is composed of 59 seconds...) and that day is in a 24 hours format. 

You can then retrieve from date a lot of differents info:
```js
d.getDate()	Returns the day of the month (from 1-31)
d.getDay()	Returns the day of the week (from 0-6)
d.getFullYear()	Returns the year
d.getHours()	Returns the hour (from 0-23)
d.getMilliseconds()	Returns the milliseconds (from 0-999)
d.getMinutes()	Returns the minutes (from 0-59)
d.getMonth()	Returns the month (from 0-11)
d.getSeconds()	Returns the seconds (from 0-59)
```

We can also set things... [Open the article](https://dev.to/devlorenzo/js-how-to-get-current-date-1km) to continue reading

---

### Events

{% details Mouse %}
onclick - The event occurs when the user clicks on an element
oncontextmenu - User right-clicks on an element to open a context menu
ondblclick - The user double-clicks on an element
onmousedown - User presses a mouse button over an element
onmouseenter - The pointer moves onto an element
onmouseleave - Pointer moves out of an element
onmousemove - The pointer is moving while it is over an element
onmouseover - When the pointer is moved onto an element or one of its children
onmouseout - User moves the mouse pointer out of an element or one of its children
onmouseup - The user releases a mouse button while over an element
{% enddetails %}

{% details Keyboard %}
onkeydown - When the user is pressing a key down
onkeypress - The moment the user starts pressing a key
onkeyup - The user releases a key
{% enddetails %}

{% details Frame %}
onabort - The loading of a media is aborted
onbeforeunload - Event occurs before the document is about to be unloaded
onerror - An error occurs while loading an external file
onhashchange - There have been changes to the anchor part of a URL
onload - When an object has loaded
onpagehide - The user navigates away from a webpage
onpageshow - When the user navigates to a webpage
onresize - The document view is resized
onscroll - An element’s scrollbar is being scrolled
onunload - Event occurs when a page has unloaded
{% enddetails %}

{% details Form %}
onblur - When an element loses focus
onchange - The content of a form element changes (for <input>, <select>and <textarea>)
onfocus - An element gets focus
onfocusin - When an element is about to get focus
onfocusout - The element is about to lose focus
oninput - User input on an element
oninvalid - An element is invalid
onreset - A form is reset
onsearch - The user writes something in a search field (for <input="search">)
onselect - The user selects some text (for <input> and <textarea>)
onsubmit - A form is submitted
{% enddetails %}

{% details Drag %}
ondrag - An element is dragged
ondragend - The user has finished dragging the element
ondragenter - The dragged element enters a drop target
ondragleave - A dragged element leaves the drop target
ondragover - The dragged element is on top of the drop target
ondragstart - User starts to drag an element
ondrop - Dragged element is dropped on the drop target
{% enddetails %}

{% details Clipboard %}
oncopy - User copies the content of an element
oncut - The user cuts an element’s content
onpaste - A user pastes content in an element
{% enddetails %}

{% details Media %}
onabort - Media loading is aborted
oncanplay - The browser can start playing media (e.g. a file has buffered enough)
oncanplaythrough - When browser can play through media without stopping
ondurationchange - The duration of the media changes
onended - The media has reached its end
onerror - Happens when an error occurs while loading an external file
onloadeddata - Media data is loaded
onloadedmetadata - Meta Metadata (like dimensions and duration) are loaded
onloadstart - Browser starts looking for specified media
onpause - Media is paused either by the user or automatically
onplay - The media has been started or is no longer paused
onplaying - Media is playing after having been paused or stopped for buffering
onprogress - Browser is in the process of downloading the media
onratechange - The playing speed of the media changes
onseeked - User is finished moving/skipping to a new position in the media
onseeking - The user starts moving/skipping
installed - The browser is trying to load the media but it is not available
onsuspend - Browser is intentionally not loading media
ontimeupdate - The playing position has changed (e.g. because of fast forward)
onvolumechange - Media volume has changed (including mute)
onwaiting - Media paused but expected to resume (for example, buffering)
animationend - A CSS animation is complete
animationiteration - CSS animation is repeated
animationstart - CSS animation has started
{% enddetails %}

{% details Other %}
transitionend - Fired when a CSS transition has completed
onmessage - A message is received through the event source
onoffline - Browser starts to work offline
ononline - The browser starts to work online
onpopstate - When the window’s history changes
onshow - A <menu> element is shown as a context menu
onstorage - A Web Storage area is updated
ontoggle - The user opens or closes the <details> element
onwheel - Mouse wheel rolls up or down over an element
ontouchcancel - Screen touch is interrupted
ontouchend - User finger is removed from a touch screen
ontouchmove - A finger is dragged across the screen
ontouchstart - Finger is placed on touch screen
{% enddetails %}

---

### Asynchronous JS and Error handling

{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}

SetTimeout will wait foo seconds and then execute the action. SetInterval will execute this same action every foo seconds.
Both can be inline or multiline, I recommend using multiline 99% of the time. It's important to notice that they work in milliseconds. 

SetTimeout:
```js
setTimeout(function(){
 	alert("Hello World!"); 
}, 2000); // 2 seconds 

setTimeout(function(){ alert("The fifth episode of the series"); }, 3000);
```

SetInterval:
```js
setInterval(function() {
  alert("I want to show you another Javascript trick:");
}, 1000); 

setInterval(function() {alert("How to work with SetTimeout and SetInterval");}, 1000); 
```

* If you want to remove the first delay you have to add code a first time out of the function. I recommend you save this code in a separate function you can call whenever you need. [Continue reading here](https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf)

---

{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}

First, it's important to notice that a majority of backend actions have an unknown result, we don't know if it will work when we write our code. So we always have to write two different codes, one if the action works, another if the action results in an error. This is exactly how a try/catch work, we submit a code to try, if it works code continues, if it doesn't we catch the error (avoiding the app crashing) and run another code. This is a very common thing we don't only use in web development (also in Android app development with java for example). 

#### Try / Catch
```js
  try {
  // Try to run this code 
 // For example make a request to the server
}
catch(e) {
  console.log(e)
  // if any error, Code throws the error
 // For example display an error message to the user
}
```

#### Promises

The big problem with try/catch is that when you have to nest it (and you will have), it's really messy and difficult to read and write. So Javascript support promises with async functions:

Syntax: new Promise (executor)
executor= (accept, reject) =>{}

```js
var asyncronus_function = (number)=>
		{
			return new Promise( (accept, reject)=>
			{
			})
		} 
```              
This function returns a promise object.
If function end well we return a accept(), otherwise reject()
[More here](https://dev.to/devlorenzo/js-how-to-handle-errors-fi6)

[Back to Top - 🔝](#top)

---

## Projects ideas to become a javascript master <a name="projects"></a>

{% link https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k %}
a) [General (for beginners)](https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k)
   1. Converters
   2. Word Counter
   3. Timer / Clock
   4. Random password generator
   5. Calculator

b) [Games](https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k)
   1. Guess the number
   2. Math time!
   3. Other Games

c) [Social & Websites](https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k)
   1. Log-in, Sign-up
   1. Filter
   2. To-Do List
   3. Social
   3. Portfolio

[Open the post](https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k) for more info about each project!

[Back to Top - 🔝](#top)

---

## Other resources:<a name="alpha"></a>

{% collapsible Table of content %} 
* [My cheat Sheet](#delta)
* [Projects ideas to become a javascript master ](#projects)
* [Other resources](#alpha)
  1. [Complete Javascript cheat sheets](#1da)
  2. [JS promises](#1db)
  3. [JS Arrays](#1dc)
  4. [JS loops](#1dd)
  5. [Preprocessor](#1de)
    * [CoffeScript](#1df1)
    * [EJS](#1df2)
    * [Babel](#1df3)
  6. [JS Frameworks & Libraries](#frameworks)
    * [Angular](#2f)
    * [Vue](#2g)
    * [React](#2g+)
    * [JQuery](#2g+++)
    * [Others](#2g++)
    * [Node](#2c)
{% endcollapsible %}

### Complete JS cheat sheets:<a name="1da"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4flymw2rjnrivyz5xrq.png) 

[By dev hints](https://devhints.io/es6)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b830syxoi2lo4qtlv5pa.png) 

Incredible resource --> [By website setup](https://websitesetup.org/javascript-cheat-sheet/)

> [PDF Version](https://websitesetup.org/wp-content/uploads/2020/09/Javascript-Cheat-Sheet.pdf) 

Two Others:
[By overapi](https://overapi.com/javascript)

[By HTML cheat sheet.com - Interactive](https://htmlcheatsheet.com/js/)

---

#### JS promises (Asynchronous JS):<a name="1db"></a>

[Dev.to article](https://dev.to/devlorenzo/js-how-to-handle-errors-fi6
)

{% link https://dev.to/devlorenzo/js-how-to-handle-errors-fi6 %}

[Dev.to article](https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf)

{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixczevn204yxjud70pb1.png) 

[By codecadamy](https://www.codecademy.com/learn/introduction-to-javascript/modules/javascript-promises/cheatsheet)

---

#### JS Arrays: <a name="1dc"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j334aq9w8eci9ickpl0t.png) 

[By dev hints](https://devhints.io/js-array)

---

#### JS Loops:<a name="1dd"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jhf0fjiwwynoucb0qbr.png) 

[By codecademy](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-loops/cheatsheet)

---

#### JS preprocessor:<a name="1de"></a>

##### CoffeeScript:<a name="1de1"></a>

[CoffeeScript website](https://coffeescript.org/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99f33sq8sx5st9a9chc5.png) 

Others:
[At karloeaspirity.io](https://karloespiritu.github.io/cheatsheets/coffeescript/)

[Quick reference - By autotelicum - PDF Version](https://autotelicum.github.io/Smooth-CoffeeScript/CoffeeScript%20Quick%20Ref.pdf)

[JS to CoffeeScript](https://awsm-tools.com/code/coffee2js)

---

##### EJS:<a name="1de2"></a>

[EJS website](https://ejs.co/)

[EJS docs](https://ejs.co/#docs)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgan5wm4t3czx670ofu8.png) 

[At one compiler](https://onecompiler.com/cheatsheets/ejs-embedded-javascript-templates)

[Or at GitHub](https://gist.github.com/cmugla/daf2ab86937b9983c30f3724914644da)

---

##### Babel:<a name="1de3"></a>

[Babel website](https://babeljs.io/)

[Babel docs](https://babeljs.io/docs/en/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfj0wkggbwq0l1y27ynp.png) 

[By karloespiritu.io](https://karloespiritu.github.io/cheatsheets/babel/)

[Or at Medium](https://medium.com/@housecor/babel-6-cheat-sheet-7344f7936f2d)

---

## JavaScript-based Frameworks & Libraries:<a name="frameworks"></a>

[Article Angular vs vue vs react at codeinwp.com](https://www.codeinwp.com/blog/angular-vs-vue-vs-react/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qzrnkchpttnat5dce8h.png)
 
[Best Javascript Frameworks - article at hackr.io](https://hackr.io/blog/best-javascript-frameworks)

### Angular<a name="2f"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuapemkwx3y6g45wvnt4.png)  

[By angular.io](https://angular.io/guide/cheatsheet)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgb8ykddysmlydjnj262.png) 

[By dev hints](https://devhints.io/angularjs)

---

### Vue<a name="2g"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfrigdgnfc3o06ozqqsp.png)
 
[By vue mastery](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alpgv7qgqrbzviy2brxn.png)  

[By dev hints](https://devhints.io/vue)

[Other - By marozed](https://marozed.com/vue-cheatsheet)

---

### React<a name="2g+"></a>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekeqhraf5y8l5e6ixec3.png) 

[By dev hints](https://devhints.io/react)

Others:
[By react cheat sheet.com](https://reactcheatsheet.com/)

[At GitHub: React + Typescript cheat sheet](https://github.com/typescript-cheatsheets/react)

---

### JQuery<a name="2g+++"></a>

[AJAX intro + cheat sheet at GitHub](https://gist.github.com/joelrojo/c54765a748cd87a395a2b865359d6add)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2ry4ka9vndpmq1bqx8r.png)
 
[By ascarotero.com](https://oscarotero.com/jquery/) - Really well done

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l5zoteatxssinlbi5jx.png)
 
[By Website Setup - PDF Version](https://websitesetup.org/wp-content/uploads/2017/01/wsu-jquery-cheat-sheet.pdf)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrvizdvoulfumnpun78e.png)
 
[By make website hub](https://makeawebsitehub.com/jquery-mega-cheat-sheet/)

> [PDF Version](https://makeawebsitehub.com/wp-content/uploads/2015/09/jquery-mega-cheat-sheet-Printable.pdf)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gir05mvl85rpzzy1k053.png)

[Article about top 10 jquery cheat sheets](https://blog.templatetoaster.com/jquery-cheat-sheet/)
 
[Or by over API](https://overapi.com/jquery)

---

### Others<a name="2g++"></a>

##### Ember.js:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96rx2e1qy125my1f4x07.png)

[Website](https://www.emberjs.com/)
 
##### Meteor:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuvus5pmet1og0aw6emy.png)
 
[Website](https://www.meteor.com/)

##### Mithril:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zgxppfd0ma52qy9nuk1.png)
 
[Website](https://mithril.js.org/)

##### [Node](#2c)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf4hvrcqmplrdjmbdqyd.png)
 
[Website](https://nodejs.org/en/)

---

## Other Resources: <a name="oother"></a>

### Advanced Topics
* How Browsers Work: Behind the scenes of modern web browsers
* Learning Advanced JavaScript by John Resig
* JavaScript Advanced Tutorial by HTML Dog
* WebGL Fundamentals
* Learning JavaScript Design Patterns by Addy Osmani
* Intro to Computer Science in JavaScript
* Immutable data structures for JavaScript

### Libraries/Frameworks/Tools
* Introduction to React video
* React Interview Questions
* JavaScript Promises: A Tutorial with Examples
* Khan Academy: Making webpages interactive with jQuery
* A Beginner’s Guide To Grunt: Build Tool for JavaScript
* Getting Started with Underscore.js
* jQuery Course by Code School
* Thinkster.io Courses on React and Angular
* The Languages And Frameworks You Should Learn In 2016
* ES6 Tools List on GitHub
* Getting Started with Redux

### Server-side JavaScript
* Real-time Web with Node.js Course by Code School
* NodeSchool Course
* Node.js First Look on Lynda
* All about NodeJS Course on Udemy
* Server-side Development with NodeJS Course on Coursera

[Source (with links) - 50 resources to help you start learning JavaScript - By Daniel Borowski - At Medium](https://medium.com/coderbyte/50-resources-to-help-you-start-learning-javascript-in-2017-4c70b222a3b9)

Read also:

{% link https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k %}

{% link https://dev.to/worldindev/finally-how-to-understand-math-awesome-resource-list-4end %}

{% link https://dev.to/worldindev/25-udemy-courses-worth-your-money-time-2e5j %}

Thanks for reading and Happy coding ❤

---

Full Compilation of cheat sheets:

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## ⚡Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> [Subscribe to our Newsletter](https://worldindev.ck.page/) <-- Very important
--> [Follow me on Twitter](https://twitter.com/DevLorenzo1) <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

---

## **[Subscribe to my Newsletter!](https://worldindev.ck.page/)**
* The PDF version of this article!!!
* Monday: Weekly digeeeeeests!!!
* Wednesday: Discussions and dev insights - We debate around developer lifes - Examples: The importance of coffee behind development / If you weren't a dev, you'd be a...​
* Gifts, lots of 🎁. We send cheat sheets, coding advice, productivity tips, and many more!
* That's --> free <-- and you help me!

---

PS: It took me around 10 hours to complete the article - So please remember the **like ❤️** and **super like 🦄** - Let's reach the top of the month this time 🚀

[Back to Top - 🔝](#top)