Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Ayush Gupta
Page 3 of 44
Safely Accessing Deeply Nested Values In JavaScript
Accessing deeply nested properties in JavaScript can cause errors if intermediate properties don't exist. Modern JavaScript provides several safe approaches to handle this common problem. The Problem with Direct Access Directly accessing nested properties throws errors when intermediate properties are undefined: let obj = { user: { profile: { name: "John" } } }; console.log(obj.user.profile.name); // "John" - ...
Read MoreSafely setting object properties with dot notation strings in JavaScript
In JavaScript, safely setting nested object properties can be challenging because accessing undefined nested paths throws errors. This article covers two approaches: using Lodash's set method and creating a custom solution. Using Lodash's set() Method Lodash provides a safe set method that handles nested property assignment without throwing errors, even if intermediate properties don't exist. let _ = require("lodash"); let obj = { a: { b: { foo: "test" ...
Read MoreJavaScript Encapsulation using Anonymous Functions
Object-oriented programming languages allow data hiding using private fields. They use these to hide the internals of classes. In JavaScript there is no built-in support to hide/encapsulate the inner workings, but we can achieve encapsulation using anonymous functions. Anonymous functions, particularly when used as Immediately Invoked Function Expressions (IIFEs), can create private scopes that prevent global namespace pollution and provide encapsulation. The Problem: Global Namespace Pollution When we declare variables and functions in the global scope, they become accessible everywhere and can cause naming conflicts: const HIDDEN_CONST = 100; function fnWeWantToHide(x, y) { ...
Read MoreHow to programmatically set the value of a select box element using JavaScript?
We can set the value of a select box using JavaScript by accessing the element and changing its value property. This is useful for dynamically updating form selections based on user interactions or application state. HTML Setup First, let's create a select element with multiple options: Select Apple Strawberry Cherry Guava Method 1: Using querySelector and value Property The most common approach is to use querySelector to find the element and ...
Read MoreIncrement a date in javascript without using any libraries?
To increment a date in JavaScript without external libraries, use the setDate() method. This approach automatically handles month and year rollovers. Using setDate() Method The setDate() method accepts day values beyond the current month's range. JavaScript automatically adjusts the month and year when necessary. let date = new Date('2024-01-31'); // January 31st date.setDate(date.getDate() + 1); // Add 1 day console.log(date.toDateString()); Thu Feb 01 2024 Creating a Reusable Function You can extend the Date prototype or create a standalone function to add days: Date.prototype.addDays = function(days) { ...
Read MoreHow to delete a localStorage item when the browser window/tab is closed?
To clear localStorage data when a browser window or tab is closed, you can use the beforeunload or unload events. However, there are important limitations and better alternatives to consider. Using beforeunload Event The beforeunload event fires before the page unloads, giving you a chance to clean up localStorage: window.addEventListener('beforeunload', function() { // Clear specific item localStorage.removeItem('userSession'); // Or clear all localStorage localStorage.clear(); console.log('localStorage cleared ...
Read MoreHow can I trigger an onchange event manually in javascript?
In JavaScript, you can manually trigger an onchange event using the dispatchEvent() method with a custom Event object. This is useful for programmatically simulating user interactions. Basic Setup First, let's create an input element with a change event listener: document.querySelector('#test').addEventListener('change', () => { console.log("Changed!"); }); Method 1: Using Event Constructor Create a new Event object and dispatch it on the target element: Trigger Change document.querySelector('#example1').addEventListener('change', () => { console.log("Change event fired!"); }); function triggerChange1() { ...
Read MoreHow to convert a string to camel case in JavaScript?
Camel case is the practice of writing phrases such that each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation. For example, "Concurrent hash maps" in camel case would be written as: ConcurrentHashMaps There are different variations of camel case: PascalCase (first letter capitalized) and camelCase (first letter lowercase). We'll explore multiple methods to convert strings to camel case in JavaScript. Method 1: Using split() and map() function camelize(str) { // Split the string at all space characters ...
Read MoreHow to terminate javascript forEach()?
You can't break from the forEach method and it doesn't provide a way to escape the loop (other than throwing an exception). However, there are several alternative approaches to achieve early termination when iterating over arrays. The Problem with forEach The forEach() method is designed to iterate through all array elements. Unlike traditional loops, it doesn't support break or continue statements: // This will NOT work - break is not allowed in forEach [1, 2, 3, 4].forEach((element) => { console.log(element); if (element === 2) { ...
Read MoreHow to create an object property from a variable value in JavaScript?
JavaScript has two notations for creating object properties: dot notation and bracket notation. To create an object property from a variable value, you need to use bracket notation or ES6 computed property names. Method 1: Using Bracket Notation (Dynamic Assignment) You can assign properties to existing objects using bracket notation with variable names: const obj = {a: 'foo'}; const prop = 'bar'; // Set the property using the variable name prop obj[prop] = 'baz'; console.log(obj); { a: 'foo', bar: 'baz' } Method 2: Using ES6 Computed Property Names ES6 ...
Read More