Learning JavaScript: Hoisting and Arrays

Array basics and how JavaScript reads some declarations.

Yeah, bring that boat variable up.

Hoisting and declarations

Hoisting is a clever thing JavaScript does with variable (with var) and function declarations. It treats the declaration with assignment as separate things. Note the declaration goes on the top of the scope and assignment stays in its line. So you code this:

function legs() {
//stuff;
var frog = “safe”;
}

But JavaScript reads this:

function legs() {
var frog;
//stuff;
frog = “safe”;
}
Hoist the frog!

It helps ensure you have declared variables before using them. Since they aren’t assigned, it’s not much help but at least you have an existing variable. But this isn’t valid for const (constant variable) and let (variable with limited scope). These get hoisted to the top of the scope, but you can access them just after assigning.

Hoisting function declarations can seem confusing, but it’s just like for variables.

test();
function test() {
return “a”
}

JavaScript hoists the declaration at the top of the scope, before the function’s calling. So that code runs fine, but function expressions don’t work well in hoisting.

test();
var test = function() {
return “a”;
}

This won’t work. JavaScript puts the variable declaration at the top and assigns it just after calling. JavaScripts reads this code as:

var test;
test();
test = function() {
return “a”;
}

It’s not hard to solve most problems related to hoisting. Just declare and assign everything you can before using it.

Organizing with arrays

Then it’s time for arrays, another of the things variables can store. An array is an ordered list of elements/items separated by commas. Like variables, their declaration can use a single line or many. The best approach depends on the contents of your array.

var array = [1,2,3];
var array = [1,
2,
3];

Talking about being equal, the order is important for arrays.

var firstArray = [1,2,2];  //Different arrays
var secondArray = [2,1,2];

There are two ways of declaring arrays: literals and constructed.

var array = [1,2]; //Literal declaration
var array = new Array(1,2); //Declaration using array constructor

Arrays can store many values of different types and can hold mixed types inside them.

var number = [1,2,3];
var letters = [“a”,”b”,”c”];
var stuff = [“hey”, 100, true, 14.3];
The master of arrays.

Making changes in arrays

There are specific methods to make changes in arrays. .push() adds one element to the end and .unshift() to the beginning of an array. Opposite to those, there are .pop() and .shift(). The former removes the last element and the later removes the first.

var array = [2]; 
array.push(3); //[2] becomes [2,3]
array.unshift(1); //[2,3] becomes [1,2,3]
array.pop(); //[1,2,3] becomes [1,2]
array.shift(); //[1,2] becomes [2]

The removal methods return the element removed, but the adding methods return the array’s length. Now, say you have this:

var numbers = [4,5,6];

You want to add some more numbers, but .unshift() and .push() will take too long. For that, there’s the spread operator (). It spreads the elements of one array inside the other:

var moreNumbers = [1,2,3,…numbers]; //moreNumbers is [1,2,3,4,5,6]

It can also work at the beginning of the array:

var evenMoreNumbers = […moreNumbers, 7,8,9];
//evenMoreNumbers is [1,2,3,4,5,6,7,8,9]

Note how I assigned the result to a new variable. This is necessary because the spread operator isn’t a destructive method. It doesn’t change the original function. So, if you want to store the result, replace the old array or declare a new variable as shown above. But if the old array is a const, you need to assign the result to a new one.

const array = [1,2,3];
array = [...array,4,5,6]; //Trying to change const won't work
var secondArray = [...array,4,5,6]; //This works

Another thing to know about the spread operator: it the array spread has a single string, it will spread the letters.

var array = [“Ada”]; //[…array] results in [“A”, “d”, “a”]

It’s also possible to add elements straight into the indexes of an array. The index count starts at zero.

var array =[1,2,3]; //array[0] is 1, array[1] is 2 and array[2] is 3

But there’s a problem in:

var array = [1,2,3];
array[4] = 5; //array becomes [1,2,3,undefined,5]

Arrays can have any size. If you add past it, the array expands and fills the empty indexes with undefined.

Except for the spread operator, all these methods are destructive. If you want to remove elements without changing the array, .slice() is the one to use. It takes two parameters: an index on where to start and one on where to end the cut.

var array = [1,2,3,4,5];
array.slice(1); //Returns [2,3,4,5]
array.slice(1,2); //Returns [2]
console.log(array); //Still prints [1,2,3,4,5]

If the arguments are negative, it will count backward.

var array = [1,2,3,4,5];
array.slice(-3,-2); //Returns [3]

In the example above, it separates the last three elements [3,4,5] and then the last two from those, [4,5].

.slice() can replace .pop() using .length (returns the array’s length). So you can get the whole array without the last element even if you don’t know its index.

var array = [1,2,3,4,5];
array.slice(0,array.length-1); //Returns [1,2,3,4]
Don’t worry, Pop. You still have the shop.

The last method mentioned is .splice() and is a bit more complicated. For starters, it can take any number of arguments. The first is the index to start working, the second is how many elements to remove and past this are the elements to add. So, consider this:

var array = [1,2,3];
array.splice(1); //Returns [2,3], and [1,2,3] becomes [1]
array.splice(1,1); //Returns [2], and [1,2,3] becomes [1,3]
array.splice(1,1,1); //Returns [2], and [1,2,3] becomes [1,1,3]

Note this comparison between changing index, using splice or using push:

var array = [1,2,3];
array.splice(3,0,4); //Returns [] and [1,2,3] becomes [1,2,3,4]
array.push(4); //[1,2,3] becomes the same [1,2,3,4]
array[2] = 4; //[1,2,3] becomes [1,2,4]
array.splice(2,0,4); 
//Returns [] and [1,2,3] becomes [1,2,4,3]. Splice pushes the 3 to the right instead of deleting it

.slice() with the spread operator can remove any element in the middle of an array. Unlike .splice(), this doesn’t change the original array.

var array = [1,2,3,4,5];
[…array.slice(0,2),…array.slice(3)]; //Returns [1,2,4,5]

Sorry if there’s something wrong or missing, but I write as I learn, so there will be gaps. I appreciate any sugestions! Tomorrow: objects!