Get the first and last item in an Array - JS

Question

I am trying to get the first and last item in array and display them in an object.

What i did is that I use the first and last function and then assign the first item as the key and the last item as the value.

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

function firstAndLast(array) {

var firstItem = myArray.first;
var lastItem = myArray.last;

 var objOutput = {
   firstItem : lastItem 
  };

}

var display = transformFirstAndLast(myArray);

console.log(display);

however this one gets me into trouble. It says undefined. Any idea why is that?

What does myArray.first do? The first item is the item with the index 0. — zerkms
– zerkms, Commented May 1, 2017 at 4:07
When looking for an array, pretty sure it'd be myArray[0] for the first object and myArray[myArray.length - 1] for the last. — user4616966
– user4616966, Commented May 1, 2017 at 4:08

Ashraf · Accepted Answer · 2017-05-01 04:26:43Z

25

I've modified your code :

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

function firstAndLast(array) {

var firstItem = myArray[0];
var lastItem = myArray[myArray.length-1];

 var objOutput = {
   first : firstItem,
   last : lastItem
  };

return objOutput;
}

var display = firstAndLast(myArray);

console.log(display);

UPDATE: New Modification

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

function firstAndLast(array) {

var firstItem = myArray[0];
var lastItem = myArray[myArray.length-1];

var objOutput = {};
objOutput[firstItem]=lastItem

return objOutput;
}

var display = firstAndLast(myArray);

console.log(display);

edited May 1, 2017 at 4:26

answered May 1, 2017 at 4:10

Ashraf

2,6091 gold badge23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

nnnnnn Over a year ago

What if the desired output is {Rodel: "Betus"}, as implied by the { firstItem : lastItem } in the OP's code?

Ashraf Over a year ago

@nnnnnn "I am trying to get the first and last item in array and display them in an object."

user6925364 Over a year ago

the output must be {Rodel: "Betus"}

user6925364 Over a year ago

var objOutput = { firstItem : lastItem }; doesnt work

zerkms Over a year ago

@GaaraItachiUchiha it totally "does work", just not in the way you expect it to. stackoverflow.com/q/4968406/251311

|

Mudassar · Accepted Answer · 2021-12-28 14:09:03Z

18

As of 2021, you can use Array.prototype.at()

let colors = ['red',  'green', 'blue']

let first = colors.at(0) // red
let last = colors.at(-1) // blue

To read more about Array.prototype.at()

answered Dec 28, 2021 at 14:09

Mudassar

6285 silver badges14 bronze badges

Comments

Roland · Accepted Answer · 2019-06-15 08:15:12Z

16

With ES6 and destructuring:

const myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

const { 0: first, length, [length -1]: last } = myArray //getting first and last el from array
const obj = { first, last }

console.log(obj) // {  first: "Rodel",  last: "Betus" }

answered Jun 15, 2019 at 8:15

Roland

28.1k9 gold badges108 silver badges103 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-06-18 12:37:01Z

13

ES6

var objOutput = { [myArray[0]]: [...myArray].pop() }

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

var objOutput = { [myArray[0]]: [...myArray].pop() }

console.log(objOutput);

edited Jun 18, 2019 at 12:37

answered Dec 3, 2018 at 13:53

Kamil Kiełczewski

93.8k34 gold badges401 silver badges375 bronze badges

7 Comments

Bataleon Over a year ago

No offense but this looks way worse than the non-ES6 variants :)

Bataleon Over a year ago

Because the above answers are more helpful/cleaner.

Kamil Kiełczewski Over a year ago

@Bataleon the value of this answer is that it is short and different than other answers, so it gives more choice to the programmer and increases his knowledge of potential opportunities

Bataleon Over a year ago

Yes, but the cognitive load of understanding the code is higher than the alternative approaches. Should we not all be aiming to write readable code? :)

orad Over a year ago

@Bataleon vote down means "wrong", this is not a wrong answer. If you don't like an answer, feel free to comment but if it's really bad it won't get enough vote ups. Vote down is a strong negative, that's why StackOverflow will give you negative points when you vote down, so please use them carefully.

|

Przemyslaw · Accepted Answer · 2023-12-29 08:32:21Z

3

Regular answer

const arr = [1, 2, 3, 4];

const first = arr.at(0);
const last = arr.at(-1);

Code golf one-liner

^{Might be somewhat more readable and easy to digest than other one-liner answers.}

const arr = [1, 2, 3, 4];

const [first, last] = [0, -1].map(i => arr.at(i));

answered Dec 29, 2023 at 8:32

Przemyslaw

9001 gold badge7 silver badges19 bronze badges

Comments

Rezan Moh · Accepted Answer · 2021-05-31 13:26:15Z

1

Another variation of roli answer

function firstAndLast(array) {
    return { [[...array].shift()]: [...array].pop() };
}

edited May 31, 2021 at 13:26

answered May 26, 2021 at 0:54

Rezan Moh

3753 silver badges9 bronze badges

1 Comment

B001ᛦ Over a year ago

Please add a proper explanation to your answer.

wanderer · Accepted Answer · 2021-09-03 22:10:14Z

I prefer using a simple array filter:

