Scribd
Upload
10 views3 pages

Modern JavaScript Tips and Projects

The document outlines modern JavaScript practices, emphasizing the use of ES6+ features, functional programming principles, async/await for asynchronous operations, and modular code structure. It includes examples of reusable functions, type safety with TypeScript or JSDoc, and smart error handling techniques. Additionally, it presents mini project examples like a To-Do list and an Expense Tracker to illustrate these practices in action.

Uploaded by

priyadharshinibalamurugan268
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

Modern JavaScript Tips and Projects

The document outlines modern JavaScript practices, emphasizing the use of ES6+ features, functional programming principles, async/await for asynchronous operations, and modular code structure. It includes examples of reusable functions, type safety with TypeScript or JSDoc, and smart error handling techniques. Additionally, it presents mini project examples like a To-Do list and an Expense Tracker to illustrate these practices in action.

Uploaded by

priyadharshinibalamurugan268
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Modern JavaScript Practices with Project Examples

1. Use Modern ES6+ Features

Use destructuring, arrow functions, optional chaining, and nullish coalescing to write cleaner and concise

code.

Example:

const { name, age } = user;

const greet = () => console.log("Hello!");

const city = user?.address?.city;

const value = input ?? "default";

2. Functional Programming Principles

Use functions like map(), filter(), reduce() to avoid side-effects.

Example:

const prices = [100, 200, 300];

const withTax = prices.map(price => price * 1.18);

3. Use async/await to avoid callback hell

Example:

const getData = async () => {

try {

const res = await fetch("https://api.example.com/data");

const data = await res.json();

console.log(data);

} catch (err) {

console.error(err);

};

4. Use Modules (ESM)


Modern JavaScript Practices with Project Examples

Split your code into modules for reusability.

// utils.js

export const sum = (a, b) => a + b;

// app.js

import { sum } from './utils.js';

5. Write Reusable, Pure Functions

Bad:

function addUser(name) {

database.push(name);

Better:

function addUser(users, name) {

return [...users, name];

6. Use TypeScript or JSDoc

Add types for better safety and documentation.

/** @param {string} name @param {number} age */

function greet(name, age) {

return `${name} is ${age} years old.`;

7. Use Logical Assignment Operators

a ||= 10; // a = a || 10;

b &&= 5; // b = b && 5;
Modern JavaScript Practices with Project Examples

c ??= 3; // c = c ?? 3;

8. Smart Error Handling

Use try/catch and global error handler.

window.onerror = function (msg, url, lineNo, columnNo, error) {

console.log("Custom Error Handler:", error);

};

Project Mini Project Example: To-Do List (using ES6+)

HTML:

<input id="task" /><button onclick="addTask()">Add</button><ul id="list"></ul>

JS:

const list = document.getElementById("list");

const addTask = () => {

const task = document.getElementById("task").value;

const li = document.createElement("li");

li.textContent = task;

list.appendChild(li);

};

Project Project Example: Expense Tracker (Functional JS)

const expenses = [

{ item: "Food", amount: 300 },

{ item: "Transport", amount: 150 }

];

const total = expenses.reduce((sum, exp) => sum + exp.amount, 0);

console.log("Total:", total);

You might also like