JavaScript is a versatile language that’s packed with powerful features. Whether you’re a beginner or have been coding for a while, knowing some handy tips and tricks can make your development process smoother. In this blog, we’ll explore several useful JavaScript features including Array.from(), Object.seal() and Object.freeze(), flatMap(), insertAdjacentHTML(), createTreeWalker(), how to remove duplicates from an array, console.table, cloning objects with Object.assign() and the spread operator, JSON.parse(), Object.is(), and Logical Assignment Operators.
1. Use the Array.from() Method to Create Arrays from Array-like Objects or Iterables
Array.from() is a method that creates a new array instance from an array-like or iterable object. An array-like object has a length property and indexed elements, such as a NodeList or arguments object. An iterable object is any object that can be iterated over, such as a Set or a String. This is particularly useful for converting NodeLists (which are returned by methods like document.querySelectorAll) or Sets into arrays, so you can use array methods on them.
Example:
Imagine you have a set of div elements in your HTML:
<div>Item 1</div> <div>Item 2</div> <div>Item 3</div>
You can select these div elements using querySelectorAll and convert the NodeList to an array:
const nodeList = document.querySelectorAll('div'); // Selects all div elements
const array = Array.from(nodeList); // Converts NodeList to an array
array.forEach(div => console.log(div.textContent)); // Logs: Item 1, Item 2, Item 3
2. Control Object Mutability with Object.seal() and Object.freeze()
Object.seal()
Object.seal() prevents new properties from being added to an object and marks all existing properties as non-configurable. However, the values of existing properties can still be changed.
const obj = { name: 'John' };
Object.seal(obj);
obj.name = 'Jane'; // This works
obj.age = 30; // This does not work (cannot add new properties)
console.log(obj); // { name: 'Jane' }
Object.freeze()
Object.freeze() makes an object immutable. No changes can be made to its properties, and no new properties can be added.
const obj = { name: 'John' };
Object.freeze(obj);
obj.name = 'Jane'; // This does not work (cannot change existing properties)
console.log(obj); // { name: 'John' }
3. Simplify Nested Arrays with flatMap()
flatMap() first maps each element using a mapping function, then flattens the result into a new array. Flattening means converting a multi-dimensional array into a single-dimensional array, removing nested arrays. This is useful when you need to transform and flatten an array in a single step.
Example:
Here’s a practical example often used in interviews: Suppose you have an array of strings, and each string represents a sentence. Your task is to get an array of all words across all sentences.
const sentences = ["Hello World", "JavaScript is awesome"];
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words); // ['Hello', 'World', 'JavaScript', 'is', 'awesome']
Each sentence is split into words, and flatMap() combines all the resulting arrays of words into a single array.
4. Insert HTML into the DOM with insertAdjacentHTML()
insertAdjacentHTML() allows you to insert HTML into the DOM at specific positions relative to an element.
Example:
Consider you have the following HTML:
<div id="container">Existing Content</div>
You can insert new content using insertAdjacentHTML():
document.querySelector('#container').insertAdjacentHTML('beforeend', '<p>Hello World!</p>');
Console Output:
<div id="container"> Existing Content <p>Hello World!</p> </div>
This will add a new <p> element with the text “Hello World!” inside the div with the ID container, after its existing content.
5. Navigate the DOM Efficiently with createTreeWalker()
createTreeWalker() is used to navigate a DOM tree. It provides a flexible way to iterate over DOM elements based on specified criteria.
Example:
Suppose document.body contains the following HTML:
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<footer>Footer Content</footer>
</body>
You can create a TreeWalker to traverse all elements:
const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
while(treeWalker.nextNode()) {
console.log(treeWalker.currentNode.tagName); // Logs: DIV, P, P, FOOTER
}
6. Remove Duplicates from an Array Using Set
To remove duplicates from an array, you can use Set (which only stores unique values) and Array.from() to convert it back to an array.
Example:
const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = Array.from(new Set(numbers)); console.log(uniqueNumbers); // [1, 2, 3, 4, 5]
7. Display Data Nicely with console.table
console.table() displays data in a table format, making it easier to read complex data structures in the console.
Example:
const data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 }
];
console.table(data);
Console Output:
┌─────────┬──────────┬─────┐ │ (index) │ name │ age │ ├─────────┼──────────┼─────┤ │ 0 │ 'John' │ 30 │ │ 1 │ 'Jane' │ 25 │ └─────────┴──────────┴─────┘
8. Perform Shallow Cloning with Object.assign()
To clone an object, you can use Object.assign(). This method creates a shallow copy of an object, meaning it only copies the first level of properties.
Example:
const obj = { name: 'John' };
const clone = Object.assign({}, obj);
console.log(clone); // { name: 'John' }
Explanation: A shallow copy is sufficient for objects without nested objects. However, if the object contains nested objects, changes to those nested objects will affect both the original and the cloned object.
9. Deep Clone Objects Using JSON.parse() and JSON.stringify()
JSON.parse() and JSON.stringify() can be used together to deep clone an object. However, this method has limitations, such as its inability to clone functions, undefined, or special objects like Date. Deep cloning means copying an object along with all objects it references.
Example:
const obj = { name: 'John', details: { age: 30 } };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone); // { name: 'John', details: { age: 30 } }
Explanation: Deep cloning ensures that nested objects are also cloned, so modifications to the nested objects in the clone do not affect the original object. However, this method doesn’t handle functions, undefined, or special objects like Date properly.
10. Understand Strict Equality with Object.is()
Object.is() determines whether two values are the same, similar to === but with some key differences. For example, Object.is() treats NaN as equal to NaN, while === does not. Additionally, Object.is() distinguishes between +0 and -0, considering them as different, whereas === treats them as the same.
Example:
console.log(Object.is(25, 25)); // true (same value) console.log(Object.is(NaN, NaN)); // true (NaN is considered equal to NaN) console.log(Object.is(0, -0)); // false (0 and -0 are considered different)
Explanation:
- For primitive values,
Object.is()checks if their values are the same. - For objects,
Object.is()checks if the references are the same, meaning both variables point to the exact same object in memory.
const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(Object.is(obj1, obj2)); // false (different references)
const obj3 = obj1;
console.log(Object.is(obj1, obj3)); // true (same reference)
11. Simplify Conditional Assignments with Logical Assignment Operators (&&=, ||=, ??=)
These operators are commonly used to reduce redundancy in code by combining a logical check and assignment in a single operation.
Logical Assignment Operators combine logical operations with assignment, simplifying conditional assignments.
Explanation and Example:
let x = true; x &&= false; // x becomes false (x = x && false) let y = false; y ||= true; // y becomes true (y = y || true) let z; z ??= 'default'; // z becomes 'default' (z = z ?? 'default') console.log(x, y, z); // false, true, 'default'
x &&= false: Assignsfalsetoxifxis truthy.y ||= true: Assignstruetoyifyis falsy.z ??= 'default': Assigns'default'tozifzisnullorundefined.
These operators help streamline code by combining logical checks with assignments in a single step.
These are just some of the powerful tips and tricks available in JavaScript. Using these effectively can enhance your coding efficiency and make your code cleaner and more maintainable.
12. Use the filter() Method to Filter Through Arrays
The filter() method creates a new array with elements that pass a test provided by a callback function. It is commonly used for tasks like filtering out specific values or extracting subsets of data.
Example:
const numbers = [1, 2, 3, 4, 5]; const even = numbers.filter(num => num % 2 === 0); console.log(even); // [2, 4]
Use Case: You can filter products by category, remove invalid data, or filter users based on age. It’s ideal for scenarios where you only need elements meeting certain conditions.
13. Use the map() Method to Transform Arrays
The map() method creates a new array by applying a function to each element. It is perfect for transforming or modifying elements without altering the original array.
Example:
const numbers = [1, 2, 3]; const squares = numbers.map(num => num * num); console.log(squares); // [1, 4, 9]
Use Case: Use map() when you need to format data, convert values, or extract properties from objects like mapping user IDs into names.
14. Use the reduce() Method to Process Arrays into Single Values
The reduce() method reduces an array to a single value by applying a function. It is highly versatile, handling tasks like summing numbers, flattening arrays, and building complex objects.
Example:
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((total, num) => total + num, 0); console.log(sum); // 10
Use Case: You can use reduce() to calculate totals, merge objects, count occurrences, or group data efficiently in JavaScript applications.