Top 20 Java Script Tricks and Tips for Every Developer Dev Community

Top 20 JavaScript Tricks and Tips for Every Developer 🚀 - DEV Community #

Excerpt #
JavaScript is a versatile and powerful language, but it can also be tricky to master. Here are 20…

JavaScript is a versatile and powerful language, but it can also be tricky to master. Here are 20 JavaScript tricks and tips that every developer should know to write cleaner, more efficient code and improve their development workflow. 🌟

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

1. Use `let` and `const` Instead of `var` 🚫 #

Avoid using var to declare variables. Instead, use let and const to ensure block-scoping and avoid hoisting issues.

Example: #

<span>let</span> <span>name</span> <span>=</span> <span>'</span><span>John</span><span>'</span><span>;</span>
<span>const</span> <span>age</span> <span>=</span> <span>30</span><span>;</span>

2. Destructuring Assignment 🌟 #

Destructuring allows you to extract values from arrays or properties from objects into distinct variables.

Example: #

<span>const</span> <span>person</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>Jane</span><span>'</span><span>,</span> <span>age</span><span>:</span> <span>25</span> <span>};</span>
<span>const</span> <span>{</span> <span>name</span><span>,</span> <span>age</span> <span>}</span> <span>=</span> <span>person</span><span>;</span>

<span>const</span> <span>numbers</span> <span>=</span> <span>[</span><span>1</span><span>,</span> <span>2</span><span>,</span> <span>3</span><span>];</span>
<span>const</span> <span>[</span><span>first</span><span>,</span> <span>second</span><span>]</span> <span>=</span> <span>numbers</span><span>;</span>

3. Template Literals 📜 #

Template literals provide an easy way to interpolate variables and expressions into strings.

Example: #

<span>const</span> <span>name</span> <span>=</span> <span>'</span><span>John</span><span>'</span><span>;</span>
<span>const</span> <span>greeting</span> <span>=</span> <span>`Hello, </span><span>${</span><span>name</span><span>}</span><span>!`</span><span>;</span>

4. Default Parameters 🛠️ #

Set default values for function parameters to avoid undefined errors.

Example: #

<span>function</span> <span>greet</span><span>(</span><span>name</span> <span>=</span> <span>'</span><span>Guest</span><span>'</span><span>)</span> <span>{</span>
  <span>return</span> <span>`Hello, </span><span>${</span><span>name</span><span>}</span><span>!`</span><span>;</span>
<span>}</span>

5. Arrow Functions 🎯 #

Arrow functions provide a concise syntax and lexically bind the this value.

Example: #

<span>const</span> <span>add</span> <span>=</span> <span>(</span><span>a</span><span>,</span> <span>b</span><span>)</span> <span>=&gt;</span> <span>a</span> <span>+</span> <span>b</span><span>;</span>

6. Spread Operator `...` 🌐 #

The spread operator allows you to expand elements of an iterable (like an array) or properties of an object.

Example: #

<span>const</span> <span>arr1</span> <span>=</span> <span>[</span><span>1</span><span>,</span> <span>2</span><span>,</span> <span>3</span><span>];</span>
<span>const</span> <span>arr2</span> <span>=</span> <span>[...</span><span>arr1</span><span>,</span> <span>4</span><span>,</span> <span>5</span><span>];</span>

<span>const</span> <span>obj1</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span> <span>};</span>
<span>const</span> <span>obj2</span> <span>=</span> <span>{</span> <span>...</span><span>obj1</span><span>,</span> <span>age</span><span>:</span> <span>30</span> <span>};</span>

7. Rest Parameters `...` 🌟 #

Rest parameters allow you to represent an indefinite number of arguments as an array.

Example: #

<span>function</span> <span>sum</span><span>(...</span><span>numbers</span><span>)</span> <span>{</span>
  <span>return</span> <span>numbers</span><span>.</span><span>reduce</span><span>((</span><span>total</span><span>,</span> <span>num</span><span>)</span> <span>=&gt;</span> <span>total</span> <span>+</span> <span>num</span><span>,</span> <span>0</span><span>);</span>
<span>}</span>

