Functions in JavaScript

Functions serve as the fundamental building blocks in JavaScript, enabling code reuse and modularity. Unlike in languages with interfaces, functions themselves are first-class citizens—they can be assigned to variables, past as arguments, and returned from other functions.

// Basic function declaration
function multiply(x, y) {
  return x * y;
}

// Function as a variable
const calculateArea = function(width, height) {
  return width * height;
};

// Arrow function syntax
const greet = (name) => {
  return `Hello, ${name}`;
};

console.log(multiply(4, 5));      // 20
console.log(calculateArea(3, 6)); // 18
console.log(greet("Alice"));      // Hello, Alice

Interfaces in TypeScript

Interfaces exist primarily in TypeScript, a statically-typed superset of JavaScript. They define the structure that objects must follow, serving as contracts that classes can implement.

interface Animal {
  name: string;
  age: number;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  makeSound(): void {
    console.log("Woof! Woof!");
  }
}

const myDog: Animal = new Dog("Buddy", 3);
myDog.makeSound(); // Woof! Woof!

Key Differences

Aspect	Functions	Interfaces
Definition	Created with function keyword or arrow syntax	Defined with interface keyword in TypeScript
Purpose	Execute specific operations and return values	Define object shapes and contracts
Invocation	Called directly with arguments	Accessed through objects implementing them
Type System	Dynamic typing in JavaScript	Static type checking in TypeScript

Comparing Abstraction Levels

Both functions and interfaces provide abstraction mechanisms, but they operate differently:

• Functions abstract behavior into callable units with parameters and return values
• Interfaces abstract structure by describing what properties and methods an object must contain

// Function using an interface as a parameter type
interface Config {
  timeout: number;
  debug: boolean;
}

function initialize(settings: Config): void {
  if (settings.debug) {
    console.log(`Starting with ${settings.timeout}ms timeout`);
  }
}

initialize({ timeout: 5000, debug: true });

Practical Use Cases

When to use functions:

• Performing calculations or data transformations
• Handling events and callbacks
• Encapsulating reusable business logic

When to use interfaces:

• Defining API contracts between components
• Ensuring type safety across different modules
• Establishing common patterns for related classes

Hybrid Approach with TypeScript

TypeScript allows combining both concepts effectively:

interface Formatter {
  (input: string): string;
}

const uppercaseFormatter: Formatter = (input) => {
  return input.toUpperCase();
};

const reverseFormatter: Formatter = (input) => {
  return input.split('').reverse().join('');
};


function applyFormat(text: string, formatter: Formatter): string {
  return formatter(text);
}

console.log(applyFormat("hello", uppercaseFormatter)); // HELLO
console.log(applyFormat("hello", reverseFormatter));  // olleh

This example demonstrates how interfaces can describe function signatures, bridging the gap between structural typing and functional programming patterns.