What are Elements?

const array1 = [1, 4, 9, 16];


// Pass a function to map
const map1 = array1.map(x => x * 2);


console.log(map1);
// Expected output: Array [2, 8, 18, 32]

What is the ‘x’ in the map method above?

When I started learning to code, this was the single biggest head scratcher that I had to contend with as I was trying to understand the syntax of array methods.

The ‘x’ in the above example is referred to as the “element” - the current element being processed in the array.

So, what is an element? And why is it represented as an ‘x’? And why is that position occupied by a different letter (or word?!) in other examples of the same method usage?

The definition provided by the MDN documentation for the Array.prototype.map() isn't all that great in explaining exactly what an "element" is... here's their definition:

#element:
#The current element being processed in the array.

I hadn't realized that MDN was so into tautologies...

Now, this definition is probably very clear to seasoned developers who just need the quick refresh on what they're looking at. That's not usually the case for people starting out in their coding journeys.

Put simply (and perhaps not particularly accurately), the letter or word put in the place for the "element" represents the specific position object/variable that the method is acting on for the iteration.

In a map function, we give the function an array to "map" through, meaning, we want the method to go through each instance/variable (re:element) in that array, one-by-one, and do something to it. For the map function to go through each of the items in the array, it needs to be able to "hold" that particular instance (or element) as it performs the map job that we want it to do for our code.

Let's go back to our original map example:

// we have array1 that we want to perform a map function on.
const array1 = [1, 4, 9, 16];


// we write the map function:
const map1 = array1.map(x => x * 2);

note the "x" - as the map function literally "maps" through Array1, going one-by-one through the array, the "x" we defined as the element is the first array position, with the value of 1
then "x" is the second array position, with the value of 4, and keeps going until it reaches the end of the array.

let's visualize in more detail:

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2)


Array1[0] :     1 => 1 * 2  = map1[0] = 2
Array1[1] :     4 => 4 * 2  =  map1[1] = 8

…and so forth…

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

But guess what? You can give the element any value you want! You could name the element "itSortaMakesSenseNow" * and it'll still work! (Try it out for yourself on Replit)

const map1 = array1.map(itSortaMakesSenseNow => itSortaMakesSenseNow * 2) 

*NB: This is NOT recommended.

The same thing is true in Ruby syntax:

def map_through_array
   array = [1,2,3]
   array.map { |n| n * 2 }
end
# output:  [2, 4, 6]

You could instead sub out n for “number”

def map_through_array
   array = [1,2,3]
   array.map { |number| number * 2 }
end
# output:  [2, 4, 6]

So you have a fair bit of flexibility when it comes to how you name your elements. Certainly for the array methods at our disposal (i.e. Array.find(), Array.filter() ) you can name the element however you want.

That said, you do want to keep your code reader friendly, and when you do see well-written code, you’ll find that the elements are typically single letters (minimizing the amount of bits in the code) and relatively intuitive for the function. In the examples above, since we were mapping through an array of numbers to perform a mathematical function, using the element name “number” or “n” for short makes sense. It’s best not to use a long string such as “itSortaMakesSenseNow”. We’d probably come to regret that later.

Additionally, there are conventions that already exist, are considered a standard, and should be generally respected by coders.

A very good example is when building migration files for Ruby on Rails databases:

If you navigate to a Rails migration file, you’ll see something like this:

class CreateExample < ActiveRecord::Migration[6.1]
 def change
   create_table :examples do |t|
     t.string :title
     t.string :example
     t.integer :rating
     t.timestamps
   end
 end
end

You could ostensibly change the |t| to be |q| and the following attributes and columns to

q.string : title 
q.string : review

And still get your database columns built correctly, but that’s not the standard convention.

Happy coding!