8. Short-Circuit Evaluation && and || 🛠️ #

Use short-circuit evaluation for conditional expressions and default values.

Example: #

<span>const</span> <span>user</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span> <span>};</span>
<span>const</span> <span>name</span> <span>=</span> <span>user</span><span>.</span><span>name</span> <span>||</span> <span>'</span><span>Guest</span><span>'</span><span>;</span>

<span>const</span> <span>isAdmin</span> <span>=</span> <span>user</span><span>.</span><span>isAdmin</span> <span>&amp;&amp;</span> <span>'</span><span>Admin</span><span>'</span><span>;</span>

9. Object Property Shorthand 🚀 #

Use shorthand syntax to create objects when the property name and variable name are the same.

Example: #

<span>const</span> <span>name</span> <span>=</span> <span>'</span><span>John</span><span>'</span><span>;</span>
<span>const</span> <span>age</span> <span>=</span> <span>30</span><span>;</span>
<span>const</span> <span>person</span> <span>=</span> <span>{</span> <span>name</span><span>,</span> <span>age</span> <span>};</span>

10. Optional Chaining `?.` 🌐 #

Optional chaining allows you to safely access deeply nested properties without having to check if each reference is valid.

Example: #

<span>const</span> <span>user</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span><span>,</span> <span>address</span><span>:</span> <span>{</span> <span>city</span><span>:</span> <span>'</span><span>New York</span><span>'</span> <span>}</span> <span>};</span>
<span>const</span> <span>city</span> <span>=</span> <span>user</span><span>.</span><span>address</span><span>?.</span><span>city</span><span>;</span>

11. Nullish Coalescing `??` 🌟 #

Nullish coalescing (??) provides a way to return the right-hand operand when the left-hand operand is null or undefined.

Example: #

<span>const</span> <span>user</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span> <span>};</span>
<span>const</span> <span>name</span> <span>=</span> <span>user</span><span>.</span><span>name</span> <span>??</span> <span>'</span><span>Guest</span><span>'</span><span>;</span>

12. Array Methods: map(), filter(), reduce() 🛠️ #

Use array methods like map(), filter(), and reduce() to perform common operations on arrays in a functional way.

Example: #

<span>const</span> <span>numbers</span> <span>=</span> <span>[</span><span>1</span><span>,</span> <span>2</span><span>,</span> <span>3</span><span>,</span> <span>4</span><span>,</span> <span>5</span><span>];</span>

<span>const</span> <span>doubled</span> <span>=</span> <span>numbers</span><span>.</span><span>map</span><span>(</span><span>num</span> <span>=&gt;</span> <span>num</span> <span>*</span> <span>2</span><span>);</span>
<span>const</span> <span>evens</span> <span>=</span> <span>numbers</span><span>.</span><span>filter</span><span>(</span><span>num</span> <span>=&gt;</span> <span>num</span> <span>%</span> <span>2</span> <span>===</span> <span>0</span><span>);</span>
<span>const</span> <span>sum</span> <span>=</span> <span>numbers</span><span>.</span><span>reduce</span><span>((</span><span>total</span><span>,</span> <span>num</span><span>)</span> <span>=&gt;</span> <span>total</span> <span>+</span> <span>num</span><span>,</span> <span>0</span><span>);</span>

13. Promise Chaining and Async/Await 🎯 #

Handle asynchronous operations using Promises and the async/await syntax for cleaner, more readable code.

Example with Promises: #

<span>fetch</span><span>(</span><span>'</span><span>https://api.example.com/data</span><span>'</span><span>)</span>
  <span>.</span><span>then</span><span>(</span><span>response</span> <span>=&gt;</span> <span>response</span><span>.</span><span>json</span><span>())</span>
  <span>.</span><span>then</span><span>(</span><span>data</span> <span>=&gt;</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>data</span><span>))</span>
  <span>.</span><span>catch</span><span>(</span><span>error</span> <span>=&gt;</span> <span>console</span><span>.</span><span>error</span><span>(</span><span>'</span><span>Error:</span><span>'</span><span>,</span> <span>error</span><span>));</span>

