[JavaScript] Assistance Greatly Appreciated

LOL!!! We both convinced the other to switch our thinking and approach. Too funny.

2 Likes

It was in the back of my mind, yes. An array or object can be changed, but a const reference to it cannot. To my mind that was intentional on the part of ES6 authors. A const that points to a reference object is a permanent pointer. The data contained by the reference object can be mutated and modified on the fly, and as much as we like.

Isn’t it, though?

2 Likes

Loving the debate guys!

However, I do still need a definitive answer. Should I use let or const?

2 Likes

I think @mtf and I both agreed that const is a better solution here in this context.

3 Likes

Alright, I believe I have taken care of the date issue.

Unfortunately, I am now receiving a new error...
ReferenceError: range is not defined
    at displayRoster (https://replit.org/data/web_project/728493254c168d061e1fcd76f4d6fadd/index.js:108:19)
    at runCode (https://replit.org/data/web_project/728493254c168d061e1fcd76f4d6fadd/index.js:128:5)
    at https://replit.org/data/web_project/728493254c168d061e1fcd76f4d6fadd/index.js:131:1

Here is my new code...
var error = function(code){
    console.log("Error", code);
    if (code === 101){
        console.log("An error has occured! Please restart the program and try again.");
    }
};

const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];

const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];

let today = new Date();

let $date = `Today's date: ${days[today.getDay()]}, ${months[today.getMonth()]}, ${today.getDate()}, ${today.getFullYear()}.`;

var currentDate = function(){
    var date = $date;
    return date;
};
        
var displayDate = function(){
    console.log(currentDate());
};

function Member(object){
    this.name = object[0];
    this.monday = object[1];
    this.tuesday = object[2];
    this.wednesday = object[3];
    this.thursday = object[4];
    this.friday = object[5];
    this.checkedIn = object[6];
}

Member.prototype.display = function(){
    return `${this.name} | ${currentDate()} | Checked In: ${this.checkedIn}`;
};

Member.prototype.checkIn = function(){
    this.checkedIn = true;
    var today = days[today.getDay()];
    if (today == "Monday"){
        this.monday = "Yes";
    } else if (today == "Tuesday"){
        this.tuesday = "Yes";
    } else if (today == "Wednesday"){
        this.wednesday = "Yes";
    } else if (today == "Thursday"){
        this.thursday = "Yes";
    } else if (today == "Friday"){
        this.friday = "Yes";
    } else {
        this.checkedIn = false;
    }
};

Member.prototype.checkOut = function(){
    this.checkedIn = false;
    var today = days[today.getDay()];
    if (today == "Monday"){
        this.monday = "No";
    } else if (today == "Tuesday"){
        this.tuesday = "No";
    } else if (today == "Wednesday"){
        this.wednesday = "No";
    } else if (today == "Thursday"){
        this.thursday = "No";
    } else if (today == "Friday"){
        this.friday = "No";
    } else {
        error(101);
    }
};

Member.prototype.checkInData = function(){
    console.log(`Check-In Data for: ${this.name}`);
    console.log(`Monday: ${this.monday}`);
    console.log(`Tuesday: ${this.tuesday}`);
    console.log(`Wednesday: ${this.wednesday}`);
    console.log(`Thursday: ${this.thursday}`);
    console.log(`Friday: ${this.friday}`);
};

var poolRoster = [];

var displayRoster = function(){
    for (n = 0; n < range(poolRoster.length); n++){
        console.log(poolRoster[n].display());
    }
};

var addMember = function(){
    var name = prompt("Name:");
    var member = new Member(name, "No", "No", "No", "No", "No", false);
    poolRoster.push(member);
};

var runCode = function(){
    displayDate();
    console.log("> addMember()");
    addMember();
    console.log("> addMember()");
    addMember();
    console.log("> addMember()");
    addMember();
    console.log("> displayRoster()");
    displayRoster();
};

runCode();

https://repl.it/KAAL/17

1 Like

JavaScript does not have a range() function. Just use the length attribute.

n < poolRoster.length;
3 Likes

