DEV Community

Cover image for 6 Useful JavaScript Tips for Beginners
Hardik Gohil
Hardik Gohil

Posted on

6 Useful JavaScript Tips for Beginners

#javascript #react #angular #node

Hey Guys, Hope you all are doing well. Here are some of the useful tips that can improve productivity and overall performance of JavaScript code. These tips are for beginner and intermediate programmers as well. So without further ado let's jump in!

Ternary Operator 

// Don't Do this let port; if(process.env.PORT) { port = process.env.PORT; } else { port = 8080; } // Do This const port = process.env.PORT || 8080;
Enter fullscreen mode Exit fullscreen mode

Template Literals 

// Don't Do this const greeting = 'Welcome Back ' + firstName + ' ' + lastName; const successMessage = 'Your Product ' + productName + ' has been delivered on ' + orderDate + ' successfully!'; // Do This const greeting = `Welcome Back ${firstName} ${lastName}`; const successMessage = `Your Product ${productName} has been delivered on ${orderDate} successfully!`;
Enter fullscreen mode Exit fullscreen mode

Check if the value is undefined or null - Nullish coalescing 

// Don't Do This const userInfo = {}; let userName = ''; if(user.name === undefined || user.name === null) { userName = 'User not found!'; } else { userName = user.name; } // Do This const userInfo = {}; let userName = user.name ?? 'User not found!';
Enter fullscreen mode Exit fullscreen mode

Read more about Nullish Coalescing Operator from Official Docs.

Converting string to number 

// Don't Do This const age = parseInt('22'); const qauntity = parseFloat('11.02'); // Do This const age = +'22'; const qauntity = +'11.02';
Enter fullscreen mode Exit fullscreen mode

Array/Object Destructuring 

// Given const project = { name: 'Dribble Shot Design', reporter: 'John Doe', dueDate: '2023-03-05', status: 'pending' }; // Don't Do This const projectName = project.name; const projectReporter = project.reporter; const projectDueDate = project.dueDate; const projectStatus = project.status; // Do This const { name, reporter, dueDate, status } = project;
Enter fullscreen mode Exit fullscreen mode

Implicit Boolean Coercion 

// Don't Do This const orderInfo = {} ; let isOrderInfoAvailable; if(Object.keys(orderInfo).length) { isOrderInfoAvailable = true; } else { isOrderInfoAvailable = false; } // Do This const orderInfo = {}; const isOrderInfoAvailable = !!orderInfo; console.log(isOrderInfoAvailable); // true
Enter fullscreen mode Exit fullscreen mode

Thanks for reading, If you liked the post please share it and leave suggestions.

Connect With Me

Website: Hardik Gohil

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardikgohilhlr

Thanks ❤️

Top comments (0)