DEV Community: Bo Louie

JavaScript Fundamentals: Type Coercion and Strict Equality Explained

Bo Louie — Wed, 17 May 2023 01:34:19 +0000

JavaScript, a versatile and dynamic language, brings to the table a concept known as 'coercion'. This refers to JavaScript's ability to convert a value from one data type to another, similar to a bilingual person translating languages. Coercion in JavaScript can be either implicit or explicit, influenced by the context or deliberately induced using specific methods.

Consider this example of implicit coercion when we mix a string with a number:

let x = "The magic of JavaScript: ";
let y = 10;

let result = x + y;

console.log(result);  // Output: "The magic of JavaScript: 10"

Here, y (a number) and x (a string) are like oil and water. Yet, when we attempt to combine them with the + operator, JavaScript seamlessly converts y into a string. The outcome? A new string, "The magic of JavaScript: 10".

Explicit coercion, on the other hand, is like ordering your coffee 'just so'. We specify the conversion using functions such as Number(), String(), or Boolean(). Here's how it works:

let x = "Another JavaScript trick: ";
let y = 10;

let result = x + String(y);

console.log(result);  // Output: "Another JavaScript trick: 10"

In this example, we've used the String() function to explicitly convert y into a string before blending it with x. The result is identical to the previous example, but the process is more transparent.

So, why does JavaScript offer this unique feature of coercion?

First, it empowers developers to write versatile code that can accommodate a plethora of inputs, eliminating the need for exhaustive data type checking. This lends the code brevity and readability.

Second, coercion simplifies operations across different data types. When you're concatenating strings and numbers, JavaScript automatically transmutes the number into a string, making the operation smooth.

Lastly, coercion is instrumental in how JavaScript handles type comparison. It tries to convert values to a common type before comparison, allowing for meaningful comparison between different data types.

Despite its advantages, the power of coercion can sometimes morph into a pitfall.

If you're not aware of JavaScript's type conversion rules, coercion can lead to unexpected results. A common issue arises when using the equality operator (==), which performs type coercion before comparison. This can yield surprising results if you're not aware of how the operator handles type coercion.

Another potential source of confusion is when converting between numeric types. JavaScript boasts both integer and floating-point number types. Coercion might lead to precision loss when converting between these types, much like shrinking a high-resolution image.

The antidote to these unexpected results is understanding how coercion works in JavaScript. Enter the triple equals operator (===), JavaScript's version of a strict teacher. It allows no coercion and insists on comparing values of the same type.

Take a look at this example:

let x = 10;
let y = "10";

console.log(x == y);  // Output: true
console.log(x === y);  // Output: false

In this case, x and y are like identical twins separated at birth – same value, different types. When we use the equality operator (==), JavaScript converts the string "10" into the number 10 before comparison, hence returning true.

However, the strict comparison operator (===) is less accommodating. It prohibits coercion, resulting in false because x and y are of different types.

In essence, the triple equals operator (===) is your go-to tool for strict comparisons, ensuring the values being compared share the same type and value, sans any type conversion. This makes your code more predictable and easier to comprehend, akin to reading a well-written novel.

Understanding and effectively using coercion and strict equality in JavaScript is an art, one that comes with practice and experience. Happy coding!

Mastering JavaScript Variables: Hoisting, Temporal Dead Zone, and Top 10 Best Practices

Bo Louie — Sat, 08 Apr 2023 21:38:14 +0000

Introduction

In JavaScript, hoisting and the temporal dead zone (TDZ) are essential concepts to understand, as they play a significant role in how the language treats variable and function declarations. This article aims to explain hoisting and the TDZ in a clear, concise manner to help beginner developers grasp these fundamental concepts.

Hoisting in JavaScript

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope (global or function scope for var, block scope for let and const) during the compilation phase, before the code execution.

There are three types of variable declarations in JavaScript:

var
let
const

The hoisting behavior differs for each type of declaration:

Variables declared with var are hoisted to the top of their containing function or global scope. Only their declarations are hoisted, not their initializations. The variable is initialized with undefined until the actual assignment in the code is executed.
Variables declared with let and const are hoisted to the top of their containing block scope (the nearest enclosing {} block). Their initializations are not hoisted, which leads to the concept of the temporal dead zone.

