[Term Entry] JavaScript Arrays: toLocaleString() (#7350)

Author: mamtawardhani

content/javascript/concepts/arrays/terms/toLocaleString/toLocaleString.md

@@ -0,0 +1,138 @@
+---
+Title: '.toLocaleString()'
+Description: 'Converts array elements to localized string representations and joins them with locale-specific separators.'
+Subjects:
+  - 'Computer Science'
+  - 'Web Development'
+Tags:
+  - 'Arrays'
+  - 'Methods'
+  - 'Strings'
+CatalogContent:
+  - 'introduction-to-javascript'
+  - 'paths/front-end-engineer-career-path'
+---
+
+JavaScript array's **`.toLocaleString()`** method converts the elements of an [array](https://www.codecademy.com/resources/docs/javascript/arrays) to localized [string](https://www.codecademy.com/resources/docs/javascript/strings) representations and joins them with a locale-specific separator. This method is particularly useful when working with arrays containing numbers, dates, or other values that need to be formatted according to specific regional conventions, making data more readable and culturally appropriate for different audiences.
+
+## Syntax
+
+```pseudo
+array.toLocaleString(locales, options)
+```
+
+**Parameters:**
+
+- `locales` (optional): A string with a BCP 47 language tag, or an array of such strings. Specifies the locale(s) to use for formatting. If not provided, the default locale of the host environment is used.
+- `options` (optional): An object with configuration properties that control how the conversion is performed. The available options depend on the type of elements being converted.
+
+**Return value:**
+
+Returns a string representing the elements of the array, with each element converted using its `toLocaleString()` method and joined by a locale-specific separator.
+
+## Example 1: Basic `.toLocaleString()` Usage
+
+This example demonstrates how `.toLocaleString()` converts array elements to their locale-specific string representations:
+
+```js
+// Create an array with different data types
+const mixedArray = [1000, new Date('2024-01-15'), 3.14159];
+
+// Convert to locale string using default locale
+const result = mixedArray.toLocaleString();
+console.log(result);
+```
+
+The output will vary based on the user's locale, but in a US English locale, it would produce something like:
+
+```shell
+1,000,1/15/2024, 12:00:00 AM,3.142
+```
+
+Each element is formatted according to the default locale rules, with numbers getting thousand separators, dates formatted in MM/DD/YYYY format, and decimal numbers rounded appropriately.
+
+## Example 2: Currency Formatting with `.toLocaleString()`
+
+This example shows how to format an array of prices using locale-specific currency formatting:
+
+```js
+// Array of product prices
+const prices = [29.99, 149.5, 5.25, 999.99];
+
+// Format as US currency
+const usPrices = prices
+  .map((price) =>
+    price.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    })
+  )
+  .join(', ');
+
+console.log('US Prices:', usPrices);
+
+// Format as European currency
+const euroPrices = prices.toLocaleString('de-DE', {
+  style: 'currency',
+  currency: 'EUR',
+});
+console.log('Euro Prices:', euroPrices);
+```
+
+This example results in the following output:
+
+```shell
+US Prices: $29.99, $149.50, $5.25, $999.99
+Euro Prices: 29,99 €, 149,50 €, 5,25 €, 999,99 €
+```
+
+The method automatically applies the appropriate currency symbols, decimal separators, and formatting conventions for each specified locale.
+
+## Codebyte Example: Date Internationalization with `.toLocaleString()`
+
+This example demonstrates formatting an array of dates for different regions and showing various date formatting options:
+
+```codebyte/javascript
+// Array of important dates
+const importantDates = [
+  new Date('2024-07-04'),
+  new Date('2024-12-25'),
+  new Date('2024-01-01')
+];
+
+// Format for US audience with full date names
+const usFormat = importantDates.map(date =>
+  date.toLocaleString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+).join(', ');
+
+console.log('US Format:', usFormat);
+
+// Format for Japanese audience
+const japanFormat = importantDates.toLocaleString('ja-JP', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric'
+});
+console.log('Japan Format:', japanFormat);
+```
+
+The dates are formatted according to each locale's conventions, showing how the same data can be presented in culturally appropriate ways.
+
+## Frequently Asked Questions
+
+### 1. What is the basic purpose of the `.toLocaleString()`?
+
+The `.toLocaleString()` method formats array elements according to locale-specific conventions, making data more readable and culturally appropriate for users in different regions. It handles numbers, dates, and other values by applying regional formatting rules like currency symbols, date formats, and number separators.
+
+### 2. What is the difference between toString and toLocaleString in JavaScript?
+
+The `toString()` method converts array elements to strings using a standard format regardless of locale, while `toLocaleString()` applies locale-specific formatting rules. For example, `toString()` would display `1000` as "1000", but `toLocaleString()` might display it as "1,000" in English locales or "1.000" in German locales.
+
+### 3. Can `.toLocaleString()` handle sparse arrays with undefined elements?
+
+Yes, `.toLocaleString()` treats sparse arrays (arrays with gaps) by converting `undefined` and `null` elements to empty strings, but still includes separators for them.