Work Hard by Uran

7 Major JavaScript Concepts Explained Simply

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

Aphinya Dechalert
Apr 12 · 5 min read

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

When the shape of your data doesn’t change.

So if you have an object that goes into a function, it comes out of it in the exact same
form. 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" };

console.log(changeMe(exampleOne));

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

. . .

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
callback();
}

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
callback();
}

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!';
}

doSomething().then(
function(result){
console.log(result);
});

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

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

doSomething().then(
function(result){
console.log(result);
});

. . .

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);

console.log(valueName.someObject);

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.

Thank you for reading!

Software Development JavaScript Technology Software Engineering Education

About Help Legal