DEV Community: Melvinvmegen

10 rules to help you write cleaner js code

Melvinvmegen — Sun, 07 Jan 2024 18:12:00 +0000

What is clean code?

That's a really controversial question and i'd like to say there are many answers to this topic but as a general idea Clean code is code that is easy to read, understand, and maintain. Following best practices and industry standards, allows you to easily write code free from bloat, redundancy, and complexity.
Let me share some of these best practices to you.

1. Naming Conventions

While it may seem basic, giving careful consideration to variable names can be crucial to making code readable and maintainable. Using descriptive and meaningful names for variables, functions, and objects can help reduce the cognitive load required to understand and work with code. Avoiding abbreviations and other shortcuts can further help improve code clarity and readability.

For example, instead of using a vague variable name like data, consider using a more descriptive name that reflects the actual data being represented, such as customerData or productList.

// ❌ Avoid this
const d = [1, 2, 3];

// ✅ Do this
const data = [1, 2, 3];

// ❌ Avoid this
function add(a) {
  return a + 1;
}

// ✅ Do this
function addOne(number) {
  return number + 1;
}

2. Name your functions

Try to give every function a name including closures and callbacks. Generally avoid anonymous functions, otherwise you'll have difficulties while profiling your app for example.
Likewise, debugging production issues using any monitoring tool might become challenging as you won't be able to easily find the root cause of your problem.
Meanwhile a named function will allow you to easily understand what you're looking at when checking a memory snapshot or else.

3. Use ES6 Features

ES6, the latest version of JavaScript, introduced several features that can greatly improve the cleanliness and conciseness of JavaScript code. Just to name a few, destructuring allows developers to extract values from arrays or objects more easily, arrow functions offer a more concise syntax for defining functions, and template literals enable the embedding of expressions into string without the need for concatenation or escaping characters.
Let demonstrate it with some easy code:

// const and let declarations
const PI = 3.14;
let name = 'John Doe';

// Template literals
const message = `Hello ${name}!`;

// Arrow functions
const square = (x) => x * x;

// Default parameters
const add = (a, b = 0) => a + b;

// Destructuring
const data = [1, 2, 3];
const [first, second, third] = data;

const person = {
  firstName: 'John',
  lastName: 'Doe'
};
const { firstName, lastName } = person;

// Spread operator
const lotus = [1, 2, 3];
const numbers = [...lotus, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

// Rest parameters
const sum = (...numbers) => numbers.reduce((total, current) => total + current, 0);
sum(...numbers) // 21

// Object literals
const firstName = 'John';
const lastName = 'Doe';
const person = { firstName, lastName };

// Class syntax
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

4. Avoid Global Variables

Global variables can pose several problems, including naming conflicts leading to reduced maintainability. To me, they should generally be avoided unless the goal is to share this variable across the app for a general purpose like env variables. To organize and manage code more effectively, consider using modules. Modules provide a way to encapsulate related code and data, minimizing the risk of naming conflicts, unexpected side effects and ultimately making it easier to maintain and update code.

// ❌ Avoid this
var counter = 0;
function incrementCounter() {
  counter++;
}

// ✅ Do this
// module.js
let counter = 0;
function incrementCounter() {
  counter++;
}

export { counter };

// ✅ Even better
function createCounter() {
  let counter = 0;

  return {
    increment: function () {
      counter++;
    },
    getCount: function () {
      return counter;
    }
  };
}

const counter = createCounter();
counter.increment();

Bad example : the variable counter is declared as a global variable, which can cause naming conflicts and make the code harder to maintain.
Good example : the variable is declared inside a module before being exported, which makes it a local variable to the module thus avoiding the naming conflicts.
Better example : the variable is encapsulated inside a function, which creates a closure. This way, the variable is not accessible from outside the function, making it truly private and avoiding any naming conflicts.

5. Keep functions small

It is important to keep your functions small and focused on a single responsibility. By breaking down complex logic into smaller functions, you can increase the readability of your code and make it easier to reason about. Smaller functions are often more reusable and easier to test which can save you time and effort in the long run. As a rule of thumb always remember that functions should only do one thing and do it well.

// ❌ Avoid this
function calculateOrderTotal(items, shippingMethod, discount) {
  let subtotal = 0;
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }

  let shippingCost = 0;
  if (shippingMethod === 'standard') {
    shippingCost = subtotal * 0.1;
  } else if (shippingMethod === 'express') {
    shippingCost = subtotal * 0.2;
  }

  let discountAmount = 0;
  if (discount) {
    discountAmount = subtotal * discount;
  }

  return subtotal + shippingCost - discountAmount;
}

// ✅ Do this
function calculateSubtotal(items) {
  return items.reduce((acc, item) => acc + item.price * item.quantity, 0)
}

function calculateShippingCost(subtotal, shippingMethod) {
  const shippingRates = {
    standard: 0.1,
    express: 0.2,
  };

  return Object.keys(shippingRates).reduce((shippingCost, method) => {
    if (shippingMethod === method) {
      shippingCost = subtotal * shippingRates[method];
    }
    return shippingCost;
  }, 0);
}

function calculateDiscountAmount(subtotal, discount) {
  let discountAmount = 0;
  if (discount) {
    discountAmount = subtotal * discount;
  }
  return discountAmount;
}

function calculateOrderTotal(items, shippingMethod, discount) {
  const subtotal = calculateSubtotal(items);
  const shippingCost = calculateShippingCost(subtotal, shippingMethod);
  const discountAmount = calculateDiscountAmount(subtotal, discount);
  return subtotal + shippingCost - discountAmount;
}

Bad example, the function calculateOrderTotal is doing too many things. It's difficult to understand what the function does without stepping through each line.
Good example, the code is refactored into smaller, more manageable functions. Each function has a single responsibility, making the code easier to understand, test, and maintain.

6. Use a linter

Linting is a helpful tool that can improve the quality of your code. It checks for potential errors, bugs, and coding violations to ensure that your code follows best practices and conventions. Using a linting tool like ESLint, helps you keep your code clean, maintainable, and catch errors before they cause problems in production. Here's an simple example of how you can use ESLint to improve your code:

npm install eslint --save-dev

Create a file named .eslintrc in the root of your project and add the following configuration:

// .eslintrc
{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "off"
  }
}

Now you can run ESLint on your code by using the following command:

npx eslint your-file.js

Resulting in this code update:

// ❌ Original code
const name = 'John Doe';
console.log('Hello, ' + name);

// ✅ Corrected code
const name = 'John Doe';
console.log(`Hello, ${name}`);

As annoying as it might seem at the beginning with all those red lines poping, it ensures your code is easier to understand and maintain, both for your future self and for other developers who'll work on the project, and believe me, they'll thank you for it.

7. Follow the Single Responsibility Principle

The Single Responsibility Principle (SRP) is a fundamental principle in software development that states that every module, class, or function should have a single, well-defined responsibility.

Let's take a look at an example of SRP:

class User {
  constructor(name, email, password) {
    this.name = name;
    this.email = email;
    this.password = password;
  }

  getName() {
    return this.name;
  }

  getEmail() {
    return this.email;
  }

  setPassword(password) {
    this.password = password;
  }

  sendEmail() {
    // code to send an email to the user
  }
}

Here, the User class has a single, well-defined responsibility: managing a user's information.
The getName and getEmail methods retrieve the user's name and email address respectively. While the setPassword method updates the user's password, and the sendEmail method sends an email to the user.

Each method does exactly what it states and they don't overlap or have multiple responsibilities.

8. Write Test Cases

When you write code, you want it to work correctly and not break unexpectedly when deploying to production. That's where test cases come in. Think of them as a way to double-check your work and make sure your code does what it's supposed to do.

When you write test cases, be sure to cover all the important parts of your code. That includes the normal situations, but also the tricky edge cases where things might not work as intended. You'll also want to test what happens when something goes wrong, like when a user enters the wrong input or when you API is down for whatever reason.

By taking the time to write good test cases, you can catch mistakes and bugs early in the process. That means you can fix them before they become bigger problems down the line. Plus, having good test cases means you can make changes and updates to your code with more confidence, knowing that you're not introducing new problems or breaking what's currently working.

9. Use Descriptive Error Messages

While programming, we all make mistakes that's fine. However, when we do, we need to debug and preferably fast. That's where error messages come in, helping us to quickly identify and fix these issues.

Therefore, it's essential to create error messages that are clear and informative, explaining the cause of the error and providing guidance on how to fix it can save us a lot of time and frustration in the long run by helping us quickly diagnose and address any problems that arise in our code. So, always take the time to craft descriptive error messages that can make the debugging process more manageable and less stressful.

try {
  // code that may throw an error
  if (someCondition) {
    throw new Error("Invalid argument: someCondition must be true");
  }
} catch (error) {
  console.error(error.message);
}

In this example, we use a try-catch block to handle errors. If the code inside the try block throws an error, the error message is caught and logged to the console using console.error().

The error message includes the description "Invalid argument: someCondition must be true", which provides enough information to help the developer locate and understand the cause of the error before fixing it.

As a side benefit it might allow you to find the bugging line in your code even if you didn't share your sourcemaps to your monitoring tool.

Additionally, if our code is being used by others, providing descriptive error messages can improve the overall user experience by helping users to quickly understand what went wrong which provides a better user experience, reduces frustration and confusion (but don't provide too much info to the frontend as it might also help unfriendly user to take advantage of your app).

As a side note, don't hesitate to use multiple try catch blocs when needed otherwise you might find the error to be not specific enough, thus pointless.

10. Refactor Regularly

Refactoring is the process of improving the internal structure of your code without changing its behavior.

As your code grows and changes over time, it can become more complex and harder to maintain.
Refactoring can help improve the performance of your code, reduce bugs and errors, and make it easier for you and other developers to understand and modify the code in the future.

Let's pretend you have a piece of code that has become difficult to manage and understand:

function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

This code calculates the sum of an array of numbers. Over time, however, the code may become harder to maintain as the number of responsibilities or the complexity of the code increases.

To address this, we can refactor the code, here using a simple reduce :

function calculateSum(numbers) {
  return numbers.reduce((sum, number) => sum + number, 0);
}

Conclusion

Writing clean and readable code is essential to produce quality software. Following the best practices mentioned above, such as keeping functions short and focused on a single responsibility, using descriptive variable and function names, and using error messages can make your code more maintainable, scalable, and easier to understand.

It is important to remember that writing clean code is not a one-time task, but a continuous process that requires practice and discipline. As you practice writing clean code, you will find it easier to maintain and build upon your existing codebase, which can save you time and effort in the long run. By continuously improving the quality of your code, you can produce software that is reliable, efficient, and easy to work with.

Keep the good work and happy coding! 🚀

14 tips to write better Javascript

Melvinvmegen — Tue, 12 Dec 2023 01:56:23 +0000

Here are some of my favorite tips for writing cleaner Javascript code, skip the clever keep it simple.

1. Forget about var

Declare all your variables with either const or let. As a rule of thumb, use const by default otherwise if a variable needs to be reassigned use let.

The var keyword should be avoided as it is almost scope free leading to potential scoping bugs, refer to my guide on hoisting.

Bonus: it’s best practice to initialize your variables at the time of creation so you and your team can ensure none are left unused.

// ❌ Avoid this
var old = "";

// ✅ Do this
const immutable = "John";
let counter = 1;
counter++; // counter === 2;

// Declare objects and arrays as const to prevent type change
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];

2. Be strict about equality

The strict equality operator (===) same as the equality operator checks whether its two operands are equal, returning a Boolean result. But unlike the equality operator (==), the strict equality operator (===) always considers operands of different types to be different.

Bonus: 0 being falsy will be wrongly equal to false in case of non strict equality operator.

// ❌ Avoid this
1 == "1"; // true
0 == false; // true

// ✅ Do this
1 === 1; // true
1 === "1"; // false
0 === false; // false

3. Avoid constructors for primitive values

Primitive objects are strictly different than their primitive counterparts making
them harder to check for strict equality as they're wrapped in a object.

They're are basically equivalent but not equal.

// ❌ Avoid this
const stringObject = new String("Charly");