const myArray = ['one', 2, 3, 4, 5];
const filterFirstLast = (e, i, a) => i === 0 || i === a.length - 1;
const [ first, last ] = myArray.filter(filterFirstLast);
console.log(first, last); // outputs: 'one', 5

// dealing with insufficient input is another topic (input array length < 2)
console.log(['one'].filter(filterFirstLast )); // outputs: ['one']
console.log([].filter(filterFirstLast )); // outputs: []

transforming to something else is as easy

const obj = { [first]: last }; // will be: { one: 5 }, but never { one: "one" }
// OR, if you allow ['one'] to apply for both, if last is nullish (e.g. undefined, null, ""):
const obj = { [first]: last || first }; // will be: { one: 5 }, can be { one: "one" }

Krishnamoorthy Acharya · Accepted Answer · 2023-03-05 11:53:24Z

1

Please try this to find out the first and last value of an array

var array = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

let {0 : a ,[array.length - 1] : b} = array;

 var objOutput = {
   first : a,
   last:b
  };

console.log(objOutput)

edited Mar 5, 2023 at 11:53

answered Apr 23, 2021 at 11:49

Krishnamoorthy Acharya

4,35440 silver badges35 bronze badges

Comments

score 0 · Accepted Answer · 2017-05-01 04:26:20Z

0

To make your first and last properties work as you want, define them as properties with "getters" on the array prototype.

(You also have an inconsistency between firstAndLastArray and transformFirstAndLast, which needed to be fixed.)

Returning {firstName: lastName} will not do what you presumably want, since it will yield the key firstName. To use the actual first name as the key, use computed property names ({[firstName]: lastName}).

Object.defineProperties(Array.prototype, {
  first: { get() { return this[0]; }},
  last:  { get() { return this[this.length - 1]; }}
});

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

function firstAndLast(array) {
  var firstItem = myArray.first;
  var lastItem = myArray.last;
  
  return {[firstItem]: lastItem};
}

var display = firstAndLast(myArray);

console.log(display);

Or, much more simply, just

function firstAndLast(array) {
  return {[array[0]]: array[array.length - 1]};
}

If you don't want to, or cannot, use computed property names, then

function firstAndLast(array) {
  var result = {};
  result[array[0]] = array[array.length - 1];
  return result;
}

edited May 1, 2017 at 4:26

answered May 1, 2017 at 4:19

user663031

3 Comments

user4616966 Over a year ago

Rodel: Bestus Not "firstItem: Bestus"

user4616966 Over a year ago

OP said this a million times

zerkms Over a year ago

@TyQ. if I asked for a lamborghini million times would you please get it to me?

Deepak Dixit · Accepted Answer · 2017-05-01 05:31:14Z

0

Do like this :-

var myArray = ['Rodel', 'Mike', 'Ronnie', 'Betus'];

function firstAndLast(myArr) {

    var firstItem = myArr[0];
    var lastItem = myArr[myArr.length - 1];
    var objOutput = {}; 
    objOutput[firstItem] = lastItem;
    return objOutput;
}

var display = firstAndLast(myArray);

console.log(display);

answered May 1, 2017 at 5:31

Deepak Dixit

1,6201 gold badge17 silver badges27 bronze badges

Comments

S Gabale · Accepted Answer · 2022-05-05 15:43:39Z

0

In Array :- Check first and last element in array are same or not.. 
function hasSame(arr1, arr2) {
    for(i=0; i <arr1.length ; i++) {
    for(j=0; j <arr2.length ; j++) {
        if(arr1[0] === arr2[0] && arr1[2] ===  arr2[2]) {
            return true
        } else
          return false;
    }
}
}

console.log(hasSame(
    ["white bread", "lettuce", "toast"],
    ["white bread", "tomato", "toast"]
))

answered May 5, 2022 at 15:43

S Gabale

114 bronze badges

1 Comment

Sunderam Dubey Over a year ago

It will be better if you add explanation of the answer.

Roman Mishchenko · Accepted Answer · 2023-07-30 15:42:45Z

0

Change last to first

const x=[1,2,3]
x.unshift(x.splice(x.length-1,1)[0])
console.log(x) // [ 3, 1, 2 ]

answered Jul 30, 2023 at 15:42

Roman Mishchenko

11 bronze badge

Comments

score 0 · Accepted Answer · 2024-05-31 06:58:22Z

0

Allow me to share an alternative approach: const all = ['food', 'clean', 'cat', 'shower', 'work out'];

console.log(`You have ${all.length} tasks in total.`);
console.log(`First task: ${all[0]}`);
console.log(`Last task: ${all[all.length - 1]}`);

This code efficiently displays the total number of tasks, along with the first and last tasks in the list.

edited May 31, 2024 at 6:58

answered Mar 11, 2020 at 7:42

user3741325

Collectives™ on Stack Overflow

Get the first and last item in an Array - JS

13 Answers 13

8 Comments

Comments

Comments

7 Comments

Regular answer

Code golf one-liner

Comments

1 Comment

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

8 Comments

Comments

Comments

7 Comments

Regular answer

Code golf one-liner

Comments

1 Comment

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related