JavaScript's Functions and Objects: An Overview

Question

JavaScript's Functions and Objects: An Overview

Create a function called 'transformFirstAndLast' which takes an array as input and outputs an object with:

The first element of the array as the key of the object.
The last element of the array as the value of that key.

For example, if the input is:

['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']

The return value of the function should be:

{
  Queen: 'Beyonce'
}

Your code should be able to handle arrays of varying lengths. For instance:

['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey']

Here is your existing code:

function transformFirstAndLast(array) {
  var arrayList = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'];
  var arrayList2 = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey']
  var myObject = {};
      key = arrayList.shift();
      value = arrayList.pop();
      myObject[key] = value
  var myObj2 = {};
      key = arrayList2.shift();
      value = arrayList2.pop();
      myObj2[key] = value;
  console.log(myObject);
  console.log(myObj2);
}
transformFirstAndLast();

The output you are getting:

{ Queen: 'Beyonce' }
{ Kevin: 'Spacey' }
=> undefined

You mentioned the issue with the "undefined" message - this might be due to missing a return statement in your function. Additionally, it seems like you are using two predefined arrays instead of utilizing the function parameter 'array'. Try modifying your code to properly accept 'array' as a parameter and generate the desired output accordingly.

javascript arrays object

Answer 1

Answer №1

Utilize the array indexes to retrieve values and build objects:

function extractFirstAndLast(array) {

  var myObject = {};
  myObject[array[0]] = array[array.length-1];
  return myObject;
}

var firstAndLastArray = ['Apple', 'Banana', 'Cherry', 'Date'];
var secondArray = ['Tomato', 'Potato', 'Lettuce', 'Carrot']

console.log(extractFirstAndLast(firstAndLastArray));
console.log(extractFirstAndLast(secondArray));

Answer 2

Utilize the array indexes to retrieve values and build objects:

function extractFirstAndLast(array) {

  var myObject = {};
  myObject[array[0]] = array[array.length-1];
  return myObject;
}

var firstAndLastArray = ['Apple', 'Banana', 'Cherry', 'Date'];
var secondArray = ['Tomato', 'Potato', 'Lettuce', 'Carrot']

console.log(extractFirstAndLast(firstAndLastArray));
console.log(extractFirstAndLast(secondArray));

Answer 3

Answer №2

To easily achieve the desired outcome, simply create an empty object and set the first element of the given array as a key, and the last element as its corresponding value.

var fruitList = ['Apple', 'Banana', 'Cherry', 'Date'],
    veggieList = ['Carrot', 'Broccoli', 'Lettuce', 'Spinach', 'Cabbage'];
 

function assignFirstAndLast(arr) {
  var result = Object.create(null);
      result[arr[0]] = arr[arr.length-1];
      console.log(result);
      return result;
}

assignFirstAndLast(fruitList);
assignFirstAndLast(veggieList);

Answer 4

To easily achieve the desired outcome, simply create an empty object and set the first element of the given array as a key, and the last element as its corresponding value.

var fruitList = ['Apple', 'Banana', 'Cherry', 'Date'],
    veggieList = ['Carrot', 'Broccoli', 'Lettuce', 'Spinach', 'Cabbage'];
 

function assignFirstAndLast(arr) {
  var result = Object.create(null);
      result[arr[0]] = arr[arr.length-1];
      console.log(result);
      return result;
}

assignFirstAndLast(fruitList);
assignFirstAndLast(veggieList);

Answer 5

Answer №3

Why am I receiving the "undefined" message on the output screen's third line?

The displayed output is:

{ Queen: 'Beyonce' }
{ Kevin: 'Spacey' }
=> undefined

This happens because the function, transformFirstAndLast, lacks a return statement. A function must always return something; therefore, it defaults to undefined.

function transformFirstAndLast(array) {
  var arrayList = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'];
  var arrayList2 = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey']
  var myObject = {};
  key = arrayList.shift();
  value = arrayList.pop();
  myObject[key] = value
  var myObj2 = {};
  key = arrayList2.shift();
  value = arrayList2.pop();
  myObj2[key] = value;
  console.log(myObject);        <-- first output
  console.log(myObj2);          <-- second output
}
transformFirstAndLast();        <-- third output

The third output involves calling the function but not returning any value. If you simply had 1;, it would output 1.

