DEV Community: Reza Lavarian

JavaScript list (array) comprehension explained with examples

Reza Lavarian — Sat, 13 May 2023 18:37:13 +0000

List comprehension is a programming technique to create a new list based on an existing list. This quick guide explores three approaches to JavaScript list comprehension (a.k.a array comprehension).

Programmers use list or array comprehension for two reasons:

To create a subset of a broad list (based on a set of conditions)
To transform list items into new values and store them as a new list.

List comprehension is usually available as a language construct in many programming languages like Python or Perl. However, JavaScript has its own way of array comprehension.

For instance, if you have a list of email addresses and need to filter out Gmail accounts, here’s how you’d do it in Python:

emails = [
    # ...
]

gmail_accounts = [email for email in emails if email.endswith('gmail.com')]

In JavaScript, however, there's no list (in this case, an array) comprehension construct, but there are ways to do that, thanks to Array.prototype.map(), Array.prototype.filter(), and the spread operator (...).

Let's see how.

List (array) comprehension in JavaScript

Based on your use cases, there are several approaches to list comprehension in JavaScript:

Using Array.prototype.map()
Using Array.prototype.filter()
Using the for...of statement

1. Using Array.prototype.map()

If you want to transform every item in an array and return it as a new array, the Array.prototype.map() method is what you need.

Let's see some examples.

Example #1: Imagine we have a list of decimal values (e.g., prices) but only want the integer part (without the fraction part.)

const prices = [12.5, 45.34, 12.5, 9.5]
const pricesAsInt = prices.map(price => Math.trunc(price))

console.log(pricesAsInt)
// output: (4) [12, 45, 12, 9]

In the above example, we called the map() method with an arrow function, which returns an integer (by using Math.trunc())

Example #2: Sometimes you have an array of objects and want to create a list of x from each object. Consider the following variable:

const persons = [
  { id: 238, name: Alice },
  { id: 874, name: Bob },
  { id: 421, name: Charlie }
]

Imagine you want to generate an array of names from the above data structure. Here's how you'd do it with the map() method:

const names = persons.map(p => p.name)

console.log(names)
// output: (3) ['Alice', 'Bob', 'Charlie']

In the above example, we pass the short arrow function p => p.name to the map() method. The variable p refers to an object on each iteration.

Example #3: Considering the persons array, imagine you need to add a new entry (active: true) to each object.

Here's one way of doing it:

const activePersons = persons.map(p => {
    p.active = true
    return p
})

If you want an elegant single-line statement:

const activePersons = persons.map(p => ({ ...p, active: true }))

Since we're using an arrow function without the curly braces, we wrapped the return value in a pair of parentheses. Otherwise, it would be mistaken for a function boundary by the parser. We used the spread operator (...p) to pack the existing entries alongside active: true as the new object.

As a rule of thumb, use the map() method whenever you want to transform list items without filtering them.

2. Using Array.prototype.filter()

If you want to create a subset of the original list. That's where the Array.prototype.filter() method comes in handy.

Let's see some examples.

Example #1: Imagine you have a list of emails but want to filter only Gmail accounts:

const emailAddresses = [
// ...
]

const gmailAccounts = emailAddress.filter(i => i.endsWidth('gmail.com'))

The filter method accepts a callback function, which is run against every item in the array; If the callback function returns true, the item will be included in the new subset array.

In the above example, if the current item ends with gmail.com, the callback returns true, and the item is included in the final result.

Example #2: You can use the filter() method in conjunction with map().

For instance, after filtering the Gmail accounts, if you want to store them as objects in an array, you can do it like so:

const gmailAccounts = emailAddress.filter(i => i.endsWidth('gmail.com'))
    .map(i => ({ email: i }))

As simple as that.

3. Using the for...of statement

The for...of statement allows you to iterate over a series of values from an iterable object (e.g., Array, String, TypedArray, Map, Set, NodeList, etc.).

If you want to reimplement the Gmail accounts example with the for...of statement, you could do it like so:

const emailAddresses = []
const gmailAccounts = []

for (email of emails) {
    if (!email.endsWith('gmail.com')) {
        return
    }

    gmailAccounts.push(email)
}

In the above example, we iterate over the items and skip any email address not ending with gmail.com. Otherwise, we push it to the gmailAccounts array.

You could also use the Array.prototype.forEach() method to create a new list in the same way as the for...of statement.

Alright, I think it does it! I hope you found this quick guide helpful.

Thanks for reading.

How to fix “ValueError: I/O operation on closed file” in Python

Reza Lavarian — Thu, 11 May 2023 16:28:11 +0000

The Python error “ValueError: I/O operation on closed file” happens when you try to do I/O operations (read, write, etc.) on a file that’s already been closed.

Here’s what the error looks like:

Traceback (most recent call last):
 File "/dwd/app.py", line 2, in 
  for line in file:
ValueError: I/O operation on closed file.

This quick guide explains why this error happens and how to fix it quickly.

How to fix it?

This error usually happens for two reasons:

Incorrect indentation
Closing the file prematurely

Incorrect indentation

Incorrect indentation can cause the "ValueError: I/O operation on closed file" error when working with files in Python. Below are two scenarios leading to this error.

Scenario #1: closing the file inside a loop: Imagine you have a loop that reads data from a file.

However, you unintentionally close the file at the same indentation level as the loop, making it part of the loop.

As a result, when you try to read the second line of the file, you'll get the error because the file was closed in the first iteration.

file = open('data.txt', 'r')
for line in file:
    print(line)
    # file is closed here
    file.close()

In the above code, since file.close() is indented within the loop (by mistake), the file is closed prematurely, causing the error.

To fix this issue, move the file.close() outside the loop, and you'll be good to go:

file = open('data.txt', 'r')
for line in file:
    print(line)

# Closing the file after the loop finishes
file.close()

Scenario #2: Using the with statement: As you probably know, when you open a file using the with statement, you won't have to close the file at the end. Python automatically closes the file for you once the execution block finishes executing.

That said, if you have an I/O operation outside the with block, you'll run into the error since the file is closed.

Imagine we're trying to read a CSV file using the with open('...') syntax:

import csv

with open('users.csv', 'r') as file:
    csv_reader = csv.reader(file)
for row in csv_reader:
    print(row)

