JavaScript Definitions I

Introduction

JavaScript Definitions I

Contents

  1. Call by Value vs Call by Reference
  2. Arguments and Parameters
  3. Execution Context
  4. Hoisting
  5. Stack overflow & Memory leaks

1. Call by value vs Call by reference

Call by value, a copy of the variable is passed whereas in Call by reference, a variable itself is passed. In Call by value, actual and formal arguments will be created in different memory locations whereas in Call by reference, actual and formal arguments will be created in the same memory location.

2. Arguments and Parameters

When The function is invoked, the arguments are the data you pass into the function’s parameters.

The argument is referred to as the values that are passed within a function when the function is called. The parameter is referred to as the variables that are defined during a function declaration or definition.

function sum(a, b) {
  return a + b;
}

sum(3, 5);

a, b inside function sum( ) are parameters

3, 5 inside sum ( ) are arguments.

3. Execution Context

If JavaScript engine sees function. It is going to create an execution context.

JavaScript engine is going to create a global execution context first and execute the code.

with empty JavaScript file, we have this keyword and we have Global Object. using this keyword we can also access global object.

* In browers, Global Object is window.

Global Execution Context

4. Hoisting

Hoisting is the behavior of moving the variables or function declarations to the top of their respective environments during creation phase.

Variables are partially hoisted and functions are fully hoisted.

Hoisting

console.log("What is hoisting?");
console.log(name);
console.log(hoisting());
var name = "Kai";
function hoisting() {
 console.log("It is defined");
}

// Result
What is hoisting?
undefined
It is defined
  • var variable is partially hoisted.
  • hoisting() function is fully hoisted.

During creation phase in JavaScript engine is going to look through the code and it sees two thing either var, function keywords, and it is going to allocate memory for variables and functions. Thus, the JavaScript engine when an execution phase knows that name is a variable which is not declared when it is called. So, it gives us undefined.

However, const, let keywords for JavaScript do not get hoisted.

In most languages where there is not hoisting. with hoisting, the JavaScript engine allocate some memory for us.

More examples

Function expression with var hoisting

console.log(hoisting())

var hoisting = function(){
 console.log("It is defined");
}
TypeError: hoisting is not a function
  • why? This is Error undefined is not a function.
console.log(hoisting)

var hoisting = function(){
 console.log("It is defined");
}
undefined

Same function name with hoisting

a()
function a(){
 console.log("1");
}
function a(){
 console.log("2");
}
2

During hoisting, first function a() is put in memory and replace the function a() in memory to next function a().

Hoisting happens in every execution context

var favoriteFood = "grapes";
var foodThoughts = function(){
  console.log("original: " + favoriteFood);
  var favoriteFood = "Sushi";
  console.log("new: " + favoriteFood);
}
foodThoughts()
original: undefined
new: Sushi

This is confusing. you should avoid hoisting by using const and let keywords.

5. Stack overflow & Memory leaks

Stack overflow when we keep calling functions nested inside of each other and over and over. It happens with Recursion or a lot of functions nested inside of each other.

function inception(){
 inception()
}

If I call inception()

  • Maximum call stack size exceeded.

Memory leak Filled up our memory heap with more and more data.

let array = [];
for (let i=5; i > 2; i++) {
   array.push(i)
}

If the script is run

There are three common memory leak that happen.

  1. Global variable: Hypothetically, while we keep adding variables to the environment, we need more and more memory heap.
  2. Event listeners: Add event listeners and if you never remove them.
  3. SetInterval
setInterval(() => {
  referencing objects
}
  • The objects will never be collected by the Garbage Collector.

Leave a Reply

Your email address will not be published.

ANOTE.DEV