Converting array to phone number string in JavaScript

To convert an array to a phone number string in JavaScript can be done by formatting the array elements into the desired phone number pattern.

Following are the steps to learn how to convert array to phone number string in Javascript ?

• Ensure that the array has the correct number of elements (usually 10 for a standard phone number).
• Join the elements of the array into a single string.
• Format the string into the desired phone number pattern, such as (XXX) XXX-XXXX.

Let us understand through some sample example of I/O Scenario ?

Sample Input:

const arr = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];

Sample Output:

(987) 654-3210

Basic Array to Phone Number Conversion

The most straightforward approach is to validate the array length, join the elements, and format using string slicing:

function arrayToPhoneNumber(arr) {
   if (arr.length !== 10) {
      return "Invalid input: Array must contain exactly 10 elements.";
   }
   const str = arr.join('');
   return `(${str.slice(0, 3)}) ${str.slice(3, 6)}-${str.slice(6, 10)}`;
}

const phoneArray = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
const phoneNumber = arrayToPhoneNumber(phoneArray);
console.log(phoneNumber);

(987) 654-3210

Handling Different Array Lengths

This enhanced version handles arrays of different lengths by padding with zeros or truncating as needed:

function arrayToPhoneNumber(arr) {
   // Convert to string and pad or truncate to 10 digits
   const digits = arr.join('').replace(/\D/g, ''); // Remove non-digits
   const normalizedDigits = digits.padStart(10, '0').slice(0, 10);
   
   return `(${normalizedDigits.slice(0, 3)}) ${normalizedDigits.slice(3, 6)}-${normalizedDigits.slice(6, 10)}`;
}

// Test with different lengths
console.log(arrayToPhoneNumber([1, 2, 3, 4, 5, 6, 7])); // Short array
console.log(arrayToPhoneNumber([9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 9, 8])); // Long array

(000) 123-4567
(987) 654-3210

Handling Edge Cases with Validation

This robust version validates input types and handles null/undefined values:

function arrayToPhoneNumber(arr) {
   if (!Array.isArray(arr) || arr.length !== 10 || !arr.every(num => !isNaN(num) && num !== null && num !== undefined)) {
      return "Invalid input: Array must contain exactly 10 valid digits";
   }
   const str = arr.join('');
   return `(${str.slice(0, 3)}) ${str.slice(3, 6)}-${str.slice(6, 10)}`;
}

// Test with invalid inputs
console.log(arrayToPhoneNumber([4, 5, 1, 3, 8, null, 7, 5, 2, 0]));
console.log(arrayToPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9])); // Wrong length
console.log(arrayToPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])); // Valid input

Invalid input: Array must contain exactly 10 valid digits
Invalid input: Array must contain exactly 10 valid digits
(123) 456-7890

Alternative Formatting Patterns

You can easily modify the function to support different phone number formats:

function formatPhoneNumber(arr, format = 'standard') {
   if (arr.length !== 10) return "Invalid input";
   
   const str = arr.join('');
   
   switch(format) {
      case 'standard': return `(${str.slice(0, 3)}) ${str.slice(3, 6)}-${str.slice(6, 10)}`;
      case 'dots': return `${str.slice(0, 3)}.${str.slice(3, 6)}.${str.slice(6, 10)}`;
      case 'dashes': return `${str.slice(0, 3)}-${str.slice(3, 6)}-${str.slice(6, 10)}`;
      case 'international': return `+1 (${str.slice(0, 3)}) ${str.slice(3, 6)}-${str.slice(6, 10)}`;
      default: return str;
   }
}

const phoneArray = [5, 5, 5, 1, 2, 3, 4, 5, 6, 7];
console.log(formatPhoneNumber(phoneArray, 'standard'));
console.log(formatPhoneNumber(phoneArray, 'dots'));
console.log(formatPhoneNumber(phoneArray, 'international'));

(555) 123-4567
555.123.4567
+1 (555) 123-4567

Conclusion

Converting arrays to phone number strings in JavaScript involves joining array elements and formatting with string slicing. Always validate input length and handle edge cases for robust applications.