Introduction

A big part of programming is learning how to work with data. Whether you're building a website, handling user input, or solving a coding challenge, you'll often need to check information, update it, search through it, or put it in a different order.

JavaScript includes plenty of built-in methods and features that make these tasks easier. Some are straightforward, like checking whether an array contains a certain value. Others become especially useful when you're working with larger collections of information.

You don't need to memorize every method. It's more important to understand what each tool does and recognize when it can make your code simpler and easier to work with.

This guide covers six common ways to work with data in JavaScript: identification, modification, cross-checking, iteration, organization, and extraction. Each category focuses on a different kind of task you'll run into while coding.

1. Identification

Before working with a value, it's helpful to know what kind of data you're dealing with. Numbers, strings, arrays, and objects all behave differently in JavaScript. Checking a value's type can help you avoid errors and figure out which operations make sense.

One of the easiest ways to check a value is with the typeof operator:

const name = "lealon"; const age = 18; const isStudent = true; console.log(typeof name); // "string" console.log(typeof age); // "number" console.log(typeof isStudent); // "boolean"

There's one thing to watch out for: JavaScript reports arrays as "object" when you use typeof. If you want to check whether a value is specifically an array, use Array.isArray():

const games = ["Minecraft", "Overwatch"]; console.log(typeof games); // "object" console.log(Array.isArray(games)); // true

Here are a few other useful tools for identifying information:

  • instanceof checks whether an object was created from a particular constructor.
  • Number.isNaN() checks whether a value is the special NaN value.
  • Object.keys() returns an object's property names.
  • Object.values() returns an object's property values.
  • Object.hasOwn() checks whether an object has a particular property directly.

Identification is useful when validating user input, checking function arguments, or working with data that may not always have the structure you expect. A quick check can keep you from trying to use the wrong method on a value.

2. Modification

Once you know what kind of data you're working with, you may need to change it. Arrays come up often in JavaScript, and they include several methods for adding, removing, and replacing items.

For example, push() adds an item to the end of an array, while pop() removes the last item. unshift() and shift() do similar things at the beginning of an array: unshift() adds an item, and shift() removes one.

const movies = ["Shrek", "Pulp Fiction"]; movies.push("The Bee Movie"); console.log(movies); // ["Shrek", "Pulp Fiction", "The Bee Movie"] movies.pop(); console.log(movies); // ["Shrek", "Pulp Fiction"]

If you need to change something at a specific position, splice() gives you more control. It can remove, insert, or replace items at a particular index:

const fruits = ["apple", "banana", "orange"]; fruits.splice(1, 1, "grape"); console.log(fruits); // ["apple", "grape", "orange"]

In this example, splice() starts at index 1, removes one item, and puts "grape" in its place.

Not every operation has to change the original array. concat() combines arrays into a new one, and the spread operator (...) can do the same thing. Spread syntax is also a convenient way to make a shallow copy of an array:

const first = ["apple", "banana"]; const second = ["orange", "grape"]; const combined = [...first, ...second]; const copy = [...first]; console.log(combined); // ["apple", "banana", "orange", "grape"]

Other tools you can use to modify data include:

  • fill() replaces a range of elements in an array.
  • Object.assign() copies properties from one or more objects into another object.
  • delete removes a property from an object.

One important detail is whether a method changes the original data or creates something new. Methods such as push(), pop(), and splice() modify the original array. By comparison, concat() and spread syntax can create a new array. This matters when different parts of your program share the same data.

3. Cross-Checking

Sometimes you don't need to change your data. You just need to check whether something is true. For example, you might want to see whether a username is already taken, whether a score meets a requirement, or whether an array contains a certain item.

JavaScript has several methods that make these checks easier:

  • includes() checks whether an array or string contains a particular value.
  • indexOf() returns the position of a value, or -1 if it can't find it.
  • some() checks whether at least one item in an array passes a condition.
  • every() checks whether all items in an array pass a condition.
  • Object.hasOwn() checks whether an object has one of its own properties.

The difference between some() and every() is especially useful to understand:

const scores = [82, 91, 76, 88]; console.log(scores.includes(91)); // true console.log(scores.some(score => score < 80)); // true console.log(scores.every(score => score >= 70)); // true

Here, some() returns true because at least one score is below 80. every() also returns true because all the scores are at least 70. If even one score were below 70, every() would return false.

You can also compare individual values with operators such as ===, !==, >, and <. These are often used alongside array methods to make decisions about a collection.

Cross-checking is helpful when validating forms, checking requirements, searching for values, or deciding whether information should be accepted or processed.

4. Iteration

Iteration simply means going through a collection and doing something with each item. It's one of the things you'll do most often in JavaScript, especially when working with arrays.

There are several ways to iterate through data, but these are some of the most common:

  • forEach() runs a function once for every item in an array.
  • map() transforms each item and returns a new array.
  • filter() creates a new array containing only the items that pass a condition.
  • reduce() combines the items into one accumulated result.
  • for...of loops through iterable values, such as arrays and strings.
  • for...in loops through enumerable property names, which is commonly useful with objects.

