JavaScript Quick Reference Cheatsheet

Introduction:

• Strict mode
• Comments
• Console.log()
• String Concatenation and String Interpolation
• Template Literals
• Values (Reference or Primitive Data Types)
• Variables (var, let and const)
• String .length

Operators:

• Arithmetic Operators
• Assignment Operators
• Logical Operator ||
• Logical Operator &&
• Logical Operator !
• Ternary Operator ? :
• Comparison Operators (>, <, >=, <=)
• Equality Operators: == vs ===
• Different (Not Equal) Operator: !==
• Type Conversion and Type Coercion

Conditionals:

• if Statement
• else Statement
• else if Clause
• Truthy and Falsy statement:
• switch Statement

Functions:

• Function Parameters
• return Keyword
• Function Declaration
• Function Expressions
• Functions Calling Other Functions
• Named Functions
• Anonymous Functions
• Arrow Functions (ES6)

Scope:

• Global scope
• File or Module scope
• Function scope
• Code Block scope
• Hoisting

Arrays:

• Index
• Property .length
• Method .push()
• Method .unshift()
• Method .pop()
• Method .shift()
• Method .indexOf()
• ES6 Method .includes()
• Method .concat()

Loops:

• For Loop
• Looping Through Arrays with Property .length (Reverse Loop / Looping Backwards)
• Looping, Breaking and Continuing Through Arrays
• Nested For Loop
• While Loop
• Do…While Statement
• Break Keyword

Iterators:

• Functions Assigned to Variables
• Callback Functions
• Higher-Order Functions
• Array Method .reduce()
• Array Method .forEach()
• Array Method .filter()
• Array Method .map()

Objects:

• Restrictions in Naming Properties
• Dot Notation for Accessing Object Properties
• Accessing non-existent JavaScript properties
• JavaScript Objects are Mutable
• JavaScript for...in loop
• Properties and values of a JavaScript object
• Delete operator
• Javascript passing objects as arguments
• JavaScript Object Methods
• this Keyword inside an object function (method) (object scope)
• this keyword inside a Javascript function outside of an object (global scope)
• JavaScript Arrow Function this Scope
• Javascript getters and setters restricted
• getters and setters intercept property access
• Javascript factory functions
• JavaScript destructuring assignment shorthand syntax
• shorthand property name syntax for object creation
• Destructuring Arrays
• Destructuring Objects
• Spread Operator ...
• For...Of Loop (Iterating over an Array, String, Map)
• REST Patterns And Parameters
• Destructuring in REST
• Shortcircuiting && and ||
• Nullish Coalescing Operator ??

Classes:

• new keyword
• Class Constructor
• Class Methods
• Static Methods
• extends

Promises:

• States of a JavaScript Promise (pending, fulfilled (resolved), rejected)
• .catch() method for handling rejection / error handling
• JavaScript Promise.all() method
• Executor function of JavaScript Promise object
• .then() method of a JavaScript Promise object
• setTimeout()
• Avoiding nested Promise and .then()
• Creating a Javascript Promise object
• Chaining multiple .then() methods

Async And Await:

• Resolving JavaScript Promises
• Asynchronous JavaScript function
• Async Await Promises
• Using async await syntax
• JavaScript async…await advantage
• Async Function Error Handling using try..catch
• JSON.parse() method
• JavaScript aysnc await operator

Requests:

• HTTP GET request
• JSON: JavaScript Object Notation
• Asynchronous calls with XMLHttpRequest (XHR)
• The query string in a URL
• XMLHttpRequest GET Request Requirements
• HTTP POST request
• HTTP POST request with the XMLHttpRequest API
• JSON.stringify() method
• Promise URL parameter FETCH API
• ok property FETCH API
• Fetch API Function
• JSON Formatted response body
• async await syntax

Browser Compatibility and Transpilation:

• Running scripts with npm
• Babel Package Installation
• ES5 & ES6 Compatibility
• Installing Development JavaScript Packages
• ES6 JavaScript backwards compatibility
• Babel configuration file
• Babel build process
• Installing JavaScript Packages
• Caniuse.com for checking browser support
• Reasons to update JavaScript
• Node Package Manager
• Initiate JavaScript project

Strict Mode:

• Examples
• Note allowed in Strict mode

Modern JavaScript Sandbox

Building projects with vanilla JavaScript. (No frameworks or libraries used)

Topics Covered:

