JavaScript - Scope, Functions, Type Conversion

Functions in JavaScript

A function in JavaScript is a reusable block of code designed to perform a specific task. Functions help organize code, avoid repetition, and make programs modular and easier to maintain. A function executes when it is invoked (called) in the program

Declaring a Function

The most common way to declare a function is using the function keyword:

function functionName(parameter1, parameter2) {
  // code to be executed
  return result;
}

  • functionName: The name you give the function.

  • parameter1, parameter2: Input values (parameters) the function expects.

  • return: Sends a value back to where the function was called (optional)

Example:

function add(a, b) {
  return a + b;
}
let sum = add(2, 3); // sum is 5

Function Parameters and Arguments

  • Parameters are variables listed in the function definition.

  • Arguments are the actual values passed to the function when it is called.

  • Inside the function, parameters behave as local variables

Calling a Function

A function is executed when it is "invoked" by its name, followed by parentheses and any required arguments:

add(5, 7); // returns 12

Function Expressions and Arrow Functions

Functions can also be defined as expressions and assigned to variables:

const multiply = function(x, y) {
  return x * y;
};

Arrow functions offer a shorter syntax:

const multiply = (x, y) => x * y;

Arrow functions are especially useful for concise, one-line functions and cannot be used as constructors

Function Constructor

Functions can be created using the Function constructor, though this is less common:

const sum = new Function('a', 'b', 'return a + b');

This approach is generally discouraged in favor of function declarations and expressions

Returning Values

A function can return a value using the return statement. If no return is specified, the function returns undefined by default

Anonymous Functions

Functions without a name are called anonymous functions. They are often used as arguments to other functions or assigned to variables

Function Methods

JavaScript provides several methods for functions:

  • call() and apply(): Invoke a function with a given this value and arguments.

  • bind(): Creates a new function with a specified this value.

  • toString(): Returns the function as a string

Summary Table

Feature
Description
Example

Declaration

Named, reusable code block

function greet() { ... }

Expression

Assigned to variable, can be anonymous

const fn = function() { ... }

Arrow Function

Short syntax, always anonymous

const fn = () => { ... }

Parameters

Input variables

function sum(a, b)

Arguments

Actual values passed to function

sum(2, 3)

Return Value

Value sent back by function

return a + b;

The this Keyword in JavaScript

The this keyword in JavaScript is a special reference that points to the object that is currently executing the function or code block. The value of this depends on how and where a function is invoked, not how or where it is defined

How this Works in Different Contexts

Context

What this Refers To

Global scope (non-strict mode)

The global object (window in browsers)

Function (non-strict mode)

The global object

Function (strict mode)

undefined

Object method

The object the method is called on

Constructor function

The new object being created

Event handler

The DOM element that received the event

Arrow function

Inherits this from the enclosing (lexical) scope

Using call, apply, bind

The explicitly specified object

Examples

1. Global Scope

console.log(this); // In browser: window

In the global context, this refers to the global object

2. Inside a Regular Function

function show() {
  console.log(this);
}
show(); // In browser: window (non-strict mode)

Here, this is the global object (or undefined in strict mode)

3. As an Object Method

const person = {
  name: "Alice",
  greet: function() {
    console.log(this.name);
  }
};
person.greet(); // "Alice"

Within an object method, this refers to the object itself

4. In a Constructor Function

function Car(brand) {
  this.brand = brand;
}
const myCar = new Car("Toyota");
console.log(myCar.brand); // "Toyota"

Here, this refers to the newly created object

5. In Event Handlers

button.onclick = function() {
  console.log(this); // The button element
}

In event handlers, this refers to the DOM element that received the event

6. Arrow Functions

const obj = {
  value: 42,
  show: () => {
    console.log(this.value);
  }
};
obj.show(); // `this` does NOT refer to `obj`, but to the enclosing scope

Arrow functions do not have their own this; they inherit it from the outer (lexical) scope

7. Explicit Binding

function show() {
  console.log(this.name);
}
const user = { name: "Bob" };
show.call(user); // "Bob"

Methods like call, apply, and bind can explicitly set the value of this

Summary

  • The value of this is determined by how a function is called, not where it is defined.

  • It is used for accessing properties and methods of the object that is currently executing the function.

  • Arrow functions inherit this from their enclosing context, while regular functions’ this depends on the call site6.

  • Understanding this is crucial for writing correct and maintainable JavaScript code

Variable Scope in JavaScript