// ✅ Do this
const stringPrimitive = "Charly";

// Equality check
stringPrimitive === stringObject; // false 
new Number(1) === 1; // false
new Boolean(true) === true; // false

4. Make use of Object Literals

Object literals are a shorthand notation allowing you to define an object or an array on the fly.

Thereby avoiding repetition, improving readability and preventing mistakes as we can't infer logic behind it, are we currently initializing a variable or updating it?

// ❌ Avoid this
const user = new Object(); // {}
user.firstname = "John"; // { firstname: "John" }
user.lastname = "Doe"; // { firstname: "John", lastname: "Doe" }

// ✅ Do this
const user = { 
  firstname: "John", 
  lastname: "Doe" 
};

// ❌ Avoid this
const fruits = new Array(); // []
fruits.push("banana"); // ["banana"]
fruits.push("mango"); // ["banana", "mango"]

// ✅ Do this
const fruits = ["banana", "mango"];

5. Use template literals to combine strings

Putting strings together is a pain, especially when combining strings and variables.

To make this process simpler, you can use template literals (marked by backticks), which take both strings and variables as long as it is surrounded by the interpolation (${}).

const firstname = "John";

// ❌ Avoid this
let greeting = "Hello, " + firstname; // Hello, John

// ✅ Do this
greeting = `Hello, ${firstname}`; // Hello, John

6. Use Semicolons for line termination

The use of semi-colons for line termination is always a good practice.

You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser. But without it how would you know when an expression ends?

Take the for loop as an example :

// ✅ Do this
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

You wouldn't be able to do the following because to parser thinks it is one expression while it truly is three separate ones:

// ❌ Not this
for (let i = 0 i < numbers.length i++) {
  console.log(numbers[i]);
} // Uncaught SyntaxError: Unexpected identifier

7. Use object param instead of multiple params

I consider it a code smell to define too many parameters in my functions. Even if parameters have default value or are optional, let's take this example:

// ❌ Avoid this
function avatarUrl(avatar, format = "small", caption = true) {
  // Does something
}

avatarUrl(user.avatar, 'thumb', false)

When you use this function it's very hard to know which parameters are used and how. What does the last param false, stand for here?

No idea, we have to open the function definition in order to know.
And what happens if you need to change the parameter's order? Well you'll have to change all function calls.

With an object, order doesn't matter:

// ✅ Do this
function avatarUrl(avatar, options={format: 'small', caption: true}) {
  // Does something
}

avatarUrl(user.avatar, {
  format: "thumb", 
  caption: false
})

8. Return as soon as possible

Nested conditions make it hard to understand code but you can easily avoid it with guard clauses, by returning early.

Guard clauses will allow you to remove most of your else conditions making your code readable like plain English.

// ❌ Avoid this
function doSomething() {
  if (user) {
    if (user.role === "ADMIN") {
      return 'Administrator';
    } else {
      return 'User';
    }
  } else {
    return 'Anonymous';
  }
}

// ✅ Do this
function doSomething() {
  if (!user) return 'Anonymous'
  if (user.role === "ADMIN") return 'Administrator'

  return 'User'
}

9. Learn and use the power of your tools

Javascript provides a lot built-in function on Array, Object, String.

Find and learn them to enjoy the full power of your stack.

// ❌ Avoid this
const users = [
  {
    username: "JohnDoe",
    admin: false
  },
  {
    username: "Todd",
    admin: true
  },
];
const admins = [];

function getAdmins() {
  users.forEach((user) => {
    if (user.admin) admins.push(user)
  })

  return admins
}

// ✅ Do this
function getAdmins() {
  return users.filter((user) => user.admin)
}

10. Code for humans, not for computers

Let's assume it, most of us are bad at noticing differences, it might take us a few seconds before noticing a logical not (!).

Let's take this example:

const users = [
  {
    username: "JohnDoe",
    admin: false
    enabled: true
  },
  {
    username: "Todd",
    admin: true
    enabled: true
  },
];

// ❌ Avoid this
const members = users.filter(u => u.enabled).map(u => !u.admin)
const admins = users.filter(u => u.enabled).map(u => u.admin)

// ✅ Do this
const enabledUsers = users.filter(u => u.enabled)
const members = enabledUsers.map(u => !u.admin)
const admins = enabledUsers.map(u => u.admin)

Both members and admins assignments only differ by the logical not (!) and if you need to change one assignment, then you also need to change the other one.

Another example, do not use magic numbers. Use explicit variables instead:

// ❌ Avoid this
function price_with_taxes(price) {
  return price * 1.2
}

// ✅ Do this
const taxRate = 1.2
function price_with_taxes(price) {
  return price * taxRate
}

11. Avoid abbreviations

Whether you write e for event, t for ticket won't boost your productivity but it does worsen readibility and decreases instant comprehension.

// ❌ Avoid this
function someFunction() {
  events.forEach(e => {
    e.tickets.forEach(t => {
      `${e.name} for ${t.full_name}`
    })
  })
}

// ✅ Do this
function someFunction() {
  events.forEach(event => {
    event.tickets.forEach(ticket => {
      `${event.name} for ${ticket.full_name}`
    })
  })
}

Here you don't have to guess what e and t stand for, you just read it.
Coding is complex enough to bloat your mind with extra complexities. This also applies to variables, class, methods...

There are few exceptions though, it's ok to use widely used abbreviations like i in your for-loops.

12. Avoid useless && negated conditions

Conditions are like memos for your brain as you need to remember them while stepping through each line of code in order to understand what's going on.

Fortunately, most of them can be simplified thanks to my favorite ES6 operator optional chaining.

// ❌ Avoid this
function doSomething(params) {
  if (params && params.filter) return 'Foo'

  return 'Bar'
}

// ✅ Do this
function doSomething(params) {
  if (params?.filter) return 'Foo'

  return 'Bar'
}

I don't know about you but every time i see a logical not (!) it makes my brain pause for a second, to me it feels more natural to read something like:

if a user IS an admin then we do that

rather than:

if a user IS NOT an admin then we do that.

