Javascript Building Blocks: A to Z
🤔 >>> ⌨️ >>> 📄 >>> 😯 >>> 💥 >>> 😍 >>> 🎉
What is this Guide?
This is an alphabetical, comprehensive reference (very much in progress!) for the Javascript language. It’s similar to the info you can find from MDN or W3Schools but aims to be easier to navigate and consume. In fact, I built this guide in part to make it easier to consume the content they themselves provide.
The Find Tool is Your Buddy 🔍
Due to the sheer volume of content I strongly advise using the browser’s Find feature to skip directly ahead to content.
To open the Find tool:
Chrome: command+F
Edge: control+F
Firefox: command+F
Safari: command+F
How to Find Content
Each topic header is prefixed with a > followed by the topic itself.
Like so: >Variables (no spaces, capitalization irrelevant)
If the desired topic is not listed in the ToC above then it is not currently in the plan for the guide. Red items do not currently have content but I plan to flesh them out in the future. ⏳
To scroll to the top of the page and view the ToC type:
Chrome: command+↑
Edge: Home
Firefox: command+↑
Safari: shift+spacebar
How the Content is Structured
The structure for each topic is: Topic > TL;DR one liner> Definition > Code examples > Related Concepts > Links to additional info
If a topic is not capitalized that generally indicates it is syntax built into JS itself and I have simply mirrored the lowercase implementation therein.
For deeper analysis on a given topic see the Links section for canonical documentation and/or additional articles/blogs I’ve found helpful.
Why Use this Guide?
Learning development is a BIG challenge. It gets cognitively exhausting dealing with the sheer volume of information required to understand vanilla Javascript in addition to the disparate ways the information is presented.
To alleviate this issue I have created this guide which presents concepts in a consistent, concise and easy to access fashion. It does not pretend to be exhaustive on the concepts but it does provide enough to understand them, implement them and learn more about them if needed.
Building a Development Resource Architecture
I intend to create additional posts that build off of and enhance the content contained in this guide. To that end, if you have any feedback (positive or negative) please feel free to comment! It will help me optimize my thinking and deliver better products that benefit more folks.

>AJAX
>Arithmetic
>Arrays
>Array Methods
>Assignment
>BDD (Behavior Driven Development)
>Bitwise
>Booleans
>Break
>Comments
How to write notes inside code or debug issues without deleting code
Definition
Comments are statements that are not executed by the browser. They are strictly for use as notes to help the reader understand what code is doing or why decisions were made. It’s all too easy to forget why a path was taken months down the line even for the person that wrote a given piece of code!
Comments are also used in debugging to “comment out” code in a file so that you can pin point where the program isn’t behaving properly. This is a more sensible process than cutting/deleting code out which removes it from your mind’s eye.
Comments can be single line via // at the start of a line or multiline via opening and closing notations /* your comment here*/.
Code
Related Concepts
Debugging · Statements
Links
MDN: Context
W3Schools: Context
>Comparisons
>Concurrency
>Conditionals
>Console
>console.log()
>const
>constructor
>Control Flow
>Data Types
>Dates
>Date Formats
>Date Methods
>Debugging
Determining why the program isn’t working as expected and resolving it
Definition
Debugging is an aspect of any programming endeavor whether it is in JS or another language. It involves pinpointing any syntax or logical errors in your code and resolving them to make your program run as expected without any issues.
Debugging may arise due to the program producing no output at all or it may start with a specific error related to a piece of code. Most of the time, you will be working through debugging in the browser’s console. The developer console is a way for you to see what code is doing under the hood in order to address errors/issues. All major browsers include a console within their suite of “developer tools”.
Sometimes you will work in the console to debug but other times you’ll take a look at your code and quickly see why wonky behavior is happening. I’ve provided a simple syntactical debugging example below.
Code
Related Concepts
Comments · Console · console.log() · Errors
Links
Browser Consoles: Chrome · Edge · Firefox · Safari
Context: Javascript.Info · Mozilla · W3Schools
>default
>do…while
>ECMAScript
>Errors
>ES5
>ES6
>ES7
>ES8
>Events
>export
>Expressions
>extends
>Functions
>Function Apply
>Function Call
>Function Closures
>Function Definitions
>Function Expressions
>Function Invocation
>Function Parameters
>Generators
>getter
>Hoisting
>if…else
>import
>Iterators
>JSON
>Keywords
>label
>let
>Literals
>Literals: Array
>Literals: Boolean
>Literals: Floating-Point
>Literals: Integer
>Literals: Object
>Literals: RegExp
>Literals: String
>Loops
>Loops: For
>Loops: While
>Math
>Numbers
>Number Methods
>Objects
>Object Definitions
>Object Inheritance
>Object Methods
>Object Properties
>Object Prototypes
>Operators
>Operators: Assignment
>Operators: Comma
>Operators: Comparison
>Operators: delete
>Operators: Grouping
>Operators: in
>Operators: instanceof
>Operators: Logical
>Operators: Mathematical
>Operators: new
>Operators: String
>Operators: Ternary
>Operators: typeof
>Operators: void
>Output
>Primitives
>Primitives: Boolean
>Primitives: Null
>Primitives: Undefined
>Primitives: Number
>Primitives: String
>Primitives: Symbol (ES6)
>Primitives: Object
>Promises
>Proxy (ES6)
>Random
>Reflect (ES6)
>Regular Expressions
>Reserved Words
>return
>Scope
>setter
>SIMD
>Statements
Writing executable instructions to build a program
Definition
Statements in JS are line by line instructions which are executed by the browser. They aren’t the simplest building blocks but they are what allows you to begin writing logic which constitutes a program.
For example, data types are used heavily in statements but by themselves don’t perform anything. Placing them in statements allows you to store them and build logic with them (and a lot more).
If you just write a value such as 10 in your code how does the browser know that it exists, let alone what you want to do with it? The answer is in writing a statement to either store the value (i.e. variable) and/or use it in some manner (i.e. function).
Statements consist or are a combination of: values, keywords, operators, expressions and comments.
Code
Related
Comments · Expressions · Keywords · Operators · Statement Syntax · Values
