Javascript Building Blocks: A to Z

Will Sparger
Jul 20, 2017 · 5 min read

🤔 >>> ⌨️ >>> 📄 >>> 😯 >>> 💥 >>> 😍 >>> 🎉

Table of Contents

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.

Meanwhile the primitives are gathering, armed to the teeth with foot guns

>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

A few progressive examples of statements

Related

Comments · Expressions · Keywords · Operators · Statement Syntax · Values

Links

Context: MDN · W3Schools

Reference: MDN· W3Schools


>Statement Syntax

>static

>Strict Mode

>Strings

>String Methods

>Switch

>TDD (Test Driven Development)

>this

>throw

>try…catch

>Type Conversion

>Values

>var

>Variables

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade