DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 34: TOP JS Foundations Part 4, Arrays and Loops

Today I learned...

Arrays

An array is a global list-like object. It is a common practice to create arrays using the const variable declaration.

const arrayExample = [1, 2, 3];
Enter fullscreen mode Exit fullscreen mode

Reminder, you can still change the elements inside of the array when it's declared with const, but the array cannot be reassigned.

Another method to create an array is using the new keyword:

const arrayExample = new Array(1, 2, 3);
Enter fullscreen mode Exit fullscreen mode

This is equivalent to the array literal method (const array = []). The array literal method is preferred over the new keyword for simplicity, readability, and execution time.

Accessing Elements

// First element
let firstElem = arrayExample[0] = 1;

// Last element
let lastElem = arrayExample[arrayExample.length - 1];
Enter fullscreen mode Exit fullscreen mode

Adding Elements in Arrays

Use the push() method:

const arrayExample = [1, 2, 3];
arrayExample.push(4);
Enter fullscreen mode Exit fullscreen mode

Use .length or indexes, but beware of undefined holes:

const arrayExample = [1, 2, 3];
// Remember, length is calculated starting from 1 but arrays are indexed starting from 0
arrayExample[arrayExample.length] = 4;

// holes are made in the array with the elements not explicitly assigned are given the value undefined
arrayExample[6] = 10; // [1, 2, 3, 4, undefined, undefined, 10]
Enter fullscreen mode Exit fullscreen mode

Associative Array

Arrays with named indexes are called associative arrays (or hashes)

JavaScript does NOT support array with named indexes and always use numbered indexes.

"If you use named indexes, JavaScript WILL REDEFINE THE ARRAY TO AN OBJECT." This will result in incorrect results.

const pets = [];
const["dog"] = "Duke";
const["cat"] = "Agatha";
pets.length; // returns 0
pets[0]; // returns undefined
Enter fullscreen mode Exit fullscreen mode

In JavaScript, arrays (a special kind of object) use numbered indexes and objects use named indexes.

  • Use objects when you want the element names to be strings.
  • Use arrays when you want the element names to be numbers.

[] vs new Array()

Some different behavior:

const array = [10]; // returns [10]

const array = new Array(10); returns array with 10 undefined elements
Enter fullscreen mode Exit fullscreen mode

Recognizing Arrays

typeof() operator will return an array as the type object.

const array = [1, 2, 3];
typeof(array); // returns object
Enter fullscreen mode Exit fullscreen mode

Instead use isArray() or instanceof:

const array = [1, 2, 3];
Array.isArray(array); // returns true

array instanceof Array; // returns true
Enter fullscreen mode Exit fullscreen mode

Loops

The map() method performs an action to each item in a collection and creates a new collection from it.

const dogs = ["Husky", "Dachshund", "Poodle"];

const upperDogs = dogs.map(dog => dog.toUpper())

console.log(upperDogs); 
// return ["HUSKY", "DACHSCHUND", "POODLE"]
Enter fullscreen mode Exit fullscreen mode

The filter() method creates a NEW array if the elements in the collection pass a test by the provided function.

const dogs = ["Husky", "Dachshund", "Poodle"];

const hDogs = dogs.filter(dog => dog.startsWith("H"))

console.log(hDogs); 
// return ["Husky"]
Enter fullscreen mode Exit fullscreen mode

map() and filter() are often used with function expressions.

Resources

The Odin Project
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_arrays.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code

Discussion (4)

Collapse
axel_nieminen_072275fab50 profile image
Axel Nieminen

Great post!

Just wanted to point out that in this part;

// Last element
let lastElem = arrayExample[arrayExample - 1];

In order to get the last element you have to count it from the length of the array like this:

let lastElem = arrayExample[arrayExample.length - 1];

Best of luck in your learning process! :)

Collapse
jennifer_tieu profile image
Jennifer Tieu Author

Ahhh, thank you for pointing that out! I meant to put .length, I will go ahead and fix that.

Collapse
glowinginthedark profile image
Bilal

Yo this is awesome, day 34!
btw how's your experience been with C?
I used to code in it on and off but haven't used it in any web development

Collapse
jennifer_tieu profile image
Jennifer Tieu Author

Thank you thank you! Time fly by really fast, I can't believe I've been doing this for 30+ days now. C has been good! I had to pause learning it for a bit to focus on JS, but I can see some of the similarities between the two languages.