Hello everyone! For today’s post, I’ve decided to do a summary map of the fundamentals of JavaScript. It’s made with the beginner in mind and basically summarizes the main foundational concepts without you needing to spend hours reading up on everything.

The point is to give you a gist of everything and let you get started quicker. This is not, by all means, a full guide. It’s only part of a bigger picture which I’m working on constructing.

Alternatively, it can be used as a reference guide to quickly get you started. Bite-sized explanations are posted below. Hope you like!

1. Code Structure

At its simplest, JavaScript is made up of a series of statements and semi-colons.

A statement is like a sentence — but in code.

For example, this is a statement:

alert('Say hi');

Semi-colons are not compulsory and can be committed when there is a physical line break in between. It’s the equivalent of a full stop.

But sometimes, line breaks do not guarantee that the statement is done. Using + signs can act as a connector between lines.

For example:

console.log('This ' + name + ' is gibrish');

2. “use strict”

For a long time, JavaScript didn’t have to worry about backward compatibility. Why? Because feature releases never overlapped — until it did.

In 2009, ECMAScript 5 (ES5) was released and new features modified some of the existing ones. By default, modifications are not applied unless you enable it using "use strict"

"use strict" must be placed at the top of your JavaScript code or else it won’t get applied.

Nowadays, always "use strict" because we don’t want to use the older implementations of JavaScript.

3. variables

Variables are placeholders for information. Think of it as a memory bucket that holds your data.

Use the keyword let to declare a variable and give it a name.

This will initialize it. You can assign a value to it using =

If you don’t assign anything to it, the default is set to undefined — which means that it’s been initialized but there’s absolutely nothing in the bucket. In short, it just means that it hasn’t been set, ever.

This is different from null

With null , a developer has to manually assign it. In a way, it’s physically acknowledging the fact that your code has purposely made sure that the bucket is empty and that you just haven’t forgotten to fill it or that something went wrong in the process.

In older scripts, var is used. The way they behave impacts on your final output. I sort of wrote about it here. Feel free to check it out if you’re interested.

4. data types

There are not many data types in JavaScript when compared to other languages. Here’s the comprehensive list and what they are:

number

let someNumber = 2984;
someNumber = 29.84;

No “quote marks” for numbers. Just the plain old straight numbers. You can do both integers and floating-point numbers. Basic operators work on numbers.

There’s also a special infinity number available. You just need to do 1/0 — so, one divided zero. This value is deemed to be the biggest number of all time and can not be viewed as the smaller outcome.

If you get NaN — it means that you’ve hit a computational error. It also means that you’re trying to do a mathematical operation on something that doesn’t make sense like dividing a string text with a number.

BigInt

In JavaScript, the biggest number it can do is about 16 digits long. For most cases, our applications can survive on less than 16 digits. However, every now and then we might need it for really big numbers like cryptography.

A BigInt is created by adding an n at the end of the number.

const someMassiveNumber = 1234567890123456789012345678901234567890n;

String

A string is a text variable, indicated by it being surrounded by quotes. There are 3 types of quotes you can use — 'single quotes' , "double quotes" and ``back ticks

Double and single makes no difference in JavaScript. Backticks are more for extending the functionality of a piece of string and are used to embed variables using ${ }

For example:

let cat = "Tibbers";
console.log( `Hi, ${cat}` );

If you used quote marks in the example above, it just becomes a normal string.

Boolean

Will print out either true or false

This is often the result of a comparison of some sort.

null

It just means “nothing”. Non of that null pointer stuff you see in other languages.

undefined

undefined simply means the value hasn’t been assigned yet. Nothing fancy.

objects

Other types of data types are called primitives because they’re simple. Objects are things that allow you to set more than just one item to it.

5. type conversion

Sometimes, you need to switch between the different types for whatever reason. Here’s how you do it.

let someFakeBoolean = true;
someFakeBoolean = String(someFakeBoolean);

//using String() will convert your variable into a string
let someFakeNumber = "3872";

someFakeNumber = Number(someFakeNumber);
//using Number() will convert your string into a number

