🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEjavascript

javascript Documentation

LOADING ENGINE...

Array.push()

AI & DATA SCIENCE // push

push() adds one or more elements to the END of an array and returns the new length.

Syntax

const len = array.push(element1, element2, ...);

Deep Dive Course

**push()** mutates the array by appending elements to the end. It returns the new **length** (not the array). Add multiple items in one call: `arr.push(1, 2, 3)`. For non-mutating append, use the spread operator: `[...arr, newItem]`.

1Understanding Array.push()

push() mutates the array by appending elements to the end. It returns the new length (not the array). Add multiple items in one call: arr.push(1, 2, 3). For non-mutating append, use the spread operator: [...arr, newItem].

💡

push() returns the new LENGTH, not the array. To chain, use concat() or spread instead.

editor.html
const stack = [];
stack.push('first');
stack.push('second', 'third');
console.log(stack);         // ['first','second','third']
console.log(stack.length);  // 3

// Returns new length
const len = stack.push('fourth');
console.log(len); // 4
localhost:3000

2Practical Example

Here is a real-world application of Array.push() showing how it is used in production JavaScript code.

editor.html
// Non-mutating alternative
const original = [1, 2, 3];
const newArr = [...original, 4, 5];
console.log(original); // [1, 2, 3] (unchanged)
console.log(newArr);   // [1, 2, 3, 4, 5]
localhost:3000

3Best Practices

Follow these guidelines when working with Array.push():

1. Use spread [...arr, item] for non-mutating append

2. Push multiple items at once: arr.push(a, b, c)

3. Use concat() or spread when building new arrays in functional code

⚠️

Tip: push() returns the new LENGTH, not the array. To chain, use concat() or spread instead.

editor.html
const stack = [];
stack.push('first');
stack.push('second', 'third');
console.log(stack);         // ['first','second','third']
console.log(stack.length);  // 3

// Returns new length
const len = stack.push('fourth');
console.log(len); // 4
localhost:3000

Examples

Example 01Basic Usage
const stack = [];
stack.push('first');
stack.push('second', 'third');
console.log(stack);         // ['first','second','third']
console.log(stack.length);  // 3

// Returns new length
const len = stack.push('fourth');
console.log(len); // 4
Example 02Advanced Example
// Non-mutating alternative
const original = [1, 2, 3];
const newArr = [...original, 4, 5];
console.log(original); // [1, 2, 3] (unchanged)
console.log(newArr);   // [1, 2, 3, 4, 5]

Best Practices

  • Use spread [...arr, item] for non-mutating append
  • Push multiple items at once: arr.push(a, b, c)
  • Use concat() or spread when building new arrays in functional code

Interview Question

What is the difference between push() and concat()?

Hint: Mutation vs immutability, return value.

push() mutates the original array and returns the new length. concat() returns a NEW array with the elements appended and doesn't modify the original. In functional/React code, prefer concat() or spread operator to avoid mutating state.

Exercises

MediumPractice using Array.push() in a real scenario.
View Solution
const stack = [];
stack.push('first');
stack.push('second', 'third');
console.log(stack);         // ['first','second','third']
console.log(stack.length);  // 3

// Returns new length
const len = stack.push('fourth');
console.log(len); // 4

Frequently Asked Questions

What is the difference between push() and concat()?

push() mutates the original array and returns the new length. concat() returns a NEW array with the elements appended and doesn't modify the original. In functional/React code, prefer concat() or spread operator to avoid mutating state.

Related Functions

popunshiftspliceArray-Methods