The meaning of <code>this</code> in JavaScript can be a bit confusing, especially when using anonymous functions and arrow functions.<figure class="image"><img src="https://images.unsplash.com/photo-1554497342-902a4f8da8ed?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHwxMTV8fHRoaXN8ZW58MHx8fHwxNjgxNzU5ODc1&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@iamfelicia?utm_source=DNX&amp;utm_medium=referral">Felicia Buitenwerf</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>When you use an anonymous function declared with the <code>function</code> keyword, the <code>this</code> keyword inside the function refers to the object that called the function. In other words, the <code>this</code> keyword is bound to the context of the function call.Here's an example:<pre><code class="language-javascript" id="ZX9qbP9oM">const myObj = {
 myMethod: function() {
 console.log(this);
 }
};
myObj.myMethod(); // Logs myObj object
</code></pre>In this example, when <code>myObj.myMethod()</code> is called, the <code>this</code> keyword inside the <code>myMethod</code> function refers to the <code>myObj</code> object.On the other hand, when you use an arrow function, the <code>this</code> keyword is not bound to the context of the function call. Instead, the <code>this</code> keyword inside an arrow function is determined by the enclosing lexical scope. In other words, the <code>this</code> value is inherited from the context in which the arrow function is defined.Here's an example:<pre><code class="language-javascript" id="SS-d9-pay">const myObj = {
 myMethod: () =&gt; {
 console.log(this);
 }
};

myObj.myMethod(); // Logs the global object (window in a browser, global in Node.js)</code></pre>In this example, even though <code>myMethod</code> is called as a method of <code>myObj</code>, the <code>this</code> keyword inside the arrow function is not bound to the <code>myObj</code> object. Instead, it refers to the global object, because that is the lexical scope in which the arrow function is defined.So, in summary:<ul><li>In an anonymous function declared with the <code>function</code> keyword, the <code>this</code> keyword is bound to the calling object.</li><li>In an arrow function, the <code>this</code> keyword is not bound to the calling object and is instead determined by the enclosing lexical scope.</li></ul>Once we understand the behavior of the <code>this</code> keyword in JavaScript, we come to realize that converting anonymous functions to arrow functions is not always straightforward. For example, Knex query builder relies on anonymous functions to achieve the desired behavior, as shown below:<pre><code class="language-javascript" id="Mk1YTh4PU"> .andWhere(function() {
 this.where("c.draft", false).orWhere("c.draft", null);
 })
 .andWhere(function() {
 this.where("c.is_deleted", false).orWhere("c.is_deleted", null);
 }) </code></pre>In this code, the <code>function()</code> keyword is used to define the anonymous functions for the <code>andWhere</code> calls. Within these functions, the <code>this</code> keyword refers to the Knex query builder object, which allows further chaining of query operations.While ESLint may flag these anonymous functions as "unnamed-function" by the <code>func-names</code> rule, converting them to arrow functions could potentially break the intended logic of the Knex query builder. Therefore, it's important to consider the specific context and behavior when deciding whether to use an anonymous function or an arrow function.&nbsp;&nbsp;&nbsp;

The meaning of this in JavaScript can be a bit confusing, especially when using anonymous functions and arrow functions.

When you use an anonymous function declared with the function keyword, the this keyword inside the function refers to the object that called the function. In other words, the this keyword is bound to the context of the function call.

All Posts In Knexjs