Please take note that converting random text into numbers doesn’t work, and it doesn’t make any sense, in general, to do so. You’ll end up with NaN

Boolean() will turn any value into a true or false output. Anything “empty” like 0 , null, undefined, and NaN will return false. Anything else will return true

6. operators

These operators are not JavaScript specific and are generally supported the same way in most programming languages. Here’s the list:

AND (&)  OR (|)  XOR (^)  NOT (~)  LEFT SHIFT (<<)  RIGHT SHIFT (>>)  ZERO-FILL RIGHT SHIFT (>>>)

When using these operators, just say them out loud and they basically do what you’re saying.

For example:

printLine(line, id){
 if(line & id){ //if both exists, run this code }
}

7. comparisons

Think mathematical comparisons. That’s what these are:

• Greater/less than: a > b, a < b.
• Greater/less than or equals: a >= b, a <= b.
• Equals: a == b (single = sign is an assignment rather than a comparitors).
• Not equals. a != b.

8. alert, prompt, confirm

These are the popups that go ‘ding’

alert(yourMessageHere);

Prompts take two arguments — the question and the answers.

let promptMe = prompt('your question here', ['blue pill', 'red pill']);

alert(`You've taken the ${promptMe}`);

Confirm means you need to click on the accept button for the code to return true.

let isOver18 = confirm("Are you over 18?");

alert( isOver18 ); // true if OK is pressed

9. conditionals

The ever so famous if statement is a backbone of beginning JavaScript projects. The idea is simple, if something satisfies the conditions, run the code.

This is what it looks like:

if (true) alert('woot!');

The condition always returns a boolean as the final result. So you can have mathematical comparisons, checks and anything else you want in there, as long as it evaluates to a boolean.

In addition to the if statement, there’s else if and else

else if extends it with another if statement. else simply ends it with a catch all kind of clause.

Here’s what it looks like:

if(false){
   //this code won't run because it returned false 
}else if(false){
   //this also won't run
}else if(false){
   //still nope
}else {
   //final catch all
} 

10. loops

Think of it as a repeated if statement without having to manually write out the same thing every time or do multiple calls to get it to run.

It has a condition and will only stop running the code once the condition returns false

let i = 0;
while(condition){
  //some code here
  //don't forget to set your exit clause by modifying the condition to return false. Most people just use i++
}

“do…while” loops turns it the syntax upside down and checks the condition after it’s run the code. Why? Because sometimes you just need to run the code at least once.

Here’s what it looks like:

do{
  //some code here
}while(condition);

11. switch statements

Switch statements basically give you the ability to write options.

Here’s what it looks like:

switch(yourValueHere){ 
   case 'optionOne' :    
     //your code here   
   break; 
   case 'optionTwo':   
     //your code here   
   break; 
   case 'optionThree':   
     //your code here   
   break; 
   default:   
     //your fallback code here 
}

You can also group cases so you don’t have to write the same output more than once.

switch(yourValueHere){ 
   case 'optionOne' :    
   case 'optionTwo':   
     //your code here   
   break; 
   case 'optionThree':   
     //your code here   
   break; 
   default:   
     //your fallback code here 
}

12. functions

Functions are like the building blocks of a JavaScript application, library, framework and any ‘program’ written in the scripting language.

There are built in functions that we’ve already encountered before like alert() and prompt()

You can write you own functions like this:

function functionNameHere(){
  //your code here
}

And then you just call it using the function name:

functionNameHere();

13. function expressions

There’s more than one way to write a function. Here are some ways you can write it:

function yourFunctionName(){
 // some code here
}

let anotherFunction = function(){}

14. arrow functions

An arrow function is just syntax to make writing your functions shorter. Here’s what it looks like:

let functionNameHere = (argumentsHere) => //do something

Arrow functions usually sit on one line but multiple lines are possible with the help of curly { }

Here’s what it looks like:

let cat = () => { 
   //this is 
   //a multi-line 
   //example 
   return someValue; //is required. Can just be a straight return; 
}

When using curl { } with arrow functions, you need to also use return to exit out of it.

And that’s basically it for this piece — for how.

I hope you found it useful!