Example with Async/Await: #

<span>async</span> <span>function</span> <span>fetchData</span><span>()</span> <span>{</span>
  <span>try</span> <span>{</span>
    <span>const</span> <span>response</span> <span>=</span> <span>await</span> <span>fetch</span><span>(</span><span>'</span><span>https://api.example.com/data</span><span>'</span><span>);</span>
    <span>const</span> <span>data</span> <span>=</span> <span>await</span> <span>response</span><span>.</span><span>json</span><span>();</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>data</span><span>);</span>
  <span>}</span> <span>catch </span><span>(</span><span>error</span><span>)</span> <span>{</span>
    <span>console</span><span>.</span><span>error</span><span>(</span><span>'</span><span>Error:</span><span>'</span><span>,</span> <span>error</span><span>);</span>
  <span>}</span>
<span>}</span>

14. Debouncing and Throttling 🌟 #

Optimize performance by debouncing and throttling functions that are called frequently, such as during scroll or resize events.

Debouncing Example: #

<span>function</span> <span>debounce</span><span>(</span><span>func</span><span>,</span> <span>delay</span><span>)</span> <span>{</span>
  <span>let</span> <span>timeoutId</span><span>;</span>
  <span>return</span> <span>function</span><span>(...</span><span>args</span><span>)</span> <span>{</span>
    <span>clearTimeout</span><span>(</span><span>timeoutId</span><span>);</span>
    <span>timeoutId</span> <span>=</span> <span>setTimeout</span><span>(()</span> <span>=&gt;</span> <span>func</span><span>.</span><span>apply</span><span>(</span><span>this</span><span>,</span> <span>args</span><span>),</span> <span>delay</span><span>);</span>
  <span>};</span>
<span>}</span>

<span>window</span><span>.</span><span>addEventListener</span><span>(</span><span>'</span><span>resize</span><span>'</span><span>,</span> <span>debounce</span><span>(()</span> <span>=&gt;</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Resized</span><span>'</span><span>);</span>
<span>},</span> <span>300</span><span>));</span>

Throttling Example: #

<span>function</span> <span>throttle</span><span>(</span><span>func</span><span>,</span> <span>limit</span><span>)</span> <span>{</span>
  <span>let</span> <span>inThrottle</span><span>;</span>
  <span>return</span> <span>function</span><span>(...</span><span>args</span><span>)</span> <span>{</span>
    <span>if </span><span>(</span><span>!</span><span>inThrottle</span><span>)</span> <span>{</span>
      <span>func</span><span>.</span><span>apply</span><span>(</span><span>this</span><span>,</span> <span>args</span><span>);</span>
      <span>inThrottle</span> <span>=</span> <span>true</span><span>;</span>
      <span>setTimeout</span><span>(()</span> <span>=&gt;</span> <span>inThrottle</span> <span>=</span> <span>false</span><span>,</span> <span>limit</span><span>);</span>
    <span>}</span>
  <span>};</span>
<span>}</span>

<span>window</span><span>.</span><span>addEventListener</span><span>(</span><span>'</span><span>scroll</span><span>'</span><span>,</span> <span>throttle</span><span>(()</span> <span>=&gt;</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Scrolled</span><span>'</span><span>);</span>
<span>},</span> <span>300</span><span>));</span>

15. Using `for...of` for Iteration 🚀 #

Use the for...of loop for more readable iteration over arrays, strings, and other iterable objects.

Example: #

<span>const</span> <span>numbers</span> <span>=</span> <span>[</span><span>1</span><span>,</span> <span>2</span><span>,</span> <span>3</span><span>,</span> <span>4</span><span>,</span> <span>5</span><span>];</span>

<span>for </span><span>(</span><span>const</span> <span>number</span> <span>of</span> <span>numbers</span><span>)</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>number</span><span>);</span>
<span>}</span>

16. Cloning Objects and Arrays 🛠️ #

Use the spread operator or Object.assign() to clone objects and arrays.

Example: #

<span>const</span> <span>original</span> <span>=</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span><span>,</span> <span>age</span><span>:</span> <span>30</span> <span>};</span>
<span>const</span> <span>clone</span> <span>=</span> <span>{</span> <span>...</span><span>original</span> <span>};</span>

