Confused about Stand in Line challenge from JS

I read this hint over here: freeCodeCamp Challenge Guide: Stand In Line
And im really confused what do they mean by
"Use an array function you learned to add the item to the end of the array arr." and
"Use an array function you learned to remove the first element from array arr."
What element of array arr are they talking about? These explanations make no sanse imo.

1 Like

Maybe it is a confusion over terms. In an array, the elements are the things that are in the array. In :

let arr = [ 1, 4, 9 ];

The numbers are the elements.

If I wanted to add an element, I could use the array prototype method (function) push to add one.

arr.push(16);

Now the array is [1, 4, 9, 16]. If I wanted to remove the first element, I would go:

arr.shift();

Now it is [4, 9, 16].

The object Array (the type that all arrays are) have several built in useful methods (functions attached to the object/array). You can read up on them here.

They can be a little confusing at first (especially if callback functions are new to you, which some of them use) but they are very useful.

Let us know if anything else is still confusing.

7 Likes

With this challenge you are a writing a function that gets two parameters arr and item.
The item that is mentioned in the instructions is this parameter item which you are to
add to the end of arr which is also passed to the function.
The second instruction is also talking about the arr parameter inside the function.

The code that solved the challenge are the three lines below. I understand lines 1 and 2, but I don’t at all understand line 3. Please help

  • Line 1 - testArr.push(item);
  • Line 2 - testArr.shift();
  • Line 3 - return arr[0] || item;
2 Likes

I am unable to understand the use of item in the push element and how come item is referred as the array.
Can anyone please explain?

Arr.push(item);

2 Likes

I’m not sure I understand your question, but I’ll try to answer it. In JavaScript, certain data types have built in methods (functions). One of these for the array type is push. It adds an element to end of the array. So:

let myArr = [1, 2, 3]

console.log(myArr)
// [1, 2, 3]

myArr.push(4)

console.log(myArr)
// [1, 2, 3, 4]

Does that make it clearer?

3 Likes

I just did this, nothing complicated and it works. I used a hint form a year ago. Most of those replies don’t work. LOL I know : I tried most of them. So this is it. Don’t let the console logs confuse you. That is their thing and we aren’t there yet.

6 Likes

What confuses me the most is, how does the function know that “arr” is an array? someone explain to me why “arr” was not assigned as an actual array in the first place. Thanks!

2 Likes

Keep in mind that JS is a “loosely typed language”. That means that it doesn’t keep you from combining different data types, however you want. Also keep in mind that in JS, variables don’t have a type, but data does - this is different that some other languages.

So, how does the function know that arr is an Array? It doesn’t.

First of all, what function? Do you mean nextInLine? It has no idea, period.

How do the methods like push know? They don’t but they figure it out.

const data1 = [1, 2, 3];
data1.push(4);
console.log(data1);
// [1, 2, 3, 4]

JS thinks something along the lines of:

  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. Yes, the data is an object. Is there a property push?
  4. Yes there is, execute it.
const data2 = { hey: 'there' };
data2.push(4);
// Uncaught TypeError: obj.push is not a function 
  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. Yes, the data is an object. Is there a property push?
  4. No there isn’t, so that property is undefined, you can’t call a function from undefined, throw an error.

But what if we add a prop to the object that just happens to have the name “push”?

const data3 = { hey: 'there', push: function(num) { console.log(num); } };
data3.push(127);
// 127
  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. Yes, the data is an object. Is there a property push?
  4. Yes there is, execute it.

What if there is a prop push but it isn’t a function?

const data4 = { hey: 'there', push: 'pull' };
data4.push(127);
// Uncaught TypeError: data4.push is not a function?
  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. Yes, the data is an object. Is there a property push?
  4. Yes there is, execute it.
  5. Oh crap, it wasn’t a function, throw an error.

What if the data is a primitive?

const data5 = 'ribbit';
data5.push(4);
// Uncaught TypeError: data5.push is not a function
  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. No it’s not? Is there an object wrapper for that primitive?
  4. Yes there is, wrap the data in that object.
  5. Does that new temp object have a prop push?
  6. No it doesn’t, so it’s undefined, throw an error.
const data6 = null;
data6.push(4);
// Uncaught TypeError: Cannot read property 'push' of null 
  1. He is trying to access the property push.
  2. Wait? Is this an object? (the only things that can have properties, remember that arrays and functions are objects in JS)
  3. No it’s not? Is there an object wrapper for that primitive?
  4. No, there isn’t (null and undefined don’t have object wrappers)
  5. Throw an error.

I’ve simplified things a little, but I hope this gets the idea across. And I always recommend the books “You Don’t Know JS”. You can get them online as ebooks for free. They are hard to read but cover a lot of stuff like this. You may not be ready for them yet, but keep them in mind. I always say that a JS developer should read all 6 books once a year, until he understands them completely. Then he can cut back to once every 12 months.

1 Like

And I guess I should add that methods like push are added to the Array when the array is made through the prototype system. It’s something that we don’t often think about.

it was assigned, when the function is called there are arguments passed in that are assigned in order to the parameters of the function
the array passed in as argument it is assigned to the arr parameter

2 Likes