Vanilla JavaScript — Arrays vs. Objects

#MyJourneyLearningToCode

In JavaScript, working with data differs between arrays and objects

Welcome to my first blog! I’ve always read countless advice about why you should start blogging, but to be frank, I never felt like my business perspective was unique or worth sharing. Through my short career in banking, tech consulting, and then entertainment & media, I saw the power of software solve business problems over and over, but lacked technical skills to build these software solutions. That’s when I decided to take the plunge and dive into software engineering. I’ve spent the last month head deep into programming, trying to pick up full stack coding skills as fast as possible.

This first month has been spent learning vanilla Javascript. Quickly one learns there are a lot of different ways to use data, whether accessing, manipulating, or looping over data. Two common types of data are “Arrays” and Objects”. You’ll run into these data types regardless of what language you code in. It’s important to understand the fundamental differences between them and their use cases because they can handle the majority of data manipulation needs.

Arrays are typically lists of one type of information, like a list of names or items, whereas objects are typically an assortment of different information about one individual item. Objects always have both a “key” and “value”, shown like “key: value” or for example “name: John”. Let’s dive into the details of each.

Arrays always use [ ] ==> [John, Sally, Joe]

Arrays are a type of data structure that stores a collection of items. Each item in an array is called an element, and elements are typically accessed by their position in the array (also known as an index). Arrays are zero-indexed, which means that the first element of an array is at index 0, the second element is at index 1, and so on. Arrays are ordered, which means that the elements in an array maintain a specific order. In our example John will always be at the first position [0] and Joe will always be in the third position [2]. You can also create an empty array. Commas are used in between elements and are required.

const names = ['John', 'Sally', 'Joe'];
names[0] // This allows you to access 'John'
console.log(names[0]) // This would log 'John' in the browser console    

const name = [] 

Arrays are also dynamic in nature, which means that the length of an array can change as elements are added or removed. The push method can be used to add an element to the end of an array, while the pop method can be used to remove the last element. There’s also the shift method that can be used to remove the first element, while the unshift method adds an element to the beginning of an array.

const names = ['john', 'sally', 'joe']

const count = names.push('maddie')

console.log(count) // output: 4

console.log(names) // output: ['john', 'sally', 'joe', maddie']

Unique methods to iterate data can be performed on Arrays

• To iterate data over and over, or “loop” as we commonly do in programming, Javascript has built in functions we can add to our arrays
• .forEach(), .filter(), .map() and tons more!

const aSampleArray= ['a', 'b', 'c'];

aSampleArray.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

There are a ton of other methods can that can be called on arrays. But these methods don’t work when manipulating objects. So, let’s dive into the details on Objects.

Objects always use { } ==> { name: John, age: 27 }

On the other hand, objects in JavaScript are unordered collections of key-value pairs. { name: John, age: 27 } Each key in an object must be a string or symbol, and each value can be of any data type. Objects are typically an assortment of information about one individual item, like a customer and their data, or a product and its data. Commas are used in between key-value pairs and are required.

const person = {
  name: "John Smith",
  age: 35,
  job: "Developer"
};

Object properties can be added or removed just like arrays, but in contrast to arrays, object elements have references other than their index number — the key can be a string like “age” that maps the key & value. Keys allow us to access object data super easily. and gives us the real superpower of objects: dot notation. You can simply call an object and trail the object with a .key or .value to grab the data. In other words, dot notation lets you access the properties of an object, while accessing data in an array we must use square bracket notation with the index of the element in order to grab the the data (that’s always in a specific order).

console.log(person.name); // output: 'John Smith'

console.log(person["name"]); // output: 'John Smith'

person.state = "California";
person.age = 36;

conlog.log(person) // { name: 'John Smith', age: 36, job: 'Developer', state: 'California' }

No built-in methods for iterating objects like arrays & .forEach()

Unlike arrays where you can .map() and .forEach(), there are no built-in methods to iterate data in objects. The most common way to loop through an object is with a for…in loop:

const person = {
  name: "John Smith",
  age: 35,
  job: "Developer"
};

for (const key in person) {
  console.log(key); // logs the key in person
  console.log(person[key]); // logs the value in person
}

// this for...in loop returns name John Smith age 35 job Developer

Another common way to iterate through an object is Object.keys. When working with public data across the internet, you’ll find lots of information nested as an array of objects. By adding in Object.keys to force your array into an array of your objects’ keys, this allows you to .forEach() an array.

const person = {
  name: "John Smith",
  age: 35,
  job: "Developer"
};

Object.keys(person).forEach(function(key) {
  console.log(key); // logs the key in person
  console.log(person[key]); // logs the value in person
});

// this Object.keys method returns name John Smith age 35 job Developer

It’s quite common to manipulate object data into an array in order to tap into the built-in array methods. The three core ways to return arrays based off object data are Object.keys( ) like we did above, Object.keys( ), and Object.entries( ).

Object.values( )

const contact= {
  name: 'John',
  age: 27,
  location: 'Los Angeles',
}

const values = Object.values(contact);
console.log(values)
// values returns [ 'John', 27, 'Los Angeles' ]

Object.keys( )

const contact = {
  name: 'John',
  age: 27,
  location: 'Los Angeles',
}

const keys = Object.keys(contact);
console.log(values)
// values returns [ 'name', 'age', 'location' ]

Object.entries( )

const contact = {
  name: 'John',
  age: 27,
  location: 'Los Angeles',
}

const entries = Object.entries(contact);
console.log(entries)
// entries returns [ [ 'name', 'John' ], [ 'age', 27 ], [ 'location', 'Los Angeles' ] ]

Conclusion: Data structure is critical in programming and because creating, accessing, manipulating, and iterating data is vital, we first need to determine whether this data should/is an array or object. Arrays have built-in methods to loop but can only be indexed via number(s), while objects are for data that has a key/value relationship.

The above information should give a beginner programmer good bearings to start from, but as I work my way towards mastery and look for full time employment as a software engineer, the learning lifecycle is endless.

Thanks for reading! Always love connecting here on Medium, Twitter, LinkedIn or email at jensenmiers@gmail.com

**Arrays are technically implemented in JavaScript as an object with special properties…do remember this when debugging and using typeof to determine if you are incorrectly manipulating an array.

Sources: Array MDN, Object MDN, Arrays vs Objects — Matt Eva, Useful Javascript Array and Object Methods — Robert Cooper