Because of the versatility of the various methods of the Array object, there are numerous ways to remove the first element from an array.

1.1.1.1. Remove the First Element Using the shift Method

firstElementANYTYPE = sourceARRAY.shift ();

1.1.1.2. Remove the First Element Using the splice Method

firstElementARRAY = sourceARRAY.splice (0,1);

Because of the versatility of the various methods of the Array object, there are numerous ways to remove the last element from an array.

1.1.2.1. Remove the Last Element Using the pop Method

lastElementANYTYPE = sourceARRAY.pop ();

1.1.2.2. Remove the Last Element Using the splice Method

lastElementARRAY = sourceARRAY.splice (-1,1);

1.1.2.3. Remove the Last Element by Decrementing the length Property

sourceARRAY.length--;

lastElementANYTYPE = sourceARRAY [sourceARRAY.length - 1];
sourceARRAY.length--;

.

An array can be emptied of all of its elements by simply setting the value of its length property to 0.

SYNTAX

myArray.length = 0;

EXAMPLE

var fruits = ['apricot','strawberry','apple','mango','peach','pear','orange','tangerine'];
fruits.length = 0;  // this empties out the fruits array
alert (fruits);     // displays an empty alert, because the fruits array has no elements

EXAMPLE

function removeFromArray (_array,_value) {
  var _timesFound = 0;
  if (typeof _array != 'undefined' && _array != null && typeof _array.length == 'number') {
    for (var _elementNo = -1; ++_elementNo < _array.length - _timesFounds;) {
      if (_array [_elementNo + _timesFound] === _value) _timesFound++;
      if (_timesFound && _elementNo + _timesFound < _array.length)
        _array [_elementNo] = _array [_elementNo + _timesFound]
    }
    _array.length -= _timesFound;
  }
  return _timesFound;
}

A one level deep copy of an array (as opposed to a deep clone) is an array whose element values are all identical to the corresponding element values in the source array.

This means that for a source array that has element values that are object references, those object references will be copied into the copy of that array. The result of this is that the source array and its one level deep copy could share objects. Consider the following example...

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  stoneFruits = ['apricot','peach','plum'],
  berryFruits = ['grape','raspberry','strawberry'],
  fruits = [citrusFruits,stoneFruits,berryFruits],
  fruitsCopy = fruits.concat () // CREATE A ONE LEVEL DEEP COPY
;
citrusFruits [0] = 'grapefruit';
alert (fruitsCopy [0] [0]); // alerts the text "grapefruit"

In the above example, the fruits array is a two dimensional array, where the elements of the array are references to the citrusFruits, stoneFruits, and berryFruits arrays. The fruitsCopy array is a one level deep copy of the fruits array, created by calling the concat method on the fruits array and not specifying any additional values to concatenate. Now, if the first element of the citrusFruits array is changed from 'lemon' to 'grapefruit', dereferencing the first element in the first nested array in the fruitsCopy array produces the value 'grapefruit'. So, clearly the fruitsCopy array didn't get its own copy of the citrusFruits array - it has a shared reference to it.

Creating a one level deep copy of an array - rather than a deep clone - is often perfectly adequate, and sometimes actually preferable. In the event that you do actually need a deep clone, you can use the Uize.clone static method of the Uize base module.

1.2.1.1. Several Ways to Create a One Level Deep Copy

newARRAY = sourceARRAY.concat ();

newARRAY = sourceARRAY.slice ();

var newARRAY = [];
newARRAY.push.apply (newARRAY,sourceARRAY);

var newARRAY = [];
newARRAY.unshift.apply (newARRAY,sourceARRAY);

SYNTAX

targetARRAY.push.apply (targetARRAY,sourceARRAY.splice (0,Infinity));

SYNTAX

targetARRAY.unshift.apply (targetARRAY,sourceARRAY.splice (0,Infinity));

SYNTAX

array1ARRAY.push.apply (
  array1ARRAY,
  array2ARRAY.splice.apply (
    array2ARRAY,[0,Infinity].concat (array1ARRAY.splice (0,Infinity))
  )
);

OR...

