7 best practices for arrays in javascript

Navin Mishra — Wed, 12 Apr 2023 10:31:33 +0000

Arrays are a fundamental data structure in JavaScript, and are used in nearly every application. But working with arrays can be messy and inefficient if you don't use the right methods and techniques. In this post, we'll explore some array methods and techniques that will help you write cleaner, more efficient code.

1. forEach : The Gentle Giant of Array Methods

When it comes to iterating over an array, the forEach() method is the gentle giant. It quietly steps through each element in the array, without making a fuss. It doesn't care if you mutate the array or not. It just wants to be helpful.

2. map : The Transformer

The map() method transforms each element in an array into a new element. It's like a magical machine that takes in old junk and spits out shiny new things.

3. filter : The Cleaner

The filter() method is like a cleaning crew for your array. It filters out elements that don't belong, leaving behind only the good stuff.
Bonus
some() method checks if at least one element in an array satisfies a condition and returns boolean value. And, find() method returns the first element in an array that satisfies a provided testing function. It returns undefined if no element satisfies the condition

4. reduce : The Calculator

The reduce() method is like a calculator for your array. It takes in an array of numbers and crunches them down into a single number.

5. spread operator : The Expander

The spread operator is like a can of compressed air that expands when you use it. It expands an array into individual elements, making it easy to pass them around as separate arguments.

6. destructuring : The Unpacker

Destructuring is like a reverse present wrapper. It unpacks the contents of an array and assigns them to individual variables.

7. deduplication : The Remover

Deduplication is the process of removing duplicate values from an array. The Set constructor is used to create a new set object, which automatically removes duplicates.

Finally

Thanks for reading. I Hope you find this article useful. Please leave a comment for mistakes so that i can improve in my next articles. And follow for more quality articles. Happy reading!!

8 Javascript useful techniques

Navin Mishra — Wed, 15 Mar 2023 06:14:54 +0000

This article collects some common javascript techniques for clean code and better development efficiency

1. Converting string to number.

We might be using Number() and parseInt() to convert string to number. But we can use "+" as well:

Example:

const str = '123';
const num = +str

2. Converting number to string

There is another method to convert number to string.

Example:

const num = 123;
const str = ""+num

But considering readibility and performance, String() and template string are recommended.

3. Ternary operator

The ternary operator is a shorthand way of writing an if-else statement in JavaScript. It is represented by the ? and : symbols, and has the following syntax:

condition ? expression1 : expression2

Example using if/else statement:

let num = 5;
let message;

if (num > 0) {
  message = "Positive";
} else {
  message = "Non-positive";
}
console.log(message); // Output: "Positive"

The same code can be written using the ternary operator as follows:

let num = 5;
let message = (num > 0) ? "Positive" : "Non-positive";
console.log(message); // Output: "Positive"

4. Use object instead of "switch"

We often use switch to handle different things, but have you ever thought of using an object to greatly simplify your code? Let me explain in code.

const n = 1
let result;
switch (n) {
  case 1:
    result = 'res-1'
    break
  case 2:
    result = 'res-2'
    break
  case 3:
    result = 'res-3'
    break  
  // ...There are a lot more
}

We only need to use object map to achieve our goal:

const n = 1
const nMap = {
  1: 'res-1',
  2: 'res-2',
  3: 'res-3'
}
const result = nMap[ n ]

5. Use the "includes" method instead of multiple "if"

We often writes code like this but multiple conditions makes the logic more confusing.

Example:

const n = 1
if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
  // ...
}

Let's use "includes" method to make our code extra clean and maintainable:

const n = 1
const conditions = [ 1, 2, 3, 4, 5 ] // You just need to add new numbers here
if (conditions.includes(n)) {
  // ...
}

6. Use the default parameters of the ES6 function

Example:

const func = (name) => {
  name = name || 'magic'
  console.log(name)
}

Let's use like this instead:

const func = (name = 'magic') => {
  console.log(name)
}

7. Improve variable logging using console.log

Instead of using like this:

const str = "magic"
console.log("str:", str);

We can use like this to improve readability.

const str = "magic"
console.log({str});

This will print like an object with key as "str" and value as "magic".

8. Use of nullish coalescing operator with numbers

The Nullish Coalescing Operator (??) is a logical operator that accepts two values and returns the second value if the first one is null or undefined and otherwise returns the first value.

Example:

let num = 0;
let num2;

console.log(num || 1); // 1
console.log(num2 || 2); // 1

Let's use '??' operator now.

let num = 0;
let num2;

console.log(num ?? 1); // 0
console.log(num2 ?? 2); // 2

Hope you find these techniques useful and able to make your code cleaner. Happy reading!!

DEV Community: Navin Mishra

7 best practices for arrays in javascript

1. forEach : The Gentle Giant of Array Methods

2. map : The Transformer

3. filter : The Cleaner

4. reduce : The Calculator

5. spread operator : The Expander

6. destructuring : The Unpacker

7. deduplication : The Remover

Finally

8 Javascript useful techniques

This article collects some common javascript techniques for clean code and better development efficiency

1. Converting string to number.

2. Converting number to string

3. Ternary operator

4. Use object instead of "switch"

5. Use the "includes" method instead of multiple "if"

6. Use the default parameters of the ES6 function

7. Improve variable logging using console.log

This will print like an object with key as "str" and value as "magic".

8. Use of nullish coalescing operator with numbers