The functionality of the JavaScript array filter appears to be functioning properly; however, it does not display any output on

Question

The functionality of the JavaScript array filter appears to be functioning properly; however, it does not display any output on

As the array (2001, 1999, 2000 and 2002) grows by 4 years
The array is displayed on the screen, featuring the same 4 years
It's determined that the highest year is 2002
2002 is then removed from the array
The array is again shown on the screen with all 4 years still present
Surprisingly, it turns out that after deleting 2002, the maximum year is now calculated as 2001

What seems to be the issue?

const output = document.getElementById('output');

function handleYears() {
    let years = [];
    let addYear = function(newYear) {
        years.push(newYear);
    }
    let deleteYear = function(yearToDelete) {
        years = years.filter(item => item !== yearToDelete)
    }
    let calculateMaxYear = function() {
        return Math.max(...years);
    }

    return {
        years: years,
        addYear: addYear,
        deleteYear: deleteYear,
        calculateMaxYear: calculateMaxYear
    }
}

let newHandleYears = handleYears();

newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>The item "${newHandleYears.years[newHandleYears.years.length - 1]}" will now be deleted from the "years" array.</p>`;

newHandleYears.deleteYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

javascript arrays filter

Answer 1

Answer №1

Make sure to include the this keyword when reassigning a value in order to maintain the same reference when using push.

const output = document.getElementById('output');

function handleYears() {
    let years = [];
    let addYear = function(newYear) {
        years.push(newYear);
    }
    let deleteYear = function(yearToDelete) {
        this.years = years.filter(item => item !== yearToDelete)
    }
    let calculateMaxYear = function() {
        return Math.max(...this.years);
    }

    return {
        years: years,
        addYear: addYear,
        deleteYear: deleteYear,
        calculateMaxYear: calculateMaxYear
    }
}

let newHandleYears = handleYears();

newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;

newHandleYears.deleteYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

Answer 2

Make sure to include the this keyword when reassigning a value in order to maintain the same reference when using push.

const output = document.getElementById('output');

function handleYears() {
    let years = [];
    let addYear = function(newYear) {
        years.push(newYear);
    }
    let deleteYear = function(yearToDelete) {
        this.years = years.filter(item => item !== yearToDelete)
    }
    let calculateMaxYear = function() {
        return Math.max(...this.years);
    }

    return {
        years: years,
        addYear: addYear,
        deleteYear: deleteYear,
        calculateMaxYear: calculateMaxYear
    }
}

let newHandleYears = handleYears();

newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;

newHandleYears.deleteYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.years}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

Answer 3

Answer №2

Once a year is deleted, the newHandleYears object does not update with the new years value but retains the old one. To get the updated value, you can create another getter method for years:

const output = document.getElementById('output');

function handleYears() {
    let years = [];
    let addYear = (newYear) => {
        years.push(newYear);
    }
    let deleteYear = (yearToDelete) => {
        years = years.filter(item => item !== yearToDelete)
    }
    let calculateMaxYear = () => {
        return Math.max(...years);
    }
    let getYears = () => {
        return years
    }

    return {
        getYears: getYears,
        addYear: addYear,
        deleteYear: deleteYear,
        calculateMaxYear: calculateMaxYear
    }
}

let newHandleYears = handleYears();

newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.getYears()[newHandleYears.getYears().length - 1]}" from "years" array.</p>`;

newHandleYears.deleteYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

Answer 4

Once a year is deleted, the newHandleYears object does not update with the new years value but retains the old one. To get the updated value, you can create another getter method for years:

const output = document.getElementById('output');

function handleYears() {
    let years = [];
    let addYear = (newYear) => {
        years.push(newYear);
    }
    let deleteYear = (yearToDelete) => {
        years = years.filter(item => item !== yearToDelete)
    }
    let calculateMaxYear = () => {
        return Math.max(...years);
    }
    let getYears = () => {
        return years
    }

    return {
        getYears: getYears,
        addYear: addYear,
        deleteYear: deleteYear,
        calculateMaxYear: calculateMaxYear
    }
}

let newHandleYears = handleYears();

newHandleYears.addYear(2001);
newHandleYears.addYear(1999);
newHandleYears.addYear(2000);
newHandleYears.addYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
output.innerHTML += `<p>Delete item "${newHandleYears.getYears()[newHandleYears.getYears().length - 1]}" from "years" array.</p>`;

newHandleYears.deleteYear(2002);

output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;

body {padding: 0.5rem 1rem;}

<div id="output"></div>

The functionality of the JavaScript array filter appears to be functioning properly; however, it does not display any output on

Answer №1

Answer №2

Similar questions

initial render results in undefined data

How to stop Accordion from automatically collapsing when clicking on AccordionDetails in Material-UI

How can Cheerio help you effortlessly and stylishly locate tags that meet various specific criteria?

Discover the syntax for reading route parameters in Angular

Disable the form options listed on the table

Merging 3 arrays with the Zip function to create a triple Tuple

Utilizing JSON API filtering within a Next.js application

PHP AJAX Serial Port Text Input Command

Guide on extracting the text from the <script> tag using python

Extract data from the internal JSON resource file

Determining the height of the first element in jQuery

Having trouble troubleshooting this issue where the object data is displaying in the console, but encountering an error when trying to use the resetValue

There was a failure to establish a Redis connection to the server with the address 127.0.0.1 on port 6379

Traveling within a layered object

Implementing Fullpage.js with persistent elements throughout slides

Having trouble getting a constructor to function properly when passing a parameter in

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

The front-end is responsible for removing the last item from an array

Sorting in MongoDB aggregation operations

What's preventing the `@change` trigger from functioning properly with v-data-picker?