array1ARRAY.splice.apply (
  array1ARRAY,
  [0,Infinity].concat (
    array2ARRAY.splice.apply (array2ARRAY,[0,Infinity].concat (array1ARRAY))
  )
);

SYNTAX

array1ARRAY.unshift.apply (
  array1ARRAY,
  array2ARRAY.splice.apply (
    array2ARRAY,
    [0,segmentLengthINT].concat (array1ARRAY.splice (0,segmentLengthINT))
  )
);

SYNTAX

segmentLengthINT && array1ARRAY.push.apply (
  array1ARRAY,
  array2ARRAY.splice.apply (
    array2ARRAY,
    [-segmentLengthINT,Infinity].concat (array1ARRAY.splice (-segmentLengthINT,Infinity))
  )
);

.

.

When specifying an initial length for an array in the Array constructor, the length must be specified as a non-negative integer value.

Specifying a negative number, a non-integer number, or any of the special number values -Infinity, Infinity, or NaN will result in a JavaScript error being generated.

In its most basic usage, the concat method can be used to concatenate two arrays in order to produce a new array.

SYNTAX

newARRAY = array1ARRAY.concat (array2ARRAY);

In this usage, the elements of the array array2ARRAY are concatenated at the end of the array array1ARRAY to produce a new array that is returned as the result. If you wanted the elements of array2ARRAY to appear at the beginning of the concatenated array, then you would swap the variables around and call the concat method on array2ARRAY, supplying array1ARRAY as the parameter.

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  stoneFruits = ['apricot','peach','plum'],
  fruitsCitrusFirst = citrusFruits.concat (stoneFruits),
  fruitsStoneFirst = stoneFruits.concat (citrusFruits)
;

After the above code has executed, the fruitsCitrusFirst array will have the value ['lemon','lime','orange','apricot','peach','plum'], while the fruitsStoneFirst array will have the value ['apricot','peach','plum','lemon','lime','orange'].

The concat method is versatile enough to allow you to easily concatenate an arbitrary number of arrays, simply by specifying all the arrays that you want concatenated at the end of the "head" array as parameters to the concat method.

SYNTAX

newARRAY = array1ARRAY.concat (array2ARRAY,array3ARRAY,...,arrayNARRAY);

To concatenate an arbitrary number of arrays, call the concat method on the array whose elements you would like to appear at the "head" of the concatenated array, and then supply all the other arrays as parameters to the concat method.

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  stoneFruits = ['apricot','peach','plum'],
  berryFruits = ['grape','raspberry','strawberry'],
  fruits = citrusFruits.concat (stoneFruits,berryFruits)
;

After the above code has been executed, the fruits array will have the value ['lemon','lime','orange','apricot','peach','plum','grape','raspberry','strawberry'].

3.1.2.1. Chaining concat Also Works, But is Less Efficient

var
  citrusFruits = ['lemon','lime','orange'],
  stoneFruits = ['apricot','peach','plum'],
  berryFruits = ['grape','raspberry','strawberry'],
  fruits = citrusFruits.concat (stoneFruits).concat (berryFruits)
;

While the concat method is typically used to concatenate the contents of two or more arrays, it can also be used to concatenate the elements of one array with any number of individual values of any type.

SYNTAX

newARRAY = sourceARRAY.concat (value1ANYTYPE,value2ANYTYPE,...,valueNANYTYPE);

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  citrusAndStoneFruits = citrusFruits.concat ('apricot','peach','plum')
;

After the above code has been executed, the value of the citrusAndStoneFruits array will be ['lemon','lime','orange','apricot','peach','plum'].

3.1.3.1. Special Handling for Array Values

var
  citrusFruits = ['lemon','lime','orange'],
  stoneFruits = ['apricot','peach','plum'],
  fruits = citrusFruits.concat (stoneFruits,'grape','raspberry','strawberry')
;

In situations where you need to concatenate some number of values of any type, and you like the behavior of the concat method of "unrolling" array values, but you're not guaranteed that the first value is going to always be an array, then you can call the concat method on a new empty array.

SYNTAX

newARRAY = [].concat (value1ANYTYPE,value2ANYTYPE,...,valueNANYTYPE);

