What New JavaScript Developers Need to Master 🥋

Developers new to JavaScript need to master (1) scope, (2) closure and (3) asynchronous functions. If these three concepts are misunderstood, it can lead to unexpected behavior and unstable code. Developers I have mentored or worked with coming from developing C++ or from no programming experience have all lost productivity to these topics. Whether you are writing spaghetti jQuery code, frontends built with React.js, or Node.js servers, these are helpful starting points for understanding JavaScript.

Below, I'll go over these concepts with some examples that I hope will clear things up.

Closure and Scope

1. Closures

In JavaScript, a closure is created by declaring a function. It is a way to encapsulate data and logic with a specific responsibility.

var jsClosure = function() {
  // Everything in here is inside a closure
}

or

function jsClosure() {
  // Everything in here is inside a closure
}

2. Scope

When a closure is created, it also comes with an accompanying scope. Through scopes, variables specific to the function (closure) are encapsulated. There are two types of scope -- (a) global which is accessible everywhere in the code and (b) local which is only accessible within a specific closure.

Common errors arise when some variable is being accessed in the wrong scope, resulting in an undefined variable error.

/* 
  Open a JavaScript console and execute each part of the code below in 
  your browser JavaScript console to see it in action (On Windows and 
  Linux: Ctrl + Shift + J. On Mac: Cmd + Option + J).
*/

var globalVariable = "Hi, I'm global and could be accessed anywhere"
function jsClosure() {
  var localVariable = "Hi, I'm local to jsClosure()"

  console.log(
    "Global variables are accessible in jsClosure() and everywhere",
    globalVariable
  )
}
console.log(
   "I am local to jsClosure() and will not be accessible outside of my
   scope. Executing this will actually not work at all and lead to
   an error", 
   localVariable
)

To elaborate further, closures and scopes can be nested.

var globalVariable = "Hi, I'm global and can be accessed anywhere"
function jsClosure() {
  var localVariable = "Hi, I'm local to jsClosure()"

  console.log(
    "I am global so I am accessible in jsClosure() and everywhere",
    globalVariable
  )
  function jsInnerClosure() {
    var innerLocalVariable = "Hi, I'm local to jsInnerClosure()"

    console.log(
      "Globally accessible variables can be accessed here and
       everywhere",
       globalVariable
    )
    console.log(
      "Variables defined in the outer scope are also accessible
       in here. In this case localVariable", 
       localVariable
    )
   }
}

Asynchronous behavior

A major benefit to JavaScript is the asynchronous functionality built into the language. This allows us to write code that is “non-blocking” which is crucial for user experience when some piece of code can take an indefinite amount of time to execute.

Below is an example of how we asynchronously fetch transactions for my PAN 🍳 tokens that do not block the execution of the next console.log.

console.log("I am going to print 1st")
fetch("https://api-ropsten.etherscan.io/api?module=account&action=tokentx&contractaddress=0x3723268a20af802e37958ea2b37e2ba8ffc9cf17&page=1&offset=100&sort=asc")
  .then(function(response) {
    return response.json()
  })
  .then(function(panTransactions) {
    console.log(
      "I will not print 2nd because I am asynchronous and will print
       3rd after I am done processing",
      panTransactions
    )
  })
console.log("Although I am 3rd to execute, I will print 2nd")

Conclusion

If you are going to program in JavaScript, understanding Closure and Scope and Asynchronous will be helpful for writing effective code.

Related Content

• scope
• closure
• asynchrony

If you found this content useful and like to get updates on new content, follow me on Twitter @itspanw.