How can I differentiate an unknown parameter between an object and an array in TypeScript?

In TypeScript, differentiating between an object and an array when dealing with an unknown parameter can be achieved through several methods. Each method has its own use case and considerations. Here are a few common approaches:

1. Using `Array.isArray()`:

- The `Array.isArray()` method is a straightforward way to check if a value is an array. This is generally the preferred method if you primarily want to know if it's an array or not.

- Example:

function processData(data: unknown) {
  if (Array.isArray(data)) {
    // Handle array logic here
    console.log("It's an array:", data);
  } else {
    // Handle object logic here
    console.log("It's an object:", data);
  }
}

processData([1, 2, 3]); // Output: It's an array: [1, 2, 3]
processData({ name: 'John', age: 30 }); // Output: It's an object: { name: 'John', age: 30 }

2. Using Type Guards:

- Type guards allow you to narrow down the type of a variable within a conditional block. You can create custom type guards to check for specific properties or characteristics of arrays or objects.

- Example:

function isArray(value: unknown): value is any[] {
  return Array.isArray(value);
}

function isObject(value: unknown): value is Record {
  return typeof value === 'object' && value !== null && !isArray(value);
}

function processData(data: unknown) {
  if (isArray(data)) {
    console.log("It's an array:", data);
  } else if (isObject(data)) {
    console.log("It's an object:", data);
  } else {
    console.log("It's neither an array nor an object.");
  }
}

processData([1, 2, 3]); // Output: It's an array: [1, 2, 3]
processData({ name: 'John', age: 30 }); // Output: It's an object: { name: 'John', age: 30 }
processData("Hello"); // Output: It's neither an array nor an object.

3. Using `typeof` and Checking for Properties:

- While `typeof` can help identify primitives, it's less reliable for differentiating objects from arrays since `typeof` for both arrays and objects will return `"object"`. You can combine it with property checking to make a more informed decision.

- Example:

function processData(data: unknown) {
  if (typeof data === 'object' && data !== null) {
    if (Array.isArray(data)) {
      console.log("It's an array:", data);
    } else {
      console.log("It's an object:", data);
    }
  } else {
    console.log("It's not an object or array.");
  }
}

processData([1, 2, 3]); // Output: It's an array: [1, 2, 3]
processData({ name: 'John', age: 30 }); // Output: It's an object: { name: 'John', age: 30 }
processData("Hello"); // Output: It's not an object or array.

4. Using `instanceof`:

- `instanceof` can be used to check if an object is an instance of a particular class or constructor function. For arrays, you can check if it's an instance of `Array`.

- Example:

function processData(data: unknown) {
  if (data instanceof Array) {
    console.log("It's an array:", data);
  } else if (typeof data === 'object' && data !== null) {
    console.log("It's an object:", data);
  } else {
    console.log("It's neither an array nor an object.");
  }
}

processData([1, 2, 3]); // Output: It's an array: [1, 2, 3]
processData({ name: 'John', age: 30 }); // Output: It's an object: { name: 'John', age: 30 }
processData("Hello"); // Output: It's neither an array nor an object.

5. Duck Typing (Property Detection):

- Duck typing involves checking for the presence of specific properties or methods that distinguish an array from an object. For example, arrays have a `length` property and typically numeric indices.

- Example:

function processData(data: unknown) {
  if (typeof data === 'object' && data !== null && typeof (data as any).length === 'number') {
    console.log("It's likely an array:", data);
  } else if (typeof data === 'object' && data !== null) {
    console.log("It's an object:", data);
  } else {
    console.log("It's neither an array nor an object.");
  }
}

processData([1, 2, 3]); // Output: It's likely an array: [1, 2, 3]
processData({ name: 'John', age: 30 }); // Output: It's an object: { name: 'John', age: 30 }
processData("Hello"); // Output: It's neither an array nor an object.

Choosing the right approach depends on your specific needs. If you need a simple check, `Array.isArray()` is often sufficient. For more complex scenarios, type guards or property detection might be necessary.

Learn more about this