DEV Community: Farah Ismah Hana

JavaScript Best Practices: Writing Clean and Maintainable Code

Farah Ismah Hana — Mon, 05 Oct 2026 09:09:27 +0000

Introduction

When learning JavaScript, we usually focus on making our code work.

But as we write more code, it is also important to think about how easy the code is to read and understand.

Code that is easy to read is easier to update and fix later. This becomes even more important when working on a larger project or working with other developers.

There are many ways to improve JavaScript code, but we do not need to learn everything at once.

In this article, we will look at some simple JavaScript best practices that can help us write code that is clean, easy to read, and easier to maintain.

1. Use `const` and `let`

JavaScript provides var, let, and const for creating variables.

For modern JavaScript, we can use const when the value does not need to change.

const name = 'John';
const age = 25;

If the value needs to change later, we can use let.

let score = 80;

score = 90;

A simple rule to remember is:

Use const when the value does not change.
Use let when the value can change.
Avoid using var when writing new code.

Using const and let also makes it easier to understand whether a value is expected to change.

2. Use Clear Variable Names

Variable names should help us understand what the value represents.

For example:

const x = 25;

We cannot easily tell what x means.

A clearer name would be:

const employeeAge = 25;

Another example:

const d = 30;

We can make it clearer:

const daysInMonth = 30;

We do not need to use very long names. The important thing is that the name gives enough information about the value.

Clear variable names make the code easier to read, especially when we come back to the code later.

3. Use `===` When Comparing Values

JavaScript provides == and === for comparing values.

When possible, it is better to use ===.

const age = 25;

if (age === 25) {
  console.log('Age is 25');
}

The difference can be seen here:

console.log(5 == '5');   // true
console.log(5 === '5');  // false

With ==, JavaScript can convert the value before comparing it.

With ===, JavaScript checks both the value and the type.

For example, 5 is a number, while '5' is a string.

Using === can make comparisons easier to understand.

4. Avoid Unnecessary Complexity

Sometimes we can write the same logic in a simpler way.

For example:

if (user) {
  if (user.isActive) {
    console.log('User is active');
  }
}

We can write it as:

if (user && user.isActive) {
  console.log('User is active');
}

The second example is simpler because we do not need two levels of if.

However, this does not mean that every nested if is bad. If nesting makes the logic easier to understand, it is fine to use it.

The main idea is to avoid adding complexity when we do not need it.

5. Avoid Repeating the Same Code

Sometimes we may write the same code several times.

For example:

console.log('Welcome, John');
console.log('Welcome, Jane');
console.log('Welcome, Michael');

If we have many users, writing the same code again and again is not practical.

We can use an array and a loop:

const users = ['John', 'Jane', 'Michael'];

users.forEach((user) => {
  console.log(`Welcome, ${user}`);
});

Now the same logic can be used for every user.

This also makes the code easier to update later.

6. Keep Your Code Easy to Read

When writing code, we do not always need to make it as short as possible.

For example:

const result = data.filter(x => x.active).map(x => x.name);

This code is valid, but separating the steps can sometimes make it easier to understand.

const activeUsers = data.filter((user) => user.active);

const userNames = activeUsers.map((user) => user.name);

Now we can clearly see what each step does.

Clean code is not necessarily code with fewer lines.

The goal is to make the code easy to read and understand.

Key Takeaways

Use const when a value does not need to change.
Use let when a value needs to change.
Use clear and meaningful variable names.
Prefer === when comparing values.
Avoid unnecessary complexity.
Avoid repeating the same code.
Write code that is easy to read and understand.

Conclusion

Writing JavaScript is not only about making the code work. We also need to think about how the code will look when we or someone else reads it later.

Simple habits such as using clear variable names, choosing the right type of variable, and keeping the code simple can make a big difference.

We do not need to follow every best practice from the beginning. As we learn more JavaScript, we can slowly build better habits and improve the way we write code.

Looping and Modifying Nested Arrays in JavaScript

Farah Ismah Hana — Sun, 04 Oct 2026 12:34:52 +0000

Introduction

When working with a nested array, we may have many values stored in different groups.