Using this little trick, you don't have to worry about calling the concat method on the first of the values you wish to concatenate, not knowing whether or not that value will be an array - your dummy empty array guarantees you've always got something to call the concat method on. Consider the following example...

EXAMPLE

var
  stoneFruits = ['apricot','peach','plum'],
  fruits = [].concat ('lemon','lime','orange',stoneFruits,'grape','raspberry','strawberry')
;

After the above code has been executed, the fruits array will have the value ['lemon','lime','orange','apricot','peach','plum','grape','raspberry','strawberry']. The first value we wish to concatenate is the string value 'lemon', and we can't call the Array object's concat method on that string value. But we can call concat on the array value [] (empty array).

A one level deep copy of an array can easily be created using the concat method, simply by calling the method on the array you wish to copy, and supplying no parameters to the method.

SYNTAX

newARRAY = sourceARRAY.concat ();

EXAMPLE

var
  citrusFruits = ['lime','orange','lemon'],
  citrusFruitsSorted = citrusFruits.concat ().sort ()
;

After the above code has been executed, the value of the citrusFruitsSorted array will be ['lemon','lime','orange'], while the value of the citrusFruits array will still be its initial value of ['lime','orange','lemon']. This is because the citrusFruitsSorted array is created by first creating a one level deep copy of the citrusFruits array, after which its elements are then sorted. This leaves the elements of the citrusFruits array untouched.

As a result of its unique behavior of "unrolling" parameter values that are arrays, the concat method can be used in a novel way to flatten a two dimensional array (ie. an array of arrays).

SYNTAX

newARRAY = Array.prototype.concat.apply ([],twoDimensionalARRAY);

The apply method can be called on the concat method (which is dereferenced off of the Array.prototype object), allowing an array to be used as the arguments for a concat method call. To give the apply method a context on which to apply the concat method, the value [] (a dummy empty array) is provided. Now, each of the arguments that the concat method sees would be one of the arrays that were nested inside the two dimensional array, and the elements in these arrays would get "unrolled" and concatenated together with the elements from all the other nested arrays, to form the new flattened array.

EXAMPLE

var
  fruitsInGroups = [
    ['lemon','lime','orange'],
    ['apricot','peach','plum'],
    ['grape','raspberry','strawberry']
  ],
  fruits = Array.prototype.concat.apply ([],fruitsInGroups)
;

After the above code has been executed, the fruits array will have the value ['lemon','lime','orange','apricot','peach','plum','grape','raspberry','strawberry']. The statement Array.prototype.concat.apply ([],fruitsInGroups) effectively translates to the statement [].concat (['lemon','lime','orange'],['apricot','peach','plum'],['grape','raspberry','strawberry']).

In situations where you need to concatenate two array variables and where either or both of them may be null or undefined, and where you wish to treat null or undefined values as empty arrays, you can simply or the values with empty arrays, as shown below...

SYNTAX

newARRAY = (array1ARRAY || []).concat (array2ARRAY || []);

In the case of the array1ARRAY value, you kind of have to ensure that the value is an array, because you can't call the concat method on null or undefined. Then, with regards to the array2ARRAY value, specifying a single parameter to the concat method that is null or undefined is not the same as specifying no parameters (or a single parameter that is an empty array). Specifying a null or undefined parameter value will result in that value being concatenated onto the result array. So, if you want to treat a null or undefined value for the array2ARRAY variable as meaning no elements, you need to do the or operation as shown above.

When an array is serialized to a string using the join method, the values of individual elements of the array are serialized / coerced to strings before being concatenated together.

EXAMPLE

var array = [
  false,                       // serialized to "false"
  42,                          // serialized to "42"
  Infinity,                    // serialized to "Infinity"
  'foo',                       // serialized to "foo"
  new RegExp ('\\d+'),         // serialized to "/\d+/"
  Uize.Class ({value:'bar'}),  // serialized to "bar"
  ['lemon','lime','orange']    // serialized to "lemon,lime,orange"
];

alert (array.join (' ')); // alerts "false 42 Infinity foo /\d+/ bar lemon,lime,orange"