• Basics & Fundamentals: Data types, let & const variables, functions, conditionals, loops, object literals, arrays, etc
• DOM Manipulation: Selectors, traversing the DOM, show/hide, creating & removing elements, event listeners
• OOP: ES5 prototypes, inheritance, ES2015 classes & sub-classes, constructors
• Async JS: Ajax & XHR, Fetch API, callbacks, promises, async / await
• ES2015+: Arrow functions, template strings, generators, iterators, maps & sets, symbols & more
• JavaScript Patterns: Module, Factory, State, Observer, Mediator, Singleton
• Other: Local & session storage, regular expressions, try/catch error handling
• Extras: Bootstrap 4, Materialize CSS, Skeleton CSS, HTTP/REST APIs, Webpack & Babel

12 Projects Covered:

• Task List With Local Storage (DOM Manipulation & Local Storage)
• Loan Calculator (DOM)
• Number Guessing Game (DOM Manipulation & Local Storage)
• Book Listing App / Book Manager (OOP, ES5 Prototype & ES2015 Classes Version)
• Chuck Norris Joke Generator
• EasyHTTP - Custom HTTP Library (3 Versions - Callbacks / Promises / Async & Await) (Fetch API)
• Github Finder (GitHub API)
• WeatherJS App (Openweathermap API)
• Profile Scroller (Iterators and Generators)
• State Pattern Interface
• Calorie and Meal Tracker (Module Pattern)
• Frontend CRUD Posts app for REST API (using ES6 Modules, Webpack & Babel)

VanillaJS Projects

Building projects with vanilla JavaScript. (No frameworks or libraries used)

Topics Covered:

• Basics & Fundamentals: Data types, let & const variables, functions, conditionals, loops, object literals, arrays, etc
• DOM Manipulation: DOM Selectors, traversing the DOM, show/hide, creating & removing elements, event listeners
• OOP: ES5 prototypes, inheritance, ES2015 classes & sub-classes, constructors
• Async JS: Ajax & XHR, Fetch API, callbacks, promises, async / await
• ES2015+: Arrow functions, template strings, generators, iterators, maps & sets, symbols & more
• JavaScript Patterns: Module, Factory, State, Observer, Mediator, Singleton
• Other: Local & session storage, regular expressions, try/catch error handling
• HTML5 Canvas
• The Audio & Video API
• Drag & Drop
• Web Speech API (Syth & Recognition)
• Working with Local Storage
• High Order Array Methods - forEach, map, filter, reduce, sort
• setTimout, setInterval
• Arrow Functions
• Extras: Bootstrap 4, Materialize CSS, Skeleton CSS, Tailwind CSS, HTTP/REST APIs, Webpack & Babel

Projects Covered:

• Expanding Cards
• Progress Steps
• Rotating Navigation Animation
• Hidden Search Widget
• Blurry Loading
• Scroll Animation
• Split Landing Page
• Form Wave Animation
• Music Pad
• Dad Jokes Generator
• Event Keycodes
• Faq Collapse
• Random Choice Picker
• Animated Navigation
• Incrementing Counter
• Drink Water A Day Tracker
• Movies Info App
• Background Slider
• Clock Theme
• Button Ripple Effect
• Drag And Drop
• Drawing Canvas App
• Simple Keyframes
• Content Placeholder
• Sticky Navbar
• Double Vertical Slider
• Toast Notification
• Github Profiles
• Double Click Heart
• Auto Text Effect
• Password Generator
• Checkbox Slider Animation with Logic
• Notes App
• Animated Countdown
• Image Carousel
• Hoverboard
• Pokemon Info Cards
• Mobile Navigation Tab
• Password Strength Background
• 3D Background Boxes
• Verify Account UI
• Live User Filter
• Feedback UI Design
• Custom Range Slider
• Netflix Mobile Navigation
• Quiz App
• Testimonial Box Switcher
• Random Image Feed
• To-do List
• Catch Game
• Drum Kit
• Update CSS Variables using JS
• Arrays Trainer
• Flexbox Gallery
• Auto-Suggest Input
• Explore Developer Tools
• Whack-A-Mole Game
• Countdown Timer
• Webcam Photo Booth
• Video Speed Controls
• Video Volume Speed Controls
• Speech To Text Recognition
• Text To Speech Synthesizer
• Sticky Navigation With Logo on Scroll
• JS Event Capture, Event Propagation, Event Bubbling, Once
• Compare JS Reference Versus Copying
• JS Map And Reduce
• Follow Along Nav Stripe
• Click And Drag Feature
• Following Link Highlighter
• Hold Shift Select Checkboxes
• Key Sequence Detection
• Geolocator
• Sorting
• Content Slide In On Scroll
• Shadow Effect On Mouse Move
• Local Storage