Understanding the concept of callbacks and scopes

Question

Understanding the concept of callbacks and scopes

While experimenting with the concept of callbacks, I encountered a scenario where I wanted to confirm that my understanding of the situation was correct.

function greet(callback) { // 'greet' function utilizes a callback
  var greeting = "hi";     // 'greeting' variable is defined within the scope
  callback()               // 'callback' function is called 
}

greet(
function() {
  console.log(greeting)
}); 

//Console does not display anything

It's quite interesting. One would expect the callback() to reference its immediate scope and access the 'greeting' variable. However, when I move the definition of the 'greeting' variable to the global execution context, then it works as expected.

var greeting = 'hi'        // 'greeting' variable is defined globally

function greet(callback) { // 'greet' function takes a callback    
  callback()               // 'callback' function is invoked 
}

greet(
function() {
  console.log(greeting)
}); 

//Console logs: 'hi'

Could this be because the callback() function that logs the variable is actually declared in the global context? Therefore, rather than searching inside greet(), it directly looks in the global environment due to its declaration.

I just wanted to ensure that I correctly comprehend what's happening here, instead of facing some unexpected scope or block-related issue.

javascript

Answer 1

Answer №1

It is true that the function has access to the scope in which it is defined.

An example of this concept would be:

var message = 'hello';

function sayHello(callback) {
    callback();
}

function logMessage() {
    console.log(message);
}

sayHello(logMessage);

Here, logMessage can access message because they are in the same or higher scope level.

However, if we were to move message inside the sayHello function:

function sayHello(callback) {
    var message = 'hello';
    callback();
}

function logMessage() {
    console.log(message);
}

sayHello(logMessage);

In this case, logMessage cannot access message as it is now in a different scope altogether.

The scope that logMessage can reach is where it is defined, not where it is called from. So, the scope is determined at the time of definition rather than invocation.

Answer 2

It is true that the function has access to the scope in which it is defined.

An example of this concept would be:

var message = 'hello';

function sayHello(callback) {
    callback();
}

function logMessage() {
    console.log(message);
}

sayHello(logMessage);

Here, logMessage can access message because they are in the same or higher scope level.

However, if we were to move message inside the sayHello function:

function sayHello(callback) {
    var message = 'hello';
    callback();
}

function logMessage() {
    console.log(message);
}

sayHello(logMessage);

In this case, logMessage cannot access message as it is now in a different scope altogether.

The scope that logMessage can reach is where it is defined, not where it is called from. So, the scope is determined at the time of definition rather than invocation.

Answer 3

Answer №2

Lexical scope in JavaScript refers to how the language handles scope, as opposed to dynamic scope. Simply put, lexical scope determines the context based on where variables and functions are defined, while dynamic scope is determined by where they are called.

If your first example were to follow dynamic scope, it would behave differently than you expected.

To delve deeper into this topic, check out the "Lexical scope vs. dynamic scope" section.

Learn more about scope in computer science here

Answer 4

Lexical scope in JavaScript refers to how the language handles scope, as opposed to dynamic scope. Simply put, lexical scope determines the context based on where variables and functions are defined, while dynamic scope is determined by where they are called.

If your first example were to follow dynamic scope, it would behave differently than you expected.

To delve deeper into this topic, check out the "Lexical scope vs. dynamic scope" section.

Learn more about scope in computer science here

Answer 5

Answer №3

In Javascript, the concept of Static Scoping is used.

To summarize; Variables are resolved based on their position in the source code.

The variable greeting is only accessible within the closure of the greet function. Any code outside this closure cannot access the greeting variable.

function greet(callback) { // 'greet' function with a callback
  var greeting = "hi";     // defining 'greeting' variable in this scope
  callback()               // invoking the 'callback' function 
}

greet(function() {
  console.log(greeting)
});

In this case, the greeting variable is defined in a scope that can be reached by nested closures of both the greet function and the anonymous function passed to the console.log call.

var greeting = 'hi'        // setting 'greeting' variable globally

function greet(callback) { // 'greet' function with a callback    
  callback()               // invoking the 'callback' function 
}

greet(function() {
  console.log(greeting)
});

NOTE: The this keyword follows different rules.

Answer 6

In Javascript, the concept of Static Scoping is used.

To summarize; Variables are resolved based on their position in the source code.

The variable greeting is only accessible within the closure of the greet function. Any code outside this closure cannot access the greeting variable.

function greet(callback) { // 'greet' function with a callback
  var greeting = "hi";     // defining 'greeting' variable in this scope
  callback()               // invoking the 'callback' function 
}

greet(function() {
  console.log(greeting)
});

In this case, the greeting variable is defined in a scope that can be reached by nested closures of both the greet function and the anonymous function passed to the console.log call.

var greeting = 'hi'        // setting 'greeting' variable globally

function greet(callback) { // 'greet' function with a callback    
  callback()               // invoking the 'callback' function 
}

greet(function() {
  console.log(greeting)
});

NOTE: The this keyword follows different rules.

Understanding the concept of callbacks and scopes

Answer №1

Answer №2

Answer №3

Similar questions

Embedding an Iframe in Angular 2 directly from the database

Mastering the use of gl Scissor is essential for effectively implementing popups in your

What is causing these dynamic carousels to malfunction in Chrome?

Is it possible to create a functionality in Google Sheets where a cell, when modified, automatically displays the date of the edit next to it? This could be achieved using a Google

Do you need to finish the Subject when implementing the takeUntil approach to unsubscribing from Observables?

Listen for a click event on an Unordered List using addEventListener

How to create a blinking effect for buttons in an Angular app with ng-if or ng-show

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

"Enhance your web development skills by mastering jQuery alongside the

Update the text using JavaScript to modify the price range dropdown when the user clicks away

Click on an element using jQuery to apply a specific class to all other similar

Unable to assign the value 'hello' to an undefined property in TypeScript

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

Guide to appending the chosen item from a search bar to a fresh array using vue3 js

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

Tips for resolving the trigger problem with onChange in the PinInput Component of chakra-ui

Personalize your message in a JavaScript alert using Bootstrap notifications

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

What are the ways in which the "npm install <module>" command can be utilized in the creation of web pages for browsers?

What is the reason for the inability to access a global variable type variable outside of the $.each function when used within the $