<span>const</span> <span>arr</span> <span>=</span> <span>[</span><span>1</span><span>,</span> <span>2</span><span>,</span> <span>3</span><span>];</span>
<span>const</span> <span>arrClone</span> <span>=</span> <span>[...</span><span>arr</span><span>];</span>

17. Dynamic Property Names 🌟 #

Use computed property names to dynamically set object properties.

Example: #

<span>const</span> <span>propName</span> <span>=</span> <span>'</span><span>age</span><span>'</span><span>;</span>
<span>const</span> <span>person</span> <span>=</span> <span>{</span>
  <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span><span>,</span>
  <span>[</span><span>propName</span><span>]:</span> <span>30</span>
<span>};</span>

18. Using `setTimeout` and `setInterval` 🎯 #

Schedule code execution using setTimeout and setInterval.

Example: #

<span>setTimeout</span><span>(()</span> <span>=&gt;</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>This runs after 2 seconds</span><span>'</span><span>);</span>
<span>},</span> <span>2000</span><span>);</span>

<span>const</span> <span>intervalId</span> <span>=</span> <span>setInterval</span><span>(()</span> <span>=&gt;</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>This runs every 3 seconds</span><span>'</span><span>);</span>
<span>},</span> <span>3000</span><span>);</span>

<span>// To clear the interval</span>
<span>clearInterval</span><span>(</span><span>intervalId</span><span>);</span>

19. String Methods: includes(), startsWith(), endsWith() 📜 #

Use modern string methods to perform common string operations.

Example: #

<span>const</span> <span>str</span> <span>=</span> <span>'</span><span>Hello, World!</span><span>'</span><span>;</span>

<span>console</span><span>.</span><span>log</span><span>(</span><span>str</span><span>.</span><span>includes</span><span>(</span><span>'</span><span>World</span><span>'</span><span>));</span> <span>// true</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>str</span><span>.</span><span>startsWith</span><span>(</span><span>'</span><span>Hello</span><span>'</span><span>));</span> <span>// true</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>str</span><span>.</span><span>endsWith</span><span>(</span><span>'</span><span>!</span><span>'</span><span>));</span> <span>// true</span>

20. Using `console` Effectively for Debugging 🛠️ #

Leverage various console methods for more effective debugging.

Example: #

