Scribd
Upload
287 views

Modern JavaScript Concepts

The document outlines advanced JavaScript concepts including template literals, destructuring assignment, rest and spread operators, async/await, promises, optional chaining, nullish coalescing operator, arrow functions, map and filter methods, modules, default parameters, and sets. Each concept is explained with its purpose and benefits, highlighting improvements in code readability, flexibility, and organization. Code examples are provided for practical understanding of each concept.

Uploaded by

delumgahakotuwa678
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
287 views

Modern JavaScript Concepts

The document outlines advanced JavaScript concepts including template literals, destructuring assignment, rest and spread operators, async/await, promises, optional chaining, nullish coalescing operator, arrow functions, map and filter methods, modules, default parameters, and sets. Each concept is explained with its purpose and benefits, highlighting improvements in code readability, flexibility, and organization. Code examples are provided for practical understanding of each concept.

Uploaded by

delumgahakotuwa678
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/ 9

Advanced and Modern JavaScript Concepts

1. Template Literals
Explanation: Traditional string concatenation can be cumbersome, especially when
dealing with multi-line strings and variable interpolation. Template literals allow embedding
variables directly within strings using backticks (``) and ${}. They also make it easier to
write multi-line strings without using escape characters like \n.
Code Example:

2. Destructuring Assignment
Explanation: Destructuring provides a concise way to extract values from arrays or objects
and assign them to variables in a single line. It simplifies data handling, especially when
working with APIs or structured objects.
Code Example:
3. Rest and Spread Operators
Explanation:
• Rest Operator (...): Gathers the remaining elements of an array into a separate
array.
• Spread Operator (...): Expands elements of an array or object into individual
elements. It is commonly used for copying or merging arrays and objects.
Code Example:

4. Async & Await


Explanation: Async/Await is a modern way to handle asynchronous code, making it easier
to read and maintain compared to traditional promise chaining. async functions always
return a promise, and await pauses execution until the promise is resolved. This syntax
helps avoid deeply nested .then() chains.
Code Example:
5. Promises
Explanation: Promises provide a way to handle asynchronous operations, ensuring better
readability and error handling. A promise has three states:
• Pending: Initial state
• Resolved (Fulfilled): Operation completed successfully
• Rejected: Operation failed
Promises help avoid callback hell and provide a structured way to manage async tasks.
Code Example:
6. Optional Chaining
Explanation: Optional chaining (?.) prevents errors when accessing deeply nested
properties that may be undefined or null. Without it, accessing a missing property would
result in an error, but optional chaining safely returns undefined instead.
Code Example:

7. Nullish Coalescing Operator


Explanation: The nullish coalescing operator (??) provides a default value only if the left-
hand operand is null or undefined. Unlike the OR (||) operator, it does not treat 0 or empty
strings as falsy values.
Code Example:
8. Arrow Functions
Explanation: Arrow functions provide a more concise syntax for writing functions. They
also lexically bind this, meaning they do not have their own this context, making them
useful in callback functions.
Code Example:

9. Map and Filter


Explanation:
• map(): Creates a new array by applying a function to each element.
• filter(): Creates a new array with elements that pass a given condition.
These methods improve code readability and make operations on arrays more functional.
Code Example:
10. Modules (ES6 Import/Export)
Explanation: Modules allow JavaScript code to be split into separate files, promoting
better organization and reusability. They use export to expose functionality and import to
bring it into another file.
Code Example: module.js:
main.js:

11. Default Parameters


Explanation: Default parameters allow functions to have default values if no arguments
are provided, improving function flexibility.
Code Example:
12. Set and WeakSet
Explanation:
• Set: A collection of unique values, useful for removing duplicates.
• WeakSet: Similar to Set but only stores objects and allows garbage collection.
Code Example:
13. Map and WeakMap
Explanation:
• Map: A key-value store where keys can be of any type.
• WeakMap: Holds weak references to objects, preventing memory leaks.
Code Example:

You might also like