We have covered the whole JavaScript ES6+ free crash course in the previous tutorials. You can read about different features of JavaScript ES6 here: Arrow Functions, Destructuring, Rest Operators, Template Literal Classes & Inheritance, Modules promises, Aync/Await , Const, Let & Block Scoping, Enhanced Object Literals, default parameters, Map & Set and Symbols in JavaScript. In this tutorial we are explaining different Javascript functions with code examples below for you to practice.
1- Greeting function:
const greet = (name = 'Guest', greeting = 'Hello') => `${greeting}, ${name}!`; console.log(greet()); // Hello, Guest!
console.log(greet('Alice', 'Hi')); // Hi, Alice!
2- Value swapping:
const swap = ([a, b]) => [b, a]; let x = 1, y = 2;
[x, y] = swap([x, y]);
console.log(x, y); // 2 1
3- Person and Student classes:
class Person {
constructor(name, age) { this.name = name;
this.age = age;
}
introduce() {
return `My name is ${this.name} and I'm ${this.age} years old.`;
}
}
class Student extends Person {
constructor(name, age, major) { super(name, age);
this.major = major;
}
introduce() {
return `${super.introduce()} I'm studying ${this.major}.`;
}
}
const student = new Student('Alice', 20, 'Computer Science'); console.log(student.introduce());
4- Average calculation:
const average = (...numbers) => numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
console.log(average(1, 2, 3, 4, 5)); // 3
5- Concurrent API fetches
const fetchData = async (url) => { const response = await fetch(url); return response.json();
};
const fetchMultipleData = async () => { try {
const [users, posts] = await Promise.all([
fetchData('https://api.example.com/users'), fetchData('https://api.example.com/posts')
]);
return { users, posts };
} catch (error) {
console.error('Error fetching data:', error);
}
};
6- Fibonacci generator:
function* fibonacciGenerator() { let a = 0, b = 1;
while (true) { yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacciGenerator(); for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}
7- User Map
const userMap = new Map();
const addUser = (id, name, email) => userMap.set(id, { id, name, email }); const getUser = (id) => userMap.get(id);
addUser(1, 'Alice', '[email protected]'); addUser(2, 'Bob', '[email protected]');
console.log(getUser(1)); // { id: 1, name: 'Alice', email: '[email protected]' }
8- Merge arrays
const mergeUnique = (arr1, arr2) => [...new Set([...arr1, ...arr2])];
console.log(mergeUnique([1, 2, 3], [3, 4, 5])); // [1, 2, 3, 4, 5]
9- Module example:
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default function multiply(a, b) { return a * b; }
// main.js
import multiply, { add, subtract } from './math.js'; console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
console.log(multiply(5, 3)); // 15
10- Debounce function:
const debounce = (func, delay) => { let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), delay);
};
};
const debouncedLog = debounce(console.log, 1000);
debouncedLog('Hello'); // Will log after 1 second if not called again
These challenges cover a wide range of ES6+ features and demonstrate practical applications of the concepts discussed in the crash course.
