JavaScript & React Hooks Some Filtering Topics You Need To Know

JavaScript variables are loosely/dynamically typed and the language doesn’t care how a value is declared or changed
  1. javascript Truthy & Falsy value

In JavaScript, truthy are expressions which evaluate to boolean true value and falsy evaluates to boolean false value. Unlike other languages, true and false values are not limited to boolean data types and comparisons. It can have many other forms.

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

  • false
  • 0 (zero)
  • '' or "" (empty string)
  • null
  • undefined
  • NaN

Everything else is truthy. That includes:

  • '0' (a string containing a single zero)
  • 'false' (a string containing the text “false”)
  • [] (an empty array)
  • {} (an empty object)
  • function(){} (an “empty” function)

A single value can therefore be used within conditions, e.g.

2. NULL & UNDEFINED

At first glance, null and undefined may seem the same, but they are far from it. This article will explore the differences and similarities between null and undefined in JavaScript.

There are two features null you should understand:

  • null is an empty or non-existent value.
  • null must be assigned.

Here’s an example. We assign the value of null to a:

Undefined most typically means a variable has been declared, but not defined. For example:

You can also explicitly set a variable to equal undefined:

Finally, when looking up non-existent properties in an object, you will receive undefined:

3. Double & Triple Equals
JavaScript has two visually similar, yet very different, ways to test equality. You can test equality with == or ===. Here are the differences:

When using double equals in JavaScript we are testing for loose equality. Double equals also perform type coercion.

Type coercion means that two values are compared only after attempting to convert them into a common type.

An example will illustrate this. Recall earlier when we tested the following with strict equality:

77 does not strictly equal '77' because they have different types. However, if we were to test these values with loose equality…

You can see we get true. That because of type coercion. JavaScript will actually try to convert our values into a like type. In this case, it succeeds. The string value '77' can easily be converted into the number value of 77. Since 77 equals, we get our answer to true.

When using triple equals === in JavaScript, we are testing for strict equality. This means both the type and the value we are comparing have to be the same.

Let's look at a couple of examples of strict equality.

In this first example, we’re comparing the number 5 with the number 5. As expected, true is returned. Both are numbers, and both share the same value of 5.

With this in mind, we can look at two more examples that will return true:

Awesome. Now let's take a look at some examples that will return false:

In this example, we’ll compare the number 77 to the string value of 77. This means our operands will have the same value, but a different type. This will return false

Here are two additional examples:

4. javaScript Map & Filter

From the classic forloop to the forEach() the method, various techniques, and methods are used to iterate through datasets in JavaScript. One of the most popular methods is the method. .map() creates an array from calling a specific function on each item in the parent array. .map() is a non-mutating method that creates a new array as opposed to mutating methods, which only make changes to the calling array.

This method can have many uses when working with arrays. In this tutorial, you’ll look at four noteworthy uses of in JavaScript: calling a function of array elements, converting strings to arrays, rendering lists in JavaScript libraries, and reformatting array objects.

.map() accepts a callback function as one of its arguments, and an important parameter of that function is the current value of the item being processed by the function. This is a required parameter. With this parameter, you can modify each item in an array and create a new function.

Here’s an example:

This output is logged to the console:

The filter() Array method creates a new array with elements that fall under a given criteria from an existing array:

The example above takes the numbers array and returns a new filtered array with only those values that are greater than seven.

Filter syntax

The item argument is a reference to the current element in the array as filter() checks it against the condition. This is useful for accessing properties, in the case of objects.

If the current item passes the condition, it gets sent to the new array.

Filtering an array of objects

A common use case of .filter() is with an array of objects through their properties:

5.Find an array of objects

Searching in an array of objects can be done in Javascript using a loop, Array.find(), or Array.findIndex() methods.

You can iterate through the array using a for a loop.

Using Array.find()

The Array.find() method takes a callback function as a parameter and executes that function once for each element present in the array until it finds one where the function returns a true value.

If the element is found it returns the value of the element, otherwise undefined is returned.

6. Scope, Block Scope

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

Global Scope

There’s only one Global scope in the JavaScript document. The area outside all the functions is considered the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every function has its own scope. The same variable can be used in different functions because they are bound to the respective functions and are not mutually visible.

A local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA Script 6 (ES6) together with the new ways to declare variables — const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can’t access it outside the function. var is the keyword to define variables for function-scope accessibility.

Block Scope

Block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

7. Bind, call & apply