// ❌ Avoid this
function doSomething(user) {
  if (!user || !user.admin) {
    // Case where no user or not admin
  } else {
    // Case where user and user is admin
  }
}

// ✅ Do this
function doSomething(user) {
  if (user && user.admin) {
    // Case where user and user is admin
  } else {
    // Case where no user or not admin
  }
}

13. Use for...of instead of for loops

Using the for...of statement instead of the classical for loop is such a JavaScript improvement.

This syntax has been introduced by ES6, and it includes a built-in iterator so that you don’t have to define your own variable, increment it until a certain length value:

let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];

// ❌ Avoid this
// This avoids length behind reavaluated at every iteration
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
    console.log(users[i]);
}

// ✅ Do this
for(let user of users) {
  console.log(user);
}

Notice how much more readable it is! And you don't have to care about all this (let i = 0; i < usersCount; i++) clumsy logic though you might need it for some specific use case, like an irregular interval.

14. Readable code outshines clever code

Always remember, you're writing code with other developers aswell as your future self. You don't want to create more problems than the ones you're solving writing code.

Don't write code to show off your skills, write code everyone can understand and debug.

If you have more tips, i'd be happy to learn them from you in the comments!

Keep it simple!

Hoisting in javascript

Melvinvmegen — Mon, 04 Dec 2023 00:00:00 +0000

What is a scope?

Let's start by answering the most important question, what is a scope? In JavaScript, a scope refers to the current execution context in which expressions are defined or can be referenced. I like to think of scope as layers where each layer has its own context that determines the accessibility of variables, functions and classes, let's see an example:

const rootLayer = 0;
{
  const layer = 1;
  console.log(rootLayer) // 0
  console.log(layer) // 1
}

console.log(rootLayer) // 0
console.log(layer) // ❌ Uncaught ReferenceError: layer is not defined

The global scope, the accessible one

When you start writing code at the root of any given file, you are in the global scope, there, if you define a variable, it will be accessible everywhere in your project. In the previous example the rootLayer variable is accessible everywhere including inside the block (represented by braces {}), contrary to the layer variable which is defined inside the block.

The local scope, the hold

If you assign a variable inside a function (or any block for that matter) the declaration will happen in the local scope of that function so it is only accessible inside it.

function scoped() {
  const scope = "local";
  console.log(scope) // local
}
console.log(scope) // ❌ Uncaught ReferenceError: scope is not defined

The same goes for blocks, if you assign a variable inside a conditional statement for example, it will only be accessible inside the block.

if (true) {
  const scope = "local";
  console.log(scope) // local
}
console.log(scope) // ❌ Uncaught ReferenceError: scope is not defined

Note that: with var, the scope of the variable is its current execution context which is either:

In the case of a function, the enclosing function and the functions declared in it
In the case of a block, the variables declared within it are accessible from the global scope.

Otherwise just don't use **var* and you'll be fine.*

function scoped() {
  var scope = "local" 
}
console.log(scope) // ❌ Uncaught ReferenceError: scope is not defined

if (true) {
  var scope = "local";
}
console.log(scope) // local

The lexical scope, the nerdy?

The lexical scope is the definition area of an expression. Also called static scope, think of it as the place where it was defined, not to be confused with the place where the expression is invoked (or called).

const dog = "Tom";
const parentFunction = () => {
  // Layer 1
  const cat = "Jerry"; // Lexical scope

  const childFunction = () => {
    // Layer 2
    console.log(cat);
    console.log(dog);
  }

  return childFunction();
}

parentFunction();
// "Jerry"
// "Tom"

As you can see, in the childFunction, we get to call cat and dog without errors but how, since they're both defined outside the block?

Well that's exactly what the lexical scoping does, inside the inner scope you can access variables of outer scopes. (It's called lexical (or static) because the engine determines (at lexing time) the nesting of scopes just by parsing JavaScript source code, without executing it).

The how, the closure

Okay, so now we know about the lexical scope allowing us to access variables from outer scopes, but how does it work exactly?

Let's get back to our previous example:

const dog = "Tom";
const parentFunction = () => {
  // Layer 1
  const cat = "Jerry";

  const childFunction = () => {
    // Layer 2
    console.log(cat);
    console.log(dog);
  }

  return childFunction();
}

parentFunction();
// "Jerry"
// "Tom"

Inside childFunction() we get to call cat and dog but did you notice that childFunction() was called inside the lexical scope of parentFunction()?

Would it work if we instead did something like this:

const dog = "Tom";
const parentFunction = () => {
  // Layer 1
  const cat = "Jerry";

  const childFunction = () => {
    // Layer 2
    console.log(cat);
    console.log(dog);
  }

  return childFunction();
}

function run() {
  const myParentFunction = parentFunction();
  myParentFunction()
}

run();
// "Jerry"
// "Tom"

Now childFunction() is executed outside the lexical scope of parentFunction() but inside the run() . For this to work childFunction has to "remember" cat and dog from its lexical scope, the place where it was defined.

So there it is the final part, closure which is the ability of a function to "remember" and access its lexical scope regardless of where it's executed.

Thanks to closure the compiler does this:

Check if cat and dog are called in the local scope of childFunction, otherwise look for them up the chain (back to the parent function's scope).
Look for cat and dog inside the local scope of his parent, here parentFunction, the first one is found, perfect, we can print Jerry, but the other dog can't be found so we have to go back up the chain again.
Look for dog in the global scope, and here, Tom is finally printed.

This concept is called scope chain, going from one scope to another in order to find what needs to be stored for later use.

Note that: hoisting and closure allows functions, variables and classes to be used safely in the code (limited to their lexical scope) before being declared.

Note that it is generally not recommended to define everything explicitly at the top of the file, as this can lead to unexpected errors and memory as the engine cannot decide whether this variable should be garbage collected or not.

Conclusion

Understanding the concept of scope and hoisting is crucial to writing efficient and effective code aswell as help you write better code and avoid common pitfalls when working with JavaScript.

Easily retrieve the value of a nested property inside an object in javascript without the need for optional chaining in 2023.

Melvinvmegen — Thu, 10 Aug 2023 12:35:59 +0000

Implementation

function getObjectValue(obj, path, defaultValue = undefined) {
  const traverse = (regexp) => {
    return String.prototype.split
      .call(path, regexp)
      .filter(Boolean)
      .reduce(
        (res, key) => (res !== null && res !== undefined 
          ? res[key] 
          : res
        ),
        obj
      );
  };
  const result = traverse(/[,[\]]+?/) || traverse(/[,[\].]+?/);
  return result === undefined || result === obj 
   ? defaultValue 
   : result;
}

Context

When working with complex JavaScript objects, it's often necessary to access values at specific paths within the object. However, this can be challenging when the object is deeply nested, and the path is complicated altought nowadays we could alternatively use the optional chaining ?. for a less elegant aproach (by the way it's not always supported like in Vue 2 template block). The getObjectValue() function defined in this code offers a convenient way to retrieve values at any given path in the object.