In the above example, the alert statement would alert the text "false 42 Infinity foo /\d+/ bar lemon,lime,orange". Worth noting is that the regular expression has its own string serialization behavior that is implemented in the RegExp object, the Uize.Class base class has special string serialization behavior for instances of classes with a value interface, and serializing the array value will invoke the toString method of the Array object.

3.2.1.1. Special Handling of null and undefined Values

var array = ['foo',null,undefined,'bar'];
alert (array.join ());  // alerts the text "foo,,,bar"

Although it is possible to join an array using a custom delimiter, one can also omit the optional delimiter parameter and simply join an array's elements together using the default "," (comma) delimiter.

SYNTAX

joinedArraySTR = sourceARRAY.join ();

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  citrusFruitsStr = citrusFruits.join ()
;
alert (citrusFruitsStr);  // alerts the text "lemon,lime,orange"

In this form, using the join method is equivalent to using the toString method, which also joins the elements of an array together using a comma as the separator. Because the default delimiter is a comma and not an empty string, if you want to join all the elements of an array with nothing between the element values, then you will have to join an array using a custom delimiter, specifying the value '' (empty string) for the delimiter - the statement array.join () is not equivalent to the statement array.join ('').

The elements of an array can be joined using a custom delimiter, by specifying the delimiter as the single parameter to the join method.

SYNTAX

joinedArraySTR = sourceARRAY.join (delimiterANYTYPE);

EXAMPLE

var array = ['FOO','AND','BAR'];
alert (array.join (' ')); // alerts the text "FOO AND BAR"

3.2.3.1. Custom Delimiter Can Be of Any Type

var array = ['FOO','AND','BAR'];
alert (array.join (false));    // alerts the text "FOOfalseANDfalseBAR"
alert (array.join (777));      // alerts the text "FOO777AND777BAR"
alert (array.join (NaN));      // alerts the text "FOONaNANDNaNBAR"
alert (array.join (null));     // alerts the text "FOOnullANDnullBAR"
alert (array.join ([1,2,3]));  // alerts the text "FOO1,2,3AND1,2,3BAR"

var array = ['FOO','AND','BAR'];
alert (array.join (undefined));  // alerts the text "FOO,AND,BAR"

Because the behavior of the join method when the optional delimiter is not specified is to use a comma as the default, if you want to join an array's elements together with nothing inbetween them then you have to explicitly specify the value '' (an empty string) as the custom delimiter.

SYNTAX

joinedArraySTR = sourceARRAY.join ('');

EXAMPLE

var htmlChunks = [
  '
',
    'Hello, world!',
  '
'
];
document.writeln (htmlChunks.join (''));

In the above example, if you didn't specify the empty string delimiter, then the HTML that the document.writeln statement spits out would contain undesired commas that would actually display in the rendered HTML.

An array can easily be turned into a multi-line string using the join method, simply by specifying the value '\n' (a linebreak character) for the method's optional delimiter parameter.

SYNTAX

multiLineSTR = sourceARRAY.join ('\n');

EXAMPLE

var fruits = ['apricot','strawberry','apple','mango','peach','pear','orange','tangerine'];
document.writeln (
  '
\n' +
  fruits.join ('\n') + '\n' +
  '
'
);

HTML OUTPUT

apricot
strawberry
apple
mango
peach
pear
orange
tangerine

Because of its special handling of null and undefined values, the join method can be used in a novel way to repeat any value a desired number of times.

SYNTAX

repeatedSTR = new Array (numRepetitionsINT + 1).join (toRepeatANYTYPE);

Because null or undefined element values are converted to empty strings, joining an array that contains some number of null or undefined elements using a custom delimiter results in a string with number-of-elements-minus-one repititions of that delimiter. The contructor of the Array object makes it easy to create a new array of a desired length, where the elements are initialized to undefined.

EXAMPLE

var divider = new Array (11).join ('-=+=-');
alert (divider); // alerts the text "-=+=--=+=--=+=--=+=--=+=--=+=--=+=--=+=--=+=--=+=-"

