Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

The ECMAScript specification has documented several mechanisms that are used by the JavaScript language to convert one type of value into another type of value. These mechanisms are known as "

"; abstract in the sense that these are not some real functions that can be referred to or called by the JavaScript code; instead, they are just algorithmic steps internally used by the language to perform type conversion.

These abstract operations are written in the specification as though they were actual functions. For example, 

, but the specification clarifies that the abstract operations are algorithms rather than actual functions that can be invoked.

 mentioned in the ECMAScript specification, but some of the common ones that come into play when dealing with coercion are mentioned below:

Although the names of the above-mentioned abstract operations are self-descriptive, let us understand how exactly they aid in type conversion.

 abstract operation is used to convert an object to a primitive value. This operation takes two arguments:

This operation invokes another abstract operation known as 

 to do the actual conversion, and it also takes two arguments:

 abstract operation, passing in the object, that is to be converted into a primitive value, as the first argument, and the second argument hint is set based on the value of 

Each object in JavaScript inherits the following two methods from the object that sits at the top of the inheritance hierarchy, i.e., the Object.prototype object:

 method is used to convert an object into its string representation. The default behavior of the 

 method is to convert objects in the following (not so-useful) form:

const obj = { a: 123 };
obj.toString(); // [object Object]

 method is not useful at all, different objects override this method to make its output more useful. The built-in 

 object, for example, when converted to a string, outputs a human-readable string representation of the date:

new Date().toString(); // Sat Feb 04 2023 20:44:23 GMT+0500

 method is used to convert an object into a primitive value. The default implementation of this method, like the 

 method, is useless, as it just returns the object on which this method is called.

const arr = [];
arr.valueOf() === arr; // true

It is meant to be overridden by other objects. Many built-in objects override this method. For example, for the 

 objects, this method returns the number of milliseconds since midnight 01 January 1, 1970 UTC.

// number of milliseconds will be different for you,
// depending on when you execute the code below
new Date().valueOf(); // 1675526929129

 methods to convert an object into a primitive value. Among these two methods, in some cases, only one of them is called; in other cases, both of them are called.

 abstract operation determines which of these two methods is called first.

even if that primitive value is not of the string type

, then that primitive value is used as a primitive representation of the object.

 method doesn't exist or doesn't return a primitive value, then the 

 method returns a primitive value, then that value is used; otherwise, a 

 is thrown, indicating that the object couldn't be converted to a primitive value.

In the above code example, we have an object containing overridden implementations of the 

 method. At the end of the code example, we are trying to log 

 method is invoked to convert an object into a primitive value, preferably into a value of string type.

 object is returning a string primitive value, the 

 method is not invoked, and the object-to-primitive conversion process for the 

 object is complete at this point. The primitive value returned by the 

But it was mentioned above that the value returned by the 

 method can be of non-string primitive type. The following code example verifies this claim:

---
title: Abstract operations
description: Explanation of what abstract operations are and common types of abstract operations in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_04/lesson_04.03
---

The ECMAScript specification has documented several mechanisms that are used by the JavaScript language to convert one type of value into another type of value. These mechanisms are known as "**abstract operations**"; abstract in the sense that these are not some real functions that can be referred to or called by the JavaScript code; instead, they are just algorithmic steps internally used by the language to perform type conversion.

These abstract operations are written in the specification as though they were actual functions. For example, `operationName(arg1, arg2, ...)`, but the specification clarifies that the abstract operations are algorithms rather than actual functions that can be invoked.

