Added Content to Array But It’s Still Empty

Question

My code

const upperCase = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
const lowerCase = 'qwertyuiopasdfghjklzxcvbnm'.split('');
const numbers = '1234567890'.split('');
const symbols = '@#£&*()\'"%-+=/;:,.€$¥_^[]{}§|~…\\<>!?'.split('');
var exclude = [];
var fullList = [];
var allowUpperCase = true;
var allowLowerCase = true;
var allowSymbols = true;
var allowNumbers = true;

function genList() {
    if (allowUpperCase) {
        fullList.concat(upperCase);
    }
    if (allowLowerCase) {
        fullList.concat(lowerCase);
    }
    if (allowSymbols) {
        fullList.concat(symbols);
    }
    if (allowNumbers){
      fullList.concat(numbers)
    }
}

genList();
console.log(fullList);

What it is suppose to do: Basically to check if the user want those characters and then add them to the “fullList” array

But then when I do genList and console.log(fullList) it appears to be empty []

Why?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Array concat method does not modify the current array but returns a new one. Modify the method like this & it will work.

function genList() {
    if (allowUpperCase) {
        fullList = fullList.concat(upperCase);
    }
    if (allowLowerCase) {
        fullList = fullList.concat(lowerCase);
    }
    if (allowSymbols) {
        fullList = fullList.concat(symbols);
    }
    if (allowNumbers){
        fullList = fullList.concat(numbers)
    }
}

Answer 2

Array method concat (see MDN Web Docs) does not change original array, it returns a new array.

const upperCase = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
const lowerCase = 'qwertyuiopasdfghjklzxcvbnm'.split('');
const numbers = '1234567890'.split('');
const symbols = '@#£&*()\'"%-+=/;:,.€$¥_^[]{}§|~…\\<>!?'.split('');
var exclude = [];
var fullList = [];
var allowUpperCase = true;
var allowLowerCase = true;
var allowSymbols = true;
var allowNumbers = true;

function genList() {
    if (allowUpperCase) {
        fullList = fullList.concat(upperCase);
    }
    if (allowLowerCase) {
        fullList = fullList.concat(lowerCase);
    }
    if (allowSymbols) {
        fullList = fullList.concat(symbols);
    }
    if (allowNumbers){
        fullList = fullList.concat(numbers);
    }
    console.log(fullList);
}

genList();

Answer 3

Since you are looking to mutate the fullList array you can use Array#push() and spread the passed array instead of using Array#concat().

This avoids creating a new array on each condition match and simply extends the existing array.

const upperCase = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
const lowerCase = 'qwertyuiopasdfghjklzxcvbnm'.split('');
const numbers = '1234567890'.split('');
const symbols = '@#£&*()\'"%-+=/;:,.€$¥_^[]{}§|~…\\<>!?'.split('');
var exclude = [];
var fullList = [];
var allowUpperCase = true;
var allowLowerCase = true;
var allowSymbols = true;
var allowNumbers = true;

function genList() {
  if (allowUpperCase) {
    fullList.push(...upperCase);
  }
  if (allowLowerCase) {
    fullList.push(...lowerCase);
  }
  if (allowSymbols) {
    fullList.push(...symbols);
  }
  if (allowNumbers) {
    fullList.push(...numbers)
  }
}

genList();
console.log(fullList.join(', '));