In the above example, we open a file using the with statement, where we create a CSV reader object to iterate over lines and print each line.

However, the for loop is indented outside of the with block, making it run after with statement closes the file.

To fix this issue, ensure all I/O operations are part of the with block:

import csv

with open('keywords.csv', r) as file:
    csv_reader = csv.reader(file)

    for line in csv_reader:
        print(line)

Closing the file prematurely

Another common cause of this ValueError error is closing the file prematurely before performing any I/O operations.

This might happen if you've copied a code from another source, like Stackoverflow or another file but forget to reorder the lines.

Imagine you want to read data from a file and store it in a list.

file = open('file.txt', 'r')
data = []
file.close()

for line in file:
    data.append(line)

In the above example, file.close() appears before we read the lines from the file.

Placing file.close() fixes the issue instantly.

file = open('file.txt', 'r')
data = []

for line in file:
    data.append(line)

file.close()

You can also check if a file is closed

To check whether a file is closed, you can use the closed attribute of the respective file object. The closed attribute contains a boolean value indicating whether the file is open or closed.

Here's an example:

file = open('example.txt', 'r')
print(file.closed)  # False
file.close()
print(file.closed)  # True

You might find this attribute helpful when debugging your code.

Wrapping up

The Python error "ValueError: I/O operation on closed file" typically occurs when a file is closed prematurely or due to incorrect indentation.

It's a simple rule; Just ensure the code that closes the file is executed after the I/O operations.

Alright, I think it does it! I hope you found this quick guide helpful.

Thanks for reading.

Four ways to check if a variable is a string in JavaScript (with examples)

Reza Lavarian — Wed, 10 May 2023 16:48:32 +0000

When working with strings in JavaScript, it’s important to check if a variable is a string before performing any string-related operations – specially when you get the value from an API . This quick guide explores four methods for checking if a variable is a string in JavaScript.

JavaScript is a dynamically typed language meaning the data type of a variable can change at runtime. That said, it’s essential to determine the data type of a variable before performing any operation on it, and string values are no exception.

How to check if a variable is a string

In this section, we’ll explore four common approaches to checking whether a value is a string in JavaScript:

Using typeof
Using Object.prototype.constructor.name
Using Object.prototype.toString.call(obj)
Using instanceof

1. Using typeof: The typeof operator is the go-to method when testing data types. It simply returns a string value representing the data type of its operand. For instance, typeof "hello" returns "string".

This is how you can use typeof to test if a variable is a string:

let str = 'hello';

if (typeof str === 'string') {
  console.log('str is a string');
}

In the above example, the variable str contains the string value hello, and the value returned by typeof confirms that.

The typeof operator only works with string literals, though. If your code, for some reason, contains string objects, you need to add more checks (more on this below).

2. Using Object.prototype.constructor.name: Every JavaScript object has a constructor property that refers to the constructor function that created it (e.g., str.constructor).

This constructor has an attribute called name, which returns the function name (as a string) that created the respective object.

In the case of string values, the function name is String. This work well with string literals as well as string objects:

let str = 'hello';

if (str.constructor.name === 'String') {
  console.log('str is a string');
}

3. Using Object.prototype.toString.call(obj): This method can be considered a detailed version of typeof because it returns the object type name when given an object.

The returned value is usually in the form of [object Type] where Type can be Array, String, Number, Function, etc.

Let's try it out with a string:

let str = 'hello';

if (Object.prototype.toString.call(str) === '[object String]') {
  console.log('str is a string');
}

Just like Object.prototype.constructor, you can use this approach for both string literals and objects.

4. Using instanceof: This approach only works with string objects (e.g., new String('test')).

The instanceof checks if its first operand is an instance of its second operand. Or more precisely, it checks if an object's prototype chain includes the prototype property of a constructor.

let a = new String('test')

console.log(a instanceof String)
// Output true

Please note there is a difference between primitive strings (a.k.a string literals) and String objects.

A string literal (wrapped in single/double quotation marks) is a primitive value. String values created via calling the String function without using the new keyword are primitive strings too.

let a = 'test'
let b = String('test')
let c = new String('test')

console.log(a === b)
// Output: true

console.log(a === c)
// Output: false

console.log(b === c)
// Output: false

That said, instanceof doesn't work with string literals.

Defining a string value by using the String as a constructor (new String('text')) is discouraged by many developers, as it's almost useless. You should rarely find yourself using String as a constructor.

Then, why should I even consider this approach? You may ask.

Well, there's one scenario you might want to use instanceof to check strings in JavaScript, and that's when you need to create a universal utility function that works with all string types - no matter how they are defined:

function isString(value) {
return typeof value === 'string' || value instanceof String
}

You can use constructor.name, or toString.call(obj) to achieve the same result.

Wrapping up

In this article, we have discussed four different approaches to checking if a variable is a string in JavaScript. The most common approach is to use typeof to test if the value is string. And if your code contains both string literals and objects, you can use typeof in conjunction with instanceof.

Alternatively, you can use constructor.name, or toString.call(obj) to get the class constructor name that created the string value.

Alright! I think it does it for today! I hope you found this quick guide helpful.

Thanks for reading.

Python new() method explained with examples

Reza Lavarian — Mon, 08 May 2023 17:24:43 +0000

Python __new__() method is static method (a.k.a magic or dunder method) that gives the programmer more control over how a specific class (cls) is instantiated.

This quick guide explains the __new__() method and how and when to use it.

How does the Python `new()` method work?

Python calls the __new__() method every time you instantiate a class. It does the instantiation in two steps:

First: it invokes the __new__() method of the class to create and return an instance (this instance is then passed to __init__() as its first argument self)

Next: the __init__() method is invoked to initialize the object state. Please note the __init__() method can’t return anything (except for None).

When to use the Python `new()` method?

Well, most of the time, you don’t need to!

Python does it all for you. However, you might want to override this dunder method if you need more control over the instantiation process.

Below are three [not-so-common] use cases of the __new__() magic method:

Subclassing built-in types
Custom initialization logic
Singleton classes

1. Subclassing built-in types: We create a subclass to create a new class based on a base class, which overrides some of its parent’s data/behavior.

In Python, you can subclass immutable built-in types (e.g., int, float, and str) to add custom behavior to a built-in data type.

For instance, the bool type is a subclass of the immutable int. In fact, True and False are integer numbers 1 (for True) and 0 (for False).

Since the base class is int, we can even do mathematical operations on boolean values.

>>> a = True
>>> b = False
>>> a + b
1
>>> a = True
>>> b = True
>>> a + b
2
>>> bool.__bases__
(,)

We can also create our own subclass of int (or any other data type) thanks to the __new__() method.

Imagine you need a data type that stores integers as positive numbers regardless of the given value (1, 3, -45, -50). At the same time, you want to have access to all the functionalities the built-in int type offers:

class PositiveInt (int):
    def __new__(cls, value):
        return int.__new__(cls, abs(value))

In the above example, our subclass PositiveInt extends the standard int class, but it implements its own __new__() method to transform the given value into a positive number.

Inside the __new__() method, we call the __new__() of the parent (int) and pass it the absolute value (abs(value)) of the given number.

Let's try it out:

b = PositiveInt(-34)
print(b)
# output: 34

c = PositiveInt(784)
print(c)
# output: 784

print(b + c)
# output: 818

Done!

2. Custom initialization logic: You can use the __new__() method to create customized instantiation logic.

Imagine, you need to limit the number of instances created for a specific class:

class Players(object):
    currentInstances = 0
    maxInstances = 4

   def __new__(cls, value):
        if cls.currentInstances >= cls.maxInstances:
            raise ValueError(f'You can only make {maxInstances} instances.')

        cls.currentInstances += 1
        return super().__new__(cls)

    def __init__(self, value):
        self.value = value

In the above class Player, we have a variable named currentInstances to store the current number of instances created.

In the __new__() method, we ensure currentInstances never exceeds maxInstances. If it does so, we throw an exception. And if not, we instantiate the class by calling the parent object __new__() method and return the result.

Finally, we increment currentInstances by 1.

If we try to instantiate the Player class 5 times, we'll get an exception on the fifth try.

ValueError: You can only make 4 instances

3. Creating singleton classes: Another [controversial] use case for the __new__() method is to create Python singleton objects.

Singleton classes should have only one instance.

Technically, you can use the __new__() method to ensure only one instance of a specific class is created and returns the existing instance to all subsequent constructor calls.

Here's how we'd do it by using the __new__() method:

class Singleton:
    _instance = None

    def __new__(cls):
        if cls._instance is None:
            cls._instance = super().__new__(cls)
        return cls._instance

In the above example, we define a class named Singleton with the attribute _instance, initially set to None.

When you instantiate the class, the __new__() method is invoked, checking whether the _instance attribute is None.

If it is, it creates a new instance using the super().__new__(cls) and assigns it to the _instance attribute. If the _instance attribute already refers to an existing object, it returns it.

This ensures that only one instance of our class can exist at any given time.

While this works fine, it isn't the most Pythonic way of reusing objects. In fact, it's almost useless in Python!

A more Pythonic approach would be to use The Global Object Pattern. In Python, when you only need a single instance of a class, you probably don't need a class definition at all. You can place your data/functionality at a module level instead; Modules have their own namespaces and are singleton by design.

On the other hand, every time you refer to a module, Python returns the same module object. This is why we make singleton classes. Something that Python provides out of the box.

Sometimes it's acceptable, though! The one situation using the Singleton pattern sounds reasonable is when you're working with legacy code.

Let's say, due to new requirements, you need to use a specific class as a single object across the code base. However, it’s not an option to update all the legacy code to use the global object approach.

In that case, making the class singleton might be helpful to implement the requirement while keeping the old syntax.

I haven't personally encountered any of the above use cases, but you might!

Wrapping up

In conclusion, the __new__() magic method provides lots of flexibility for controlling how a class is instantiated.

With the help of the __new__() method, you can subclass built-on types, create singleton objects, and create classes with customized instantiation/ initialization logic.

I hope you found this quick guide helpful. Thanks for reading!

Label htmlFor Property Explained

Reza Lavarian — Mon, 06 Feb 2023 20:15:44 +0000

We use the HTML <label> element to caption form elements, such as a text box, checkbox, radio button, etc.

To do so, all you need to do is to set the label’s for attribute with the ID string of its corresponding form element – this means your form element should already have an ID attribute.

Something like this:

<label for="usernameId">Username: <label>
<input type="text" name="username" id="usernameId">

Labelling form elements have multiple accessibility advantages:

📢 Assistive technologies: It makes the label and the form element programmatically related. For instance, a screen reader would read out the form element's label to visually-impaired users.

📲 Accessibility and UX: It also increases the hit area when interacting with a form element (click or touch); For instance, when you click the label of a text box, it'll gain focus, so you can start typing. Or if it's a checkbox (or a radio button), it'll be checked - a pleasant experience on small-screen devices.

Here's an example

<section>
    <label for="usernameControl">Username: </label>
    <input type="text" name="username" id="usernameControl">
</section>

<section>
    <input type="checkbox" id="checkControl">
    <label for="checkControl">Click me</label>
</section>

<section>
    <input type="radio" name="radioControl" id="radioControl1">
    <label for="radioControl1">Option 1</label>

    <input type="radio" name="radioControl" id="radioControl2">
    <label for="radioControl2">Option 2</label>

    <input type="radio" name="radioControl" id="radioControl3">
    <label for="radioControl3">Option 3</label>
</section>

But sometimes you might need to manage (set or get) a label's for property dynamically, from your JavaScript code.

In this quick guide, I'll explain how you can programmatically manage the for attribute with the help of the Label htmlFor property via JavaScript.

How to use the Label htmlFor property

The HTMLLabelElement.htmlFor lets you read the for attribute's current value. It also allows you to set its value on the fly.

Let's start with a quick example for those friends who need a short snippet for today. Then, we'll get to the details.

Let's imagine we have the following form control:

<label for="usernameId">Username: <label>
<input type="text" name="username" id="usernameId">

To read the value of the for attribute, you can access its htmlFor property in the DOM like so:

// Get the DOM element by Id
let label = document.querySelector('#usernameLabel')

// Access the htmlFor property
let forValue = label.htmlFor

And if you need to set the for value programmatically at runtime:

// Get the DOM element by Id
let labelElement = document.querySelector('#usernameLabel')

// Set the for attribute value via htmlFor property
labelElement.htmlFor = 'someValue'

In the above example, someValue is the ID string of the form control to which the label is associated.

Please note when a label is implicitly associated with a form control - by placing the form element within the label tag - this property would return an empty value:

<label>
    Username: 
    <input type="text">
</label>

Can't we just use `setAttribute`/`getAttribute`?

Since the htmlFor property reflects the value of the for attribute, technically, it's possible to use setAttribute() to set the for attribute of a label.

let labelElement = document.querySelector('#usernameLabel')

let forValue = labelElement.setAttribute('for', 'someValue')

However, Mozilla recommends using htmlFor whenever you need to set the for attribute programmatically.

Label htmlFor property is well-supported across most web

Wrapping up

The for attribute helps you add interactive behavior to a web page without writing a single line of JavaScript. For instance, to create custom checkbox/radio button elements or even trigger a popup or a sliding menu. However, if you need more control over your labels from javaScript code, label's htmlFor is the property you'll need.

I hope this quick guide can provide an answer to your question.

Thanks for reading.

About “ReferenceError: document is not defined” in JavaScript

Reza Lavarian — Mon, 06 Feb 2023 20:06:08 +0000

This guide explains why ReferenceError: document is not defined occurs and how you can fix it.

let element = document.querySelector('#usernameLabel')
              ^
ReferenceError: document is not defined

The most common reason for "document is not defined" error is that your JavaScript code is trying to access the document object in a non-browser environment, such as Node.js.

A quick intro to the document object:
Whenever you access a web page via the web browser, the browser's renderer fetches and parses the HTML code (along with the assets) and stores its elements (headings, paragraphs, images, form elements, etc.) into an internal data structure called DOM (Document Object Model).

DOM is then turned into Render Tree (consisting of visible elements and their styles), and through a complicated process, the code is turned into pixels - what you see as a user.

Additionally, the web browser exposes an interface to the DOM tree called DOM API. The DOM API lets you modify the page programmatically via JavaScript to do things like:

Set the page title on the fly
Add/remove HTML element(s)
Manage CSS styles
Add/remove CSS classes
and a lot more!

And the entry point to this powerful API is the document object.

What causes ReferenceError: document is not defined

The first thing to know is that the DOM API is a web browser component and not a part of JavaScript. JavaScript only enables you access this object (like any other object).

Here are the possible scenarios that "ReferenceError: document is not defined" error might happen:

A reference to the document object in Node.js
Server-side Rendering (SSR)
Casing might be off.

Let's see how we can fix them.

How to fix "document is not defined" error

In Node.js: As mentioned earlier, the document object is a browser feature and not a part of JavaScript. On the other hand, when there's no browser, there's no document object.

With Node.js, you must review the code and figure out why you're accessing a browser object in a server-side code in the first place? Maybe it's just there because you borrowed the code from another file?

However, if your code is used by both the front end and the server, you can place the reference to the document inside a conditional statement - to ensure it'll only run by the browser's JavaScript engine.

To do this, you can place it inside a conditional statement and check for the availability of the document object:

// This code only runs on the browser

if (typeof document !== 'undefined') {
   let element = document.querySelector('.class-name')

   // Manipulating the DOM here
}

Serverside-rendering (SSR): The "document is not defined" error might also occur when using static site generators, such as Nuxt.js, Next.js, or Gatsby.

A quick fix - as suggested above - is to place any reference to the document object inside a conditional statement - to exclude it from the server-side rendering.

If you use Next.js, you can place your DOM-related code inside a useEffect hook. The callback passed to useEffect runs after the component is mounted (and painted).

The example below is from React's documentation:

// useeffect-example

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = 'You clicked ' + count + ' times';
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

How about Nuxt.js? If you're using Nuxt.js with Vue, and the error is raised in one of your components, you can wrap your component inside a <client-only> component, and the error will go away.

<client-only> guarantees that your component is only rendered on the client side.

// nuxtjs-client-only.js

<template>
  <div>
    <client-only placeholder=" loading...">
      <your-component>
    </client-only>
  </div>
</template>

Additionally, you can access DOM from within the mounted Vue lifecycle hook.

Or maybe it's just a typo? It's also worth checking the document object is all lowercase and not capitalized!

// document-reference-case.js

// ⛔ Wrong
Document.querySelector('.class-name')

// ✅ Correct
document.querySelector('.class-name')

Wrapping up

In this quick guide, you learned the document object is a browser feature and should always be used in a browser environment.

The most common reason for this error is that the code tries to access the document object in a non-browser environment, such as Node.js.

Two common way to avoid such errors is to use a conditional statement to ensure the code only runs in the browser.

Alternatively, you can use hook mechanisms in case you're using an SSR framework such as Next or Nuxt.js.

I hope this guide provided the answer you were looking for.

Thanks for reading!

❤️ You might like:

About "SyntaxError: Unexpected end of JSON input" in JavaScript

Reza Lavarian — Mon, 06 Feb 2023 19:56:33 +0000

You might have encountered the error “Uncaught SyntaxError: Unexpected end of JSON input” when using JSON.parse().

The error looks like this on the browser console (Google Chrome):

First of all, it’s not your code! What’s most likely wrong is the JSON string you’re trying to parse.

When “Unexpected end of JSON input” is raised, your code is probably parsing:

An empty string
An empty array
Or an incomplete (a.k.a malformed) JSON data

That said, the first thing to examine is the JSON data.

If you’re using Google Chrome (like me), you can click the link on the right-hand side of the error message.

It’s usually in the form of VM: Script ID, e.g., VM:1

If the log is empty, you’re probably dealing with an empty string! Otherwise, you’ll see the JSON data with an indicator.

How to fix the Uncaught SyntaxError: Unexpected end of JSON input

When working with JSON-formatted data in JavaScript, we’re either working with locally defined JSON data or fetching it from an API.

But how can we resolve the issue?

When working with locally defined JSON data: If you’re parsing local JSON content, the first thing to do is to ensure the variable isn’t empty. Maybe the variable is truncated for some reason.

If it’s not, you can validate your JSON-formatted data with an online JSON validator like JSONLint. If you have an invalid JSON object, you’ll find out here!

When working with a third-party JSON API: If you’re trying to parse a JSON API response, and you don’t have control over the back-end code, you can place your JSON.parse reference into a try/catch block – like so:

try {
  const data = JSON.parse(jsonData);
  // Do something with the JSON data
} catch (err) {
  console.error(err);
}

