Welcome to my series on JavaScript for beginners. In part one, we learned about variables and arrays. In this post, we'll cover how to use objects and functions.
Previously, we stored variables in the global scope. While this is fine when getting started, making all of your variables global could have some unexpected consequences. We refer to global and local variables as their scoping. Global means that you can access that variable simply by using its name anywhere in your code. Local variables are scoped to a specific area of your code. That's why we rely on objects to build more complex data structures and better incapsulate variables.
Objects
Like variables, objects can hold other primitive types, arrays, and even code blocks called functions. Here is an example of how to create an object:
var player = {};
Creating an object is similar to creating an array, but unlike arrays, values attached to objects do not retain order. This means you will not be able to access a variable on an object, which we call a property, by an index as we do with arrays. Instead, you will need to know the exact name of the property.
Here is an example of how we would put a name property on the player object:
player.name = "Jesse Freeman";
Since JavaScript is a dynamic language, you don't have to declare the property when creating the object. By simply adding a property name and assigning it a value, that instance of the object will have the new property. To access any property on an object, we call it by name like so:
player.name;
Accessing this property will return the string Jesse Freeman. We can also add arrays to objects just like. any other primitive type:
player.inventory = ["item0", "item1", "item2"];
Before we talk about how to access values on the new inventory property, it may be confusing when to use regular brackets or curly brackets. Here is a reminder on which ones to use based on the type of variable you want to create:
var newArray = [];
var newObject = {};
Now, to get the value of something from the player object's inventory, we access it by index, just like you would a standard array:
player.inventory[1];
This would return "item 1" from the inventory array since JavaScript arrays are zero-based.
JavaScript objects are incredibly powerful for storing and organizing data. As you continue to code in JavaScript, you will eventually need a place to store reusable code instructions. For this, we rely on something called functions.
Functions
Functions allow us to create containers of reusable code. Where we put functions allows us to control when a block of code gets executed. Up until this point, all of the code we have been writing has been on the global scope and gets executed in order when the JavaScript file is parsed in the browser. There are also situations where you want to do more than setting a value on a variable.
Let's take a look at the following example:
var firstName = "Jesse";
var lastName = "Freeman";
var fullName = firstName + " " + lastName;
Believe it or not, this is a common situation where you may need to combine two variables, such as a first and last name. As I mentioned before, if you run this code as is, it will execute immediately. Functions allow us to control when and how this set of code would run. Here is the basic template for writing a function:
function getFullName(){
//code goes here
}
Just like we declare a variable with var, we denote a function with the function identifier. Next is the function's name. After the function name, parentheses can contain additional parameters that the function may need. Finally, the logic itself goes inside the curly brackets.
Lets look at an example of the above function but with some logic inside of it:
function getFullName(){
return firstName + " " + lastName;
}
Here, we moved the code that combines the first and last name into the function. We use a new statement called return to give us back a value after the function executes. To run this, you can call the function by name:
getFullName();
Even better, we can assign the value we get back to a variable:
var fullName = getFullName();
But this will only get us so far. Since the function has a scope of its own, meaning it doesn't usually have access to anything outside of the curly brackets.
Luckily, you can pass these values into the function via parameters. It looks something like this:
function getFullName(firstName, lastName){
return firstName + " " + lastName;
}
When we call the function, we can pass in our first and last name, and the function will return the full name.
var fullName = getFullName("Jesse", "Freeman");
Functions can have any number of parameters, and you can pass in strings, numbers, booleans, arrays, objects, and even references to other functions. As you learn more about coding, you will make extensive use of functions, and eventually, you will learn how to attach them to objects to reuse them throughout your project.
In the next post, we'll talk about how to build conditionals in JavaScript to help you build out more complicated logic blocks.
If you found this helpful, please give it a 👍 and leave a comment. You can also follow me on Twitter (@JesseFreeman).