Today’s post isn’t about new techniques. Today we cover some things to be wary of in JavaScript. These include Function Hoisting, pass by value, scoping rules, and this.

Function Hoisting

Function hosting can be a problem. When you create a function without passing it to a variable, JavaScript pushes the function to the top of your file. Here’s an example:

/* Function Hoisting Example */
//This will run despite being declared below
//This also applies to variables although x = undefined here
console.log("x value:", x);
function myFuction() {
console.log("I was called");
console.log("I was created");
//Will assign x properly here
var x = 5;
console.log("x value:", x);

This kind of behavior can be a cause for error if you don’t understand it, because functions may be available when you don’t expect them to be. If you don’t want this effect, assign your functions to variables. Now since we’re on functions, let’s discussing scoping rules:

Scoping Rules

There three ways to declare a variable in JavaScript; you can use let, const, or var. Both let and const are block scoped; var is function scoped. This is an important distinction to make. Now, here’s an example illustrating that property:

/* Scoping Rules – let, const, var */
function test() {
//Block Scope
var b = 7;
const a = 3;
let c = 22;
console.log(a, b, c);
//b is still defined.
//a, and c are not defined
console.log(a, c);

As you can see var drips out of the block scope and is available throughout the entire function; const and let do not. Furthermore, they also throw errors if used incorrectly. In most cases, let and const are preferred over var; const and let can accomplish more consistent rules when compared to var. Well, since we’re on variables, let’s discuss pass by value & cloning.

Pass By Value

JavaScript is a pass by value language; if you pass 2 to a variable and change it to 1, then the variable’s value is 1. Well, objects and arrays are not so simple. Arrays and objects can be passed to new variables as new arrays or objects, but still, change the properties on the original. Here’s an example:

/* Pass By Value */
const obj = { test: "My String", stat: 300 };
const testList = [{ stat: 3 }, { stat: 5 }, { stat: 20 }, { stat: 80 }];
/* Original Values */
const newList = testList.slice(); //Copy the list
newList[2].stat = 45;
console.log(testList); //Test List has been changed completely
/* Example Solution */
const newTestList = [{ stat: 3 }, { stat: 5 }, { stat: 20 }, { stat: 80 }];
const copy = JSON.parse(JSON.stringify(newTestList.slice()));
copy[2].stat = 999;
/* Works and preserves both lists */

Now, for me, this behavior can be confusing. See, many times JavaScript makes a shallow copy of the original array or object. This means the array of objects or list of arrays within your array refers to the same object in memory. If you’re not careful, this can trip you up as a developer.

This is why you should value immutability, or when passing around objects, clone them (similar to the solution). Now, in JavaScript clone and copy are different; the clone does not reference the same object in memory — copy does.

These are just some of the things to watch out for in JavaScript; be careful on your JavaScript coding journey. ~

%d bloggers like this: