If array contains different type elements, how to pick the same type elements and create new array with it?

Question

Hi! So I want to get the following result: enter image description here

and here's the js function that i wrote. The problem is that the output of my function is null.

function dataTypeArray(arr, type){
    for(i=0; i<=arr.length-1; i++)
    var string = [];
    var number = [];
    var boolean = [];
    var i;
    if(type = 'string' && typeof arr[i] == 'string'){
        string.push(arr[i]);
    } else {
        if(type = 'number' && typeof arr[i] == 'number'){
            number.push(arr[i]);
        } else {
            if(type = 'boolean' && typeof arr[i] == 'boolean'){
                boolean.push(arr[i]);
            } else { 
                return 'null';
            }}} 
        return string, number, boolean;}


var arr = ['hhg', 'fthth', 456, true];
console.log(dataTypeArray(arr, 'string'));

Answer 1

I'd suggest using Array.prototype.filter.

var arr = ['hhg', 'fthth', 456, true];
var strings = arr.filter(x => typeof x === 'string');
var numbers = arr.filter(x => typeof x === 'number');
var booleans = arr.filter(x => typeof x === 'boolean');

Answer 2

Rajesh has already listed in their comment what is going wrong in your current code. I'd recommend you to move to modern JavaScript, the task becomes quite easy:

function getTypeMap(arr) {
  const typeMap = {};
  for (const val of arr) {
    const key = `${typeof val}s`;
    typeMap[key]?.push(val) ?? (typeMap[key] = [val]);
  }
  return typeMap;
}

const exampleArr = [0, 'a', 1, 'b', true, 2, false],
  {booleans, numbers, strings} = getTypeMap(exampleArr);

console.log(booleans, numbers, strings);

As said, you can't return multiple values from a function. Here we create an object with keys by types of the values in the array, and return the object. In the loop, the code checks whether a property named by the type of the value exists using optional chaining operator (s is added at the end of the type because you can't create variables named function and undefined). If the operator returns undefined we'll create a new array with the current value in the first index (see nullish coalescing operator), otherwise we just push a new value to the type array.

Properties from the returned object are then assigned to variables using destructuring assignment ({booleans, numbers, strings} = ...). This way you can get any array of the types, just pick those you need when destructuring the returned object to the variables, or store the returned object to a variable, and use its properties where needed.

If you need more accurate type than typeof operator can return, you can do something like at this jsFiddle.

Answer 3

One possible generic approach could be based on reduce and this method's 2nd initialValue parameter which will be passed to (and continued being passed around by) the reducer function.

This reducer is implemented around the initially passed object which features both a result object where the final result gets aggregated and a detection property which is a fully customizable key value based configuration of type detection functions.

Thus one implements the reducer once and then configures its usage at will.

function detectAndCollectType({ detection, result }, type) {
  const isAnyMatch = Object

    .entries(detection)
    .some(([ key, isType ]) => {
      const doesMatch = isType(type);
      if (doesMatch) {

        (result[key] ??= []).push(type);
      }
      return doesMatch;
    });

  if (!isAnyMatch) {
    (result.unhandled ??= []).push(type);
  }
  return { detection, result };
}

// 1st usage example.
const { result } = [null, void 0, 0, 'a', 1, 'b', true, 2, false, new Date]
  .reduce(detectAndCollectType, {
    detection: {
      boolean: val => 'boolean' === typeof val,
      number: val => 'number' === typeof val,
      string: val => 'string' === typeof val,
    },
    result: {},
  });

console.log({ result });

// 2nd usage example.
const { result: {

  nullish,
  boolean,
  number,
  string,
  date,
  
}} = [null, void 0, 0, 'a', 1, 'b', true, 2, false, new Date]

  .reduce(detectAndCollectType, {
    detection: {
      nullish: val => (val ?? null) === null,
      boolean: val => 'boolean' === typeof val,
      number: val => 'number' === typeof val,
      string: val => 'string' === typeof val,
      date: val => '[object Date]' === Object.prototype.toString.call(val),
    },
    result: {},
  });

console.log({
  nullish,
  boolean,
  number,
  string,
  date,
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

Edit ... in order to reflect the discussion with @Teemu

As it has been discussed in the comments below, there is another generic reduce based approach which is more strict in terms of type detection due to its straightforward implementation which extracts a type's (internal) class name and collects any array item accordingly.

Here everything depends on a proper type detection which is a very specific field on its own.

// helper function for exposing a value's (internal) class name.
function getClassName(value) {
  const regXClassName =
    // ... [https://regex101.com/r/flUvPh/1]
    (/class\s+(?<customName>[^\s{]+)(?:\s+extends\s+\S+)?\s*\{|function\s+(?<builtInName>[^\s(]+)\s*\(/);

  let customName, builtInName;
  if ((value ?? null) !== null) {

    ({ customName, builtInName } = regXClassName
      .exec(String(Object.getPrototypeOf(value).constructor)).groups ?? {});
  }
  return customName || builtInName || (/\[object\s+(?<className>[^\]]+)\]/)
    .exec(Object.prototype.toString.call(value))
    ?.groups.className;
}
// the above helper is part of the following SO answer
// ... [https://stackoverflow.com/questions/73421732/how-to-know-what-class-inheritance-is-object-from-database/73775470#73775470]


function detectAndCollectTypeByItsClassName(result, type) {
  const key = getClassName(type)
    // first character to lower case.
    .replace(/./, match => match.toLowerCase());

  (result[key] ??= []).push(type);

  return result;
}


console.log(
  ['hhg', 'fthth', 456, true]
    .reduce(detectAndCollectTypeByItsClassName, {})
);
class CustomDate extends Date {}

console.log(
  [null, void 0, 0, 'a', 1, 'b', true, 2, null, false, new Date, new CustomDate]
    .reduce(detectAndCollectTypeByItsClassName, {})
);

.as-console-wrapper { min-height: 100%!important; top: 0; }