Objects
JavaScript objects are collections of keys and values. The keys are strings, and the values can be anything (strings, integers, functions, arrays, or another object).
let emptyObject = {}
let myCollection = {
foods: ['spaghetti', 'Chili'],
"getFirst": function getFirst (items) {
return items[0];
},
}
let myCollection = {…}
Creating an object in JavaScript is similar to creating an array, but instead of using square brackets to enclose our items, you use curly braces. There are other ways to create an object, but this is the most common.
foods: ['spaghetti', 'Chili'],
The first item in the object is an array.
foods
Each item in an object has a key. In this case, the key is “food”, and the value is an array. If we wanted to, we could’ve surrounded the key name in quotes, but we don’t need to since the key is one word.
:
A colon separates the key from the value.
[‘Spaghetti’, ‘Chili’]
Our value is an array. In an object, a value, can literally be anything: arrays, numbers, strings, functions, and other objects.
,
A comma separates every item in an object.
“getFirst”: function (items) {…}
The second item in our object is a function. Objects are a great way to “namespace” all of your code and hide it from the global namespace. Now, you don’t have to worry about your getFirst function colliding with someone else’s getFirst function.
Calling the function is pretty straightforward.
let numbers = [“one”, “two”, “three”];
myCollection.getFirst(numbers);
There are a couple ways to access items in an object, and they’re both used frequently. The first way is by putting a dot after the object name (myCollection) and then the key (getFirst). In this case, the value is a function, and we call the function like we normally would with parenthesis. The function will return the first item in the array we give it, just like our original function. Accessing an item like this is call dot notation.
myCollection[‘foods’];
The second way to access items in an object is with square brackets. This is a little bit confusing because usually we use square brackets for arrays. Don’t be confused by this. Remember. In JavaScript, if you are accessing something using a key, then it is an object. JavaScript does not have the concept of associative arrays (arrays with keys) like PHP does.
Loops
There are a couple ways to loop through an array in JavaScript, but probably the most common is the map function (not the for loop, like you might’ve thought). In JavaScript, many of the data types are actually objects. Arrays are one of them. An array is really just a special object, and like any object, it can have properties and methods. When we create an array, all of these properties and methods are attached to it. The map method is one of the methods.
let foods = ['Watermelon', 'Hamburger', 'Hotdog'];
let pluralFoods = [];
foods.map((food) => {
pluralFoods.push(food + 's');
});
There’s a lot going on in this tiny block of code.
let pluralFoods = [];
We’re just creating an empty array here, but the next part is a little bit complicated.
foods
This is the array of strings that we are going to loop through.
.
Like I mentioned before, arrays are basically just special objects, and we can access its properties using dot notation (a period).
map()
We are accessing a method that all arrays have called map. The map method loops through every item in an array, but it doesn’t do it in the traditional sense.
The map method takes one parameter: a function that will run for each item in the array. Each consecutive item is passed to the function. The function, in this case, is anonymous. It is unnamed and passed directly into the map method. This is how it’s usually done, but we also could’ve named the function and then passed it in.
(food) => {}
(food)
You’ll also notice that the function doesn’t even have the function word declaring it as a function. That’s because it’s using the new, fancy arrow syntax. Instead of using the normal function (params) {} syntax, it just has the (params) part. We could’ve called the parameter anything, but it made sense to call it food. The map method loops through each item in the array and passes it to our anonymous function via a parameter (food).
=>
The array has two important jobs. It makes the syntax cleaner, and it ties the this context to the function. The this context is important to know, but we’ll learn about that when we need to.
pluralFoods.push();
Another method that array have is the push method. The push method adds something to the end of an array.
food + ‘s’
Each time the map method loops through an item in the array, we are appending “s” to the item. The first time, we append “s” to the string “Watermelon”, and we get “Watermelons”.
We end up with an array that looks like this.
[“Watermelons”, “Hamburgers”, “Hotdogs”]
Looping through arrays using the map method is a lot more common than using a for loop. It takes some time to get used to, but looping through an array like this is becoming more and more popular.