<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Simple log</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>warn</span><span>(</span><span>'</span><span>This is a warning</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>error</span><span>(</span><span>'</span><span>This is an error</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>table</span><span>([{</span> <span>name</span><span>:</span> <span>'</span><span>John</span><span>'</span><span>,</span> <span>age</span><span>:</span> <span>30</span> <span>},</span> <span>{</span> <span>name</span><span>:</span> <span>'</span><span>Jane</span><span>'</span><span>,</span> <span>age</span><span>:</span> <span>25</span> <span>}]);</span>
<span>console</span><span>.</span><span>group</span><span>(</span><span>'</span><span>Group</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Message 1</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>Message 2</span><span>'</span><span>);</span>
<span>console</span><span>.</span><span>groupEnd</span><span>();</span>

Series Index #

Part	Title	Link
1	Mastering CORS: The Definitive Guide with Practical Examples	Read
2	Top 4 Ways to Improve JavaScript Code Performance 🚀	Read
3	8 Exciting New JavaScript Concepts You Need to Know	Read
4	Top 7 Tips for Managing State in JavaScript Applications	Read
5	🔒 Essential Node.js Security Best Practices	Read
6	10 Best Practices for Optimizing Angular Performance	Read
7	Top 10 React Performance Optimization Techniques	Read
8	Top 15 JavaScript Projects to Boost Your Portfolio	Read
9	6 Repositories To Master Node.js	Read
10	Best 6 Repositories To Master Next.js	Read
11	Top 5 JavaScript Libraries for Building Interactive UI	Read
12	Top 3 JavaScript Concepts Every Developer Should Know	Read
13	20 Ways to Improve Node.js Performance at Scale	Read
14	Boost Your Node.js App Performance with Compression Middleware	Read
15	Understanding Dijkstra’s Algorithm: A Step-by-Step Guide	Read
16	Understanding NPM and NVM: Essential Tools for Node.js Development	Read

Mastering these JavaScript tricks and tips will help you write cleaner, more efficient code and improve your development workflow. Happy coding! ✨

Instagram: devdivewithdipak
Website: Dipak Ahirav
Email: dipaksahirav@gmail.com
YouTube: devDive with Dipak
LinkedIn: Dipak Ahirav

Top 20 JavaScript Tricks and Tips for Every Developer 🚀 - DEV Community
- Excerpt
- 1. Use let and const Instead of var 🚫
  - Example:
- 2. Destructuring Assignment 🌟
  - Example:
- 3. Template Literals 📜
  - Example:
- 4. Default Parameters 🛠️
  - Example:
- 5. Arrow Functions 🎯
  - Example:
- 6. Spread Operator ... 🌐
  - Example:
- 7. Rest Parameters ... 🌟
  - Example:
- 8. Short-Circuit Evaluation && and || 🛠️
  - Example:
- 9. Object Property Shorthand 🚀
  - Example:
- 10. Optional Chaining ?. 🌐
  - Example:
- 11. Nullish Coalescing ?? 🌟
  - Example:
- 12. Array Methods: map(), filter(), reduce() 🛠️
  - Example:
- 13. Promise Chaining and Async/Await 🎯
  - Example with Promises:
  - Example with Async/Await:
- 14. Debouncing and Throttling 🌟
  - Debouncing Example:
  - Throttling Example:
- 15. Using for...of for Iteration 🚀
  - Example:
- 16. Cloning Objects and Arrays 🛠️
  - Example:
- 17. Dynamic Property Names 🌟
  - Example:
- 18. Using setTimeout and setInterval 🎯
  - Example:
- 19. String Methods: includes(), startsWith(), endsWith() 📜
  - Example:
- 20. Using console Effectively for Debugging 🛠️
  - Example:
- Series Index
  - Follow and Subscribe:

Top 20 Java Script Tricks and Tips for Every Developer Dev Community

Top 20 JavaScript Tricks and Tips for Every Developer 🚀 - DEV Community #

Excerpt #

1. Use let and const Instead of var 🚫 #

Example: #

2. Destructuring Assignment 🌟 #

Example: #

3. Template Literals 📜 #

Example: #

4. Default Parameters 🛠️ #

Example: #

5. Arrow Functions 🎯 #

Example: #

6. Spread Operator ... 🌐 #

Example: #

7. Rest Parameters ... 🌟 #

Example: #

8. Short-Circuit Evaluation && and || 🛠️ #

Example: #

9. Object Property Shorthand 🚀 #

Example: #

10. Optional Chaining ?. 🌐 #

Example: #

11. Nullish Coalescing ?? 🌟 #

Example: #

12. Array Methods: map(), filter(), reduce() 🛠️ #

Example: #

13. Promise Chaining and Async/Await 🎯 #

Example with Promises: #

Example with Async/Await: #

14. Debouncing and Throttling 🌟 #

Debouncing Example: #

Throttling Example: #

15. Using for...of for Iteration 🚀 #

Example: #

16. Cloning Objects and Arrays 🛠️ #

Example: #

17. Dynamic Property Names 🌟 #

Example: #

18. Using setTimeout and setInterval 🎯 #

Example: #

19. String Methods: includes(), startsWith(), endsWith() 📜 #

Example: #

20. Using console Effectively for Debugging 🛠️ #

Example: #

Series Index #

Follow and Subscribe: #

Backlinks

Interactive Graph

1. Use `let` and `const` Instead of `var` 🚫 #

6. Spread Operator `...` 🌐 #

7. Rest Parameters `...` 🌟 #

10. Optional Chaining `?.` 🌐 #

11. Nullish Coalescing `??` 🌟 #

15. Using `for...of` for Iteration 🚀 #

18. Using `setTimeout` and `setInterval` 🎯 #

20. Using `console` Effectively for Debugging 🛠️ #