20 JavaScript Tips And Tricks You Can Use Now

Xiuer Old

·

Follow

Published in

JavaScript in Plain English

·

4 min read

·

1 day ago

--

Today we explore 20 JavaScript tips and tricks, each with easy-to-understand examples. Let’s improve your JavaScript skills together!

1. Deconstruction Magic: Easily Extract Values

Destructuring allows you to easily unpack values ​​from an array or object. Here is an example:

const person = { name: 'Alice’, age: 30 };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 30

2. Expansion operation: cloning arrays and merging objects

The spread operator ( ...) allows you to easily create copies of arrays and merge objects:

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // Output: [1, 2, 3]

Merge objects:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }

3. map()Easy conversion

map() methods are your secret weapon for transforming data:

const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num);
console.log(squared); // Output: [1, 4, 9]

4. Short-circuit operation using &&and ||: elegant conditional judgment

Use && and || to create clear and concise conditional statements:

const name = user.name || 'Guest';
console.log(name); // Output: Guest

5. Concatenation setTimeout(): Delayed Serialization

Chaining setTimeout() them together creates a series of deferred operations:

function delayedLog(message, time) {
 setTimeout(() => {
 console.log(message);
 }, time);
}
delayedLog('Hello', 1000); // Output (after 1 second): Hello

6. Arrow functions: simple and powerful

Arrow functions ( () => {}) are not only concise, but they also preserve this values:

const greet = name => `Hello…