Arrow functions and "this"

100%

Arrow functions and "this"

✓ Published0🌍 Public

Last edited Sep 8, 2015

Created on Sep 8, 2015

This example demonstrates how arrow functions bind `this` to their enclosing lexical scope, unlike regular functions. The JavaScript code defines `Foo` and `Bar`, each with a `setTimeout` callback that logs `this` to the console. A regular function in `Foo` causes `this` to refer to the global `window` object, while the arrow function inside `Bar` preserves the constructor instance, printing `Bar`. The example uses native JavaScript `setTimeout` and `console.log` to illustrate the difference in behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Arrow Function & Multiple Sentences

This example demonstrates how to define and execute a JavaScript arrow function that calculates the cube of a number. The page displays static text reading “Hello Javascript!” using CSS for styling, while the Dart-averse JavaScript code logs the result of calling the arrow function with the input 3 to the console. It relies on the native JavaScript `console.log` API and arrow function syntax, with no external libraries or data sources.

NNita

65% match

Loading thumbnail…

this

This example explains the JavaScript parameter `this`, contrasting it with ordinary function parameters. It shows how binding is determined by calling context, such as a method call with an object left of the dot. The code demonstrates the five binding rules, including implicit binding through dots, explicit binding via `fn.call(r,g,b)`, and behavior in callbacks like `setTimeout()`. It clarifies how passing a method like `r.method` to a callback still binds `this` to the global object, requiring a wrapper function to preserve the intended object, and how the `new` keyword creates a fresh object for `this`.

MMurithi

64% match

Loading thumbnail…

JS local scope definition

This example illustrates the distinction between global and local scope in JavaScript, showing how function declarations behave differently depending on their context. The first script defines a `bla()` function in the global scope, making it accessible via `window.bla()`, while the second script wraps a `foo()` function inside an immediately invoked function expression (IIFE) with `(function() { ... })()`, preventing external access. The code uses the browser's `console.log` to demonstrate execution order and visibility. No external libraries or data sources are involved; the example relies solely on native JavaScript scope rules within a plain HTML document.

RRestuta

64% match

Loading thumbnail…

Arrow Function & Multiple Sentences

This example demonstrates a minimal web page that uses JavaScript arrow functions to compute the triple of a given number. The page consists of a single HTML file with embedded CSS styling and a script block. The arrow function `tripple` takes an input, calculates its square, then multiplies that result by the original number to return the cube. The result is logged to the browser console using `console.log()`. The page displays a static "Hello Javascript!" message using standard HTML and CSS, with no external libraries or frameworks involved.

NNita

62% match

Loading thumbnail…

Fork of Fork of Javascript-ArrayOfOjects-2

This example demonstrates functional JavaScript programming concepts through a simple HTML page. It shows how standard functions and arrow functions can compute mathematical operations, logging results to the browser console. The page uses vanilla JavaScript with basic CSS styling, featuring a `double()` function that multiplies inputs by 10 and a `tripple()` arrow function that calculates cubes. The code highlights syntax differences between traditional function declarations and modern arrow function expressions, with console output demonstrating their execution. No external libraries are used; it relies on native browser APIs for logging and DOM manipulation.

NNita

61% match

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts through a series of commented-out examples, including variables, arithmetic, functions, arrow functions, and object literals. The active code defines an arrow function `person` that returns an object with `first` and `last` properties, then logs the result to the console. It uses an SVG element for structure but relies entirely on the browser's developer console for output. The visualization is rendered without any external libraries, focusing purely on core programming fundamentals rather than data-driven graphics.

KKerotyzzzmo

60% match

Loading thumbnail…

Function

This example demonstrates a set of JavaScript functions for basic arithmetic and variable assignment, with results logged to the browser console. It shows how arrow functions like `add` and `sub` compute sums and differences, while the `copy` and `dup` functions illustrate function aliasing. The code uses plain JavaScript without any external libraries or frameworks, embedded directly in an HTML page with a large 13em body text style. The rendering approach is entirely console-based, with no visual data output.

NNita

60% match

Loading thumbnail…

Fork of Javascript Function

This example demonstrates three distinct ways to define JavaScript functions by computing and logging the squares of numbers 4, 5, and 6 to the console. The page uses standard HTML with embedded CSS for styling and a script block containing the code. It starts with a classic function declaration, then shows a function expression assigned to a variable, and finally an arrow function, illustrating the syntax evolution. The rendering is plain text within a styled div, with all output going to the browser’s developer console rather than the page itself.

NNita

60% match