JavaScript arrays and objects come with a rich set of built-in methods for reshaping data — push, pop, shift, unshift, and splice for arrays, and Object.keys()/Object.values() for pulling data out of objects. This lesson covers how each one works, which ones mutate the original data, and how to combine them to transform real data structures.
1JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 1
Knowing how to store data is step one. Step two is learning how to manipulate it efficiently using built-in methods.
// The ToolsetMethods
2JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 2
Array Mutation: .push() adds an item to the end, while .pop() removes the last item. Think of it like a stack of plates.
const tasks = ['Code'];
tasks.push('Test'); // ['Code', 'Test']
tasks.pop(); // ['Code']Array Mutation
3JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 3
.unshift() and .shift() work on the beginning of the array. These are slower because JS has to re-index every other item.
const queue = ['Alice'];
queue.unshift('Bob'); // ['Bob', 'Alice']
queue.shift(); // ['Alice']Front of Array
4JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 4
.splice() is the Swiss Army Knife. It can remove, replace, or add items anywhere in the array by specifying an index.
const list = ['A', 'B', 'D'];
list.splice(2, 0, 'C'); // At index 2, remove 0, add 'C'
// Result: ['A', 'B', 'C', 'D']Splice
5JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 5
For Objects, we use 'Static Methods' from the Object constructor. Object.keys() gives you an array of all property names.
const user = { name: 'Pascual', role: 'Admin' };
console.log(Object.keys(user)); // ['name', 'role']Object.keys
6JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 6
Similarly, Object.values() extracts all the data into an array. This is perfect for totaling prices or scores.
const prices = { bread: 2, milk: 3 };
const vals = Object.values(prices); // [2, 3]Object.values
7JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 7
Combination: You can use these methods together to transform complex data into exactly what you need.
const user = { xp: 100, bonus: 50 };
const total = Object.values(user).reduce((a,b) => a+b);
// total is 150Combining Methods
8JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 8
Manipulation mastery! You now have the tools to handle real-world data dynamically.
<h1>Methods: Mastered</h1>Methods Mastered
9JavaScript Common Methods & Array Manipulation | JS Tutorial - In-Depth Guide Part 9
Next, we'll combine everything to master 'Arrays and Loops' for powerful data processing.
<h1>Next: Processing</h1>On to Processing
10Step-by-Step Breakdown
Knowing how to store data is step one. Step two is learning how to manipulate it efficiently using built-in methods.
Array Mutation: .push() adds an item to the end, while .pop() removes the last item. Think of it like a stack of plates.
.unshift() and .shift() work on the beginning of the array. These are slower because JS has to re-index every other item.
Checkpoint: Which method removes the LAST item from an array?
- →push()
- →pop()
- →shift()
.splice() is the Swiss Army Knife. It can remove, replace, or add items anywhere in the array by specifying an index.
For Objects, we use 'Static Methods' from the Object constructor. Object.keys() gives you an array of all property names.
Similarly, Object.values() extracts all the data into an array. This is perfect for totaling prices or scores.
Checkpoint: Which method extracts all property labels (names) from an object as an array?
- →Object.values()
- →Object.keys()
Combination: You can use these methods together to transform complex data into exactly what you need.
Manipulation mastery! You now have the tools to handle real-world data dynamically.
Checkpoint: If you want to add an item to the BEGINNING of an array, which method do you use?
- →push()
- →unshift()
Next, we'll combine everything to master 'Arrays and Loops' for powerful data processing.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Rebuilding a List's DOM on Every Mutation Can Break Screen Reader Announcements
If splice(), push(), or similar array methods trigger a full re-render of a list (rather than an in-place update), assistive technology can lose track of focus or fail to announce which item changed — prefer keyed, targeted DOM updates over full teardown-and-rebuild when a list changes.
// Use stable keys so only changed items re-renderSEO Implications
- 1
Mutating Array Methods Can Silently Break Reference Equality Used by Rendering Frameworks
Methods like push(), pop(), splice(), shift(), and unshift() mutate the array in place rather than returning a new one — frameworks that rely on reference checks to decide whether to re-render (and thus whether to re-crawl updated content) may not detect the change, so content updates can be missed unless you create a new array (e.g. with spread or non-mutating methods) instead.
Best Practices
Know Which Array Methods Mutate and Which Return a Copy
push, pop, shift, unshift, and splice all mutate the original array in place, while methods like map, filter, and slice return a brand-new array. Mixing these up is a common source of bugs when other code still holds a reference to the 'original' array expecting it to be unchanged.
Prefer Object.keys()/Object.values() Over a for...in Loop for Plain Objects
for...in also walks inherited enumerable properties up the prototype chain, which can pull in unexpected keys. Object.keys() and Object.values() only return the object's own properties, giving more predictable results when iterating.
Frequent Bugs
Calling array.splice(index, 1) inside a forEach loop skips over elements.
splice() shifts every subsequent element down by one index immediately, so the loop's next iteration skips the element that just slid into the removed slot. Iterate backwards, or build a new array with filter() instead of mutating the array you're iterating over.
Real-World Examples
Summing an Object's Values for a Shopping Cart Total
An e-commerce cart stored item prices as an object keyed by product ID, and the checkout page needed a single total price without knowing the product IDs in advance.
const cart = { sku101: 19.99, sku203: 34.5, sku307: 9.99 };
const total = Object.values(cart).reduce((sum, price) => sum + price, 0);
// total is 64.48