Usage

The getObjectValue() function takes three arguments: the object to dig into, the path to the desired value, and an optional default value to return if the path does not correspond to any value.

Inside the getObjectValue() function we define yet another function traverse(), which uses regular expressions to split the path string into individual keys. These keys are then traversed using the reduce() method until the desired value is reached. If the value is found, it is returned, otherwise, the default value is returned.

Now, suppose you're building a weather application that consumes an API that returns an object with weather information for a given location. The object contains nested structures for various attributes, such as temperature, humidity, and precipitation.

To display the weather information on your application's user interface, you'll need to extract specific values from the API response object if for example, you want to display the current temperature in Celsius, the precipitation probability, and the wind speed in miles per hour you can easily extract these values from the API response object using the getObjectValue(), no matter how deeply they are nested:

const response = {
  locations: [
    {
      name: "London",
      country: "United Kingdom",
      region: "City of London, Greater London",
      lat: "51.517",
      lon: "-0.106",
      timezone_id: "Europe/London",
      localtime: "2023-04-08 12:30",
      current: {
        temperature: 15,
        humidity: 75,
        precipitation: {
          probability: 40,
          type: "rain",
        },
        wind_speed: {
          mph: 10,
          kph: 16,
        },
      },
    },
  ],
};

getObjectValue(response, "locations[0].current.temperature"); // 15
getObjectValue(response, "locations[0].current.precipitation.probability"); // 40
getObjectValue(response, "locations[0].current.wind_speed.mph"); // 10

Note: Optional chaining is a relatively new JavaScript feature that allows you to access nested properties of an object without throwing an error if any of the intermediate properties are null or undefined (as long as each property that could potentially be falsy is precedeted with a ?.). This is to me a more concise but less readable alternative than the getObjectValue() function.

// Alternative usage: optional chaining
response?.locations?.[0]?.current?.temperature; // 15
response?.locations?.[0]?.current?.precipitation?.probability; // 40
response?.locations?.[0]?.current?.wind_speed?.mph; // 10

Conclusion:

The getObjectValue() function provides a convenient and flexible way to retrieve values at specific paths within a JavaScript object. By using regular expressions to split the path string into individual keys and iteratively traversing the object, this function can handle even the most complex nested structures.

How to find the minimum value in a collection of primitives or objects with Javascript in 2023

Melvinvmegen — Sun, 30 Jul 2023 10:51:16 +0000

Implementation

function findMin(data, key) {
  return data.reduce((accumulator, currentValue) => {
    const computedAccumulator = key ? accumulator[key] : accumulator;
    const computedCurrentValue = key ? currentValue[key] : currentValue;
    return computedAccumulator <= computedCurrentValue
      ? accumulator
      : currentValue;
  }, {});
}

Context

As a JavaScript developer doing some data analysis is frequent even more so when the task at hand is about finding the minimum or even the maximum value of a collection. The code snippet above is an implementation of a function that finds the minimum value in a collection of objects but it could be easily extended to support other comparator.

Usage

The function findMin() takes in two parameters data and key where data could be an array of primitive or objects. In case of objects, the key parameter becomes essential as it allows to specify which property to use for comparison. This function could be described in 2 simple steps:

First, the reduce() method is used to iterate over the array of values and reduce it to a single value, here, the minimum value found. In case of an object, the returned value is the object with the minimum value of the specified key parameter.
Second, inside the reduce() method, we compare the current value with the previous smallest value (starting with an empty object). If the current value has a lower value than the previous smallest value, it is replace by the current value.

Note: In case of an object the key must be provided so we first checks if it is. If so, we use the specified property for comparison. Otherwise, we compare the entire value (in case of a object without the key parameter it will compare pointers which leads to random results).

Now, let's make this more concrete:

// Array of primitives
const randomNumbers = [124, "42", 99, 11];
findMin(randomNumbers); // 11

// Array of objects
const products = [
  { id: 1, name: "Beef", price: 10 },
  { id: 2, name: "Salmon", price: 20 },
  { id: 3, name: "Chicken", price: 5 },
];
findMin(products, "price"); 
// And tada 🎉
// { id: 3, name: "Chicken", price: 5 }

Note: we could easily change our function to handle other comparators, like finding the maximum value (>=) or the value that meets a certain condition.

Conclusion

The findMin() function is a useful snippet for finding the minimum value in a collection of primitives or objects with a provided key. With its ability to compare objects by a specified property, it can be used in various scenarios to find the smallest value of a particular property in a collection and could be extended to use a custom comparator.

How to convert an array of objects to directories alike.

Melvinvmegen — Sun, 23 Jul 2023 13:40:57 +0000

Context

As javascript developers, we are constantly manipulating arrays of objects. And more often than not we want the data to be easily retrievable or simply well structured, like a directory would be. Now, suppose you have an array of objects representing books, and you want to quickly create an object where the keys are book titles and the values are the corresponding book objects. You can use the keyBy function to achieve this in a single line of code!

Usage

The keyBy function takes two arguments, an array and a key string (which could be made optional and default to the id property or whatever suits your use cases the most).
The reduce method is then used to iterate over each element of the provided array, creating a new object where the keys are based on the values of the parameter key in each object and the object itself as the value.

Let's make this more concrete with our books example:

// Primitives values
let books = [
  "The Great Gatsby",
  "To Kill a Mockingbird",
  "Pride and Prejudice",
];
let booksByKey = keyBy(books);
// {
//    "The Great Gatsby": "The Great Gatsby",
//    "To Kill a Mockingbird": "To Kill a Mockingbird",
//    "Pride and Prejudice": "Pride and Prejudice"
// }

// Object values
books = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
  { title: "To Kill a Mockingbird", author: "Harper Lee", year: 1960 },
  { title: "Pride and Prejudice", author: "Jane Austen", year: 1813 },
];
booksByKey = keyBy(books, "title");
// {
// 'The Great Gatsby': { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
// 'To Kill a Mockingbird': { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
// 'Pride and Prejudice': { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813 }
// }

// And tada 🎉
booksByKey["The Great Gatsby"].author; // "F. Scott Fitzgerald"

This function doesn't handle the case where there are duplicated values, so it would just take the last encountered object for a certain value.

books = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
  { title: "To Kill a Mockingbird", author: "Harper Lee", year: 1960 },
  { title: "Pride and Prejudice", author: "Jane Austen", year: 1960 },
];
booksByKey = keyBy(books, "year");
// {
// 'The Great Gatsby': { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
// 'Pride and Prejudice': { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1960 }
// }

Extension
Let's not stop here, we could easily extend our function to also handle objects of objects :

function collectionKeyBy(collection = {}, key) {
  return Array.isArray(collection)
    ? keyBy(collection, key)
    : keyBy(Object.values(collection), key);
}

The collectionKeyBy function builds upon the keyBy handling the case for both arrays and objects. It takes a collection as a first argument and a key string as the second argument, it then checks if the provided collection is an array using the isArray method. If it is, it calls the keyBy function directly, if not it will convert our collection to an array thanks to the Object.values method before calling the still great keyBy function. This code can be usefull if you wanna unwrap objects that are keyed randomly by an API, let say you get our books from an endpoint:

const books = {
  book1: {title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925},
  book2: {title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960},
  book3: {title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813}
}
collectionKeyBy(books, "name");
// {
//   "The Great Gatsby": {
//       "title": "The Great Gatsby",
//       "author": "F. Scott Fitzgerald",
//       "year": 1925
//   },
//   "To Kill a Mockingbird": {
//       "title": "To Kill a Mockingbird",
//       "author": "Harper Lee",
//       "year": 1960
//   },
//   "Pride and Prejudice": {
//       "title": "Pride and Prejudice",
//       "author": "Jane Austen",
//       "year": 1960
//   }
// }

Conclusion:

The keyBy supercharged by the collectionKeyBy function are useful utility functions that can be used to generate a key based directory from an array or an object of objects with flexibility and ease in mind. Happy coding!

How to efficiently remove elements from an array in 2023.

Melvinvmegen — Sun, 16 Jul 2023 20:55:23 +0000

Context

As a seasoned JavaScript developer, there are situations where you need to remove specific elements from an array based on a list. Let's say, in an ecommerce site there is a list of items that a user wants to remove from their shopping cart or in case of a to-do list, items that the user wants to mark as completed. Well we can do both rather easily, let's find out how:

Usage

The pull() function provided in the above code is designed to remove specific elements from an array in a highly efficient manner. It takes two arguments: arr, which is the original array, and removeList, which is an array of elements to be removed from arr.

To speed up the process of removing elements from arr, the pull() function creates a Set called removeSet that stores the elements to be removed. The Set object is used instead of an array to improve the efficiency thanks to the built-in has() method which as a constant time complexity not matter how big the Set gets. Otherwise, we would have to use find() thus another loop, thus a loop inside a loop...

Finally, the filter() method is then used to create a new array that includes only the elements that are not present in removeSet.

// Primitives
pull([1, 2, 3, 3, 3], [1]); // [2, 3, 3, 3]
pull([1, 2, 3, 3, 3], [1, 3]); // [2]

// Objects
pull([
  { id: 1, name: "Nike Air Max 1 OG" },
  { id: 2, name: "Air Jordan 1 Mid" },
], [{ id: 2, name: "Air Jordan 1 Mid" }])
// [
//  { id: 1, name: "Nike Air Max 1 OG" }, 
// ]

// Sorry for the Air Jordan fans though 😎

Note: To follow up on the example we could extend this function to remove our unwanted elements from the user's shopping card simply like this:

function pull(arr, removeList) {
  var removeSet = new Set(removeList.map((obj) => obj.id));
  return arr.filter(function (el) {
    return !removeSet.has(el.id);
  });
}

const shoppingCard = [
  { id: 1, name: "Nike Air Max 1 OG" },
  { id: 2, name: "Air Jordan 1 Mid" },
];

const removeList = [{ id: 2, name: "Air Jordan 1 Mid" }];
pull(shoppingCard, removeList) 
// [
//  { id: 1, name: "Nike Air Max 1 OG" }, 
//  { id: 2, name: "Air Jordan 1 Mid" }
// ]

So we simple initialize our set with the values we want to look for, in our case the product ids, sorry for the Air Jordan fans though.

Conclusion

The pull function efficiently removes specific elements from an array using a Set. This approach ensures fast removal without nested loops, enhancing performance and simplicity in your code. Happy coding!

An easy way to recursively flatten a multidimensional array in JavaScript with only native JavaScript.

Melvinvmegen — Sun, 09 Jul 2023 20:25:51 +0000

Context

As a JavaScript developer, encountering situations where you need to flatten an array is common. For example, when working with data coming from an API or even a database, you may receive nested arrays that need to be flattened before you can properly use them.

If you're not sure what i'm talking about, flattening an array means converting a multi-dimensional array into a one-dimensional array, where all the elements are at the same level.

const multiLevelDeepArray = [1, 2, [3, [4]], 5];
const oneLevelDeepArray = [1, 2, [3], 4, 5];
const flatArray = [1, 2, 3, 4, 5];

Usage

Once upon a time, if you wanted to recursively flatten an array you could use the reduce() with the concat() method like this:

function flatten(arr) {
  return Array.isArray(arr)
    ? arr.reduce((a, b) => a.concat(flatten(b)), [])
    : [arr];
};

