Engineering Core
ISB Vietnam's skilled software engineers deliver high-quality applications, leveraging their extensive experience in developing financial tools, business management systems, medical technology, and mobile/web platforms.
Looking to level up your JavaScript coding skills? Whether you're a beginner just starting out or a seasoned pro with years of experience, there's always room for improvement. JavaScript is a dynamic and ever-evolving language, and mastering it means constantly discovering new techniques, shortcuts, and best practices. In this post, we’ll unveil 10 powerful JavaScript tricks that can supercharge your skills and help you code like a professional. Whether you’re just starting or looking to level up, these tips will sharpen your problem-solving skills, improve your code efficiency, and make your journey as a developer smoother.. Ready to learn something new? Let’s dive in!
I. Object and Array Destructuring
Destructuring in JavaScript is a convenient way to extract values from arrays or objects and assign them to variables in a more readable and concise manner. It helps you avoid repetitive code when accessing values, making your code cleaner and more efficient.
- Array Destructuring: Array destructuring allows you to unpack values from an array and assign them to variables.
Here's an example:
const numbers = [10, 20, 30, 40]; // Without destructuring: const first = numbers[0]; const second = numbers[1]; // With destructuring: const [first, second] = numbers; console.log(first); // 10 console.log(second); // 20 |
- Object Destructuring: With object destructuring, you can extract specific properties from an object and assign them to variables.
Here's an example:
const person = { name: "Alice", age: 25 }; // Without destructuring: const name = person.name; const age = person.age; // With destructuring: const { name, age } = person; console.log(name); // Alice console.log(age); // 25 |
II. Spread operator
The spread operator (...) in JavaScript is a powerful and versatile feature that allows you to "spread" the elements of an array or object into individual elements or properties. It can be used in multiple scenarios to copy, combine, or manipulate arrays and objects more efficiently. The spread operator is particularly useful for working with iterable data structures like arrays and objects.
- Array Spread: The spread operator can be used to copy elements from one array to another or to combine multiple arrays.
Copying an array:
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; // Spread arr1 into arr2 console.log(arr2); // [1, 2, 3] |
Combining arrays:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] |
Adding new elements to an array:
const arr1 = [1, 2, 3]; const newArr = [...arr1, 4, 5]; console.log(newArr); // [1, 2, 3, 4, 5] |
- Object Spread: The spread operator can also be used to copy the properties of one object to another or to merge multiple objects.
Copying an object:
const person = { name: "Alice", age: 25 }; const personCopy = { ...person }; console.log(personCopy); // { name: "Alice", age: 25 } |
Merging objects:
const person = { name: "Alice", age: 25 }; const job = { title: "Developer", company: "XYZ Corp" }; const merged = { ...person, ...job }; console.log(merged); //Output: { name: "Alice", age: 25, title: "Developer", company: "XYZ Corp" } |
Overriding object properties:
const person = { name: "Alice", age: 25 }; const updatedPerson = { ...person, age: 26 }; console.log(updatedPerson); // { name: "Alice", age: 26 } |
Using the Spread Operator with Function Arguments:
You can also use the spread operator to pass an array of elements as individual arguments to a function.
// Create a function to multiply three items function multiply(a, b, c) { return a * b * c } // Without spread operator multiply(1, 2, 3) ;// 6 // With spread operator const numbers = [1, 2, 3] multiply(...numbers);//6 |
III. Rest parameter
Rest Parameters (...) in JavaScript allow you to collect multiple function arguments into a single array, enabling more flexible and dynamic function definitions. Unlike the spread operator, which expands arrays or objects into individual elements, rest parameters "collect" individual arguments into an array.
function restTest(...args) { console.log(args) } restTest(1, 2, 3, 4, 5, 6);// [1, 2, 3, 4, 5, 6] // Rest Parameters with Other Parameters function displayInfo(name, age, ...hobbies) { console.log(`Name: ${name}, Age: ${age}`); console.log(`Hobbies: ${hobbies.join(", ")}`); } displayInfo("Alice", 30, "Reading", "Swimming", "Hiking"); // Output: // Name: Alice, Age: 30 // Hobbies: Reading, Swimming, Hiking |
IV. Template Literals (``)
Template Literals, introduced in JavaScript (ES6), are a modern way to create strings. Allows for embedding expressions inside strings using backticks (). Supports multi-line strings without special characters and makes string concatenation much cleaner.
const greeting = `Hello, ${name}! Welcome to the next line.`; console.log(greeting); // Output: // Hello, Bob! // Welcome to the next line. |
V. Arrow Functions (=>)
Offer a more concise syntax for writing function expressions. Crucially, they do not bind their own this, arguments, super, or new.target. Their this value is lexically bound (it's the this value of the enclosing execution context).
// Traditional function const add = function(a, b) { return a + b; }; // Arrow function (single expression, implicit return) const addArrow = (a, b) => a + b; // Arrow function (multiple statements, explicit return) const multiply = (a, b) => { const result = a * b; return result; }; |
VI. Ternary Operator (?:)
A shorthand for simple if...else statements. It's ideal for conditional assignments or returning values based on a condition.
const age = 20; const status = age >= 18 ? "Adult" : "Minor"; console.log(status); // "Adult" |
VII. Nullish Coalescing Operator (??)
The Nullish Coalescing Operator (??) in JavaScript returns the right-hand value only if the left-hand value is null or undefined.
// Syntax let result = a ?? b; - If a is not null or undefined, result will be a. - If a is null or undefined, result will be b. // Example let username = null; let defaultName = "Guest"; let nameToDisplay = username ?? defaultName; console.log(nameToDisplay); // "Guest" |
VIII. Optional Chaining (?.)
The Optional Chaining Operator (?.) in JavaScript lets you safely access deeply nested properties without having to check each level manually. If the value before ?. is null or undefined, the expression short-circuits and returns undefined instead of throwing an error.
// Example const user = { profile: { name: "Alice", }, }; console.log(user.profile?.name); // "Alice" console.log(user.settings?.theme); // undefined (no error) const user = { greet() { return "Hello!"; } }; console.log(user.greet?.()); // "Hello!" console.log(user.sayBye?.()); // undefined (no error) |
IX. Array Methods (map, filter, reduce, etc.)
Mastering built-in array methods is crucial for functional programming patterns and writing cleaner code compared to traditional for loops for many tasks.
//.map() – Transforms each element in an array const nums = [1, 2, 3]; const squares = nums.map(n => n * n); // [1, 4, 9]//.filter() – Filters elements based on a condition const nums = [1, 2, 3, 4]; const evens = numbers.filter(num => num % 2 === 0); // [2, 4]//.reduce() - Aggregates array elements into a single value const nums = [1, 2, 3, 4]; const sum = nums.reduce((acc, cur) => acc + cur, 0); // 10//.find() – Finds the first element that matches a condition const users = [{ id: 1 }, { id: 2 }]; const user = users.find(u => u.id === 2); // { id: 2 }//.some() – Returns true if any element matches const hasNegative = [1, -1, 3].some(n => n < 0); // true//.every() – Returns true if all elements match const allPositive = [1, 2, 3].every(n => n > 0); // true//.forEach() – Executes a function for each item (no return) [1, 2, 3].forEach(n => console.log(n * 2)); // 2, 4, 6//.includes() – Checks for existence [1, 2, 3].includes(2); // true |
Why Use Functional Array Methods?
Cleaner syntax with less boilerplate
Immutable patterns (avoiding side effects)
Better readability and expressiveness
Easier to compose operations
X. Using Set for Unique Values
The Set object allows you to store unique values of any type. It's a super-fast way to get a list of unique items from an array.
const nums = [1, 2, 2, 3]; const unique = [...new Set(nums)]; // [1, 2, 3] |
XI. Conclusion
Hopefully, the 10 JavaScript tricks shared above will provide useful tips for your daily work. Applying them flexibly will lead to cleaner, more maintainable, and faster code. Don't hesitate to experiment with and incorporate these techniques into your future projects to truly feel the difference they can make.
Whether you need scalable software solutions, expert IT outsourcing, or a long-term development partner, ISB Vietnam is here to deliver. Let's build something great together-reach out to us today. Or click here to explore more ISB Vietnam's case studies.