Wrapping up

The infamous "JSON input error" is a Syntax error usually raised when parsing empty or malformed JSON data. Fixing this issue is easy when dealing with locally-defined JSON data.

If you don't have control over the back-end code generating the JSON data, a try/catch block would help you avoid the "Uncaught SyntaxError" error.

Additionally, you might find this Mozilla guide on JSON.parse to avoid other types of parse errors.

I hope this quick guide provided the answer you were looking for.

Thanks for reading.

Add commas to numbers in JavaScript (Explained with examples)

Reza Lavarian — Mon, 06 Feb 2023 19:49:12 +0000

This guide explores the three common ways to add commas to numbers in JavaScript.

Displaying numbers – whether currency or plain numbers – in an easy-to-read format significantly improves your HTML page content and overall user experience. We usually achieve this by adding commas to numbers with the help of JavaScript and separating the digits by hundreds.

There are plenty of ways to format your numbers. However, three of them are the most common among web developers:

Using the Number.prototype.toLocalString() method
Using Intl.NumberFormat() object
Using String.prototype.replace() method with a regular expression

Let’s study each approach with examples.

Using `Number.prototype.toLocalString()`

The method Number.prototype.toLocalString() is the option you’re looking for if you need a quick solution. This method uses Int.NumberFormat() object internally to do language-sensitive number formatting (more on this below).

Here’s how we use it:

let number = 48372498372.34

console.log(number.toLocaleString())

If you call it without arguments, it'll format the respective number based on the default locale - in this case, the US locale.

Some countries have their way of formatting numbers. For instance. in Germany, hundreds of separated by a period (".") and decimals with a comma. In that case, you can add the key as the first argument.

let number = 4723984738.5748937

console.log(Intl.NumberFormat('de-DE').format(number))
// output: 834.723.984.738,575

You can fine-tune the output by passing it an options object. For instance, to display currency values.

let number = 834723984738.5748937

console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'USD'}))
// output: ,723,984,738.58

Note: when you set the style as currency, you must define the currency too. Otherwise, you'll get the following TypeError:

Uncaught TypeError: Currency code is required with currency style.
    at Number.toLocaleString (<anonymous>)
    at index.js:10:20

The possible values for currency are ISO 4217 currency codes such as USD for the US dollar, EUR for the euro, or CNY for the Chinese RMB.

If you need to display decimal places with a fixed precision, you can define a minimumFractionDigits or maximumFractionDigits in the options object accordingly.

let number = 834723984738.5748937

console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'EUR', minimumFractionDigits: 3}))
// output: €834,723,984,738.575

`Intl.NumberFormat()`

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language-sensitive string comparison, number formatting, and the date and time formatting.

The Intl.NumberFormat() constructor creates Intl.NumberFormat objects that enable language-sensitive number formatting.

To format a number, you call the format() method against this object:

let number = 834723984738.5748937

console.log(Intl.NumberFormat('en-US').format(number))
// output: 834,723,984,738.575

The output would be the same toLocalString() since it uses Intl.NumberFormat() internally (in implementations with Intl.NumberFormat API support).

And the options object is the same as the one in our toLocalString() code example:

let number = 834723984738.5748937

console.log(Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number))

A note on performance, based on MDN docs:
When formatting a large set of numbers, it is better to create an Intl.NumberFormat object and use the function provided by its format property.

Using regular expression to add commas to numbers

Using regular expressions is the old-school way of handling number formatting. Even though toLocalString() and Intl.NumberFomat() is well-supported across most browsers, you might want to do it in an old-fashioned way.

To do this, you should use the String.prototype.replace() method with a regular expression that separates the hundreds by commas.

Let's see how it's done:

let number = 834723984738.5748937

console.log(number.toString().replace(/B(?=(d{3})+(?!d))/g, ','))
// output: 834,723,984,738.575

The above code, first, converts your number into a string and then calls the replace method with this regex pattern /\B(?=(\d{3})+(?!\d))/g.

This regular expression starts with a boundary (\B) to avoid a comma at the beginning of the number. Then, it uses to lookaheads to mark numbers in hundreds. Consequently, The replace() method places a comma in each match.

Wrapping up

Formatting numbers can be done in a variety of ways in JavaScript. However, the approaches we explored in this quick guide are the most common among web developers:

Number.prototype.toLocalString()
Intl.FormatNumber from the ECMAScript Internationalization API
Regular expressions

I hope this guide helps you find the answer you're looking for.

Thanks for reading.

How to remove the last character from a string in PHP

Reza Lavarian — Mon, 06 Feb 2023 19:36:21 +0000

How do you remove the last character from a string in PHP? Most web developers face it at one time or another; It can be a white space, a trailing slash in a HTTP URL, the last comma in a comma-separated list, or even a new line characters (\n).

Luckily, PHP has plenty of string manipulation functions you can use to get rid of that last character.

In this quick guide, we’ll try three ways of removing the last character(s) from a string in PHP.

Let’s begin with my favorite option rtrim() a.k.a the right trim.

Remove the last character by PHP `rtrim()`

PHP rtrim() accepts two arguments: the input string and characters you wish to be stripped from the end of the input string.

For instance, to remove the last comma in a comma-separated list:

<?php

$var = 'Banana, apple, orange, ';
$trimmed = rtrim($var, ', ');

var_dump($trimmed);

// output: string(21) "Banana, apple, orange"

Let's see a more realistic example; A common reason to remove the last character from a string is to remove the trailing slash in a URL.

Imagine you have a function that accepts a URL prefix as an argument. This function adds a path (e.g., /api/v2) to the URL prefix and returns the result.

<?php

function getApiUrl($baseUrl) 
{
    return $baseUrl . '/api/v2';
}

$apiUrl = getApiUrl('https://decodingweb.dev/');
var_dump($apiUrl);

// output: string(31) "https://decodingweb.dev//api/v2"

The problem with the above approach is that if the $baseUrl contains a trailing slash, you might end up with double slashes in the result.

You can simply avoid double slashes with rtrim() like so:

<?php

function getApiUrl($baseUrl) 
{
    return rtrim($baseUrl, '/') . '/api/v2';
}

$apiUrl = getApiUrl('https://decodingweb.dev/');
var_dump($apiUrl);

