12 Essential JavaScript Functions Every Web Developer Must Know -

12-essential-js-functions.js

//1. Retrieve the First/Last Item In Any JavaScript Array
const head = (arr) => arr[0];
const last = (arr) => arr[arr.length - 1];

head([1, 2, 3, 4, 5, 6, 7, 8]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8


//2. Comma operator in JavaScript
console.log([1, 2, 3, 4][1]); // 2
console.log([1, 2, 3, 4][(1, 2)]); // 3
console.log([1, 2, 3, 4][2]); // 3


//3. Copy anything into the Clipboard
function copyToClipboard() {
    const copyText = document.getElementById('myInput');
    copyText.select();
    document.execCommand('copy');
}
// new API
function copyToClipboard() {
    navigator.clipboard.writeText(document.querySelector('#myInput').value);
}


//4. Nested Destructuring in JavaScript
const user = {
    id: 459,
    name: 'Paul Knulst',
    age: 29,
    job: {
        role: 'Tech Lead',
    },
};

const {
    name,
    job: { role },
} = user;
console.log(name); // Paul Knulst
console.log(role); // Tech Lead


//5. Add Globally Available Function To Any Object
Array.prototype.toUpperCase = function () {
    let i;
    for (let i = 0; i < this.length; i++) {
        this[i] = this[i].toUpperCase();
    }
    return this;
};

const myArray = ['paul', 'knulst', 'medium'];
console.log(myArray); // ['paul', 'knulst', 'medium']
console.log(myArray.toUpperCase()); // ['PAUL', 'KNULST', 'MEDIUM']


//6. Natively Convert Arrays Into Objects in JavaScript
const anArray = [
    ['firstname', 'Paul'],
    ['surname', 'Knulst'],
    ['address', 'worldwide'],
    ['role', 'Senior Engineer'],
    ['followers', 'not much'],
];

const anObj = Object.fromEntries(anArray);
console.log(anObj);
// {
//     firstname: 'Paul',
//     surname: 'Knulst',
//     address: 'worldwide',
//     role: 'Senior Engineer',
//     followers: 'not much'
// }


//7. Recursively Obtain The Fibonacci Of A Number
const getFibonacci = (n, memo = {}) =>
    memo[n] ||
    (n <= 2
        ? 1
        : (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));

console.log(getFibonacci(4)); // 3
console.log(getFibonacci(8)); // 21


//8. Check If A Date Is On A Weekend
const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;

console.log(isWeekend(new Date())); // false
console.log(isWeekend(new Date('2022-10-28'))); // false
console.log(isWeekend(new Date('2022-10-29'))); // true


//9. Convert The 24-hour Time Format To am/pm
const toAMPMFormat = (h) =>
    `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? ' am.' : ' pm.'}`;

console.log(toAMPMFormat(12)); // 12 pm.
console.log(toAMPMFormat(21)); // 9 pm.
console.log(toAMPMFormat(8)); // 8 am.
console.log(toAMPMFormat(16)); // 4 pm


//10. Check If Properties Exist In Objects
const developer = {
    name: 'Paul Knulst',
    role: 'Tech Lead',
    extra: 'Loves DevOps',
    company: 'Realcore',
    os: 'Windows',
};

const laptop = {
    os: 'Windows',
    buydate: '27.10.2022',
    extra: 'looks cool',
};
console.log('name' in developer); // true
console.log('extra' in developer); // true

console.log('name' in laptop); // false
console.log('extra' in laptop); // true


//11. Check If Arrays Contain The Same Values
const containSameValues = (arr1, arr2) =>
    arr1.sort().join(',') === arr2.sort().join(',');

console.log(containSameValues([1, 2, 3], [1, 2, 3])); // true
console.log(containSameValues([1, 2, 3], [2, 3, 4])); // false
console.log(containSameValues([1, 2, 3], [1, 2, 3, 4])); // false


//12. Ensure A Variable Is Within A Specified Range
const clamp = (min, max, value) => {
    if (min > max) {
        throw new Error('min cannot be greater than max');
    }
    return value < min ? min : value > max ? max : value;
};

clamp(0, 6, -5); // 0
clamp(0, 6, 20); // 6
clamp(0, 6, 3); // 3


//Bonus: Swap Two Variables In One Line
let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50