You can use call()/apply() to invoke the function immediately. bind() returns a bound function that, when executed later, will have the correct context ("this") for calling the original function. So bind() can be used when the function needs to be called later in certain events when it's useful.

To get a grasp of “this” in JavaScript, read Understanding “This” in JavaScript.

call() or Function.prototype.call()

Check the code sample below for call()

The first parameter in call() the method sets the "this" value, which is the object, on which the function is invoked. In this case, it's the "obj" object above.

The rest of the parameters are the arguments to the actual function.

apply() or Function.prototype.apply()

Check the below code sample for apply()

Similarly to call() method the first parameter in apply() the method sets the "this" value which is the object upon which the function is invoked. In this case, it's the "obj" object above. The only difference between the method is that the second parameter of the apply() method accepts the arguments to the actual function as an array.

bind() or Function.prototype.bind()

Check the below code sample for bind()

8. React Hooks Recap

React Hooks are a way for your function components to “hook” into React’s lifecycle and state. They were introduced to React Previously, only Class-based components were able to use React’s lifecycle and state. Aside from enabling Function components to do this, Hooks make it incredibly easy to reuse stateful logic between components.

If you are moving to Hooks for the first time, the change can be a little jarring. This chapter is here to help you understand how they work and how to think about them. We want to help you transition from the mental model of Class components to function components with React Hooks. Here is what we’ll be covering:

  1. A quick refresher on the lifecycle of Class components
  2. An overview of the lifecycle of Function components with Hooks
  3. A good mental model to understand React Hooks in Function components
  4. A subtle difference between Class and Function components

React State Hook

Ah, state. A cornerstone of the React ecosystem. Let’s get our feet wet with Hooks by introducing the most common hook that you will be working with — useState().

Let’s take a look at a class component that has a state.

With React Hooks, we can rewrite this component and remove a lot of stuff, making it easier to understand:

On the face of it there is less code, but what’s going on?

React State Syntax

So we’ve seen our first hook! Hurrah!

Usage in Function Components

Let’s apply our newly minted useState clone in a familiar-looking setting. We’ll make a Counter component!

Here, instead of rendering to the DOM, we’ve opted to just console.log out our state. We’re also exposing a programmatic API for our Counter so we can run it in a script instead of attaching an event handler. With this design, we can simulate our component rendering and react to user actions.

While this works, calling a getter to access the state isn’t quite the API for the real React.useState hook. Let’s fix that.

Stale Closure

If we want to match the real React API, our state has to be a variable instead of a function. If we were to simply expose _val instead of wrapping it in a function, we’d encounter a bug:

This is one form of the Stale Closure problem. When we destructured foo from the output of, it refers to the _val as of the initial useState call… and never changes again! This is not what we want; we generally need our component state to reflect the current state, while being just a variable instead of a function call! The two goals seem opposed.

9. Accessibility

React has also developed a stigma within the accessibility community that web applications created in React are not accessible. Lots of accessibility advocates, and even developers who develop in the framework, think that accessibility is a very big challenge that can be almost impossible to achieve. Some of these issues include:

  • One generic page title that cannot change
  • Focus management makes applications impossible to navigate with the keyboard
  • Extra added <div> and wrappers can break semantics
  • Using semantic HTML is hard to achieve

Use Semantic HTML

This one may be pretty obvious, however, there is still React content that does not use semantic HTML to create basic elements on the page. Instead of creating a button with <div> and <span>, use the <button> tags that have inherent meaning for assistive technology. The more semantics you can use in your application, the easier it will be on you (the developer) and the assistive technology user.

Building Accessible React Apps

React fully supports building accessible websites, often by using standard HTML techniques. We are going to look at a few ways to make your react applications more accessible.

Tip: Use Bit to build React apps faster with components. It helps your team share components and reuses them to quickly build new apps. It’s great for keeping a set of accessible components you can use. Give it a try.

10. Alt Text on Images

The alt (or “alternate”) the attribute is another quick way of making your React app more accessible. When a screen reader reaches an image, it will read out loud the alt text to describe the image’s content.

The purpose of the alt text is for the person hearing it to understand the content of the image. It should be specific enough that the person can imagine the image without seeing it.

Conclusion

We have now learned the JavaScript main Filtering Concept what we can accomplish. If you feel inspired to build on these examples. Cheers!

I’m A Professional React Js Web Developer & Cyber Security Specialist that will assist me in developing, improving, and obtaining the necessary skills.