#lifehack #js

If you are using JavaScript, you know that importing code from different directories can be a pain in the butt 🥺

Example:

// some js file
import add from '../../utils/add.js'
import java from '../../lowiq/java.js'
import { brain } from '../../../lib/brain.js'

You can end this madness with relative paths with a simple solution (if you use VSCode).
1. Add `jsconfig.json` in the root of the project
2. Add "paths" config and define your needed paths with any keyword

{
...
  "paths": {
    "@utils": ["./utils/*"],
    "@sht": ["./lowiq/java.js"],
    "@lib": ["./lib/*"]
  }
...
}

3. Change relative paths to keyworded paths. Update the code from the example above to:

// some js file
import add from '@utils/add.js'
import java from '@sht'
import { brain } from '@lib/brain.js'

@islombe_dev

Long time no see 👋

Sharing my 5 JavaScript tips for better coding with you 👨‍🏫

1️⃣ Use async/await: Simplify async code for better readability.

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

2️⃣ Destructuring: Clean up code by unpacking values.

const user = { name: 'John', age: 27, location: 'New York' };
const { name, age, location } = user;

const arr = [1, 2, 3, 4];
const [first, second, ...rest] = arr;

3️⃣ Module Scope: Avoid globals with ES6 modules.

// module.js
export const myFunction = () => {};
// main.js
import { myFunction } from './module';

4️⃣ Debounce & Throttle: Optimize performance.

// Debounce function
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// Throttle function
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => (inThrottle = false), limit);
        }
    };
}

5️⃣ Write Self-Documenting Code with Clear Naming and Comments

function calculateSum(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

// Comments
/**
 * Calculates the sum of two numbers.
 * @param {number} firstNumber - The first number.
 * @param {number} secondNumber - The second number.
 * @returns {number} - The sum of the two numbers.
 */
function calculateSum(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

Implementing these practices can significantly improve the quality and performance of your JavaScript code.

#js #lifehack