Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
22 views

Js Snippets

The document discusses various JavaScript concepts and techniques including: 1. Avoid using the "delete" keyword to remove object properties as it can lead to unpredictable behavior; instead use the rest operator to create a copy without the given property. 2. The Boolean constructor passed directly to Array.filter serves as a "falsy bouncer" to filter falsy values like false, null, undefined, etc. 3. Object destructuring can be used on arrays to extract elements using indexes, providing a clean way to pull out specific elements.

Uploaded by

Gevorg A. Galstyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Js Snippets

The document discusses various JavaScript concepts and techniques including: 1. Avoid using the "delete" keyword to remove object properties as it can lead to unpredictable behavior; instead use the rest operator to create a copy without the given property. 2. The Boolean constructor passed directly to Array.filter serves as a "falsy bouncer" to filter falsy values like false, null, undefined, etc. 3. Object destructuring can be used on arrays to extract elements using indexes, providing a clean way to pull out specific elements.

Uploaded by

Gevorg A. Galstyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

JavaScript

Avoid the “delete” keyword

Explanation
Don’t use delete to remove a property from an object.
This mutates the original object and can lead to unpredictable behavior
which becomes difficult to debug.

Instead, use the rest operator to create a new copy without the given
property.
Using a Falsy Bouncer

Explanation
When passing the ‘Boolean’ constructor directly to Array.filter as the first
argument, it serves as a falsy bouncer.

This will filter all values that qualifies as falsy;


That is false, null, undefined, 0, NaN, and "" (empty string).
Object Destructuring on arrays

Explanation
You can destructure elements from an array using the same syntax as when
destructuring for objects.

The property name corresponds to the index of the element in the array.

It’s a convenient way to pull out specific elements from an array in a single,
clean line of code.
Using console.trace

Explanation
If you use console.trace instead of console.log, it will show you the complete
call stack when debugging.

This is very convenient when you’re working with larger setups with multiple
files and modules.
Pass messages between tabs and windows

Explanation
The Broadcast Channel API allows basic communication between
browsing contexts (windows, tabs, frames or iframes).

Using the BroadcastChannel constructor, you can receive any messages that
are posted to it without having to maintain a ferences to frames or workers.
React - Let react assign a key to its children

Explanation
React has a built-in method that automatically assigns the keys for you when
rendering a list of children.
React - Avoid provider wrapping hell

Explanation
Avoid Provider wrapping hell in React by using this simple approach to
combine all your Providers into a single Provider element.
React - creating pure components with react.memo

Explanation
If your component renders the same result given the same props, try
wrapping it in React.memo to make them "pure".

This will prevent them from re-rendering, except when their props are
changing.

It can potentially give you a great performance boost


Destructure into existing variables

Explanation
There's an easy way to destructure into existing variables.
Simply wrap the destructuring syntax in parentheses - this will result in the
destructured variables being assigned as variables in the current scope.

Combining this with the use of the let keyword can be very useful in certain
cases.
Creating a reusable pipe

Explanation
This is an example of how you can create a reusable and composable pipe
using JavaScript.

The data of the pipe flows left to right, calling each function with the output
of the last one.

It’s a great and clean way to simplify a flow of processing a value through
multiple steps.

You might also like