There are many [abstract operations](https://262.ecma-international.org/13.0/#sec-abstract-operations) mentioned in the ECMAScript specification, but some of the common ones that come into play when dealing with coercion are mentioned below:

-   ToPrimitive
-   ToNumber
-   ToString
-   ToBoolean

Although the names of the above-mentioned abstract operations are self-descriptive, let us understand how exactly they aid in type conversion.

## ToPrimitive

The [ToPrimitive](https://262.ecma-international.org/13.0/#sec-toprimitive) abstract operation is used to convert an object to a primitive value. This operation takes two arguments:

-   `input`: an object that should be converted into a primitive value
-   `preferredType`: an optional second argument that specifies the type that should be favored when converting an object into a primitive value

### OrdinaryToPrimitive

This operation invokes another abstract operation known as [OrdinaryToPrimitive](https://262.ecma-international.org/13.0/#sec-ordinarytoprimitive) to do the actual conversion, and it also takes two arguments:

-   `O`: an object that should be converted into a primitive value
-   `hint`: a type that should be favored when converting an object to a primitive value

`ToPrimitive` abstract operation invokes the `OrdinaryToPrimitive` abstract operation, passing in the object, that is to be converted into a primitive value, as the first argument, and the second argument hint is set based on the value of `preferredType` argument as described below:

-   If the `preferredType` is "string", set `hint` to string
-   If the `preferredType` is a "number", set `hint` to the number
-   If `preferredType` is not specified, set `hint` to the number

Each object in JavaScript inherits the following two methods from the object that sits at the top of the inheritance hierarchy, i.e., the Object.prototype object:

-   `toString()`
-   `valueOf()`

#### toString( )

The `toString` method is used to convert an object into its string representation. The default behavior of the `toString` method is to convert objects in the following (not so-useful) form:

```js
const obj = { a: 123 };
obj.toString(); // [object Object]
```

Here's the above code in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/abstract-operations-example1" />

As the default implementation of the `toString` method is not useful at all, different objects override this method to make its output more useful. The built-in `Date` object, for example, when converted to a string, outputs a human-readable string representation of the date:

```js
new Date().toString(); // Sat Feb 04 2023 20:44:23 GMT+0500
```

Here's the above code in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/abstract-operations-example2" />

#### valueOf( )

The `valueOf` method is used to convert an object into a primitive value. The default implementation of this method, like the `toString` method, is useless, as it just returns the object on which this method is called.

```js
const arr = [];
arr.valueOf() === arr; // true
```

Here's the above code in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/abstract-operations-example3" />

It is meant to be overridden by other objects. Many built-in objects override this method. For example, for the `Date` objects, this method returns the number of milliseconds since midnight 01 January 1, 1970 UTC.

```js
// number of milliseconds will be different for you,
// depending on when you execute the code below
new Date().valueOf(); // 1675526929129
```

Here's the above code in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/abstract-operations-example4" />

The `OrdinaryToPrimitive` abstract operation invokes the `toString` and the `valueOf` methods to convert an object into a primitive value. Among these two methods, in some cases, only one of them is called; in other cases, both of them are called.

The `hint` argument received by the `OrdinaryToPrimitive` abstract operation determines which of these two methods is called first.

### Prefer string

If the `hint` argument is "string", then the `OrdinaryToPrimitive` abstract operation first invokes the `toString` method on the object. If the `toString` method returns a primitive value, _even if that primitive value is not of the string type_, then that primitive value is used as a primitive representation of the object.

If the `toString` method doesn't exist or doesn't return a primitive value, then the `valueOf` method is invoked. If the `valueOf` method returns a primitive value, then that value is used; otherwise, a `TypeError` is thrown, indicating that the object couldn't be converted to a primitive value.

```js
const obj = {
  toString() {
    console.log("toString invoked");
    return "hello world";
  },
  valueOf() {
    console.log("valueOf invoked");
    return 123;
  }
};

console.log(`${obj}`);
// toString invoked
// hello world
```

Here's the above code in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/abstract-operations-example5" />

In the above code example, we have an object containing overridden implementations of the `toString` and the `valueOf` method. At the end of the code example, we are trying to log `obj`, embedded in a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), to the console. In this case, the `obj` will be converted into a string.

As discussed above, when the `hint` argument of the `OrdinaryToPrimitive` abstract operation is "string", the `toString` method is invoked to convert an object into a primitive value, preferably into a value of string type.

As the `toString` implementation of the `obj` object is returning a string primitive value, the `valueOf` method is not invoked, and the object-to-primitive conversion process for the `obj` object is complete at this point. The primitive value returned by the `toString` method of the `obj` object is used by the template literal.

But it was mentioned above that the value returned by the `toString` method can be of non-string primitive type. The following code example verifies this claim: