4/20/2020 7 Major JavaScript Concepts Explained Simply - JavaScript in Plain English - Medium

This is Google's cache of https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-explained-simply-

45b0f3336f28. It is a snapshot of the page as it appeared on 16 Apr 2020 12:27:11 GMT. The current page could have changed in
the meantime. Learn more.

Full version Text-only version View source

Tip: To quickly find your search term on this page, press Ctrl+F or ⌘ -F (Mac) and use the find bar.

Sign in
JavaScript in Plain English

Write For Us
Style Guide
Archive

Work Hard by Uran

7 Major JavaScript Concepts Explained Simply

No lingo. Written for humans. With code snippets. In 5 minutes.
Aphinya Dechalert
Aphinya Dechalert
Follow
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.

webcache.googleusercontent.com/search?q=cache:oPSnim0HPMAJ:https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-… 1/5
4/20/2020 7 Major JavaScript Concepts Explained Simply - JavaScript in Plain English - Medium
(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 = 158 - 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);

webcache.googleusercontent.com/search?q=cache:oPSnim0HPMAJ:https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-… 2/5
4/20/2020 7 Major JavaScript Concepts Explained Simply - JavaScript in Plain English - Medium

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.

webcache.googleusercontent.com/search?q=cache:oPSnim0HPMAJ:https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-… 3/5
4/20/2020 7 Major JavaScript Concepts Explained Simply - JavaScript in Plain English - Medium

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!

JavaScript in Plain English

Learn the web's most important programming language.

Follow

1.1K

Software Development
JavaScript
Technology
Software Engineering
Education

1.1K claps

Aphinya Dechalert

Written by

Aphinya Dechalert
Follow

Let’s be better developers together. Working on becoming better. Follow me to follow my journey. Connect with me
linkedin.com/in/dechalert/ | dottedsquirrel.com

Follow
JavaScript in Plain English

JavaScript in Plain English

Follow

Learn the web's most important programming language.

webcache.googleusercontent.com/search?q=cache:oPSnim0HPMAJ:https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-… 4/5
4/20/2020 7 Major JavaScript Concepts Explained Simply - JavaScript in Plain English - Medium

Follow
See responses (4)

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

10 things you should know about NPM

GP Lee in JavaScript in Plain English
Apr 9 · 4 min read

469

More from JavaScript in Plain English

More from JavaScript in Plain English

Why you should not remove all the elements of array by reassigning it to []

Yogesh Chavan in JavaScript in Plain English

Apr 9 · 3 min read

733

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

Ferenc Almasi in JavaScript in Plain English

Apr 3 · 6 min read

696

Discover Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in
sight. Watch

Make Medium yours

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Become a member

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade
AboutHelpLegal

webcache.googleusercontent.com/search?q=cache:oPSnim0HPMAJ:https://medium.com/javascript-in-plain-english/7-major-javascript-concepts-… 5/5