The Chrome Dev Tools console displays the letter "f" instead of the actual values contained in the array - JavaScript

Currently diving into the world of JavaScript and embarking on a journey with Stack Overflow (enrolled in a JavaScript Udemy course as well). During an exercise involving arrays, I found that the Chrome Dev console was only displaying [f, f, f, f] along with the entire percentages array instead of the values I anticipated. Take a look at my code:

//function to calculate percentage of world population
function percentageOfWorld1(population) {
    return ((population / 7900) * 100);
}

//array consisting of various populations (in millions)
const populations = [331.9, 1458, 1380, 147.2];

//checking if there are 4 elements in the array
console.log(populations.length === 4);

//converting each element in the array to percentage using the function
const percentages = [
    percentageOfWorld1(populations[0]),
    percentageOfWorld1(populations[1]),
    percentageOfWorld1(populations[2]),
    percentageOfWorld1(populations[3])
];
//displaying the resulting array
console.log(percentages);

This is what I see in the Chrome Dev console: Screenshot

I'm puzzled by the fact that it's showing [f, f, f, f] rather than numbers in an array.

I tried looking for solutions but couldn't find anything helpful. Even tweaking the variables didn't alter the output in the console. However, the console.log verifying the presence of 4 array elements yielded the expected result.

Answer №1

((population / 7900) * 100) has no impact as the result is not stored in any variable. The function simply returns itself, resulting in an array of percentageOfWorld1 functions.

Possibly what you intended was to return the actual calculation result:

function percentageOfWorld1 (population) {
    return ((population / 7900) * 100);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The page continues to refresh even after the fetch() method is called and the promise is resolved, despite setting e.preventDefault()

Greetings! I am currently in the process of creating a basic API using ytdl and express. Specifically, the route I am focusing on is responsible for downloading a file. app.post('/audio', (req, res) => { console.log(`Initiating audio down ...

Generate a two-dimensional array of pixel images using HTML5 canvas

Hey everyone, I'm trying to copy an image pixel to a matrix in JavaScript so I can use it later. Can someone take a look and let me know if I'm using the matrix correctly? I'm new to coding so any help is appreciated. Thanks! <canvas id= ...

The <b-list-group-item> component in a Vue.js CLI application using bootstrap-vue is failing to render

My Vue-CLI app uses Bootstrap-vue and axios to fetch JSON data. The HTML code in my App.vue displays the data using UL and LI tags: <p v-if="loading">Loading...</p> <ul v-else> <li v-for="(value, key) in post" :key="key"> ...

Where is the optimal location for placing a JavaScript listening function within an Angular component?

Summary: Incorporating a BioDigital HumanAPI anatomical model into my Angular 5 application using an iFrame. The initialization of the API object is as follows: this.human = new HumanAPI(iFrameSrc); An important API function human.on(...) registers clic ...

How to return the same value as the input value in Vue before the action is completed

When creating a component and module for functionality X while using Vuex for state management, the code initially works fine. However, after the first insertion, the Getter function consistently returns the previous input value before the action is commit ...

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

Setting up a new event handler for an ng-repeat element

I am completely new to Angular! I want to implement a simple event in a form element created by ng-repeat with a specific value. Here is the HTML code: <div class="labels"> <div class="checkbox-element" ng-repeat="suggestN ...

Tips on extracting data from an API with volley:

Having trouble reading the response from an API call in my simple app, which I want to use to display images on a fragment based on certain conditions. Here is the code snippet I am using along with a sample of the response: Although I can read the respo ...

AngularJS | Dependency Injection appears to be silent and non-responsive

I've hit a roadblock in finding solutions to my query. In essence, I'm aiming to achieve dependency injection by linking my directive from the 'directives.js' file to be accessible in my controller within the 'controllers.js' ...

Merging two distinct arrays of objects in JavaScript can be achieved by utilizing various methods and

I have a challenge where I need to merge two arrays of objects in a nested way. var array1=[{ PersonalID: '11', qusetionNumber: '1', value: 'Something' }, { PersonalID: '12', qusetionNumber: '2& ...

The powerful combination of AJAX and the onbeforeunload event

I am working with an aspx page that includes a javascript function window.onbeforeunload = confirmExit; function confirmExit() { return "You have tried to navigate away from this page. If you made changes without clicking Submit, they will be lost. Are yo ...

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

As a newcomer to the world of React.js and Next.js, I am encountering difficulties when trying to open a Material UI modal from a Material UI AppBar within a Next.js page. Most of the code I have implemented here is directly copied from the Material UI we ...

Exploring the characteristics of images in Javascript

I've gone through my code multiple times but I just can't figure out why it's not functioning correctly... Could someone shed some light on this? What am I missing here? The purpose of the code is to allow users to input different values i ...

What alternative can be used instead of Document in Javascript when working with EJS?

Currently, I am utilizing ejs to handle my HTML tasks and I have come across an issue where I cannot use the usual document.getElementById('id') method within this environment. The error message displayed states "document not defined". This has ...

Design your very own personalized Show Layout component

Currently, I'm in the process of creating a unique layout component to enhance the design of my Show page. I've encountered some inconsistencies with functionality, and my solution involves utilizing the Material-UI <Grid> component. While ...

The most effective method for monitoring updates to an array of objects in React

Imagine a scenario where an array of objects is stored in state like the example below: interface CheckItem { label: string; checked: boolean; disabled: boolean; } const [checkboxes, setCheckboxes] = useState<CheckItem[] | undefined>(undefined ...

Retrieve child and descendant nodes with Fancytree JQuery

I'm currently utilizing Fancytree and have created the following tree structure: root |_ child1 |_ subchild1 |_ subchild2 |_ subchild3 |_ subchild4 When the selected node is child1, I am able to retrieve the fir ...

Adding color between lines in Three.js

I have two different sets of vertices. One set contains real vertices, and the other set contains the same vertices but with a y value of zero. I am trying to connect these vertices and fill them in but have not been successful so far. I have attempted to ...

I have a collection of emails stored as a string that I would like to convert into a json or javascript object and store in a mongodb

After selecting multiple user emails, I receive the following data: "participants" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b5b404847695d41405b4d5b465c5d4c074a4644">[email protected]</a>,<a href="/ ...

Unexpected outcomes arising from using nested arrays with jQuery validation plugin

I have been utilizing the jQuery validation plugin from . I am encountering an issue with validating a nested array "tax_percents[]" that is within another array. The validation seems to only work for the first value in the array, and even for the second f ...