DEV Community

Cover image for Javascript: Array.unshift(), Array.join().
vbazhutin
vbazhutin

Posted on • Updated on

Javascript: Array.unshift(), Array.join().

Array.unshift()

Javascript array unshift() - is an inbuilt function that adds one or more items or elements to the beginning of the array and returns the new length of the array. The unshift() method changes the length of the array directly, so it is not a pure function.

Javascript unshift() method is like the push() method, only it works at the beginning of the array.
The unshift() method can prepend one or more elements to the beginning of an array. This alters an array on which the method was called.

When people first start to learn about arrays in javascript then, they usually learn about the Javascript push() and Javascript pop() methods which merely adds and removes the item from the end of an array.

If their particular language supports it. These two methods append the items to the array and remove an element from the array respectively.

Javascript unshift() and Javascript shift() methods are the same as push() and pop(), only work, at the other end of the array.

Syntax

The syntax of the Javascript array unshift() method is the following.

array.unshift(item1, item2, ..., itemX)

Parameters

The number of arguments to this function is the same as the number of elements to be added at the beginning of the array.

Return value

This function returns the new length of the array after inserting the arguments at the beginning of the array.

Example

Let us take a simple example and see how it works.

let apps = ["Instagram", "Facebook", "Messanger"];
apps.unshift("Oculus", "WhatsApp");

console.log(apps);

Run the file, and you can see that Oculus and WhatsApp are appended at the start of an array.

More examples

The following code will include almost all the scenarios of the unshift() method.

let arr = [1, 2];

arr.unshift(0); // result of call is 3, the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]

Javascript array unshift object

Let’s take an example in which we defined two objects and add them into one array. Then try to add a third object using an array unshift() method.

const objA = {
  name: 'Millie Bobby Brown'
}
const objB = {
  name: 'Finn Wolfhard'
}
const objC = {
  name: 'Sadie Sink'
}
let arr = [objA, objB];
arr.unshift(objC);
console.log(arr);

Let's see the output.

[ { name: 'Sadie Sink' },
  { name: 'Millie Bobby Brown' },
  { name: 'Finn Wolfhard' } ]

Unshift multiple array items in Javascript

We can add multiple items to the start of an array using the unshift() method.

const objA = {
  name: 'Millie Bobby Brown'
}
const objB = {
  name: 'Finn Wolfhard'
}
const objC = {
  name: 'Sadie Sink'
}
const objD = {
  name: 'Noah Schnapp'
}
const objE = {
  name: 'Gaten Matterazo'
}
let arr = [objA, objB];
arr.unshift(objC, objD, objE);
console.log(arr);

And the output will be.

[ { name: 'Sadie Sink' },
  { name: 'Noah Schnapp' },
  { name: 'Gaten Matterazo' },
  { name: 'Millie Bobby Brown' },
  { name: 'Finn Wolfhard' } ]

Conclusion

Javascript array unshift() method is used to add the item or items into the array.

Array.join()

Javascript array join() is an inbuilt method that creates and returns the new string by concatenating all of the elements of the array. The join() method joins the items of the array into the string and returns that string. The specified separator will separate the array items. The default separator is a comma (,).

Syntax

The syntax for the join() method is the following.

array.join(separator)

The separator is an optional parameter. By default, a separator is a comma.

Example

A simple example is the following.

let apps = ["Instagram", "Facebook", "Messenger"];
let fb = apps.join();

console.log(fb);

Output

"Instagram","Facebook","Messenger"

More examples

So, join() returns a comma-separated string. We did not pass any parameter to the join() function that is why it has returned the comma-separated string.

let apps = ["Instagram", "Facebook", "Messenger"];
let fb = apps.join('_');

console.log(fb);

It will return the underscore separated string.

So, an array.join() function is used to join all the items of an array together into a string.

If an element is undefined or null, it is converted to the empty string. So If an array.length is 0, the empty string is returned.

Joining an array in four different ways

The following example is an array, with three elements, then joins the array four times: using the default separator, then a comma and space, then a plus and an empty string.

let suits = ['Harvey', 'Mike', 'Louis'];
suits.join();      // 'Harvey,Harvey,Louis'
suits.join(', ');  // 'Harvey, Harvey, Louis'
suits.join(' + '); // 'Harvey + Harvey + Louis'
suits.join('');    // 'HarveyHarveyLouis'

Joining an array-like object

The following example joins an array-like object (arguments), by calling Function.prototype.call on Array.prototype.join.

function args(a, b, c) {
  let data = Array.prototype.join.call(arguments);
  console.log(data);
}
args(21, 'acme', false);

Visit MDN to learn more about Javascript array methods.

Top comments (2)

Collapse
 
mohsenalyafei profile image
Mohsen Alyafei • Edited

Thanks.

I think you have a typo above, as the output of the following :

let apps = ["Instagram", "Facebook", "Messenger"];
let fb = apps.join();

console.log(fb);

is not :

[ "Instagram","Facebook","Messenger" ]

but a string as it is no longer an array:

"Instagram,Facebook,Messenger"
Collapse
 
vbazhutin profile image
vbazhutin

Thank you for pointing this out!