Temporal Dead Zone (TDZ)

The temporal dead zone is the period between the hoisting of a variable declared with let or const and its initialization. During this time, the variable is in the TDZ, and attempting to access the variable before its initialization will result in a ReferenceError.

The TDZ exists to prevent variables from being accessed before they are properly initialized, ensuring that the code behaves as intended and helping to prevent bugs.

Examples

Here are some examples to illustrate hoisting and the TDZ in JavaScript:

i) var hoisting:

console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

ii) let hoisting and TDZ:

console.log(myLet); // Output: ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet); // Output: 10 (if the first console.log didn't throw an error)

iii) const hoisting and TDZ:

console.log(myConst); // Output: ReferenceError: myConst is not defined
const myConst = 10;
console.log(myConst); // Output: 10 (if the first console.log didn't throw an error)

Conclusion

Understanding hoisting and the temporal dead zone is crucial for writing clean, efficient, and bug-free JavaScript code. By grasping these fundamental concepts, beginner developers can avoid common pitfalls and better comprehend the inner workings of JavaScript.

Top 10 Best Practices

This list of best practices for dealing with variables in JavaScript provides practical tips for developers to follow and helps reinforce the concepts of hoisting and the temporal dead zone that are explained above.

Declare variables at the top of their scope to avoid confusion and unintended behavior caused by hoisting.
Use const and let instead of var whenever possible, as they provide better scoping and are not hoisted like var declarations are.
Prefer the use of const over let when declaring variables that won't be reassigned, as it communicates the intent that the variable should remain constant and helps prevent accidental reassignment.
Use descriptive and meaningful variable names to make your code easier to read and understand.
Initialize variables when they are declared to ensure that they have a defined value when they are first used.
Avoid using global variables whenever possible, as they can be accessed and modified from anywhere in your code and can lead to unintended side effects.
Use the strict mode directive to help catch errors and enforce best practices in your code.
Avoid reassigning values to variables that have been declared with const, as this can lead to unexpected behavior.
Be mindful of the temporal dead zone (TDZ) when working with let and const declarations, as attempting to access or use a variable or function in the TDZ will result in a reference error.
Always test your code thoroughly to ensure that it is working as intended, and debug any issues that you encounter.

Referenced JavaScript Courses

Anthony Alicea's JavaScript: Understanding the Weird Parts on Udemy

Jonas Schmedtmann's The Complete JavaScript Course 2023: From Zero to Expert on Udemy

Disclaimer: This post was produced with the help of artificial intelligence.

A closure challenge

Bo Louie — Tue, 31 Jan 2023 02:13:52 +0000

This closure challenge was featured in The Complete JavaScript Course 2023 by Jonas Schmedtmann on Udemy.

Challenge

Take the following IIFE provided and at the end of the function, attach an event listener that changes the color of the selected h1 element ('header') to blue, each time the body element is clicked. Do not select the h1 element again! And then explain why this worked, as if to a 5 year old. Use analogies if possible.

Solution

(function(){
    const header = document.querySelector('h1');
    header.style.color = 'red';
    document.body.addEventListener('click', function() {
        header.style.color = 'blue';
    });
})();

This code makes the header text turn red when the page loads, and blue every time you click on any part of the body. Give this a try at codepen.

Think of it like having a big red crayon and a blue crayon. When the page starts, you color the header with the red crayon. Then, you tell the computer that every time you click on the body, you want to color the header with the blue crayon. So every time you click, the header changes color from red to blue, just like using different crayons.

React

Can you show an example of the same scenario using React?

import React, { useState } from 'react';

const Header = () => {
  const [headerColor, setHeaderColor] = useState('red');

  const handleBodyClick = () => {
    setHeaderColor('blue');
  };

  return (
    <>
      <h1 style={{ color: headerColor }}>Header</h1>
      <body onClick={handleBodyClick} />
    </>
  );
};

export default Header;

This code uses the useState hook from React to keep track of the color of the header text. Initially, the color is set to red. The body is given an onClick handler, handleBodyClick, which updates the color of the header text to blue every time it is clicked.