To address this issue, you can:

Utilize the comma operator for another action; e.g., transformFirstAndLast(), 'done';
Add a return statement in your function like return true; ideally, you'd want to return the object with return myObject;

Illustration

Here's a comprehensive example of accepting arrays, multiple arrays, or even strings as arguments in the function and returning the created object.

"use strict";

var arrayList = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'];
var arrayList2 = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey'];

console.log(
  'Example 1 (passing arrays):\n',
  transformFirstAndLast(arrayList, arrayList2)
);
console.log(
  'Example 2 (passing strings):\n',
  transformFirstAndLast('thank','you','mother')
);


function transformFirstAndLast() {
  var obj = {}, arrs = [];
   
  if (!Array.isArray(arguments[0]))
    // handle a bunch of strings (Example 2)
    arrs = [Object.keys(arguments).map(k=>arguments[k])];
  else
    // handle 1 or more array
    arrs = [...arguments];
  
  arrs.forEach( arr => {
    obj[arr[0]] = arr[arr.length-1];
  });
  
  return obj;
}

Answer 6

Why am I receiving the "undefined" message on the output screen's third line?

The displayed output is:

{ Queen: 'Beyonce' }
{ Kevin: 'Spacey' }
=> undefined

This happens because the function, transformFirstAndLast, lacks a return statement. A function must always return something; therefore, it defaults to undefined.

function transformFirstAndLast(array) {
  var arrayList = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'];
  var arrayList2 = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey']
  var myObject = {};
  key = arrayList.shift();
  value = arrayList.pop();
  myObject[key] = value
  var myObj2 = {};
  key = arrayList2.shift();
  value = arrayList2.pop();
  myObj2[key] = value;
  console.log(myObject);        <-- first output
  console.log(myObj2);          <-- second output
}
transformFirstAndLast();        <-- third output

The third output involves calling the function but not returning any value. If you simply had 1;, it would output 1.

To address this issue, you can:

Utilize the comma operator for another action; e.g., transformFirstAndLast(), 'done';
Add a return statement in your function like return true; ideally, you'd want to return the object with return myObject;

Illustration

Here's a comprehensive example of accepting arrays, multiple arrays, or even strings as arguments in the function and returning the created object.

"use strict";

var arrayList = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce'];
var arrayList2 = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey'];

console.log(
  'Example 1 (passing arrays):\n',
  transformFirstAndLast(arrayList, arrayList2)
);
console.log(
  'Example 2 (passing strings):\n',
  transformFirstAndLast('thank','you','mother')
);


function transformFirstAndLast() {
  var obj = {}, arrs = [];
   
  if (!Array.isArray(arguments[0]))
    // handle a bunch of strings (Example 2)
    arrs = [Object.keys(arguments).map(k=>arguments[k])];
  else
    // handle 1 or more array
    arrs = [...arguments];
  
  arrs.forEach( arr => {
    obj[arr[0]] = arr[arr.length-1];
  });
  
  return obj;
}

JavaScript's Functions and Objects: An Overview

Answer №1

Answer №2

Answer №3

Illustration

Similar questions

How can I incorporate a JavaScript module into my Typescript code when importing from Typeings?

Angular.js model that is updated by checkboxes

When using Laravel with jQuery Ajax, the search for the file address is unsuccessful

Executing an AngularJS function through CasperJS is a common task that can

What prompted the modification of this statement from C99 to C11?

Utilize form binding with Vue router's push method

Guide to automatically inserting text into an html form and submitting it without manual intervention

Having trouble retrieving properties from a JavaScript JSON object?

Issue with pop up window causing button click event to malfunction

I encountered a RangeError with code [ERR_HTTP_INVALID_STATUS_CODE] due to an invalid status code being undefined

Using JavaScript within WordPress to achieve a seamless scrolling effect

The function FormatCurrency is non-existent

Turning a JSON dot string into an object reference in JavaScript: A simple guide

Choose an element that has been generated dynamically using jQuery

Design a unique UIButton that can be customized to display various data points

Step-by-step guide on how to effectively send a NodeJS request and stream it into a separate response

Issues with displaying data in Angular ChartJS are troubling users

Implementing template loading on page load with state in AngularJS

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

Update a separate React component in response to the interaction with a different React component