First value of an array as a Key name and last one as a value JavaScript?

Question

I am a beginner programming student and I have some doubts about how to focus and understand this exercise.

Anyone could explain me the logical to face this exercise?

I have an array like this: ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'] and I want this result: { Queen: 'Beyonce' }

I want to make function to return the following:

1. the first element of the array as the object's key
2. the last element of the array as that key's value. I am doing a var key in array and then a loop through the array

Someone recommended me to do it as follows, but I don´t understand very well how shift and pop works here, because shift delete the first value of the array and pop the last one.

Anyone could help me?

 function transformFirstAndLast(array) { // your code here let myobj={} myobj[array.shift()] = array.pop(); console.log(myobj); } var output = transformFirstAndLast(['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']); console.log(output);

Answer 1

In short, these methods, mutate the original array (removing the first or last element) but also return the element that was removed.

arr.shift(): explained:

( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift )

 const myArr = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']; //remove the first element and save it in the variable firstElem const firstElem = myArr.shift(); console.log(firstElem); //output: "Queen" console.log(myArr); //output: "['Elizabeth', 'Of Hearts', 'Beyonce']"

arr.pop(): explained:

( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop )

 const myArr = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']; //remove the last element and save it in the variable firstElem const lastElem = myArr.pop(); console.log(lastElem); //output: "Beyonce" console.log(myArr); //output: "['Queen', 'Elizabeth', 'Of Hearts']"

So, in order to make it clear for your example see this slightly modified code:

 function transformFirstAndLast(array) { // your code here let myobj={} const firstElem = array.shift(); const lastElem = array.pop(); myobj[firstElem] = lastElem //console.log(myobj); return myobj; } var output = transformFirstAndLast(['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']); console.log(output);

Answer 2

Instead of mutating the original array, you could just do it like this:

 function transformFirstAndLast(array) { // your code here let myobj={}; myobj[array[0]] = array[array.length - 1]; console.log(myobj); } var output = transformFirstAndLast(['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']); console.log(output);

Answer 3

The array is like a list of ordered items and we can access this list by using the index and the index also starts from 0. So if I want to access the 4th item of the list, I will try to access the list by using the index of 3.

Now, back to the list, we are considering here, ie ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'] and say, we name this as "array" as the parameter of the function, we get the following -

array is equal to ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']

array[0] is equal to 'Queen'

array[1] is equal to 'Elizabeth'

array[2] is equal to 'Of Hearts'

array[3] is equal to 'Beyonce'

array.length is equal to 4 (gives the number of items the array have)

Now, our goal is create a dictionary or object like {'Queen': 'Beyonce'} . And, if we try to understand the function line by line.

1. let result = new Object(); - It creates an empty object, say like empty dictionary with no key, value pairs. In simple, result = {}
2. result[array[0]] = array[array.length-1]; - This is the line where all the magic happens. So, first, we try to evaluate the left side result[array[0]] and we get result['Queen'] . For the right hand side, we have array[array.length-1] . So if we break it, array[array.length-1] => array[4-1] => array[3] => 'Beyonce' . And finally,if combine the two sides, we get result['Queen'] = 'Beyonce' which creates an object {'Queen': 'Beyonce'} .

To conclude, the method does not iterate or loop over the list. There is no shift or delete on this method. It accesses the list using the index of the array. First, it creates an empty object. Then it creates an entry in the object by using the first item of the list as key and last item as value.