This technique is similar to the technique that can be used with the toString method to create a string containing an arbitrary number of commas (remember, toString is a special case of join). Because the join method's custom delimiter can be of any type, you can use this technique to repeat any type of value to form a new string.

.

SYNTAX

joinedArraySTR =
  prefixSTR +
  sourceARRAY.join (suffixSTR + delimiterSTR + prefixSTR) +
  suffixSTR
;

If the array on which the pop method is called has no elements, then the array will not be affected and the method will return the value undefined.

Along with the companion push method, the pop method has its history in stack management, so JavaScript's version of this method may come in handy in programs where you're effectively treating a JavaScript array as a stack.

In cases where you're processing and eliminating the items on a stack inside a loop, and where you know that none of the elements' values are null or undefined, you can use the pop method inside the loop's test, as follows...

EXAMPLE

var stackElement;
while ((stackElement = stack.pop ()) != null) {
  // code here to process stackElement
}
// by the time we get here, the stack is empty

In the above example, we're doing an assigment and also a test on the result of the assignment, both inside the loop's test. Once the stack is empty, the pop method will return the value undefined, the test will fail, and the loop will stop iterating, at which point the stack array will also be empty.

Besides the pop method, there are numerous other ways to remove the last element from an array.

While there are more concise ways to create a one level deep copy of an array using other methods of the Array object, it is also technically possible to create a one level deep copy using the push instance method, as shown below...

SYNTAX

var newARRAY = [];
newARRAY.push.apply (newARRAY,sourceARRAY);

We're leveraging the fact that the push method can accept an arbitrary number of parameters, and we can supply the elements of the sourceARRAY array as the arguments for the push method by calling the apply method on the push method (this is a facility of JavaScript's built-in Function object). In a similar way, you can also create a one level deep copy using the unshift instance method.

If the array on which the shift method is called has no elements, then the array will not be affected and the method will return the value undefined.

In cases where you're processing and eliminating the items from a queue inside a loop, and where you know that none of the queue's element values are null or undefined, you can use the shift method inside the loop's test, as follows...

EXAMPLE

var firstInQeueue;
while ((firstInQeueue = queue.shift ()) != null) {
  // code here to process firstInQeueue
}
// by the time we get here, the queue is empty

In the above example, we're doing an assigment and also a test on the result of the assignment, both inside the loop's test. Once the queue is empty, the shift method will return the value undefined, the test will fail, and the loop will stop iterating, at which point the queue array will also be empty.

Besides the shift method, there are numerous other ways to remove the first element from an array.

A one level deep copy of an array can easily be created using the slice method, simply by calling the method on the array you wish to copy, and supplying no parameters to the method.

SYNTAX

newARRAY = sourceARRAY.slice ();

The slice method returns a new array that is a one level deep copy of the specified portion of the array on which the method is called. The array "slice" that is to be copied is specified using two parameters: the first parameter specifies the starting index, and the second parameter specifies the ending index. When the ending index (ie. the second parameter) is not specified, it is defaulted to the array's length (ie. one element after the last element of the array). When the starting index (ie. the first parameter) is not specified, it is defaulted to 0 (ie. the first element of the array). So, if the slice method is called with no parameters specified, it effectively returns a one level deep copy of the entire array - from first element to last.

The toString method may be called explicitly, but it is also invoked implicitly in various situations.

3.10.1.1. Automatic Invoking of toString by Operators

var
  citrusFruits = ['lemon','lime','orange'],
  message = 'CITRUS FRUITS: ' + citrusFruits
;
alert (message); // alerts the text "CITRUS FRUITS: lemon,lime,orange"

3.10.1.2. Automatic Invoking of toString by Functions and Methods

var fruits = ['apricot','strawberry','apple','mango','peach','pear','orange','tangerine'];

alert (/grapefruit|mango|pomegranate/.test (fruits)); // alerts the text "true"

Using the toString method is equivalent to using the join method and either specifying the value ',' (a comma) for that method's delimiter parameter, or not specifying a delimiter parameter (the delimiter defaults to a comma).

EXAMPLE

var fruits = ['apricot','strawberry','apple','mango','peach','pear','orange','tangerine'];
alert (fruits.toString () == fruits.join (',')); // alerts the text "true"
alert (fruits.toString () == fruits.join ());    // alerts the text "true"

