[WEEK #4] – 11 JavaScript Basics – Arrays + Problem Set + Blog Question


Hey all. This week was alright. The only things that gave me some confusion was forEach and the last part of the problem set. I sort of get forEach but I would rather use regular for loops because in the tutorial he said some browsers are not compatible with forEach. In the problem set I tried to use pop() but there were issues. Also whenever I used splice(), the for loop would skip a number. I solved this issue by decremented the counter each time the splice happened.

Tutorials


Problem Sets

  • arr-prob.html / arr-prob.js
    • What to insert into Chrome Console ↓
    • reverseArray([1, 2, 3]);
    • rangeArray(3, 9);
    • longestUser([“Tony”, “Syeda”, “Affroz”, “Tatiana”]);
    • 3 Methods for Only Numbers
      • onlyNumber();
      • onlyNums2([“fun”, 23, 45, undefined, “a”, 4]);
      • onlyNums3([“fun”, 23, 45, undefined, “a”, 4]);

Blog Question


With the array methods pop() / push() and shift() / unshift(), explain the difference between the returned value of each method and the resulting value of the array? Use an example piece of code with the Enlighter tool to support your description.

Pop() removes the last element from the array and allows us to use it. Pop is used to remove something from an array and do something with it. Pop takes no argument, removes the last item in the array, and returns the last item in the array it uses.

let colors = ["red", "orange", "yellow"];
colors.pop();
//"yellow" will be returned by the console

//What the array will look like now
colors = ["red", "orange"];

Push() allows us to add something to the very end of an array. Push knows the end of array and adds whatever you pass into the end. Push will return the length of the array after the new element is added.

let colors = ["red", "orange", "yellow"];
colors.push("green");
//4 will be returned by the console.

//What the array will look like now.
//colors = ["red", "orange", "yellow", "green"];

Shift() is used to remove the first item in an array and returns that item. So in other words shift returns the item it removed.

let colors = ["red", "orange", "yellow"];
colors.shift();
//"red" will be returned by the console.

//What the array will look like now.
//colors = ["orange", "yellow"];

Unshift() is used to add add one element to the front of an array. Shift returns the length of the array after it moves the item to the front of the array.

let colors = ["red", "orange", "yellow"];
colors.unshift("infrared");
//4 will be returned by the console.

//What the array will look like now.
//colors = ["infrared", "red", "orange", "yellow"];

Link to an example of a site that is using an array of data that is presented on page. Describe what is in value of the array.

This question is quite difficult. The only website that comes to mind is probably YouTube. I believe the YouTube comment section of each video uses array of data to present the comments on the page. When you sort Newest first, it shows the end of the array which is the most recent comments. When you comment under a video, your comment is pushed onto the array. Your username, date, comment, likes/dislikes, and replies are stored into one comment. (The image below is a random YouTube video).

If the answer above is totally wrong, the only other website I believe uses arrays of data presented on a page is Twitter. In a twitter profile, Tweets are stored in an array. New tweets users make are pushed onto an array. Some data that is stored is name, @handle, date, comment, media(if attached), replies, retweets, likes.


Join the Conversation

2 Comments

  1. So looking at your array functions there are some issues to consider. Your solution for reverseArray is only going to work for an array of whole numbers which start at the number 1. Any values passed is always going to return whole numbers since you’re pushing the ‘i’ value not the ‘arr[i]’ value. So your solution for these arrays give this:

    reverseArray(["one", "two", "three"]);
    // [3, 2, 1]
    reverseArray([4,5,6]);
    //[3, 2, 1]

    Here’s a solution that uses your idea of working from the back of the array based on its length, but then uses ‘i’ as an index value from the original array.


    function reverseArray(arr) {
    let reverseArray = [];
    for (let i = arr.length - 1; i >= 0; i--) {
    reverseArray.push(arr[i]);
    }
    return reverseArray;
    }

  2. And Array.forEach(callback(val, i, arr)) is a tricky array method to wrap your mind around at first – callback functions in general. A callback function is any function that is passed as an argument to another function. A forEach method has a callback function that has three of its own arguments – value, index of the value, and the array itself. We were introduced to using just the value of the array, but by the end of the semester we’ll be using the index as well.

    Array methods with callbacks are very, very useful in JS development where datasets are being manipulated. Your example of comments in a YouTube post is a good one. And structuring data and using methods to traverse it are probably a big part of how we see the comments presented on the page.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php