Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Basic Arrays in JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Create and Manipulate an Array

6:49 with Dave McFarland

Practice simple arrays by creating an array literal, using indices to access array members and use methods like push, join, pop and shift to manipulate the array.

Using let and const

JavaScript used to have only one keyword for creating a variable: var. For example, to create a variable named temperature with a value of 98.9 you could do this: var temperature = 98.9.

Two new keywords were introduced in ES2015 (a newer version of JavaScript): let and const. Most JavaScript programmers now use those two keywords. However, var works and you'll still see it around a lot. To get familiar with these keywords follow these rules:

const

Use const (which is short for constant) to store a value that won't change. For example, if you're setting the sales tax rate -- which won't change while your program is running you'd use const. For example: const taxRate = 7.5;

let

Use let to store a value that changes while the program runs. For example, if you're keeping track of a changing score, or the number of times a person clicks on a web page, use let: let totalSales = 0;

As with var you can store any type of data in a variable defined with let or const -- numbers, strings, arrays, objects, Boolean values, etc. If you are confused about whether to use let or const the rule of thumb is if you're in doubt, use const.

To learn more, check out the workshop Defining Variables with let and const

Code for completed solution

// 1. Create a new array named languages that contains at least 7 programming languages.
let languages = ['JavaScript', 'Python', 'Java', 'C#', 'PHP', 'Swift', 'Ruby'];

// 2. Use console.log to display the number of elements in the array:
console.log(languages.length);

/* 3. Use console.log to list the first element from the array using an index value. */
console.log(languages[0]);

/* 4. Use console.log to list the last element from the array using an index value. */
console.log(languages[languages.length - 1]);

// 5. Use an array method to add an element to the END of the array.
languages.push('Go');

// 6. Use an array method to add an element to the BEGINNING of the array.
languages.unshift('Erlang');

/* 7. Log all of the elements in the array as a single string using the array .join() method */
console.log(languages.join(', '));

// 8. Use an array method to REMOVE the LAST element from the array.
console.log(languages.pop());

// 9. Use an array method to REMOVE the first element from the array.
console.log(languages.shift());

/* 10. Log all of the elements in the array as a single string using the array .join() method. Thisis the same as step 7 above */
console.log(languages.join(', '));

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    How did you do with the first project? 0:00
    Were you able to complete it? 0:01
    If not, no worries. 0:03
    You can watch my solution, compare it to what you wrote, and 0:04
    then try to recreate it yourself. 0:07
    I'll work on this first project in the 1_create_array.js file. 0:09
    To start, I'll create a variable named languages. 0:15
    And use the array little annotation to crate an empty array. 0:20
    As you remember, a pair of brackets like this indicates an array. 0:25
    Now, if let doesn't look familiar to you, 0:31
    it's just another way to create a variable just like var. 0:33
    You could use var as well, but let is know the preferred method for 0:36
    creating a variable. 0:39
    Check the teacher's notes for more information. 0:41
    Next, I'll add one element to the array, a string with the text, JavaScript. 0:44
    To add another element, type a comma followed by another value. 0:52
    I'll add six more strings. 0:59
    Python, Java, C#, PHP, Swift, and Ruby. 1:02
    This is an array of seven string values. 1:07
    Now, we can log out the link to the console to see. 1:10
    Now, remember that arrays have a length property, 1:20
    which contains the total number of elements in the array. 1:23
    You can get to that value by typing the array name, 1:26
    adding a dot, and using the keyword, length. 1:31
    I'll save this file and go to the console to test it. 1:38
    I'll use node to run the program by 1:45
    typing node 1_create_array.js. 1:50
    There you go, 7 elements. 1:56
    Now, let's log the first element in the array. 1:58
    I'll use the console.log method. 2:07
    And then we'll need to use an index value, 2:09
    which is a number identifying the elements placed within the list. 2:11
    Remember, arrays are 0 indexed, so the first element is at 0. 2:15
    Now, next we'll access the last element. 2:25
    We can use the last index value. 2:30
    I'm just gonna copy this code cuz it's almost the same and 2:32
    I just need to change this 0. 2:36
    Remember, we want to get the last element. 2:38
    And because arrays are zero-indexed, the seventh element is at position 6. 2:40
    I'll save this file. 2:47
    And run the program again. 2:54
    There we go, JavaScript is the first element and Ruby is the last. 2:57
    Now, basically, this last element here is equal to the length of the array minus 1. 3:02
    In other words, there's a handy equation we can get to this value. 3:09
    We don't always have to type 6 or 7, 3:12
    whatever the last index value is literally. 3:14
    We can use some math. 3:17
    So I'll just type languages.lenght and 3:19
    then we'll subtract 1 and if I save this file, 3:23
    And run it again, we'll get the exact same output. 3:35
    Now, let's add elements to the array. 3:39
    Let's start by adding an element to the end of the array. 3:41
    We can use the array push method to do that. 3:44
    Type the name of the array, followed by a dot, the push keyword and 3:50
    a value inside parentheses. 3:54
    In this case I'll pass the string value of go. 3:56
    We'll add something to the beginning of the array. 4:00
    To do that we use the unshift method. 4:02
    Again, we type the name of the array, .unshift, and 4:05
    we pass it a string, in this case, Erlang. 4:09
    Next, let's log the list of items to the console. 4:13
    I'll start by adding a console.log call. 4:18
    And then to display all the elements in a comma separated list, 4:22
    we can use the join method. 4:25
    To do that, we type the name of the array, 4:28
    a period, the join method and a set of parentheses to call it. 4:33
    I'll save this file and run it in the console. 4:39
    In the console, I can take clear to erase what's currently listed. 4:45
    You can also use the up arrow to scroll through any previous run commands. 4:51
    So if I press up twice, I can see the command to run this file. 4:55
    Just press Return to run it. 4:59
    There's the list of items. 5:02
    But one thing I don't like is there's no space between the comma and 5:04
    the next item in the array. 5:09
    I can change that by passing a string to the join method. 5:10
    The string is what node places between two items in an array. 5:14
    You could use any character or characters. 5:17
    I'll add a comma followed by a space. 5:20
    I'll save the file, And run it in the console. 5:29
    Okay, that's better. 5:38
    Now, let's remove some items. 5:39
    First let's remove the last item in the array using the pop method. 5:41
    To verify that this method returns the last element, 5:46
    let's log the result to the console too. 5:48
    Let’s also remove the first element and log it too. 6:00
    We’ll do that using this shift method. 6:06
    And finally, let’s print the elements out as a comma separated list. 6:11
    We did that earlier so I’ll just copy this code here. 6:15
    And paste it here. 6:22
    Let's save our file. 6:25
    And run it in the console. 6:28
    And there you have it, basic array methods. 6:38
    If you have a syntax error compare your code to the code listed in 6:41
    the teacher's notes. 6:44
    In the next video, I'll show you the solution to the second project. 6:45

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up