Basic JavaScript Concepts Front End Development — Arrays and More

If we want to become a front end developer, then learning JavaScript is a must.

In this article, we’ll look at the JavaScript concepts to learn to become a productive front end developer.

Array Methods

JavaScript array methods are real lifesavers. Therefore, we should use them as much as we can.

It’ll let us avoid writing lots of loops and instead we can do many array operations without loops.

Some common methods are as follows.

splice

The splice method let us modify and return a subset of an array.

For instance, we can use it to remove entry with the given index as follows:

const arr = ['a', 'c', 'd', 'e'];
const spliced = arr.splice(1, 0);

The code above removes 1 entry with index 0, so we get [“a”, “c”, “d”, “e”] as the value of arr .

If we want to add an entry, we can write the following:

const arr = ['a', 'c', 'd', 'e'];
const spliced = arr.splice(1, 0, 'b');

Then have 'b' inserted to the array at index 1 and removes 0 entries. And we get [“a”, “b”, “c”, “d”, “e”] as the new value of arr .

If we want to replace an item, then we can write the following:

const arr = ['a', 'c', 'd', 'e'];
const spliced = arr.splice(1, 1, 'b');

The code above inserts 'b' ar index 1 and remove 1 entry starting with index 1, so we get [“a”, “b”, “d”, “e”] for arr .

Since 'c' was removed, we also get [“c”] as splice ‘s return value.

slice

slice returns a shallow copy of the array from the given start and before the end position.

If the end position is omitted, then the rest of the array is returned.

For instance, we can use it as follows:

const arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 5);

Then we get [“c”, “d”, “e”] as the value of sliced .

sort

sort lets us sort an array in place the way we want.

If a function returns negative or 0, the order remains unchanged. Otherwise, the order is switched.

We can use it by writing:

const arr = [1, 7, 4, 5, 6, 7, 4, 6];
arr.sort((a, b) => a - b);

Then we get [1, 4, 4, 5, 6, 6, 7, 7] as the value of arr .

Generators

Generator functions let us return the new value of an iterable object or anything else in sequence.

It’s denoted by function* and we use the yield keyword to return the next item.

For instance, we create a generator as follows:

function* words() {
  yield 'foo';
  yield 'bar';
  yield 'baz';
}

And we can use it:

const gen = words();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);

We called next to get the next entry. The value of the next entry is stored in the value property.

Therefore, we get:

foo
bar
baz

logged in the console log output.

We can generate infinite values, so we can write:

function* numGenerator() {
  while (true) {
    yield 100 * Math.random();
  }
}

and we get a random number between 0 and 100 each time we run:

gen.next().value

after we created gen as follows:

const gen = numGenerator();

Equality Comparison Operators

JavaScript has 2 equality comparison operators, they are == and === .

== does implicit conversion before doing comparisons, which creates issues for us more often than not.

Therefore, we should probably not use it.

On the other hand, === compares objects and primitive values as is. Therefore, it’s much safer to use.

We can use the === operator as follows:

console.log(0 === 0);

That should log true .

For objects, it returns true if they’re the same reference.

For instance, if we have:

const foo = {};
console.log(foo === foo);

will log true , but:

const foo = {};
console.log(foo === {});

logsfalse since they aren’t referencing the same object.

Conclusion

We can make array manipulation a lot easier by using array methods.

Sorting, inserting and removing items are no problems with built-in array methods.

Also, generators are great for sequentially return items however we wish to.

Equality comparison should be done with === to save us headaches.