Arrays and Objects are complex data-types that, unlike their primitive counterparts, are capable of holding multiple values at once.
You may ask yourself why one should have a need for 2 complex datatypes to accomplish this task, questioning why having one isn't enough to get the job done. Depending on your conditions and objectives, you might be better off choosing to use an "Object" to hold multiple values over an "Array", and the reasoning behind this comes down to one reason: readability. There are circumstances in which you will be better off choosing an object over an array, and vice versa.
Objects work better for, you guessed it, objects! They are able to provide names for their multitude of values, and are usually used to describe the properties that come with a single item. Arrays work better for lists, they are restricted in their capability to be descriptive of their values, and although Arrays are technically objects, they have earned their unique name of Array due to how unique they are in their syntax and manner in which their multiple values are stored or accessed. You will soon come to understand these complex data-types as I do, where objects can be conceived as 3 dimensional, and arrays can be considered 2-dimensional.
-3D Objects & 2D Arrays
//AN OBJECT
let person = {
voice: "soft",
age: "32"
};
//AN ARRAY
let groceryList = ['bananas', 'coconuts', 'grapes']
Above we have an example of an object doing what it does best, describing a 3 dimensional object in reality. Here we have the initialization of the variable 'animal' using the 'let' keyword to point to an object; which contains it's information within curly braces '{}'. Within the object are 'key: value' pairs. Keys are to the left of ':', and their values are to the right, with each pair separated by ','. As you can see with an object, we can give each value it holds a unique name to help describe and identify the value it points to. The age of the person is 32, and their voice is soft. You may notice that this format is easily readable and comes natural to understand, even someone who has no clue what coding is will likely be able to glance at those lines of code, and get a general understanding of what is going on.
Underneath this we have our beautiful array of the most quintessential items for a grocery list, and the same natural readability can be found. Notice that the array is denoted by brackets "[]".
Object & Array Access:
console.log(dog.name) //returns "Fifo"
console.log(groceryList[0] //returns bananas
As mentioned earlier, objects are 3-dimensional, and arrays are 2-dimensional. The first way this becomes noticeable is when you try to access the values of an array or object. In a 2-dimensional plane, the surroundings are described with coordinates; a series of numbers that equate to the description of a particular location. This is how arrays behave, their coordinates are called indexes, and their particular location is a value. Like coordinates, indexes will always be numbers, and arrays cannot access their values in any other way unless you pass in a number next to it surrounded by brackets '[#]'. Even the brackets themselves move like a 2 dimensional object; up, down, left, right, there are no curves to help one describe the complexities of a 3-dimensional plane, then comes Objects. Objects access their values with their 'key'. Earlier, the "key: value" pair was '"voice: "soft"', thus we can reference the dogs name by typing "person.voice". Just like 3-dimensional objects in our non-virtual reality, the properties of these objects are described with words, given names so-to-speak. The phenomenological conclusion we draw for what these properties are in relation to the object we experience, equates to the value we give to that word.
PHILOSOPHY AND UNDERSTANDING OBJECTS: We may describe a texture as soft, a smell as foul, an emotion as painful, but all concepts ultimately rely on two words to describe. The word "soft" alone can be misconstrued and difficult to conceive when describing an object in reality. If one were to say just "'person' that is 'soft'", the resulting conclusion may be different from one individuals concept to the other; One may believe you say 'a soft-person' is kind and loving, the other may say 'soft person' is weak and feeble. Yet if we said "a 'person' has a 'texture' that is 'soft'", or "a 'person' has a 'voice' that is 'soft', we would ultimately come to a less divergent conclusion on what it is we describe. This is why "an 'object' has a 'key' that is a 'value'" can make sense as being 3-dimensional.
Object & Array Manipulation
Objects and Arrays are manipulatable in different ways. Arrays are accessed by an index number, whereas with objects, their values are accessed using something called a 'key'. Due to the fact that each key is named, it is harder to navigate through objects than it is through arrays. Which is why arrays work better with numbered lists, and objects work better with describing properties of a single item.
You access things in an object using its key, and arrays must use its index. We add things to objects using bracket and dot notation, for arrays, we can use bracket notation along with something called 'methods'.
The methods used to remove AND add to an array are .pop(), .push(), .shift(), .unshift(), .splice(), and more. The method chosen will depend on the situation.
//adding / removing values to arrays and objects
person.name = "Sam"; //adds key 'name' to person with value of "sam"
person["sign"] = "pisces" //adds key iykyk to a
array.push(tomato) //adds tomato to the end of array
array.unshift(cherries) //adds -1 to beginning
array.splice(1, 2, 'hello world') //starts at index 1, removes 2 indexes and inserts hello world at index 1.
// 5
array.pop() //removes last index
array.shift() //removes first index in array
delete animal.sign //removes key sign from animal
array.slice(1) //removes first element from a COPY of the array
Top comments (0)