Pieces of Advice (18 Part Series)

Hello World! I felt bored after completing the Ultimate Cheat Sheet Compilation, 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!!

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

JS Cheat Sheet:

--> Download the PDF Version of this Cheat Sheet here

Include Javascript:

<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:

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

Data Types:

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

Source - Datatypes In JavaScript - c-sharpcorner.com

Operators

Basic Operators

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

Comparison Operators

== 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

&& Logical and
|| Logical or
! Logical not

Bitwise Operators

& 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.

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.

var 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

Strings

dev.to Article - 10 JavaScript string methods you should know - by @frugencefidel

Escape characters

\' — 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

Top 10 JavaScript Array Methods You Should Know - By Rachel Cole at morioh.com

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

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

Examples

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

Maths

Methods

Properties

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

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:

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:

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 to continue reading

Events

Asynchronous JS and Error handling

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:

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

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

SetInterval:

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

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

  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) =>{}

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

Back to Top - 🔝

Projects ideas to become a javascript master

a) General (for beginners)

1. Converters
2. Word Counter
3. Timer / Clock
4. Random password generator
5. Calculator

b) Games

1. Guess the number
2. Math time!
3. Other Games

c) Social & Websites

1. Log-in, Sign-up
2. Filter
3. To-Do List
4. Social
5. Portfolio

Open the post for more info about each project!

Back to Top - 🔝

Other resources:

Complete JS cheat sheets:

By dev hints

Incredible resource --> By website setup

PDF Version

Two Others:
By overapi

By HTML cheat sheet.com - Interactive

JS promises (Asynchronous JS):

Dev.to article

Dev.to article

By codecadamy

JS Arrays:

By dev hints

JS Loops:

By codecademy

JS preprocessor:

CoffeeScript:

CoffeeScript website

Others:
At karloeaspirity.io

Quick reference - By autotelicum - PDF Version

JS to CoffeeScript

EJS website

EJS docs

At one compiler

Or at GitHub

Babel:

Babel website

Babel docs

By karloespiritu.io

Or at Medium

JavaScript-based Frameworks & Libraries:

Article Angular vs vue vs react at codeinwp.com

Best Javascript Frameworks - article at hackr.io

Angular

By angular.io

By dev hints

By vue mastery

By dev hints

Other - By marozed

React

By dev hints

Others:
By react cheat sheet.com

At GitHub: React + Typescript cheat sheet

JQuery

AJAX intro + cheat sheet at GitHub

By ascarotero.com - Really well done

By Website Setup - PDF Version

By make website hub

PDF Version

Article about top 10 jquery cheat sheets

Or by over API

Others

Ember.js:

Website

Meteor:

Website

Mithril:

Website

Node

Website

Other Resources:

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

Read also:

Thanks for reading and Happy coding ❤

Full Compilation of cheat sheets:

⚡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 <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Subscribe to my Newsletter!

• 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 - 🔝