7 Major JavaScript Concepts Explained Simply

No lingo. Written for humans. With code snippets. In 5 minutes.

7 Major JavaScript Concepts Explained Simply

The purpose of lingo is to encapsulate a particular idea into a nice and compact word. However, meaning is lost if you don’t understand what the word means.

In the dev world, more advanced topics are often out of reach and often times discouraging for new developers. In part, it’s because it feels like they’re reading a foreign novel. The letters and words might look familiar, but none of it makes sense.

And it’s hard to make sense of everything, especially if you have to keep stopping every second word to figure out what the sentence is trying to tell you.

For this piece, I’ve decided to compile the top 7 concepts that I often find myself translating for new developers. I hope you find them useful in your quest to become a better developer.

1. immutability, mutation, mutable

Weak immutability is when the shape of your data doesn’t change. Strong immutability is when nothing about the object changes.

So if you have an object that goes into a function, it comes out of it in the exact same form. For weak immutability, the data attached to it can change, but the number of keys, names and order do not.

For example, this is a mutation:

function changeMe(someObject){ 
   someObject.age = 3; 
   return someObject; 

let exampleOne = {"cat": "Tibbers" };

The function changes the shape of the object, meaning that it is mutable.

For a more in-depth discussion on the topic, here’s something that can help you (in addition to a few other bonus techniques).

2. declarative

It doesn’t matter what order you do something in, the underlying rules ensure that you get the same and correct result every time.

For example, this mathematical equation follows a declarative methodology.

(2 x 5) + 8 - 3 = 15

So if you move the order around, you’re still going to get the same result.

- 3 + (2 x 5) + 8 = 15
8 - 3 + (2 x 5) = 15

In JavaScript programming, a declarative pattern is where the order of functions doesn’t matter to the construction of the final outcome. You can call them in any order. The sequence doesn’t matter.

3. recursion

When the function continues to call itself until a particular condition is fulfilled.

No. It’s not a for loop. It might sound like it, but it’s not.

A for loop is a JavaScript conditional method. A recursion is an entire function that keeps calling itself.

This means there’s two parts to a recursion — the call based on a particular condition, and the exit clause. Your exit clause is basically what happens at the end of your recursion.

Here’s what a simple and potential recursion can look like:

function sumProfit(sales){ 
    if(//condition for ending){ 
        return theFinalObjectOrResult; 
    } else{ 
      //do something. Reduce the condition. 
      return sumProfit(reducedCondition); 

4. callbacks

A callback is a function that’s been executed after another function has finished executing.

Why do we need this? Because JavaScript is event driven — meaning that it doesn’t wait for responses. When things are running in a self-contained manner, this doesn’t matter as much.

It becomes serious when you start relying on external responses like an API. The delay is the time it takes for your JavaScript code to send out the request and receive it back.

In the eyes of JavaScript, it’s done its job — it has executed the code successfully.

However, in reality, you’re still waiting for a response. Sometimes, you force your code to calm down, chillout and wait for a moment via promises or delay timer. Once that’s confirmed as done, you call the callback() function.

Whatever the case, here’s what a callback can look like:

function waitForMeeeee(someValues, callback){
 //do something with someValues
waitForMeeeee('The answer is 42', function(){ 
  alert('all done now'); 

You can also abstract out your callback and make it look like this:

function waitForMeeeee(someValues, callback){
 //do something with someValues
function allDone(){ 
  alert('all done now'); 
waitForMeeeee('The answer is 42', allDone);

5. async

Think of a straight line. Your JavaScript code executes from one end to the other. But sometimes, you need it to pause, just for a moment while you run off to an external source to grab something.

The moment of pausing is the async part of JavaScript.

The keyword async also returns an implicit promise.

What does implicit mean? It returns a promise by default.

What’s a promise? It’s the thing that tells your code to wait because there’s going to be a delay in getting something done. For example, you’re waiting for an external API to respond with the correct data.

Why is this important? Because you can use then() with the async function.

What is then()? It’s your callback equivalent to promise based functions that lets you do things after the promise has finished it’s execution.

What does it all look like? Here’s an example:

async function doSomething(){
 //do something there.
 return 'woot!';

Or if you really want to make the promise part explicit:

async function doSomething(){
 //do something there.
 return Promise.resolve('woot!');

6. proxy

Think of it as an additional extension of your objects. It’s the ability to create custom behavior against something that already exists.

In a way, it also acts as an intermediary between your original object and additional features.

Yes. Proxies can change and process data.

Yes. It is often used as a validation checker, among other things.

How does it work?

There are three parts to a proxy — the handler, the traps (aka methods) and target.

There are 13 traps available for proxies. You’ll need to Google them because it’s beyond the scope of this piece.

Here’s an example of a proxy with a trap implemented:

let handler = {
 get: function(theObjectPassed, theObjectName){ 
       //some checking logic 
       console.log(theObjectPassed, theObjectName);
       return  'all done' ; 
let someObject = { a: 1, b: 2};
let valueName = new Proxy(someObject, handler);

There’s more to proxies than this but the example is just a starting point.

7. garbage collection

Everything takes up memory. When a variable is initialized, it gets a little bit of space allocated to it.

Memory is only initialized when called. So when a function runs and there are variables inside, its existence only lasts for as long as the function needs it. It doesn’t stick around.

Garbage collection is the way memory gets cleared up.

A memory leak is when garbage collection doesn’t happen because the variable is declared in the global space, which causes pollution and takes up unnecessary space.

Too much of this and your application can slow right down.

So keep your variables as contained as possible and deinitialize things you don’t need with null

The point of this article is to act as a reference/summary of ideas to help get your head around it as quickly as possible. Each term is a topic in itself but for length and digestibility purposes, I’ve stripped it down as much as possible to the core ideas.

There’s a lot more than what is written here, but overall, it captures the essence of what each word is trying to convey.

I hope you’ve found them useful.

Want to sponsor matcha.fyi? You can have your brand featured right here. Let's connect and chat about it.