12 useful JavaScript snippets to solve everyday problems, save time and optimize code as a web developer.

12-useful-js-code-snippets.js

// 1. Destructive Assignment
const data = ["Paul", "too old", "Software Engineer"]
const [name, age, job_title] = data

console.log(name, age, job_title) // Paul too old Software Engineer


// 2. Find an object in Array
const employess = [
    {name: "Paul", job_title: "Software Engineer"},
    {name: "Peter", job_title: "Web Developer"},
    {name: "Harald", job_title: "Screen Designer"},
]
let sen = employess.find(data => data.job_title === "Software Engineer")

console.log(sen) // { name: 'Paul', job_title: 'Software Engineer' }


// 3. Reverse a String
const reverse = (input) => {
    return input.split("").reverse().join("");
}

console.log(reverse("Paul Knulst")) // tslunK luaP
console.log(reverse("Medium is awesome")) // emosewa si muideM


// 4. Placeholder in Strings
let placeholder1 = "Engineer";
let placeholder2 = "Developer";

console.log(`I'm a Software ${placeholder1}`); // I'm a Software Engineer
console.log(`I'm a Software ${placeholder2}`); // I'm a Software Developer


// 5. One-Line if-else Statement

// normal
if (13 > 37) {
    console.log(true);
} else {
    console.log(false)
}
// One liner
13 > 37 ? console.log(true) : console.log(false)


// 6. Get Rid of Duplicates
function removeDuplicates(array) {
    return [...new Set(array)];
}

const uniqueStr = removeDuplicates(["Paul", "John", "Harald", "Paul", "John"])
const uniqueNr = removeDuplicates([1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 7, 7, 9])
console.log(uniqueStr) // [ 'Paul', 'John', 'Harald' ]
console.log(uniqueNr) // [1, 2, 3, 4, 5, 6, 7, 9]


// 7. Split String to Array
const randomString = "Software"
const newArray = [...randomString]

console.log(newArray) // ['S', 'o', 'f', 't', 'w', 'a', 'r', 'e']


// 8. Capture Right Click
// only usable in HTML/JS
window.oncontextmenu = () => {console.log("Right Click is Pressed!")}


// 9. Looping through Keys and Values
const programming_languages = {JavaScript: 1, Kotlin: 2, Python: 3};
Object.keys(programming_languages).forEach((key) => {
    console.log(key);
});
// JavaScript
// Kotlin
// Python
Object.values(programming_languages).forEach((key) => {
    console.log(key);
});
// 1
// 2
// 3


// 10. Smart Data Filteration
const jobs = ["Frontend Developer", "Backend Developer", "Data Scientist", "Teacher"]
const filtered_jobs1 = jobs.filter(data => data.length < 10)
const filtered_jobs2 = jobs.filter(data => data.includes("Developer"))

console.log(filtered_jobs1) // [ 'Teacher' ]
console.log(filtered_jobs2) // [ 'Frontend Developer', 'Backend Developer' ]


// 11. Nullish coalescing operator
const foo = null ?? 'default string';
const baz = 0 ?? 42;

console.log(foo); // default string
console.log(baz); // 0

// 12. Error Handling
function getRectArea(width, height) {
    if (isNaN(width) || isNaN(height)) {
        throw 'Parameter is not a number!';
    }
}

try {
    getRectArea(3, "A")
} catch (err) {
    console.log(`There was an error: ${err}`)
} finally {
    console.log("This code block is executed regardless of try/catch results")
}
// Output:
// There was an error: Parameter is not a number!
// This code block is executed regardless of try/catch results