In React, hooks are functions that let you "hook into" React state and lifecycle features from your functional components.

Think of hooks as special tools that you can use in your components to add extra functionality and interact with React. They let you reuse stateful logic and change the behavior of your components without having to write a class component.

In the example I provided, useState is being used to manage the color of the header text. The useState hook returns an array with two values: the current state and a function to update the state. The header color is stored in the state, and the function to update it is used in the handleBodyClick handler to change the header color to blue every time the body is clicked.

There are several built-in hooks in React, such as useState and useEffect, that you can use to add state management, handle side effects, and control how your component renders. You can also write your own custom hooks to reuse logic across your components.

Thanks for reading!

Clarity on closures in JavaScript

Bo Louie — Sat, 28 Jan 2023 17:45:57 +0000

In Section 10 of The Complete JavaScript Course 2023 (Udemy, Jonas Schmedtmann), there is a confusing concept about closures mentioned towards the end. In my last post on Data encapsulation in JavaScript, I discussed closures.

What I understand about closures

Jonas stated: "A closure always makes sure that a function does not lose the connection to the variables that were present at its birthplace."

Ok, that makes sense. A closure is a function that retains access to variables in its scope, even after the scope has closed.

When an inner function is defined within an outer function, the inner function has access to the variables of the outer function, and any variables defined within the inner function are not accessible from the outside.

This allows you to encapsulate data within the closure and make it accessible only through the returned function.

This feature of closures is particularly useful when you want to create a function that needs to maintain some state, or when you want to pass data to a callback function without making it globally accessible.

What I didn't understand about closures

Jonas stated: "So whenever something like this happens, where you reassigned functions even without returning them, keep in mind that also this will create a closure."

I was confused by this statement and the code reference didn't clarify it.

I asked ChatGPT to help me understand closures using Jonas' words.

Me: Does this mean that whenever something like this happens, such as where you have reassigned functions even without returning them, that also this will create a closure?

ChatGPT: Reassigning a function does not create a closure. A closure is created when an inner function is defined within an outer function and has access to the variables in the outer function's scope even after the outer function has finished executing.

In this case, when you reassign a function, you are simply creating a new reference to the same function, but it does not create a closure. However, if you reassign a function and the new function references variables from the outer scope, it creates a closure. Here's an example:

function outerFunction() {
  let myVar = "I'm in the outer function";
  function innerFunction(){
    console.log(myVar);
  }
  return innerFunction;
}
let newFunction = outerFunction();
newFunction(); // this will print "I'm in the outer function"

In this example, when you reassign the innerFunction to newFunction, it creates a closure because newFunction still has access to the variable myVar from the outerFunction. So, whenever newFunction is invoked, it will be able to access the myVar variable.

It is important to note that simply reassigning a function does not create a closure, it's only when the reassigned function references variables from the outer scope that creates a closure.

Clarity on closures

Reassigning a function without returning it does not create a closure.

A closure is created when an inner function references variables from its outer scope after the outer function has finished executing.

If you reassign a function without returning it, the inner function will no longer have access to the outer function's scope and it will not be a closure. For example:

let myVar = "I'm a global variable";
function outerFunction() {
  myVar = "I'm in the outer function";
}
outerFunction();
console.log(myVar); // this will print "I'm in the outer function"

In this example, the outerFunction does not return an inner function that references to myVar, so it is not a closure. The reassignment of myVar is performed in the outer scope and it becomes a global variable.

It's important to note that, closures are created when an inner function references variables from its outer scope after the outer function has finished executing and those variables are not available in the global scope.

In summary, closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created. Using closures in your code can help you keep track of and access variables in different scopes when needed. Closures can be used to create private variables and methods, and can provide better structure and organization to your code. Closures can also be used to create callback functions, which are passed as arguments to other functions and executed at a later time.

Thanks for reading! Disclaimer: This was produced with the help of artificial intelligence.

Data encapsulation in JavaScript

Bo Louie — Sat, 28 Jan 2023 02:12:36 +0000

Data encapsulation and data privacy are crucial for programming. In JavaScript, encapsulation refers to the practice of hiding the internal state and implementation details of an object from the outside world, and providing a public interface for interacting with the object.