I literally figured out what the problem was, like two minutes before you made that post. Unfortunately, even after remedying that issue, I am still having issues. Only, they are now a lot harder to explain. Try running the code and maybe you’ll see what I mean.

https://repl.it/KAAL/26

As you can tell, it would appear that my code is only storing one letter for certain strings values in my objects…

var error = function(code){
    console.log("Error", code);
    if (code === 101){
        console.log("An error has occured! Please restart the program and try again.");
    }
};

const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];

const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];

let today = new Date();

let $date = `${days[today.getDay()]}, ${months[today.getMonth()]} ${today.getDate()}, ${today.getFullYear()}`;

var currentDate = function(){
    var date = $date;
    return date;
};
        
var displayDate = function(){
    console.log(currentDate());
};

function Member(object){
    this.name = object[0];
    this.monday = object[1];
    this.tuesday = object[2];
    this.wednesday = object[3];
    this.thursday = object[4];
    this.friday = object[5];
    this.checkedIn = object[6];
}

Member.prototype.display = function(){
    return `${this.name} | ${currentDate()} | Checked In: ${this.checkedIn}`;
};

Member.prototype.checkIn = function(){
    this.checkedIn = true;
    var today = days[today.getDay()];
    if (today == "Monday"){
        this.monday = "Yes";
    } else if (today == "Tuesday"){
        this.tuesday = "Yes";
    } else if (today == "Wednesday"){
        this.wednesday = "Yes";
    } else if (today == "Thursday"){
        this.thursday = "Yes";
    } else if (today == "Friday"){
        this.friday = "Yes";
    } else {
        this.checkedIn = false;
    }
};

Member.prototype.checkOut = function(){
    this.checkedIn = false;
    var today = days[today.getDay()];
    if (today == "Monday"){
        this.monday = "No";
    } else if (today == "Tuesday"){
        this.tuesday = "No";
    } else if (today == "Wednesday"){
        this.wednesday = "No";
    } else if (today == "Thursday"){
        this.thursday = "No";
    } else if (today == "Friday"){
        this.friday = "No";
    } else {
        error(101);
    }
};

Member.prototype.checkInData = function(){
    console.log(`Check-In Data for: ${this.name}`);
    console.log(`Monday: ${this.monday}`);
    console.log(`Tuesday: ${this.tuesday}`);
    console.log(`Wednesday: ${this.wednesday}`);
    console.log(`Thursday: ${this.thursday}`);
    console.log(`Friday: ${this.friday}`);
};

var poolRoster = [];

var addMember = function(){
    var member = new Member(prompt("Name:"), "No", "No", "No", "No", "No", false);
    poolRoster.push(member);
};

var displayRoster = function(){
    for (i = 0; i < poolRoster.length; i++){
        console.log(poolRoster[i].display() );
    }
};

var runCode = function(){
    displayDate();
    console.log("> addMember()");
    addMember();
    console.log("> addMember()");
    addMember();
    console.log("> addMember()");
    addMember();
    console.log("> displayRoster()");
    displayRoster();
};

runCode();
1 Like

Give this fork of your code a try.

repl.it

I documented some of the things such as:

  1. It’s using ES6 OOP.
  2. Instead of setting each day to Yes or No with the if/else if/else, I used the day index number as an index. With the date, you can get that index number by doing now.getDay(). So Sunday is 0, Monday is 1, etc.
  3. Instead of using just a constant today date, I set it with now when you checkIn() a member. Why? If the web page is open past midnight, the date will change. Plus, if you want to capture the time that they checked in, this strategy lets you do that too.

See what you think.

2 Likes

Question, What is this?