// output: string(31) https://decodingweb.dev/api/v2

But what if you needed to remove a number of characters from the end of the string (regardless of what they are)? Please read on.

Remove the last character by PHP `substr()`

One way to strip the last character in a string is by using the PHP substr() function.

The substr() function returns a portion of a string based on an offset and length (number of characters).

<?php

$var = 'abcdef';
$trimmed = substr($var, 0, 2);

var_dump($trimmed);

// output: string(2) "ab"

In the above example, the offset is 0 (the first character), and the length is 2, which is the number of characters counting from the offset.

And the result is ab.

The offset can also take a negative value! When the offset is negative, the count will begin from the end of the string. Saying that -1 means the last character from the end of the string. The value -2 means the last two characters, and so forth.

That sounds like what we need! Let's see an example.

<?php

$baseUrl = 'http://decodingweb.dev/';

var_dump(substr($baseUrl, 0, -1));

// output:  string(22) "http://decodingweb.dev"

And if you want to remove the last three characters from a string:

<?php

$string = 'abcdf';
$trimmed = substr($string, 0, -3)

var_dump($trimmed);

// output: string(2) "ab"

Or even remove the last five characters from the string:

<?php

$string = 'abcdf';
$trimmed = substr($string, 0, -5)

var_dump($trimmed);

// output: string(0)

The above example will return an empty string.

You can also use substr() to check the last character in a string, like so:

<?php

$string = 'abcdf';

var_dump(substr($string, -1, 1));

// output: string(1) f

How about the multi-byte characters?

Each character in English takes one byte. However, many UTF-8 characters take more than one byte, called multi-byte characters. For instance, accents over characters such as ä, é, or even an emoji 🍏 takes more than a byte.

The offset and length in substr() function won't handle multi-byte characters as expected because they assume one byte per character.

Let's see it in an example:

<?php

$var = 'Cartão de Crédito';
$trimmed = substr($var, 2, 6);

var_dump($trimmed);

// output: string(21) string(6) "rtão "

In the above example, the offset=2 and length=6 is supposed to return rtão d. However, the returned value is rtão. The reason is ã is a multi-byte character, and substr() function isn't aware of it!

Luckily, PHP has a multi-byte safe substr() alternative: mb_substr():

<?php

$var = 'Cartão de Crédito';
$trimmed = mb_substr($var, 2, 6);

var_dump($trimmed);

// output: string(7) "rtão d"

Remove the last character by PHP `substr_replace()`

Another method to remove the last character from a string in PHP is by using the substr_replace() function.

Just like substr(), this function accepts a position and offset too. However, unlike substr() - which returns a substring - substr_replace() replaces the substring with a replacement value.

Let's make it clear with an example:

<?php

$var = 'This is a test';
$newVar = substr_replace($var, 'that', 0, 4);

var_dump($newVar);

// output: string(14) "that is a test"

In the above example, offset=0 and length=4 refers to "This" in our string. And in this case, "This" is replaced with the word "That".

As a result, the output would be: "That is a test".

Now, what if we can target the last character and replace it with an empty string?

We can! Let's see how:

<?php

$baseUrl = 'http://decodingweb.dev/';

var_dump(substr_replace($baseUrl, '', -1));

// output:  string(22) http://decodingweb.dev

We set the offset to -1 (the last character) and replaced it with an empty string (''). Just like that!

Wrapping up

As you see, PHP is great at string manipulation, thanks to the functions we can use from the standard library.

I hope this quick guide gave you the answer you were looking for.

Thanks for reading.

About "TypeError: map is not a function" in JavaScript

Reza Lavarian — Mon, 06 Feb 2023 19:21:55 +0000

The error “TypeError: object.map is not a function” occurs when you call the map() method on a non-array object in JavaScript.

A non-array object can be an object literal, a string, a Map object, a Set object, etc.

Let’s see a simple example:

let data = {
    course: 'JavaScript for Beginners', 
    language: 'JavaScript'
}

// This will cause the error
let newData = data.map(item => {
    // do something ...
    return item
})

The above code raises the "TypeError: object. map is not a function" error because the calling object isn't an array - it's an object literal.

The `map()` method in JavaScript only works on arrays

The map() method is a part of the array prototype, meaning you can only call it on JavaScript arrays. Here's how MDN Web Docs defines it:

let data = ['apples', 'bananas', 'oranges', 'grapes']

// This is correct
let newArray = data.map(item => {
// do something here ...
return item
})

How to solve "map is not a function" error in JavaScript

Whenever you encounter this error, inspect the variable calling map() - You can use console.log(data) to do so.

console.log(data)

Before making any change to your code, ensure you're calling map() on the correct data object because you might be calling map() on an object, whereas you intended to refer to an array inside that object!

Here's an example:

// ...

let data = {
    success: true,
    items: [
        {
            course: 'JavaScript for beginners'
        },
        {
            course: 'PHP programming'
        },
        {
            course: 'Learning Python'
        }
    ]
}

console.log(data.items)

If you called the map() method against the main data object, you'd have to change it to data.items instead:

// ...

let newArray = data.items.map(item => {
    // do something here ...
    return item
})

Please note if data contains raw JSON, you should parse it into a valid JavaScript object literal with the help of JSON.parse().

// ...

data = JSON.parse(data)

How to work around "... map is not a function" error when using object literals?

If you have an object literal and want to use it with the map() function, you need to convert your data into an array representation.

There are several ways to do this. Let's explore each with a quick example.

Using Object.keys(): Since the map() function only works with array values, you can create an array from the keys in your object and call map() on the resulting array.

Consequently, you can access the original object data using the key in a bracket notation: data[key].

Let's see how:

// map-object-keys.js

let data = {
    course: 'JavaScript for beginners',
    language: 'JavaScript',
    creator: 'decodingweb.dev'
}

let dataKeys = Object.keys(data)
// dataKeys: ['course', 'language', 'creator']

let newData = dataKeys.map(key => {
    // Get the data from the original object with the bracket notation
    let item = data[key]

    // do something here ...
    return item
})

Using Object.values(): Instead of object keys, you can create an array from the object values too:

// map-object-values.js

let data = {
    course: 'JavaScript for beginners',
    language: 'JavaScript',
    creator: 'decodingweb.dev'
}

