Intermediate JavaScript 1 – Arrays and Functions

Arrays

JavaScript arrays are basically containers for stuff. We can put anything we want in a JavaScript array.

let notifications = [
    'John Wayne liked your post',
    'Ed Sullivan mentioned you in a post',
    'You have a new message from Al Capone'
];

Our array of notifications contains three strings.

Code Dissection

let

The let keyword before the variable name tells JavaScript that this variable can be changed. There is another keyword that makes the variable unchangeable (const).

notifications

The notifications variable will hold our array. Variables can hold any type of data, including arrays.

[];

In JS, the most common way to create an array is with square brackets. You can also create an array using a function called array, but you’ll rarely see that. Using the array function would look like array(‘one’, ‘two’, ‘three’).

    'John Wayne liked your post',
    'Ed Sullivan mentioned you in a post',
    'You have a new message from Al Capone'

The items in our array are strings. You’ll notice that there is some space before each string and a new line after each string. This is known as indentation. All indentation is optional, but it’s really important for code readability. After each string (except for the last), there’s a comma. The comma is required because it separates each item in the array.

const firstNotification = notifications[0];

const

Using the const word when creating a variable makes the variable immutable (unchangeable). The variable cannot be changed after it has been set.

If we tried to change the variable, we would get an error. It’s up to you whether to use let or const. If you think the value of a variable will never change, use const. I typically use the let keyword, but others say you should use const unless you know you need to use let. I say it’s up to you.

notifications[0];

Items in the array have positions. You can see that ‘John Wayne liked your post’ is in the first position, and ‘Ed Sullivan mentioned you in a post’ is in the second. In programming, the positions start from 0 and count up. ‘John Wayne liked your post’ would be in position 0. In programming, the position in an array is formally known as the index. The item at index 0 is ‘John Wayne liked your post’. Use the brackets and the index to access an item in an array.

Functions

A JavaScript function is a block of a reusable code. Just like with variables, there are many benefits to using functions. First, putting code in a function helps keep your code DRY and reusable. DRY is a common programming acronym that stands for Don’t Repeat Yourself. The second benefit is encapsulation and abstraction. You hide away the details/implementation of the code.

function getFirst(items) {
	const first = items[0];
	return first;
}
const firstNotification = getFirst(notifications);

Code Dissection

function getFirst(items) {

function

The function keyword declares a function.

getFirst

Function names should be camel cased and explain what the code in the function is doing. Giving your functions descriptive names is a great way to self-document your code.

(items)

the function’s parameters are wrapped in parenthesis. We pass data into the function through the parameters. Yen can have as many parameters as you want, but it’s best to limit them to about five. Adding more than five parameters makes the code difficult to read.

{}

The code that belongs to this function is wrapped in curly braces.

const first = items[0];

The items parameter is an array, and we’re assigning the first item in the array to a constant variable named first.

return first;

After we’re done working on our task, we return something to the outside world. We can only return one thing.

canst firstNotification = getFirst (notifications);

Call a JavaScript function by putting parenthesis after the function name. If we weren’t passing any data into the function, we would just put empty parenthesis after the function name like getFirst(), but in this case, we are passing something into the function. We are passing an array into the function. The function returns something which we assign to the variable firstNotification. The value of firstNotification will be ‘John Wayne liked your post’ since that’s the first item in the array.