We need to defend our variables from being unintentionally overwritten by any part of the program, including external scripts and libraries. To achieve this, we must remember to hide variables and use scopes.

PART I
Immediately Invoked Function Expressions (IIFEs), closures, and blocks are all related to data encapsulation in JavaScript.

PART II
React's state management promotes encapsulation, which is the idea of keeping data and functionality in one entity.

IIFEs

IIFEs are functions defined and immediately executed, creating a private scope for variables inside the function, inaccessible from outside.

(function () {
  var myData = 'This is some private data';
})();
console.log(myData);  // ReferenceError: myData is not defined

Closures

Closures are similar to IIFEs in that they also create a new scope for variables, but they do so by returning a function that retains access to the variables in its scope.

Here is an example of data encapsulation in JavaScript using closures:

function createCounter() {
    let count = 0; // private variable

    return {
        increment: function() {
            count++;
        },
        decrement: function() {
            count--;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
counter.decrement();
console.log(counter.getCount()); // 0

In the above code, the createCounter function returns an object with three methods: increment, decrement, and getCount. The count variable is declared inside the createCounter function, so it is only accessible within the scope of that function. The object that is returned by the createCounter function has access to the count variable through closure, but it is not directly accessible from outside the function. This is an example of data encapsulation, as the internal state of the object (the count variable) is hidden from the outside world, and can only be modified through the provided public methods (increment, decrement).

Closures are useful for creating functions that maintain state or pass data to a callback without making it globally accessible. If this is unclear, you may find my post Clarity on closures in JavaScript helpful.

Nowadays, JavaScript has made it so that IIFEs are not as necessary as they once were. If we need to create a new scope for data privacy, we can simply create a block instead - no need to create a function.

Blocks

JavaScript blocks are also used to encapsulate data, by creating a new scope for variables defined within the block.

Using let and const keywords allow you to declare variables with block scope, rather than function scope. This means you can create a new scope within a block of code, such as a for loop or an if statement, rather than having to wrap the code in an IIFE.

Here is an example of how you can use a block to achieve data encapsulation, instead of using an IIFE:

{
    let count = 0; // private variable

    function increment() {
        count++;
    }
    function decrement() {
        count--;
    }
    function getCount() {
        return count;
    }
    console.log(count); // 0
    increment();
    console.log(count); // 1
    decrement();
    console.log(count); // 0
}
console.log(count); // ReferenceError: count is not defined

In the above code, the variable count is declared within a block, and it's only accessible within that block, making it private. Once the block ends, the variable is not accessible anymore, so trying to access it outside the block will raise a ReferenceError.

Though not essential as before, IIFEs may be useful in creating a new scope to prevent naming clashes or to maintain a certain state.

Use closures to create private variables and methods and encapsulate data to promote modularity and maintainability while controlling access.

Closures enable code to maintain state and context, by allowing inner functions to access variables from the outer function even after the outer function has finished running. This is useful for tasks such as event handling, async programming, and data encapsulation.

React

State management is a key concept in React and other JavaScript libraries and frameworks for building user interfaces. In React, state refers to the data or variables that determine a component's behavior and render information to the user.

React provides a way to manage state and props (a component's input) through a component's state object and the setState method. The state object contains the data that the component needs to render, and the setState method is used to update the state and trigger a re-render of the component. This allows the component to respond to user interactions, network responses, or other events and update the user interface accordingly.

React ensures components render consistently and re-render when state changes by storing it within the component and using setState(). It also allows for state to be managed in a functional way with hooks, which is less verbose and easier to understand than class-based components.

React promotes encapsulation with its state management, hiding internal state from outside and only allowing access through methods like setState, which makes components more predictable and prevents side effects.

Thanks for reading! This was produced with the help of artificial intelligence.

.this keyword in JavaScript

Bo Louie — Sat, 14 Jan 2023 17:21:16 +0000

My goal in writing this post is to promote a better understanding of this keyword by sharing aspects of this that I discovered while learning JavaScript. Skip the specifics and jump to the Cliffs Notes if you'd prefer.

Why this exists
How this works
What defines this
Function Methods

Why this exists

In JavaScript, the this keyword is a means to refer to the object or context that the code is currently executing within. In object-oriented programming, this keyword makes it possible to reference the current object in callback functions and event handlers, allowing access to and manipulation of the current object's properties and methods. Additionally, this enables programmers to build methods that preserve the context of the object they were called on while being reused at different instances.

The this keyword can also be used to develop closures, inner functions that have access to the variables and information in their containing functions. It serves as a method to refer to the object whose property the function is, or to the object which is carrying out the current function.

How this works

In JavaScript, the value of this keyword within a function is typically determined by how the function is invoked, not by the location of where the function was declared. Except for arrow functions, which have a different syntax and behaviour than regular functions.

The this keyword can be passed to a function as an argument, or it can be implicitly set depending on the execution context.

The call(), apply(), and bind() methods can also be used to explicitly set the value of this when a function is called. Each method can be used to call a function and modify how it is invoked, but they work in slightly different ways.

A few of the common factors that dictate how the this keyword is determined in different contexts will be discussed next. Then I will discuss the function methods in greater detail.

What defines this

The context of the code that is presently running determines what the this keyword represents. The call-site (the place in your code where a function is called) of the function is what determines the default behaviour of the this keyword.

The following are often the most important factors to consider when defining this keyword as a JavaScript programmer:

1st Factor

In the global scope, by default, this refers to the global object, also known as the window in the browser or global in Node.js.

2nd Factor

In a regular function call, this refers to the global object.

function myFunc() {
  console.log(this);
}
myFunc(); // logs the global object (window or global)

3rd Factor

In a method call, this refers to the object on which the method is defined.

let object = {
  myMethod: function () {
    console.log(this);
  }
};
object.myMethod(); // logs object

4th Factor

In a constructor function, this refers to the new object being constructed.

function MyConstructor() {
  this.myProp = 'hello';
  console.log(this);
}
let myObj = new MyConstructor(); // logs the new object, with a myProp property

5th Factor

When a function is called as a method of an object, this refers to the object within the function.

// First Object
let object = {
  myProp: 'Netflix',
  getMethod: function() {
    return this.myProp;
  },
};
// Second Object
let otherObject = {
  myProp: 'Disney'
};
object.getMethod(); // logs 'Netflix'
otherObject.getMethod (); // logs 'Disney'
console.log(object.getMethod()); // logs 'Netflix'
otherObject.getMethod = object.getMethod // logs f() { return this.myProp }

In the above code, the first object is called object that has a myProp property with a value of Netflix, and a getMethod method that returns the value of the myProp property using this.myProp.

When the object.getMethod() method is called, this inside the method refers to the object on which the method is defined, so this.myProp evaluates to object.myProp which is Netflix. Alternatively, getMethod() can be called on the second object called otherObject to return it's myProp property as Disney.

Clear as mud, right!?

The this keyword is dynamic and its value is determined implicitly by the execution context of how the function is called.

However, for arrow functions, the value of this is not dynamic, it's determined by the scope where the arrow function was defined. Instead of having its own this keyword, the arrow function must access this from the parent scope.

I plan on posting about arrow functions soon to better understand their atypical nature, so stay tuned!

Function methods make JavaScript more predictable by enabling the explicit definition of the value of the this keyword. The call(), apply(), and bind() methods allow you to explicitly specify the value of this when a function is called. These methods modify how functions get invoked, but they work in slightly different ways.

The call() and apply() methods invoke the function immediately, while the bind() method returns a new function with this bound to a specified value. This new function can be called later.

Let's take a closer look!

Function Methods

The following Booking Flights code snippet is from Jonas Schmedtmann's The Complete JavaScript Course 2023, Section 10: A Closer Look at Functions, available on Udemy. It refers to booking flights with the second-largest European airline group and has one main object that I'll now discuss in greater detail on function methods.

// Booking Flights
// Main Object
const lufthansa = {
    airline: 'Lufthansa',
    iataCode: 'LH',
    bookings: [],
    // book: function() {}
    book(flightNum, name) {
      console.log(
        `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
      );
      this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
    },
};
lufthansa.book(239, 'Jonas Schmedtmann');
lufthansa.book(635, 'John Smith');

const eurowings = {
    airline: 'Eurowings',
    iataCode: 'EW',
    bookings: [],
};
const book = lufthansa.book
book(23, 'Sarah Williams') // ERROR

const swiss = {
    airlines: 'Swiss Air Lines',
    iataCode: 'Lx',
    bookings: [],
};

If you run this code, you will get the following output:

Jonas Schmedtmann booked a seat on Lufthansa flight LH239
John Smith booked a seat on Lufthansa flight LH635

The book method of the lufthansa object is called with the correct value for this (i.e. this refers to the lufthansa object), so the bookings are added to the lufthansa object's bookings array.

However, when the book function is assigned to the book variable and then called with the book(23, 'Sarah Williams'), the value of this is determined by the way in which the function is called, and in this case it is called as a standalone function, not as a method of an object.

As a result, the value of this is the global object (in a web browser, this is the window object). This means that the airline and iataCode properties of this object will not be defined, and you will see an error message
logged to the console similar to the following:

Uncaught TypeError: Cannot read property 'airline' of undefined

To fix this error, we need to use the call() method on the book function to properly set the value of this keyword to the eurowings object. As a result, we get the booking added to the eurowings object's bookings array.

Call Method

Using the call() method effectively specifies the value of this when calling the book function, like below:

// Call Method
book.call(eurowings, 23, 'Sarah Williams');
console.log(eurowings); // logs Sarah Williams booked a seat on Eurowings flight EW23

book.call(lufthansa, 239, 'Mary Cooper');
console.log(lufthansa); // logs Mary Cooper booked a seat on Lufthansa flight LH239

In the above code, the book function is defined as a method of the lufthansa object, but the call() method on the book function can set the value of this to the eurowings object as well.

The call() method allows you to invoke a function and specify the value of this as well as any arguments that should be passed to the function when it is called, regardless of where the function is defined.

The value of the this keyword is determined dynamically based on how a function is invoked. It is also possible to explicitly set the value of the this keyword within a function by using the call() method.

The call() method allows you to specify the value of this explicitly, rather than relying on the default behavior of the this keyword. This can be useful when you want to reuse a function that was defined in one context, but use it in a different context where the value of this needs to be different.

Apply Method

The apply() method allows you to call a function with a specified value for this, and an array of arguments. This can be useful when calling a function with a variable number of arguments.

For example, where flightData is set to an array:

// Apply Method
const swiss = {
  airline: 'Swiss',
  iataCode: 'LX',
  bookings: [],
  book: function(flightNum, name) {
    console.log(`${name} booked a seat on ${this.airline} flight${this.iataCode}${flightNum}`
  );
  this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
},
};
// Array as an argument
const.flightData = [583, 'Carlos Santana'];
book.apply(swiss, flightData);
console.log(swiss);

The following is logged to the console:

Carlos Santana booked a seat on Swiss flight LX583 { airline: 'Swiss', iataCode: 'LX', bookings: [{ flight: 'LX583', name: 'Carlos Santana' }], book: [Function]}

In the above code, the apply() method is called on the book function, and it is passed two arguments: the value of this (the swiss object) and an array of arguments (flightData). The booking is then added to the swiss objects bookings array.

The apply() method is less commonly used in modern JavaScript because there is a better way to accomplish the same task.

I'm referring to the spread operator (...), which allows you to spread an array of values into individual arguments when calling a function. This can be a more concise and convenient way of calling a function with an array of arguments in comparison to the apply() method.

For example, instead of using the apply() method as shown in the previous example, you could use the spread operator like so:

// Spread Operator
const flightData = [583, 'Carlos Santana'];
book.call(swiss, ...flightData);
console.log(swiss); // logs Carlos Santana booked a seat on Swiss flight LX583

Invoking the book function, by spreading the flightData into separate arguments with the spread operator effectively adds Carlos Santana to the swiss objects bookings array!

Because the spread operator is a relatively new addition to JavaScript, it may not be supported in all environments. It is, however, widely supported in modern browsers and JavaScript runtimes, making it a convenient and concise method of calling a function with an array of arguments.

Bind Method

The bind() method creates a new function that, when called, has its this keyword set to the provided value, that you specify. This new function can be called later.

By calling the bind() method on the book function and pass different values for this, you can create new functions with fixed values for this. For example:

// Bind Method
const bookEW = book.bind(eurowings);
const bookLH = book.bind(lufthansa);
const bookLX = book.bind(swiss);

The bind() method returns a new function with the value of this set to the specified value.

In the above example, the bind() method is called on the book function three times, each time with a different value for this, resulting in three new functions:

-bookEW, which has this fixed to the eurowings object
-bookLH, which has this fixed to the lufthansa object
-bookLX, which has this fixed to the swiss object.

These functions are identical to the book function, except the value of this is fixed to the value that was passed to bind(). You can then call these functions at a later time, and the value of this will be fixed to the value that you specified when you created the function with bind().

The following gets logged to the console:

bookEW(23, 'Steven Williams'); // Adds a booking to the eurowings object's bookings array
bookLH(654, 'Alice Smith'); // Adds a booking to the lufthansa object's booking array
bookLX(583, 'Bob Johnson'); // Adds a booking to the swiss object's bookings array

This can be useful when you want to reuse a function in different contexts, but you want the value of this to be different in each context. The bind method allows you to create new functions with fixed values for this, which can be called at a later time. For example:

// Calling a single function for additional flight bookings
const bookEW23 = book.bind(eurowings, 23);
bookEW23('Jonas Schmedtmann');
bookEW23('Martha Stewart');

The bind() method in this example, was used to create new functions with the this value set to either lufthansa or eurowings, depending on which object is passed as an argument to bind().

The bookEW function is created with the this value set to eurowings, so when it is called with (23, 'Steven Williams'), it logs the message: "Steven Williams booked a seat on Eurowings flight EW23".

The bookEW23 function is also created with the this value set to eurowings, but it is already partially applied with the first argument set to 23. When it is called with a single argument 'Jonas Schmedtmann', it logs the message: "Jonas Schmedtmann booked a seat on Eurowings flight EW23".

When you create a new function using the bind() method and partially apply some of its arguments, the resulting function will only have placeholders for the remaining arguments.

Partial application refers to the process of creating a new function by fixing some of the arguments of an existing function. The new function is then called with the remaining arguments.

For example, in the case of the bookEW23 function, the flightNum argument is already set to 23, so when you call bookEW23 function, you only need to provide the name argument. The resulting function call will look like this: bookEW23(name).

You can also use the bind() method to set the value of multiple arguments at once. For example:

const bookEW23Martha = book.bind(eurowings, 23, 'Martha');
bookEW23Martha(); // logs Martha booked a seat on Eurowings flight EW23

Functional programmers often use partial application to code reusable, configurable functions that are simple to adapt for particular use cases. The bind() method is one way to implement partial application in JavaScript, but there are other ways as well, such as using higher-order functions or creating a function that returns a partially applied function.

Cliffs Notes

Back to Contents

The call(), apply(), and bind() methods are all ways to specify the value of this keyword when calling a function.

The call() method allows you to call a function with a specified value for this, and pass any number of arguments to the function as separate parameters.

The apply() method allows you to call a function with a specified value for this, and pass any number of arguments to the function as an array.

The bind() method allows you to create a new function with a specified value for this, and optionally set some or all of the arguments to the new function. The new function can then be called at a later time, with the remaining arguments passed when the function is called.

These methods can be useful when you want to reuse a function in different contexts, but you want the value of this or the arguments to be different in each context. They allow you to specify the value of this and the arguments explicitly, rather than relying on the default behavior of the this keyword and the arguments.

Thanks for reading and hopefully this was helpful! I welcome constructive feedback, and if you find an error, please kindly let me know. Disclaimer: This post was produced with the help of artificial intelligence.

How do you check for valid email input?

Bo Louie — Sat, 07 Jan 2023 21:20:37 +0000

I'm working with strings in section 9 of The Complete JavaScript Course 2023: From Zero to Expert, which I purchased on Udemy.

Jonas Schmedtmann, one of Udemy's Top Instructors, demonstrates how to check the validity of email input using various methods on strings (shown in CodeSnap below).

![A CodeSnap of JavaScript string methods for converting to lowercase and getting rid of white spaces]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mta0cxlfexunswr33de9.png)

Jonas mentioned the challenge of creating a function with checking or validating behaviour, that could return a boolean. I took on the challenge and generated three functions by prompting ChatGPT, as outlined below.

1st Function

Use a regular expression to check if the email is in the correct format


function isValidEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

This function takes an email as an argument and uses a regular expression to check if the email is in the correct format. The regular expression checks for the presence of an @ symbol and a ., and it also checks that the email does not contain any invalid characters.

2nd Function

To use this function, you can pass the email that you received as an input to the function and check if it is valid:

const email = 'Hello@Jonas.Io';

if (isValidEmail(email)) {
  console.log('Valid email');
} else {
  console.log('Invalid email');
}

This code will output Valid email, because the email is in the correct format.

3rd Function

To fix the capitalization and remove the spaces before and after the email, you can use the trim and toLowerCase methods:

const fixedEmail = email.trim().toLowerCase();

if (isValidEmail(fixedEmail)) {
  console.log('Valid email');
} else {
  console.log('Invalid email');
}

This code will output Valid email, because the trim method removes the leading and trailing whitespace from the email and the toLowerCase method converts the email to lowercase.

In ECMAScript 2019 (ES2019), two new string trimming methods were introduced: trimStart and trimEnd.

The trimStart method removes leading whitespace from a string, while the trimEnd method removes trailing whitespace.

Here is an example of how you can use these methods:

const str = '  Hello   ';

console.log(str.trimStart()); // Output: "Hello   "
console.log(str.trimEnd()); // Output: "   Hello"

You can use these methods instead of the trim method if you only want to remove leading or trailing whitespace from a string.

Keep in mind that the trimStart and trimEnd methods are not supported in all browsers, so you may want to use a polyfill if you need to support older browsers.

This article was produced with the help of ChatGPT

ChatGPT is helping me learn JavaScript

Bo Louie — Sat, 24 Dec 2022 21:04:49 +0000

I'm halfway through JavaScript: Understanding the Weird Parts instructed by Anthony Alicea on Udemy. I purchased this course way back in January of 2020 and completed roughly a quarter of the lessons. That's when I fell off track and left it at that, until recently.

About six weeks ago, I re-started the course and got through the first quarter of the lessons for the second time. I've been dedicating at least four days a week (few hours per day) to taking notes, reading MDN web docs, but not much coding.

I'm determined to fully grasp all of the weird parts and as many advanced topics of JavaScript.

Tony makes JavaScript programming less intimidating. The 'big word alerts' or 'conceptual and frameworks asides' get presented in simplistic and straight-forward ways. The material nicely builds section-by-section and each 'weird part' gets thoroughly explained using minimalistic visuals.

However, a major blocker to my JavaScript learning progress has been my method of capturing Tony's material. I've been note-taking, hand-writing snippets of code, even color-coding the syntax on paper! Gasp ...right!?

Well, my method has changed since ChatGPT was released!

With the help of ChatGPT, my lessons with Tony on the weird parts of JavaScript feel way more motivating, flowing, and easier to review. My pace and depth of capturing the course material has drastically improved with ChatGPT. When I don't fully understand what Tony explains in the course, I turn to ChatGPT to gain insight, generate different code, or search for specific context. For instance, I was able to ask ChatGPT to explain how function factories and closures are important to front-end development.

ChatGPT gave me clarity, instantly: "As a front-end developer, you can use function factories and closures to create reusable and modular code for your web applications.

Lately, I've been trying to figure what platform is best for archiving the collections of my programming notes. I want to be able to revisit this material for future projects and interviews.

I recently leveraged ChatGPT to help me draw neat comparisons between JavaScript and Python––the programming language that I'm most comfortable coding at this time. I've been taking advantage of ChatGPT by drafting stories of my JavaScript lessons on my Medium account but I'm thinking of switching to Notion.

What's your go-to method of managing your programming notes?

I'm also now aware of the new Guidelines for AI-assisted articles on DEV, which makes me curious about how others might share their AI-assisted programming learning journey on here.