Events are signals fired from within the browser like a keypress, hover or button click etc. Using Javascript we can create event handlers that can get executed once an event is triggered. Event listeners and event handlers First, let us define what an event listener and an event handler is and later look at different ways of creating handlers. Event listeners An event listener is a code that listens for an event to happen....

In this section, we will look at how to get input field values in React. There are two different ways of getting the input values in react, one is controlled and the other is through uncontrolled components. We will look at both techniques with examples. Controlled Components In the controlled components, the user input is controlled by the react component that creates the form. We always keep track of the user input and store it in a state....

The querySelector() is a document method that returns the first element that matches the provided CSS selectors. It returns an element object which is the first element in the document that matches the specified selectors. If there is no match found then it returns null. Select tags using querySelector() We can directly specify the tag name in the querySelector() to select the HTML tags. Let’s select the title tag from the below HTML....

Object destructuring helps us assign values of arrays or properties of objects to variables. This feature helps us unload the content of objects and assign it to variable names making it easy to access the content without the need to involve the object names. Let us look at some examples to see how it works. Destructuring Javascript Objects Let’s create an object employee that holds properties fName, lName and the age of the employee....

Introduction The flat() method creates a new array by flattening nested arrays within an array per the specified depth. By default, the depth is 1. Let’s look at an example, let arr = [1, 2, [3, 4], 5]; let arr2 = arr.flat(); console.log(arr2); // [1, 2, 3, 4, 5] This is the same as writing, let arr = [1, 2, [3, 4], 5]; let arr2 = arr.flat(1); console.log(arr2); // [1, 2, 3, 4, 5] console....

Introduction The slice() method on arrays returns a shallow copy of the selected elements in a new array object. It uses two parameters start and end to specify the position of the array that we want to slice. The start parameter determines where to start the selection whereas, end determines the end of the selection. The end index element is not included in the new array selection. Both the parameters are optional....

Pass by value or reference? A simple answer to this question is that the function arguments in Javascript are passed by value. However, when we pass an object to a Javascript function, things get a little confusing. To understand how the objects are passed, we need to first understand how the variables store the primitive values and objects. The objects in Javascript are stored “by reference”. When you assign an object to a variable, the variable will store the reference and not the object itself....

The join() method is used to join the elements of an array into a string and return the string. The method consists of an optional separator parameter which is used to specify how you want to join the elements. let numbers = [5, 6, 7, 8, 9]; let str = numbers.join(' '); console.log(str); // 5 6 7 8 9 Another example, with strings as elements. let numbers = ["I", "love", "Javascript....

The findIndex() method in Javascript is used to find an element in an array. The method returns the index of the first element that satisfies the given condition in the callback function. It returns -1 if no element is found matching the criteria. let numbers = [5, 6, 7, 8, 9]; let search = numbers.findIndex(function (n) { return n == 8; }); console.log(search); // 3 If the element is not found,...

The find() method in Javascript is used to find an element in an array. The method returns the first element that satisfies the given condition in the callback function. It returns undefined if no element is found matching the criteria. let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let search = numbers.find(function (n) { return n == 3; }); console.log(search); // 3 let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let search = numbers....