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];
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);
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];
Adding Elements in Arrays
Use the push() method:
const arrayExample = [1, 2, 3];
arrayExample.push(4);
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]
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
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
Recognizing Arrays
typeof() operator will return an array as the type object.
const array = [1, 2, 3];
typeof(array); // returns object
Instead use isArray() or instanceof:
const array = [1, 2, 3];
Array.isArray(array); // returns true
array instanceof Array; // returns true
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"]
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"]
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
Top comments (4)
Great post!
Just wanted to point out that in this part;
// Last elementlet 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! :)
Ahhh, thank you for pointing that out! I meant to put .length, I will go ahead and fix that.
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
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.