At first, forEach(), map(), and reduce() can seem pretty similar. The main difference is what you want to do with the results:

const numbers = [1, 2, 3, 4]; // Run an action for each item numbers.forEach(number => console.log(number)); // Create a new array with each number doubled const doubled = numbers.map(number => number * 2); // [2, 4, 6, 8] // Combine all numbers into one total const total = numbers.reduce((sum, number) => sum + number, 0); // 10

All three methods go through the array, but they serve different purposes. Use forEach() when you want to perform an action for each item, map() when you want to transform the collection, and reduce() when you want to combine everything into one result.

Iteration is useful for displaying lists, transforming data, doing calculations, and processing information one item at a time. Choosing the right method mostly depends on what you want the result to be.

5. Organization

As a collection grows, keeping its contents organized becomes more important. Sorting can make information easier to read and search through, whether you're putting names in alphabetical order, ranking scores, or arranging products by price.

The most familiar method for this is sort(). However, there's something about it that can catch beginners off guard: by default, sort() compares values as strings instead of sorting numbers by their actual numeric value.

const numbers = [10, 5, 30, 2, 15]; numbers.sort(); console.log(numbers); // [10, 15, 2, 30, 5]

To sort numbers in the way you'd normally expect, pass sort() a comparison function:

const numbers = [10, 5, 30, 2, 15]; numbers.sort((a, b) => a - b); console.log(numbers); // [2, 5, 10, 15, 30]

The comparison function tells JavaScript how to order the values. Using a - b sorts from smallest to largest, while b - a sorts from largest to smallest.

There are several other methods that can help organize data:

  • toSorted() returns a sorted copy without changing the original array.
  • reverse() reverses an array in place.
  • toReversed() returns a reversed copy of an array.
  • flat() combines nested arrays into a flatter array.
  • flatMap() maps each item and then flattens the result by one level.

For example, toSorted() is useful when you want an ordered version of an array but still need to keep the original:

const numbers = [10, 5, 30, 2, 15]; const sortedNumbers = numbers.toSorted((a, b) => a - b); console.log(sortedNumbers); // [2, 5, 10, 15, 30] console.log(numbers); // [10, 5, 30, 2, 15]

If your JavaScript environment doesn't support toSorted(), you can make a copy with spread syntax and then use sort():

[...numbers].sort((a, b) => a - b);

Organization is useful when arranging search results, sorting records, ranking information, or making a large collection easier to navigate.

6. Extraction

You won't always need every item in a collection. Sometimes you only want the first item that matches a condition, all the items that match, or a small section of a larger array. That's where extraction methods come in.

Here are some of the most useful ones:

  • find() returns the first item that passes a condition.
  • filter() returns a new array containing every item that passes a condition.
  • slice() returns part of an array without changing the original.
  • at() retrieves an item by its position, including negative positions that count backward from the end.
  • Object.keys(), Object.values(), and Object.entries() return an object's property names, values, or key-value pairs.

The difference between find() and filter() is easy to overlook, but it changes what you get back:

const users = [ { name: "Lealon", active: false }, { name: "Greg", active: true }, { name: "Akintunde", active: true } ]; const firstActiveUser = users.find(user => user.active); const allActiveUsers = users.filter(user => user.active); console.log(firstActiveUser); // { name: "Greg", active: true } console.log(allActiveUsers); // [ // { name: "Greg", active: true }, // { name: "Akintunde", active: true } // ]

find() stops as soon as it reaches the first match. filter(), on the other hand, checks the entire array and collects every matching item. If nothing matches, find() returns undefined, while filter() returns an empty array.

If you want to select items based on their position, slice() is another useful option:

const fruits = ["apple", "banana", "orange", "grape"]; const selectedFruits = fruits.slice(1, 3); console.log(selectedFruits); // ["banana", "orange"]

The starting index is included, but the ending index is not. In this example, that means slice() gets the items at positions 1 and 2 without changing the original array.

Extraction is useful when searching for a particular user, filtering results, selecting part of a list, or retrieving only the properties you need from an object.

Conclusion

JavaScript has a lot of built-in tools for working with data, and each one is useful for a different kind of task. Identification helps you understand what you're working with, modification lets you change it, cross-checking helps you test it, iteration lets you process it, organization puts it in a useful order, and extraction helps you get the specific information you need.

The real benefit comes from combining these tools. For example, an application could use filter() to find users who meet certain requirements, toSorted() to arrange them by name, and map() to display their information. Each method handles one part of the process, but together they can accomplish something much more useful.

You don't have to memorize every JavaScript method to become comfortable working with data. What matters is understanding the problem you're trying to solve and knowing which tools are available to help. As these basics become more familiar, working with larger and more complicated collections of data will feel much more manageable.

Further Reading