const flattened = flatten([1, 2, [3, [4, [5, 6]]]]); 
// [1, 2, 3, 4, 5, 6]

Here our dear flatten function recursively flattens the array by concatenating the elements of each sub-array into an accumulator array.
In case the provided element is not an array, we simply return an array with the element inside.

Let's break it step by step:

We have a = [] and b = 1, recursively calling flatten on 1 simply returns [1] which is then concatenated with [] given use [1];
We have a = [1] and b = 2, again calling flatten on 2 returns [2] which is then concatenated with [1] given use [1, 2];
We have a = [1, 2] and b = [3, [4, [5, 6]]], this time though calling flatten on [3, [4, [5, 6]]] will launch an all new flattening cycle until it returns [3, 4, 5, 6] to be concatenated with [1, 2] giving us the final result: [1,2,3,4,5,6]

ES6 to the rescue

Thankfully, ES6 introduced the flat() method for interacting with nested (even deeply) arrays. This method creates and returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

So in order to flatten a single level deep array, you can simply call the flat() method without any arguments (as 1 is the default depth):

const arr = [1, 2, [3, 4], 5];
const flattened = arr.flat(); // [1, 2, 3, 4, 5]

For more complex use cases you can flatten a Multi-Level Deep Array using the same logic all you have to do is pass the depth as an argument to the flat() method. For example, to flatten a 2-level deep array, you can pass 2 as the argument:

const arr = [1, 2, [3, [4, 5]], 6];
const flattened = arr.flat(2); // [1, 2, 3, 4, 5, 6]

If you don't know the depth of the array, you can use the Infinity keyword as the argument to flatten the array to any depth:

const arr = [1, 2, [3, [4, [5, 6]]]];
const flattened = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Conclusion

Flattening an array is a common task in JavaScript development, especially when working with nested arrays. In the past, the reduce() and concat() methods were used to recursively flatten an array. However, with the introduction of the flat() method in ES6, flattening an array has become much easier and probably more efficient.

Ever wondered how to find the difference between two arrays without a third party library?

Melvinvmegen — Thu, 29 Jun 2023 18:55:56 +0000

Context

As JavaScript developers, we are constantly working with arrays and as time passed you may have encountered a situation where you needed to compare two arrays and find the difference between them.
In this article, we will explore a code snippet in native javascript that does just that, using only native methods reduce(), filter(), sort() and includes(). So, let's dive in and learn how to find the difference between two arrays in just one line (just kidding otherwise this oneliner would be prettry much unreadable haha).

Usage

diffBetweenArrays([
  [1, 2, 3],
  [1, 2],
]); // [3]

diffBetweenArrays([
  [1, 2, 3],
  [1, 2, 3],
]); // []

// ✅ Order doesn't matter
diffBetweenArrays([
  [1, 2, 3, 4, 5],
  [5, 2, 10],
]); // [1, 3, 4]

diffBetweenArrays([
  [5, 2, 10],
  [1, 2, 3, 4, 5],
]); // [1, 3, 4]

// ❌ Avoid more than 2D arrays
diffBetweenArrays([[1, 2, 3], [1, 2], [2]]);
// [3]

How does it work?

The diffBetweenArrays takes a 2D array (more would have unexpected result) as its only argument then the function works in a few simple steps:

First we sort our 2D array by array length with sort() to make sure that the longuest array is always first so that the order at which we provide them doesn't matter.
The reduce() method is used to iterate over each provided arrays.
For each iteration it compares the next_array with the result obtained from the previous iteration (this is why is returns unexpected results when you provide more than 2D array as parameter), if none it's initialized as the first array using the filter() method creating a new array with only the values that satisfy a given condition in our case the condition is provided by:
The includes() method that checks if any value from the previous iteration is not present in the next_array.
Lastly the reduce() method passes the resulting array to the next iteration until all arrays have been compared.

And tada 🎉

diffBetweenArrays([
  ["George", "Saint", "Pierre"],
  ["Saint", "Pierre"],
]);
// ['Conor']

Note: We could extend this function to match objects aswell with any comparison you'd like, for the sake of the example let's compare all the properties of the object by first converting it to a string like this:

const diffBetweenArrayOfObjects = (arrays) => {
  return arrays
    .sort((current, next) => (current.length > next.length ? -1 : 0))
    .reduce((current_array, next_array) => {
      return current_array.filter((currentObj) => {
        return next_array.some((nextObj) => {
          return JSON.stringify(currentObj) !== JSON.stringify(nextObj);
        });
      });
    });
};

diffBetweenArrayOfObjects([
  [
    { id: 1, name: "George" },
    { id: 2, name: "George Saint-Pierre" },
  ],
  [{ id: 1, name: "George" }],
]);
// [{ id: 2, name: "George Saint-Pierre"" }]

Conclusion

The diffBetweenArrays function is a very useful snippet to return the difference between a 2D provided array, as a single array containing only values that are present in the first array but not in the second one.

Keep the good work! 🧠

Ever dreamed of finding the intersecting values between arrays without a third party library?

Melvinvmegen — Sun, 25 Jun 2023 20:13:15 +0000

Context

As a JavaScript developer, we are constantly working with arrays and sometimes we have to find the intersection of multiple arrays.
In this article, we will explore the best way to return an array with all the intersecting values between all the provided arrays without the need to use of popular libraries like Lodash or Underscore just relying on the reduce() method in combination with the filter() and the includes, only the best of javascript at work!

Usage

findIntersectingValues([[1, 2, 3], [1]]) // [1]
findIntersectingValues([[1, 2, 3], [1, 2, 3]]) // [1, 2, 3]
findIntersectingValues([[1, 2, 3], [1], [2]]) // []
findIntersectingValues([[1, 2, 3], [2], [2]]) // []

How does it work

The findIntersectingValues takes an array of arrays as its only argument then the function works in four simple steps:

The reduce() method is used to iterate over each provided array.
For each iteration it compares the current array with the result obtained from the previous iteration using the filter() method creating a new array with only the values that satisfy a given condition in our case the condition is provided by:
The includes() method that checks if values are present in both arrays.
Lastly the reduce() method passes the resulting array to the next iteration until all arrays have been compared.