let dataKeys = Object.values(data)
// dataKeys: ['JavaScript for beginners, 'JavaScript'', 'decodingweb.dev']

let newData = dataKeys.map(itemValue => {
    // do something here ...
    return itemValue
})

Using Object.entries() method: If you need to access to key/value pair in your map() callback, you can use Object.entries(). This function creates an array consisting of [key, value] arrays:

// map-object-entries.js

let data = {
    course: 'JavaScript for beginners',
    language: 'JavaScript',
    creator: 'decodingweb.dev'
}

let dataKeys = Object.entries(data)
/*
 dataKeys: [
    ['course',   'JavaScript for beginners']
    ['language', 'JavaScript']
    ['creator',  'decodingweb.dev']
]
*/

let newData = dataKeys.map(item => {
    // do something here ...

    console.log(item[0]) // key
    console.log(item[1]) // value

    return  item
})

Add a length property to objects with integer-keyed properties: If you have an object with numerical keys, you can make it map-ready by giving it a length property. After adding the length property, which should contain the number of properties in the object, you can call the map() method manually.

Let's see an example:

// object-to-array.js

let data = {
    0: 'JavaScript',
    1: 'PHP',
    2: 'Python'
}

// Adding the length property
data['length'] = 3

/* 
The data now looks like this: 
{
    length: 3,
    0: 'JavaScript',
    1: 'PHP',
    2: 'Python'
}

*/

// We call the map directly from the Array prototype passing data as the context (this)
let newData = Array.prototype.map.call(data, item => item)

Since map() is a function, we can invoke it via call(). We pass our object as the context (this) to the call as the first argument. The second argument is the callback function, which is eventually passed to the map() method.

If you're using JavaScript Map objects

If you're calling the map() method on a Map object, you'll still get this error.

Luckily, Map objects implement keys(), values(), and entries() methods. Using these methods, you generate arrays based on keys, values, or key/value pairs respectively (just like object literals in the above examples).

//map-on-map-object.js

const map1 = new Map()

map1.set('a', 1)
map1.set('b', 2)
map1.set('c', 3)

// Since Map.prototype.keys() return a Map Iterator object, we use the spread operator to turn it into an array
let mapKeys = [...map1.keys()] // [1, 2, 3]

let newData = mapKeys.map(key => {
    // Do something here ...

    return [key, map1.get(key)]
})

// Create a new Map object with the transformed array
map2 = new Map(newData)

You could also use map1.values() and map1.entries() methods accordingly.

If you're working with a JavaScript Set object, the algorithm is the same.

Adding a check: Array.isArray()

If you want to call the map() method only if the data is an array (without adjusting it), you can put your code inside a conditional statement:

// map-array-if.js

let data = ['JavaScript', 'PHP', 'Python']
let newData = []

if (Array.isArray(data)) {
newData = data.map(item => {
         return item 
       })
}

console.log(newData)

As a result, the map() method will only be called if the respective data object is a JavaScript array.

Wrapping up

Alright, I think that does it! Whenever you encounter this error, first check you're using an array. If the input isn't an array object, before anything, ensure you're referring to the right value. Then, depending on your object (object literal, Map, or Set) transform your data into an array, then call its map() method.

Additionally, you can check if the object is an array, and then, call the map() method against it.

Thanks for reading.

❤️ You might like:

PHP double question marks (Null coalescing operator) explained

Reza Lavarian — Mon, 06 Feb 2023 18:51:01 +0000

PHP double question marks (??) – officially known as Null coalescing operator – is a convenient alternative to ternary expressions in conjunction with isset().

You might have seen the following expression in your Laravel or PHP projects:

<?php

$result = $value ?? $alternativeValue;

But what do two question marks mean in PHP?

The above expression returns its first operand ($value) if it exists and is not null; otherwise, it returns the second operand ($alternativeValue).

The above expression is equivalent to:

<?php

$result = isset($value) ? $value : $alternativeValue;

How to use PHP double question marks

Before the Null coalescing operator, you'd have to use a ternary operator with a call to isset():

<?php

$iceCreamFlavor = isset($_POST['flavor']) ? $_POST['flavor'] : 'vanilla';

Or as an if statement:

<?php

$iceCreamFlavor = 'vanilla';

if (isset($_POST['flavor'])) {
  $iceCreamFlavor = $_POST['flavor'];
}

But with the Null coalescing operator, you can summarize it into:

<?php

$iceCreamFlavor =$_POST['flavor'] ?? 'vanilla';

You can also chain multiple operators:

<?php

$display_name =  $first_name ?? $last_name ?? 'Anonymous';

The above code will return the first defined value among $first_name, $last_name, and Anonymous.

The Null coalescing operator has been added to PHP since version 7.

I hope you found this quick tip helpful :-)

Thanks for reading!

❤️ You might like:

How to Flatten an array in PHP (four methods)

Reza Lavarian — Mon, 06 Feb 2023 18:28:05 +0000

There’s no built-in function in PHP to flatten a multi-dimensional array, but it’s not a difficult thing to do in PHP. In fact, it’s quite easy.

We usually flatten arrays of data fetched from a database or an API. In real-world scenarios, we’d usually want to take a few fields off each row for displaying in our views.

How to flatten an array in PHP

In this tutorial, we’ll explore four ways of flattening arrays (two-dimensional and multi-dimensional) in PHP:

Flatten two-dimensional arrays in PHP (when keys don’t matter)
Pluck a list of the given key/value pairs from a PHP array
Flatten a PHP array recursively I
Flatten a PHP array recursively II

Flatten two-dimensional arrays in PHP

If you have a two-dimensional array, you can flatten it by unpacking the array and passing it as an argument to the array_merge() function.

<?php

// Each array has two Apple devices in each category (iPads, phones, and laptops)
$products = [
     ['iPad Air', 'iPad pro'],
     ['iPhone 13', 'iPhone 13 mini'],
     ['MacBook Air', 'MacBook Pro']
];

// Flatten the array
$result = array_merge(...$products);
print_r($result);

And this will be the output:

Array
(
  [0] => iPad Air
  [1] => iPad pro
  [2] => iPhone 13
  [3] => iPhone 13 mini
  [4] => MacBook Air
  [5] => MacBook Pro
)

In PHP versions before 8.1, if the $products array has string keys, you must extract the values with array_values() first:

<?php
// ...

$result = array_merge(...array_values($products));