In the above example, the two alert statements would display the text "true", because for each of them the two sides of the equality expression are equivalent and produce the exact same result.

Unlike the join method, there is no way to specify the delimiter to be used when concatenating values using the toString method - it's always a comma.

So, for example, the statement array.toString ('-') is INCORRECT and would still produce a string where the element values are concatenated using a comma. If you need to control the delimiter used, use the join method.

When an array is serialized to a string using the toString method, the values of individual elements of the array are serialized / coerced to strings before being concatenated together.

EXAMPLE

var array = [
  false,                       // serialized to "false"
  42,                          // serialized to "42"
  Infinity,                    // serialized to "Infinity"
  'foo',                       // serialized to "foo"
  new RegExp ('\\d+'),         // serialized to "/\d+/"
  Uize.Class ({value:'bar'}),  // serialized to "bar"
  ['lemon','lime','orange']    // serialized to "lemon,lime,orange"
];

alert (array);  // alerts the text "false,42,Infinity,foo,/\d+/,bar,lemon,lime,orange"

In the above example, the alert statement would alert the text "false,42,Infinity,foo,/\d+/,bar,lemon,lime,orange". Worth noting is that the regular expression has its own string serialization behavior that is implemented in the RegExp object, the Uize.Class base class has special string serialization behavior for instances of classes with a value interface, and serializing the array value will invoke the toString method of the Array object.

3.10.4.1. Special Handling of null and undefined Values

var array = ['foo',null,undefined,'bar'];
alert (array.toString ());  // alerts the text "foo,,,bar"

An array can be serialized to a string by calling the toString method on the array.

SYNTAX

arrayAsStringSTR = sourceARRAY.toString ();

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  citrusFruitsStr = citrusFruits.toString ()
;
alert (citrusFruitsStr);  // alerts the text "lemon,lime,orange"

This approach is not often used in practice, because you can more conveniently serialize an array to a string, by implicitly invoking the toString method.

A more concise way of serializing an array to a string than calling the toString method is implicitly invoking the toString method by adding the array to an empty string (see Automatic Invoking of toString by Operators).

SYNTAX

arrayAsStringSTR = sourceARRAY + '';

An additional benefit of this approach, besides just being less to type, is that the array variable or parameter can be null or undefined. Trying to call the toString method on a variable whose value is null or undefined would throw an error, but concatenating null or undefined with an empty string will not throw an error.

EXAMPLE

var
  citrusFruits = ['lemon','lime','orange'],
  citrusFruitsStr = citrusFruits + ''
;
alert (citrusFruitsStr);  // alerts the text "lemon,lime,orange"

Because of the toString method's special handling of null and undefined values, this method can be used in a novel way to create a string containing a specified number of commas, simply by creating an array initialized with a number of undefined values and then serializing it to a string.

SYNTAX

lotsOfCommasSTR = new Array (totalCommasINT + 1) + '';

Because the , (comma) character is the delimiter that separates elements when the toString method concatenates them, and because null or undefined element values are converted to empty strings, serializing an array that contains some number of null or undefined elements to a string results in a string with number-of-elements-minus-one commas. The contructor of the Array object makes it easy to create a new array of a desired length, where the elements are initialized to undefined.

EXAMPLE

var totalCommas = 10;
alert (new Array (totalCommas + 1) + '');  // alerts the text ",,,,,,,,,,"

This technique is similar to the technique that can be used with the join method to repeat a value any number of times (remember, toString is a special case of join).

While there are more concise ways to create a one level deep copy of an array using other methods of the Array object, it is also technically possible to create a one level deep copy using the unshift instance method, as shown below...

SYNTAX

var newARRAY = [];
newARRAY.unshift.apply (newARRAY,sourceARRAY);

We're leveraging the fact that the unshift method can accept an arbitrary number of parameters, and we can supply the elements of the sourceARRAY array as the arguments for the unshift method by calling the apply method on the unshift method (this is a facility of JavaScript's built-in Function object). In a similar way, you can also create a one level deep copy using the push instance method.