r����k)��6�y֭xZ+��m�x�ب��zGZ�Z'�'��{�z������Z'�ֲ�鞮'k#�Y��5���+�u���wZ�;��ֲY�gz�Z�8n��Z�Z�u��j۫u�����������������������zfޯ�������������������,1��z�(��k��h�v�z+��$�x�����a��ڙ�ڙ�a�Ȭ
���H�����a��!y��6���e��u��}8^Y礞�e��n�$y���ɨ�ֲ6�nz�Z��0y�ޱֲ6�a��k#h~��k#h���
��)�"{k��a��!y����y�-�鞙�� X���zGZ��lz�k��z�讷������^j{k��!zw!y�v)ޖǟj[��^rB'��g�	��6�{�ӆ+"����ױ�֫�)�j�����ֲu��}g��z0��Ck/�:yr��m�霅�$�s(�ֲ�Z�u��~�b�+y�k'Z���y�-�+"�(^rG�"wږǜ�{(��h�*+�'!y�>�x��yrjYh��h�a��ֲ������j[�����y�t���筆+��$"p��z0��r����
��j[��u��}8^Y礶���O��^�6�5��u��}g���b�ǭ�$y��ʷ�������
������zfޮ�������^j{k��!zw!y�v��z[}�l{�!y��؟�����y�t�݊�ek!+����Z޶��}�l{��zǭ�����y�t��j[��r����k)��[a��Z��Ӆ��zI��_�!������,�������r���h���ʋ�jw�۫z�Z��z�b��^rC��6���j׭�+,z�h�G�
��z۫���{��y�-�鞙�� X���zGZ��lz�k��z�讷������^j{k��!zw!y�v)ޖǟj[�ج�V�J֭���~���+>j�����ا���N���$�)�j׿�d�y֭{*.r����m��g{	������a�Ȭ
���H�������+'jg���$y�'6�޶�����������E����ם
�^
���H����{a��Z��Ӆ��zO�����iz���������y�-�鞙�� X���zGZ��lz�k��z�讷������^j{k��!zw!y�v)ޖǟj[�a���j�^t6�z������+��$"p����ƥx6�y+k�x��u�^��j�b���*'����g��ֲu�^N��y�?�W�u��}g��֭y:��$��Ck/���޶��u��}g��GZ���y�9��
�$�'���Z�)�{�ka��ֲ6�^�+�u��2��k-���k-�y�ޱֲ�8n��Zˑk�ֲ�&���Zʖ�jcn���
���ױ��n�ph�W����{^��^rG���^�ǟj[�+y�k'Zȉ�{޶��u���ױ�ֲ"w^ǟ�z�az�����jg���ayֲ��a{a����
�k'Z���y�
jg�
�쵩���ژۦm��k(�u�kz۫�+k�x��^�6�5���a�>�)z���֦yֲ"w^Ʒ����k#�Y��5���ֲ"w^��������h~������G�u��!�!y�v)�zح���a%����
�������Y��A��t6�r�������a�Ȭ
���H���6�a����G�
����u��}8^Y礶�����jǯj[����������������������F�-z������������������ユ�i��Q��^���rب�ج�V�N�Zʷ���ӡֲ�֭{�hu����jW�jג������Q'Z��h�f��)�:�b�{>~�ܶ*'v+)�����+r�^r���W��+��ܡע}�{]5r���W��
2 Likes

Well, lookie there. Something scrambled the code that was in there.

Here’s the code:

const today = new Date(),
    dateFormattingOptions = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    },
    dayOfWeekNames = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ];


//------------------------
// Member
//------------------------

class Member {
    constructor ( name, isCheckingIn = false ) {
        this.name = name;
        this.isCheckedIn = false;
        this.checkInDay = null;
        this.dayOfTheWeek = null;

        this.bookedDays = {
            monday: 'No',
            tuesday: 'No',
            wednesday: 'No',
            thursday: 'No',
            friday: 'No',
        };

        if ( isCheckingIn === true ) {
            this.checkIn();
        }

    }

    /**
     * Check the member IF it's a weekday; else throw an error.
     *
     * @return {Boolean} true when checked in; else false.
     */
    checkIn () {
        let now = new Date(),
            // This is an index starting at 0 for Sunday.
            dayOfWeek = now.getDay();

        // Only let them check in Monday-Friday.
        if ( ! this.isWeekday(dayOfWeek) ) {
            this.isCheckedIn = false;

            console.log('Sorry, check-in is only allowed on weekdays.');

            return false;
        }

        this.isCheckedIn = true;
        this.checkInDay = now;
        this.checkOutDay = false;


        this.dayOfTheWeek = this.getProperDayName(dayOfWeek);

        this.setBookedDay();

        return true;
    }


    /**
     * Check out the member.
     *
     * @return {Boolean} true when checked out; else false.
     */
    checkOut() {
        if ( ! this.isCheckedIn ) {
            displayError(101);

            return false;
        }

        // Reset
        this.isCheckedIn = false;
        this.checkInDay = null;
        this.dayOfTheWeek = null;

        // If you want to store when they checked out,
        // you can capture that here.
        this.checkOutDay = new Date();

        this.setBookedDay();

        return true;
    }

    /**
     * Check the member IF it's a weekday; else throw an error.
     *
     * @return {Boolean} true when checked in; else false.
     */
    displayStatus () {
        // for this -> are you wanting?
        // 1. The check-in date
        // 2. The date you created that new member

        if ( ! this.isCheckedIn ) {
            return `${this.name} | Checked In: No`;
        }

        return `${this.name} | ${this.getFormattedDate()} |  Checked In: Yes on ${this.dayOfTheWeek}`;
    }

    //********************
    //
    // Helper methods
    //
    //********************

    /**
     * Check the member IF it's a weekday; else throw an error.
     *
     * @return {Boolean} true when checked in; else false.
     */
    getFormattedDate() {
        return this.checkInDay.toLocaleDateString('en-US', dateFormattingOptions);
    }

    /**
     * Checks if the day index is a weekday.
     *
     * Note:
     *    0 = Sunday
     *    1 = Monday
     *    2 = Tuesday
     *    3 = Wednesday
     *    4 = Thursday
     *    5 = Friday
     *    6 = Saturday
     *
     * @param {Number} Day index
     *
     * @return {Boolean} true when checked out; else false.
     */
    isWeekday( dayIndex ) {
        return dayIndex >= 1 && dayIndex <= 5;
    }

    /**
     * Get the proper name for the day of the week.
     *
     * @uses {Array} dayOfWeekNames Constant
     *
     * @param {Number} Day index
     *
     * @return {String} Proper Day Name
     */
    getProperDayName( dayIndex ) {
        return dayOfWeekNames[ dayIndex ];
    }


    /**
     * Set Yes or No for the booked day.
     *
     * 1. If checked in, set it to Yes.
     * 2. Else set to No.
     *
     * @return null
     */
    setBookedDay() {
        const value = this.isCheckedIn ? 'Yes' : 'No';


        this.bookedDays[ this.dayOfTheWeek.toLowerCase() ] = value;
    }
}

//------------------------
// Roster
//------------------------

let poolRoster = [];

function displayToday(){
    return "Today's date: " + today.toLocaleDateString('en-US', dateFormattingOptions) + '.';
}

function displayError(code){
    console.log("Error", code);

    if (code === 101){
        console.log("An error has occurred! Please restart the program and try again.");
    }
}

function displayRoster (){
    for (n = 0; n < poolRoster.length; n++){

        console.log(poolRoster[n].displayStatus());

        console.log(poolRoster[n]);
    }
}

function addMember (name, checkIn ){
    const member = new Member( name, checkIn );

    poolRoster.push(member);
}

function runCode (){
    displayToday();

    let checkMemberIn = false;
    let name = '';

    for ( let index = 0; index < 4; index++) {
        checkMemberIn = ( index % 2 === 0 );

        name = prompt("Name:");

        console.log(`> addMember(${name}, ${checkMemberIn})`);
        addMember(name, checkMemberIn);
    }

    console.log("> displayRoster()");
    displayRoster();
}

runCode();
2 Likes

I swear your code was working last Friday. But today when I run your code I receive the following, quite odd, error.

ReferenceError:
Y29uc3QgdG9kYXkgPSBuZXcgRGF0ZSgpLA0KICAgIGRhdGVGb3JtYXR0aW5nT3B0aW9ucyA9IHt3ZWVrZGF5OiAnbG9uZycsIHllYXI6ICdudW1lcmljJywgbW9udGg6ICdsb25nJywgZGF5OiAnbnVtZXJpYyd9LA0KICAgIGRheU9mV2Vla05hbWVzID0gWyJTdW5kYXkiLCAiTW9uZGF5IiwgIlR1ZXNkYXkiLCAiV2VkbmVzZGF5IiwgIlRodXJzZGF5IiwgIkZyaWRheSIsICJTYXR1cmRheSJdOw0KDQovLyBNZW1iZXINCmNsYXNzIE1lbWJlciB7DQogICAgY29uc3RydWN0b3IgKG5hbWUsIGlzQ2hlY2tpbmdJbiA9IGZhbHNlKXsNCiAgICAgICAgdGhpcy5uYW1lID0gbmFtZTsNCiAgICAgICAgdGhpcy5pc0NoZWNrZWRJbiA9IGZhbHNlOw0KICAgICAgICB0aGlzLmNoZWNrSW5EYXkgPSBudWxsOw0KICAgICAgICB0aGlzLmRheU9mVGhlV2VlayA9IG51bGw7DQogICAgICAgIHRoaXMuYm9va2VkRGF5cyA9IHttb25kYXk6ICdObycsIHR1ZXNkYXk6ICdObycsIHdlZG5lc2RheTogJ05vJywgdGh1cnNkYXk6ICdObycsIGZyaWRheTogJ05vJyx9Ow0KICAgICAgICBpZiAoaXNDaGVja2luZ0luID09PSB0cnVlKXsNCiAgICAgICAgICAgIHRoaXMuY2hlY2tJbigpOw0KICAgICAgICB9DQogICAgfQ0KICAgIGNoZWNrSW4oKXsNCiAgICAgICAgbGV0IG5vdyA9IG5ldyBEYXRlKCksDQogICAgICAgICAgICBkYXlPZldlZWsgPSBub3cuZ2V0RGF5KCk7DQogICAgICAgIGlmICghdGhpcy5pc1dlZWtkYXkoZGF5T2ZXZWVrKSl7DQogICAgICAgICAgICB0aGlzLmlzQ2hlY2tlZEluID0gZmFsc2U7DQogICAgICAgICAgICBjb25zb2xlLmxvZygnU29ycnksIGNoZWNrLWluIGlzIG9ubHkgYWxsb3dlZCBvbiB3ZWVrZGF5cy4nKTsNCiAgICAgICAgICAgIHJldHVybiBmYWxzZTsNCiAgICAgICAgfQ0KICAgICAgICB0aGlzLmlzQ2hlY2tlZEluID0gdHJ1ZTsNCiAgICAgICAgdGhpcy5jaGVja0luRGF5ID0gbm93Ow0KICAgICAgICB0aGlzLmNoZWNrT3V0RGF5ID0gZmFsc2U7DQogICAgICAgIHRoaXMuZGF5T2ZUaGVXZWVrID0gdGhpcy5nZXRQcm9wZXJEYXlOYW1lKGRheU9mV2Vlayk7DQogICAgICAgIHRoaXMuc2V0Qm9va2VkRGF5KCk7DQogICAgICAgIHJldHVybiB0cnVlOw0KICAgIH0NCiAgICBjaGVja091dCgpew0KICAgICAgICBpZiAoIXRoaXMuaXNDaGVja2VkSW4pIHsNCiAgICAgICAgICAgIGRpc3BsYXlFcnJvcigxMDEpOw0KICAgICAgICAgICAgcmV0dXJuIGZhbHNlOw0KICAgICAgICB9DQogICAgICAgIC8vIFJlc2V0DQogICAgICAgIHRoaXMuaXNDaGVja2VkSW4gPSBmYWxzZTsNCiAgICAgICAgdGhpcy5jaGVja0luRGF5ID0gbnVsbDsNCiAgICAgICAgdGhpcy5kYXlPZlRoZVdlZWsgPSBudWxsOw0KICAgICAgICB0aGlzLnNldEJvb2tlZERheSgpOw0KICAgICAgICByZXR1cm4gdHJ1ZTsNCiAgICB9DQogICAgDQogICAgZGlzcGxheVN0YXR1cygpIHsNCiAgICAgICAgaWYgKCF0aGlzLmlzQ2hlY2tlZEluKXsNCiAgICAgICAgICAgIHJldHVybiBgJHt0aGlzLm5hbWV9IHwgQ2hlY2tlZCBJbjogTm9gOw0KICAgICAgICB9DQogICAgICAgIHJldHVybiBgJHt0aGlzLm5hbWV9IHwgJHt0aGlzLmdldEZvcm1hdHRlZERhdGUoKX0gfCBDaGVja2VkIEluOiBZZXMgb24gJHt0aGlzLmRheU9mVGhlV2Vla31gOw0KICAgIH0NCiAgICANCiAgICAvLyBIZWxwZXIgbWV0aG9kcw0KICAgIGdldEZvcm1hdHRlZERhdGUoKXsNCiAgICAgICAgcmV0dXJuIHRoaXMuY2hlY2tJbkRheS50b0xvY2FsZURhdGVTdHJpbmcoJ2VuLVVTJywgZGF0ZUZvcm1hdHRpbmdPcHRpb25zKTsNCiAgICB9DQogICAgLy8gTm90ZTogMCA9IFN1bmRheSwgMSA9IE1vbmRheSwgMiA9IFR1ZXNkYXksIDMgPSBXZWRuZXNkYXksIDQgPSBUaHVyc2RheSwgNSA9IEZyaWRheSwgNiA9IFNhdHVyZGF5DQogICAgaXNXZWVrZGF5KGRheUluZGV4KXsNCiAgICAgICAgcmV0dXJuIGRheUluZGV4ID49IDEgJiYgZGF5SW5kZXggPD0gNTsNCiAgICB9DQogICAgZ2V0UHJvcGVyRGF5TmFtZShkYXlJbmRleCl7DQogICAgICAgIHJldHVybiBkYXlPZldlZWtOYW1lc1tkYXlJbmRleF07DQogICAgfQ0KICAgIHNldEJvb2tlZERheSgpew0KICAgICAgICBjb25zdCB2YWx1ZSA9IHRoaXMuaXNDaGVja2VkSW4gPyAnWWVzJyA6ICdObyc7DQogICAgICAgIHRoaXMuYm9va2VkRGF5c1t0aGlzLmRheU9mVGhlV2Vlay50b0xvd2VyQ2FzZSgpXSA9IHZhbHVlOw0KICAgIH0NCn0NCg0KLy8gUm9zdGVyDQpsZXQgcG9vbFJvc3RlciA9IFtdOw0KDQpmdW5jdGlvbiBkaXNwbGF5VG9kYXkoKXsNCiAgICByZXR1cm4gIlRvZGF5J3MgZGF0ZTogIiArIHRvZGF5LnRvTG9jYWxlRGF0ZVN0cmluZygnZW4tVVMnLCBkYXRlRm9ybWF0dGluZ09wdGlvbnMpICsgJy4nOw0KfQ0KDQpmdW5jdGlvbiBkaXNwbGF5RXJyb3IoY29kZSl7DQogICAgY29uc29sZS5sb2coIkVycm9yIiwgY29kZSk7DQogICAgaWYgKGNvZGUgPT09IDEwMSl7DQogICAgICAgIGNvbnNvbGUubG9nKCJBbiBlcnJvciBoYXMgb2NjdXJyZWQhIFBsZWFzZSByZXN0YXJ0IHRoZSBwcm9ncmFtIGFuZCB0cnkgYWdhaW4uIik7DQogICAgfQ0KfQ0KDQpmdW5jdGlvbiBkaXNwbGF5Um9zdGVyKCl7DQogICAgZm9yIChuID0gMDsgbiA8IHBvb2xSb3N0ZXIubGVuZ3RoOyBuKyspew0KICAgICAgICBjb25zb2xlLmxvZyhwb29sUm9zdGVyW25dLmRpc3BsYXlTdGF0dXMoKSk7DQogICAgICAgIGNvbnNvbGUubG9nKHBvb2xSb3N0ZXJbbl0pOw0KICAgIH0NCn0NCg0KZnVuY3Rpb24gYWRkTWVtYmVyKG5hbWUsIGNoZWNrSW4gKXsNCiAgICBjb25zdCBtZW1iZXIgPSBuZXcgTWVtYmVyKG5hbWUsIGNoZWNrSW4pOw0KICAgIHBvb2xSb3N0ZXIucHVzaChtZW1iZXIpOw0KfQ0KDQpmdW5jdGlvbiBydW5Db2RlKCl7DQogICAgZGlzcGxheVRvZGF5KCk7DQogICAgbGV0IGNoZWNrTWVtYmVySW4gPSBmYWxzZTsNCiAgICBsZXQgbmFtZSA9ICcnOw0KICAgIGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCA0OyBpbmRleCsrKSB7DQogICAgICAgIGNoZWNrTWVtYmVySW4gPSAoaW5kZXggJSAyID09PSAwKTsNCiAgICAgICAgbmFtZSA9IHByb21wdCgiTmFtZToiKTsNCiAgICAgICAgY29uc29sZS5sb2coYD4gYWRkTWVtYmVyKCR7bmFtZX0sICR7Y2hlY2tNZW1iZXJJbn0pYCk7DQogICAgICAgIGFkZE1lbWJlcihuYW1lLCBjaGVja01lbWJlckluKTsNCiAgICB9DQogICAgY29uc29sZS5sb2coIj4gZGlzcGxheVJvc3RlcigpIik7DQogICAgZGlzcGxheVJvc3RlcigpOw0KfQ0KDQpydW5Db2RlKCk7 
is not defined
at
    https://replit.org/data/web_project/f31ca155081c0c34b4483a8a773db2ab/index.html:1:2496

I don’t know about you, but I think there might be something wrong with repl.it at the moment.

2 Likes

Something got corrupted in the other one.

Here, use this one instead. It’s just a JavaScript file only.

2 Likes

Hey @mtf and @hellofromtonya, I’ve made quite a bit of progress since we last talked. Unfortunately, I am currently having some issues with global variables and I would really appreciate your assistance.

Here’s the bin.

The Error:
"ReferenceError: poolRoster is not defined
    at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2625)"

The only thing I have been able to gather is that poolRoster refuses to behave like a global variable and the script pretends it doesn’t exist, even though I defined it globally:

let poolRoster = [];

Yet none of my functions appear to recognise this line. Typically, when a function recognises a variable it will change its font color in the editor. But not poolRoster; Anytime I use poolRoster the editor leaves it black (like it would an undefined variable). I don’t know if I’m missing something in my syntax, but I don’t believe it should behave this way.

1 Like

We would only use let once. After that we can change the variable any time we wish.

In this case, since it is an array (reference object) it could be set as a constant which would force it to remain an array through the session.

When we wish to clear an array we should be aware of any references to that array. Setting an array to empty does not clear the references. Setting its length to 0 will, though.

poolRoster.length = 0;
3 Likes

Wait…

let poolRoster = [];

doesn’t reset the array?

If so, would that mean I could use it like this…

function addMember(name, checkIn){
    let poolRoster = [];
    const member = new Member(name, checkIn);
    poolRoster.push(member);
}

without resetting the array every time I call the function?

Or did I completely miss what you were getting at.

1 Like

We would only want to reset the array if starting a new session with fresh data without restarting the program. I would not suggest resetting it when adding a new member. That would be counterproductive.

At the start of the session,

const poolRoster = [];

That locks it in as an array and cannot be reassigned a new type. The data inside can be mutated, so when the need to reset comes about,

poolRoster.length = 0;

will do the job.

2 Likes

Even if I set poolRoster as a constant array at the start of the program…

const poolRoster = [];

Whenever I try to access or modify it, I receive the following error…

"ReferenceError: poolRoster is not defined
    at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2836)"

Heck, I can’t even log it…

addMember("Example", false); => undefined
console.log(poolRoster[0]); => "poolRoster is not defined"
1 Like

JSBin does not yet appear to support ES6. Use var to declare your variables.

3 Likes

JSbin actually can use ES6, you just have to enable esnext

//jshint esnext:true
1 Like

Then that is your problem. You have,

//esnext: true

When that line is corrected and Run with JS, in the console,

typeof poolRoster

returns "object".

2 Likes