To provide a more concrete example here is the output of each iteration in this case:

const arrays = [
  [1, 2, 3],
  [101, 2, 1, 10],
  [2, 1],
];

findIntersectionArray(arrays);
// Final Output: [1, 2]

[1, 2, 3] compared with [101, 2, 1, 10] results in [1, 2]
[1, 2] compared with [2, 1] still results in [1, 2]
Returning us the final output: [1, 2] 🎉

Note: We could extend this function to match objects aswell with any comparison you'd like, for the sake of the example let's compare the all object like this:

const findIntersectingValues = (arrays) => {
  return arrays.reduce((current_array, next_array) => {
    return current_array.filter((currentObj) => {
      return next_array.some((nextObj) => {
        // Compare objects based on their properties
        return JSON.stringify(currentObj) === JSON.stringify(nextObj);
      });
    });
  });
};

Conclusion

Finding the intersection of arrays is a common problem in programming, and there are several ways to solve it. In this article, we explored one of the best ways to return an array that is the intersection of all the provided arrays. Whether you choose to use a third-party library or native JavaScript functions, the key is to write code that is concise, readable, and easy to maintain.
Keep the good work! 🧠

Split an array into smaller arrays of a specific size

Melvinvmegen — Mon, 19 Jun 2023 19:51:56 +0000

Context

As a JavaScript developer, you may need to split an array into smaller arrays of a specific size and while you may be used to the _.chunk(data, size) function from Lodash you can also do it rather easily using only native Javascript. The toChunks function here is the perfect snippet for this task. Let's first find out how it to use it :

Usage

toChunks([1, 2, 3, 4], 1) // [[1], [2], [3], [4]]
toChunks([1, 2, 3, 4], 2) // [[1, 2], [3, 4]]
toChunks([1, 2, 3, 4], 3) // [[1, 2, 3], [4]]
toChunks([1, 2, 3, 4], 4) // [1, 2, 3, 4]

Demystify the "toChunks" Function

We can divide the toChunks function into three main parts:

The toChunks function: that takes two arguments array and size, as the size of each desired chunk.
Reduce: The provided array is iterated over by the reduce method which takes two arguments: a callback function and an initial value for the accumulator, here an empty array [].
The callback function: which is executed for every item taking three arguments: the accumulator (arr), the current item in the array, and his index (idx).

How it works

To provide a more concrete example i will base the explanation on this example :

toChunks([1, 2, 3, 4], 2) // [[1, 2], [3, 4]]

First, the callback function running on each item will check if the current index is divisible by the size argument (2) using the remainder operator %.
If it does, then we will create a new chunk with the current item before adding it to the accumulator using the spread operator ..., in case of our example, after one iteration the accumulator would look like that [[1]].
Otherwise, it means that we need to add the current item to the last chunk in the accumulator. To do so, the slice method is used to extract the last element of the accumulator (which after the first iteration is still [1]) before adding the current item with the mighty spread operator "..." so that after the second iteration we have [1, 2]. Then, we replace the last element of the accumulator with the updated chunk again using the slice method so that we end up with this value [[1, 2]].
After every iteration placing each item inside the right chunk, the reduce method returns the accumulator, so that we end up with an array of smaller arrays with the values of the original array.

And tada 🎉

toChunks([1, 2, 3, 4], 2) // [[1, 2], [3, 4]]

Conclusion

The toChunks function is the perfect snippet for splitting an array into smaller arrays of a specific size. By properly using the powers of reduce, slice and the spread operator, we can easily create such a function only using native JavaScript instead of Lodash.

Filtering objects as easily as arrays.

Melvinvmegen — Wed, 26 Oct 2022 00:00:00 +0000

function objectFilter
  (obj, func = ([, val]) => val) {
  return Object.fromEntries(
    Object.entries(obj).filter(func)  
  );
}

Context

In JavaScript, since almost everything is an object we are constantly manipulating them and filtering is obviously one of the most common use cases. Let's say we want to get an object with just the keys and values that fullfil a certain condition. For arrays we would just use filter() unfortunately, it doesn't support objects.

But, what we can do is convert our object to an array first so that we are able to iterate over the object as if it was an array, before filtering it as intended.
Let's see how we can do it using our objectFilter() function:

Usage

// Filtering null values by default
objectFilter({
  firstName: null ,
  lastName: "Doe",
  age: 26,
}); // { lastName: "Doe", age: 26 }

// Using our own filtering
objectFilter(
  {
    firstName: "John",
    lastName: "Doe",
    age: 26,
  },
  ([, val]) => typeof val === "number"
);
// { age: 26 }

Explanation

This function takes two parameters, an object to be filtered and an optional callback function which will be provided to filter() that basically returns every value that meets the condition so the provided callback better return a boolean.

Note that: By default our function will filter out every falsy values and their paired key from the provided object but we can override that to our needs.

const obj = {
  firstName: "John",
  LastName: "Doe",
  age: 26,
};

// Convert *obj* to a [key, value] array of arrays
const objAsArray = Object.entries(obj);
// `[['firstName', 'John'], ['lastName', 'Doe'], ['age', 26]]`

const filteredObj = objAsArray.filter(
  ([key, value]) => typeof value === "number"
);
// `[['age', 26]]`

// Convert the key/value arrays back to an object:
const objNumbersOnly = Object.fromEntries(filteredObj);
// `{ age: 26 }`

The provided object is first converted to an array of Arrays consisting of the key followed by its value for each of its key-value pairs using Object.entries().

This new array is then filtered with the callback passed in parameter which in our case excludes all the values which are not numbers.

Have you noticed that we were using destructuring assignement ? It allows us to take the first element of every array and store it in a variable called key, same for the second element value.

The filtered array is then converted back into an object via fromEntries() which is the opposite of entries() converting array of arrays of key-value pairs into an object giving us objNumbersOnly filtered according to our conditions, i.e. an object with only keys where values are numbers!

Conclusion

The final snippet in a compact expression :

function objectFilter(obj, func = ([, val]) => val) {
  return Object.fromEntries(Object.entries(obj).filter(func));
}