For example, imagine we have several groups of numbers and want to display all of them. We could access each value one by one, but that can become inconvenient, especially when the data gets larger.

Instead, we can use a loop to go through the values for us. This allows us to perform the same action on multiple items without writing the same code over and over.

With a nested array, there is one more thing to consider. The values are stored inside inner arrays, so we need to go through each inner array before we can work with the values inside it.

In this article, we will look at three ways to loop through a nested array using for, for...of, and forEach(). We will also see how loops can be used to process and modify the values.

Looping Through Nested Arrays

Since a nested array contains inner arrays, we need to go through more than one level to reach the values inside them.

Let's start with a for loop. We can use one loop to go through the inner arrays and another loop to go through the values inside each array.

Using `for`

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

for (let i = 0; i < numbers.length; i++) {
  for (let j = 0; j < numbers[i].length; j++) {
    console.log(numbers[i][j]);
  }
}

The output is:

Here, the two loops work together.

The outer loop goes through each inner array, while the inner loop goes through the values inside the current array.

The length property tells us how many items an array contains. In this example, numbers.length is 2 because there are two inner arrays.

The variable i keeps track of the current inner array, while j keeps track of the current value inside that array.

For example:

i = 0 → [10, 20, 30]
    j = 0 → 10
    j = 1 → 20
    j = 2 → 30

i = 1 → [40, 50, 60]
    j = 0 → 40
    j = 1 → 50
    j = 2 → 60

One useful thing about for is that we have direct access to the indexes. This can be helpful when we need to know where a value is located or want to use its position later.

Using `for...of`

But what if we do not need the indexes?

If we only need the values, for...of can make the code a little simpler:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

for (const group of numbers) {
  for (const number of group) {
    console.log(number);
  }
}

The loop goes through the same values as the previous example.

Here, group represents the current inner array, while number represents each value inside that group.
We use const because we do not need to change these variables inside the loop. The loop automatically provides the next value on each iteration.

We do not need to manage i and j, so the code can be easier to follow when the indexes are not important.

Using `forEach()`

Another way to go through a nested array is with forEach().

forEach() runs a function for each item in an array. With a nested array, we can use it twice: the first forEach() goes through the inner arrays, and the second goes through the values inside each array.

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

numbers.forEach((group) => {
  group.forEach((number) => {
    console.log(number);
  });
});

The first forEach() goes through each group, while the second goes through each number inside the current group.

Now that we know a few ways to loop through a nested array, we can use those loops to do more than just access the values.

Processing Data with Loops

For example, we can use a loop to calculate the total of all the numbers:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

let total = 0;

numbers.forEach((group) => {
  group.forEach((number) => {
    total += number;
  });
});

console.log(total);

The output is:

The total variable starts at 0. Each time the loop reaches a number, that value is added to total.

We can use a similar approach for other tasks, such as counting values or performing calculations.

Sometimes, though, we need to change the values instead of just reading or calculating them.

Modifying Values in Nested Arrays

If we know the position of a value, we can update it using its indexes.

For example, we can change 20 to 25:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

numbers[0][1] = 25;

console.log(numbers);

The output is:

[
  [10, 25, 30],
  [40, 50, 60]
]

numbers[0] selects the first inner array, and [1] selects the second value inside it.

So, the value 20 is replaced with 25.

That works well when we only need to change one value. But if we need to update several values, doing it one by one would not be practical. We can use a nested loop instead.

For example, we can multiply every value by 2:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

for (let i = 0; i < numbers.length; i++) {
  for (let j = 0; j < numbers[i].length; j++) {
    numbers[i][j] *= 2;
  }
}

console.log(numbers);

The output is:

[
  [20, 40, 60],
  [80, 100, 120]
]

The nested loops go through each value and update it by multiplying it by 2.

So, loops are not only useful for accessing values. They can also help us process and update multiple values in a nested array.

Key Takeaways

Loops make it easier to work with multiple values.
Nested arrays can be processed using nested loops.
for is useful when we need to work with indexes.
for...of lets us work directly with values.
forEach() provides another way to run an action for each value.
Loops can be used to process and modify values inside a nested array.