For PHP versions before 7.4: if the $products array is empty, the array_merge() would be invoked without arguments. This will raise an error. To avoid the error, add an empty array [] to the array_merge() arguments:

<?php
// ...

$results = array_merge([], ...$products);

Argument unpacking has been available since PHP 5.6+.

Note: Since PHP 8.1, unpacking the outer array with string keys (associative arrays) is possible without using array_values().

Pluck a list of the given key/value pairs from the array

If you have an array of arrays (two-dimensional), and you want to take a specific key (e.g., name) off each array and create an array of names, you can use array_column().

Imagine you've fetched a list of customers from the database, and you have the results as a two-dimensional array. Now you want to create an array containing the name of each person.

Here's how it's done:

<?php

// Array representing a possible record set returned from a database
$records = array(
    array(
        'id' => 2135,
        'first_name' => 'John',
        'last_name' => 'Doe',
    ),
    array(
        'id' => 3245,
        'first_name' => 'Sally',
        'last_name' => 'Smith',
    ),
    array(
        'id' => 5342,
        'first_name' => 'Jane',
        'last_name' => 'Jones',
    ),
    array(
        'id' => 5623,
        'first_name' => 'Peter',
        'last_name' => 'Doe',
    )
);

$first_names = array_column($records, 'first_name');
print_r($first_names);

And the output will be:

Array
(
    [0] => John
    [1] => Sally
    [2] => Jane
    [3] => Peter
)

Flatten a PHP array recursively I

If your array has more than two dimensions (multi-dimensional), we need to take a recursive approach. The starter method is array_walk_recursive().

Here's how it's done:

<?php

$data = [
    'name' => 'James',
    'contact' => [
        'phone' => [
            'work_phone' => '000',
            'home_phone' => '111'
        ],
        'emails' => 'james@test',
    ]
];

$results = [];
array_walk_recursive($data, function ($item, $key) use (&$results){$results[$key] = $item;});

print_r($results);

This function takes an array and iterates over every element recursively. On each iteration, the provided callback is executed.

The callback accepts two arguments, $item and $key.

Since the $results array is declared in the global scope, we import it into the callback (via use()) as a reference (&$results) - so that we can modify it.

And this will be the output:

Array
(
  [name] => James
  [work_phone] => 000
  [home_phone] => 111
  [emails] => james@test
)

Please note if there are elements with the same key, the former will be overridden by the latter.

Flatten a PHP array recursively II

If you need more control over the flattening process, it's easy to create a recursive function yourself.

Let's see how:

<?php

$data = [
    'name' => 'James',
    'contact' => [
        'phone' => [
            'work_phone' => '000',
            'home_phone' => '111'
        ],
        'emails' => 'james@test',
    ]
];

function flatten($array) {
    $results = [];

    foreach ($array as $key => $value) {
        if (is_array($value) && ! empty($value)) {
            $results = array_merge($results, flatten($value));
        } else {
            $results[$key] = $value;
        }
    }

    return $results;
}


$results = [];
$results = flatten($data);

print_r($results);

In the above code, we took a recursive approach. The flatten() function takes a PHP array and iterates over all the elements by a foreach().

On each iteration, we check if the current value is an array and not empty.

If it's a non-empty array, we call the flatten() function with the current element as its argument.

If the current element isn't an array, we push it to $results.

Basically, the function keeps calling itself until it has gone over all non-array elements (down to the deepest level), and has pushed them to the $results array.

And this will output:

Array
(
  [name] => James
  [work_phone] => 000
  [home_phone] => 111
  [emails] => james@test
)

Wrapping up

We usually flatten arrays fetched from a data source, like a database or an API. Taking a recursive approach is usually the most natural way to flatten arrays. However, array_walk_recursive() and array_column() work quite well in specific scenarios.

I hope you found this guide helpful.

Thanks for reading.

❤️ You might like

DEV Community: Reza Lavarian

JavaScript list (array) comprehension explained with examples

List (array) comprehension in JavaScript

1. Using Array.prototype.map()

2. Using Array.prototype.filter()

3. Using the for...of statement

How to fix “ValueError: I/O operation on closed file” in Python

How to fix it?

Incorrect indentation

Closing the file prematurely

You can also check if a file is closed

Wrapping up

Four ways to check if a variable is a string in JavaScript (with examples)

How to check if a variable is a string

Wrapping up

Python __new__() method explained with examples

How does the Python __new__() method work?

When to use the Python __new__() method?

Wrapping up

Label htmlFor Property Explained

How to use the Label htmlFor property

Can't we just use setAttribute/getAttribute?

Wrapping up

About “ReferenceError: document is not defined” in JavaScript

What causes ReferenceError: document is not defined

How to fix "document is not defined" error

Wrapping up

About "SyntaxError: Unexpected end of JSON input" in JavaScript

How to fix the Uncaught SyntaxError: Unexpected end of JSON input

Wrapping up

Add commas to numbers in JavaScript (Explained with examples)

Using Number.prototype.toLocalString()

Intl.NumberFormat()

Using regular expression to add commas to numbers

Wrapping up

How to remove the last character from a string in PHP

Remove the last character by PHP rtrim()

Remove the last character by PHP substr()

How about the multi-byte characters?

Remove the last character by PHP substr_replace()

Wrapping up

About "TypeError: map is not a function" in JavaScript

The map() method in JavaScript only works on arrays

How to solve "map is not a function" error in JavaScript

How to work around "... map is not a function" error when using object literals?

If you're using JavaScript Map objects

Adding a check: Array.isArray()

Wrapping up

PHP double question marks (Null coalescing operator) explained

How to use PHP double question marks

How to Flatten an array in PHP (four methods)

How to flatten an array in PHP

Flatten two-dimensional arrays in PHP

Pluck a list of the given key/value pairs from the array

Flatten a PHP array recursively I

Flatten a PHP array recursively II

Wrapping up

Python new() method explained with examples

How does the Python `new()` method work?

When to use the Python `new()` method?

Can't we just use `setAttribute`/`getAttribute`?

Using `Number.prototype.toLocalString()`

`Intl.NumberFormat()`

Remove the last character by PHP `rtrim()`

Remove the last character by PHP `substr()`

Remove the last character by PHP `substr_replace()`

The `map()` method in JavaScript only works on arrays