What I learned from Mastering Clean Code in JavaScript course

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler’

Writing a clean code is a much-needed skill that every developer should learn. So in this article, I will share my experience that what I have learned after taking the course “Mastering Clean Code in JavaScript” on Udemy.

Clean Variables (How to name variables)

For example,

var a, bfunction do(a, b) {     return a+b
}

the above code will give you the sum of two numbers. But the variables and function names are not explaining what this code does.

Let’s see the following example,

var num1, num2function addNumbers(num1, num2) {      return num1+num2
}

The above code is completely explaining that a function will take two arguments and will give you the sum of these two numbers.

Clean Functions (How to write functions)

Below the example of “code of hell”

function getSensorAData(cb) {
setTimeout(() => {
cb({
min: 8,
max: 118
});
}, 2000);
}
function getSensorBData(cb) {
setTimeout(() => {
cb({
temp: 78,
value: 26
});
}, 500);
}
function getSensorCData(cb) {
setTimeout(() => {
cb({
min: 14,
max: 92,
temp: 64,
value: 12
});
}, 2000)
}
function combineSensorData() {
getSensorAData((sensorAData) => {
console.log("Sensor A Data: ", sensorAData);

getSensorBData(sensorBData => {
console.log("Sensor B Data: ", sensorBData);
getSensorCData(sensorCData => {
console.log("Sensor C Data: ", sensorCData);
//Do some computation with sensor data
})
});
});
}

Instead, we can make this code more cleaner by using promises. Have a look at the example below,

function getSensorAData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
min: 8,
max: 118
});
}, 2000);
})
}
function getSensorBData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
temp: 78,
value: 26
});
}, 500);
});
}
function getSensorCData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
min: 14,
max: 92,
temp: 64,
value: 12
});
}, 2000)
});
}
function combineSensorData() {
Promise.all(getSensorAData(), getSensorBData(),
getSensorCData()).then(results => {
let sensorAData = results[0];
let sensorBData = results[1];
let sensorCData = results[2];
});
}

We can see our code looks much cleaner.

Clean object and Classes

For Example,

class Pet {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating....`);
}
}
class Dog extends Pet {
constructor(name, breed) {
super(name);
this.breed = breed;
}
play() {
console.log(`${this.name} is playing...`);
}
}
let max = new Dog("Max", "Golden Retriever");
max.eat();
max.play();
console.log(max);

Use Object.freeze over const

const name = {   male : false };  
name.female = true;
console.log(name.female); // true

Let’s try with Object.freeze(). Object.freeze() prevents modification or extension to the existing value of an object.

const name = {   male : false };
Object.freeze(name);
name.female = true;
console.log(name.female); // false, the value is not modified

Use Modules

Use Design Patterns

Testing

Link to the Udemy’s course: https://www.udemy.com/course/mastering-clean-code-in-javascript/

This is all about “Writing clean code in JavaScript”. I hope this article was very helpful.

Please let me know in the comments if you have any questions.

Thanks

Fullstack Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store