Conclusion

Working with a nested array means dealing with more than one level of data. Instead of accessing each value individually, we can use loops to move through the inner arrays and work with their values.

The approach we choose depends on what we need. for gives us access to indexes, while for...of and forEach() let us focus more directly on the values.

Once we are comfortable moving through nested arrays, we can use loops for different tasks, from simple calculations to updating multiple values.

Nested Arrays in JavaScript

Farah Ismah Hana — Mon, 28 Sep 2026 01:17:57 +0000

Introduction

When working with arrays in JavaScript, we usually start with a simple list of values. This works well when all the values belong to the same group.

Sometimes, we may want to group those values while still keeping them in a single array.

For example:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

Here, the numbers are organized into two groups. Each group is an array, and both arrays are stored inside the numbers array.

This is called a nested array.

To make the idea easier to understand, let's look at a regular array first.

What Is a Nested Array?

A regular array stores values in a single list:

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

The output is:

Apple
Banana
Orange

Each value has an index that represents its position. In JavaScript, the index starts from 0, so Apple is at index 0, Banana is at index 1, and Orange is at index 2.

Now, instead of putting all the values directly into one list, we can split them into smaller groups:

const fruits = [
  ["Apple", "Banana"],
  ["Orange", "Mango"]
];

console.log(fruits[0]);
console.log(fruits[1]);

The output is:

["Apple", "Banana"]
["Orange", "Mango"]

The fruits array now contains two other arrays. These inner arrays keep the values in separate groups.

Accessing Data in a Nested Array

Once the data is grouped, we need to know how to access the values inside it.

With a regular array, we only need one index:

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[1]);

This gives us:

Banana

A nested array works in a similar way, but we may need more than one index.

Let's use the numbers array again:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

If we want the first group, we can use:

console.log(numbers[0]);

The output is:

[10, 20, 30]

Here, numbers[0] gives us the first inner array.

What if we only want 20?

Since 20 is inside the inner array, we need a second index to access it:

console.log(numbers[0][1]);

The output is:

Let's break it down:

numbers[0]    // [10, 20, 30]
numbers[0][1] // 20

The first [0] gets the first inner array. Then [1] gets the second value from that array.

So, when working with a two-level nested array, we can access a value like this:

array[firstIndex][secondIndex];

The first index points to the inner array, and the second index points to the value inside it.

Another Example

The same idea can be applied to other types of data.

For example, let's group some student names:

const students = [
  ["Hana", "Dini"],
  ["Khalisha", "Khayra"]
];

console.log(students[0][0]);
console.log(students[1][1]);

The output is:

Hana
Khayra

For students[0][0], the first [0] gets the first inner array, and the second [0] gets the first name from that array.

The same idea applies to students[1][1]: the first [1] gets the second inner array, and the second [1] gets the second name.

Reading the indexes from left to right makes it easier to see which group and which value we are accessing.

Conclusion

Nested arrays are useful when we need to organize related values into different groups.

The syntax may look a little unfamiliar at first, especially when there is more than one index. But once we know that each index moves us to the next level, it becomes easier to read and work with.

Once we understand how to access values in a nested array, we can start working with those values in different ways.

DEV Community: Farah Ismah Hana

JavaScript Best Practices: Writing Clean and Maintainable Code

Introduction

1. Use const and let

2. Use Clear Variable Names

3. Use === When Comparing Values

4. Avoid Unnecessary Complexity

5. Avoid Repeating the Same Code

6. Keep Your Code Easy to Read

Key Takeaways

Conclusion

Looping and Modifying Nested Arrays in JavaScript

Introduction

Looping Through Nested Arrays

Using for

Using for...of

Using forEach()

Processing Data with Loops

Modifying Values in Nested Arrays

Key Takeaways

Conclusion

Nested Arrays in JavaScript

Introduction

What Is a Nested Array?

Accessing Data in a Nested Array

Another Example

Conclusion

1. Use `const` and `let`

3. Use `===` When Comparing Values

Using `for`

Using `for...of`

Using `forEach()`