JavaScript does not have built-in keywords for public, private, privileged, or static variables as seen in some other languages (like Java or C++), but these concepts can be implemented using JavaScript's scope rules, closures, and ES6 class features.

Public Variables

  • Definition: Variables that are accessible from anywhere the object or function is accessible.

  • How to Implement: In objects or classes, properties assigned with this are public.

    function Person(name) {
  this.name = name; // public
}
const p = new Person('Alice');
console.log(p.name); // Accessible

  • Scope: Global, function, or block, depending on where declared

Private Variables

  • Definition: Variables that are not accessible from outside the function or object where they are defined.

  • How to Implement:

    • Closure: Declare variables with var, let, or const inside a function, but do not attach them to this.

      function Person(name) {
  let age = 30; // private
  this.name = name; // public
  this.getAge = function() { return age; }; // privileged
}
const p = new Person('Alice');
console.log(p.name); // Accessible
console.log(p.age); // Undefined (private)

    • ES2022 Private Fields: Use # prefix in classes.

      class Person {
  #age = 30; // private
  constructor(name) {
    this.name = name;
  }
  getAge() { return this.#age; }
}

  • Scope: Only accessible within the function or class where defined

Privileged Variables/Methods

  • Definition: Methods that are public but have access to private variables via closure.

  • How to Implement: Define a method inside the constructor that accesses private variables.

    function Person(name) {
  let age = 30; // private
  this.name = name; // public
  this.getAge = function() { return age; }; // privileged
}

  • Scope: Publicly accessible, but can access private data.

Static Variables

  • Definition: Variables that are shared among all instances of a class or constructor function, not tied to any one instance.

  • How to Implement:

    • Function/Constructor: Attach to the function itself.

      function Person(name) {
  this.name = name;
}
Person.count = 0; // static

    • ES6 Classes: Use the static keyword.

      class Person {
  static count = 0; // static
  constructor(name) {
    this.name = name;
    Person.count++;
  }
}

  • Scope: Belongs to the class or constructor, not to instances.

Summary Table

Type
How to Declare/Access
Scope/Visibility

Public

this.variable or class field

Accessible everywhere the object is accessible

Private

Closure variable or #field in class

Only within function/class

Privileged

Method accessing closure/private field

Public method, accesses private data

Static

Class.staticVar or Constructor.staticVar

Shared across all instances, accessed via class/constructor

In summary:

  • Public: Accessible everywhere.

  • Private: Accessible only inside the function/class.

  • Privileged: Public methods with access to private variables.

  • Static: Shared across all instances, accessed via the class or constructor.

Try Catch Finally in JavaScript

The try...catch...finally statement in JavaScript is used for error handling. It allows you to test a block of code for errors, handle those errors gracefully, and execute code regardless of whether an error occurred.

How It Works

  • try: The code that may throw an error is placed inside the try block.

  • catch: If an error occurs in the try block, control moves to the catch block, where you can handle the error.

  • finally: The finally block always executes after the try and catch blocks, whether an error occurred or not. This is useful for cleanup code, like closing files or releasing resources.

Syntax

try {
  // Code that may throw an error
} catch (error) {
  // Code to handle the error
} finally {
  // Code that always runs
}

Both catch and finally are optional, but at least one must be present

Example

let result = 0;

try {
  result = add(10, 20); // add is not defined, will throw an error
} catch (e) {
  console.log(e.message); // Output: add is not defined
} finally {
  console.log({ result }); // Output: { result: 0 }
}

In this example:

  • The try block attempts to call a function add that does not exist, causing an error.

  • The catch block logs the error message.

  • The finally block logs the result variable, which is always executed, regardless of the error

Another Example (No Error)

const add = (x, y) => x + y;
let result = 0;

try {
  result = add(10, 20);
} catch (e) {
  console.log(e.message);
} finally {
  console.log({ result }); // Output: { result: 30 }
}

Here, since add is defined, no error occurs, and the finally block still runs2.

Key Points

  • The finally block always executes, even if the try or catch blocks contain a return statement

  • Use the finally block for cleanup actions that must run regardless of success or error.

  • You can nest try...catch blocks for more complex error handling

Summary Table

Block
Purpose
Runs When?

try

Code that may throw an error

Always (first)

catch

Handle errors from try block

If an error occurs in try

finally

Cleanup or final code

Always, after try/catch

PreviousNative JavaScript - Data Structures

Last updated