Forem: Jin Choo

What are Arrays? - Part IV

Jin Choo — Thu, 01 Sep 2022 23:55:22 +0000

Array.reduce(): Addition

A single value from an array can be calculated using the reduce() function. In other words, an array is condensed into a single value.

Example:

const numbers = [20, 13, 5, 31];

const sum = numbers.reduce((accumulator, current) => {
   return accumulator + current;
}, 0);

Let's examine it step by step:

We call the .reduce() method on the numbers array.
We assign the result of numbers.reduce() to a new variable called sum.
The reduce method needs two parameters: the reducer and the starting value.

Reducer

Example:

(accumulator, current) => {
   return accumulator + current;
}

This is a callback that is applied to each element in the array, but this callback has two parameters: accumulator and current.

The last value that the reduce function last calculated is always referenced by the accumulator. Additionally, the term current refers to a single element in the array.

Example:

const numbers = [20, 13, 3, 31];

const sum = numbers.reduce((accumulator, current) => {
   return accumulator + current;
}, 0);

Detailed Explanation:

The first time the callback is executed, accumulator is set to 0 (due to the initial value) and current is set to the first element of the array. Consequently, accumulator is 0 and current is 20.

Then we output accumulator + current, which is 0 + 20 = 20. The updated value of the accumulator is 20.

The callback executes a second time, with current = 13 (the second item in the array) and accumulator = 20. We return accumulator + current, which is 20 + 13 = 33. The accumulator is 33.

The callback executes a third time, with current = 3 (the third item in the array) and accumulator = 33. We return accumulator + current, which is 33 + 3 = 36. The accumulator is 36.

The callback executes a fourth time, with current = 31 (the fourth item in the array) and accumulator = 36. We return accumulator + current, which is 36 + 31 = 67. The accumulator is 67.

The array has no additional items, therefore the reduce produces the final value of accumulator, which is 67.

Inital Value

Reducer and initialValue are the two parameters that the .reduce() method accepts (not to be confused with the 2 parameters of reducer i.e. accumulator and current). The value we assign to the accumulator the first time the callback executes is known as the initialValue.

The first time that callback is executed, JavaScript will automatically take your initialValue and pass it to the accumulator parameter in the reducer.

Array.reduce(): Multiplication

Example:

const numbers = [1, 2, 5];

const finalResult = numbers.reduce((accumulator, current) => {
   return accumulator * current;
}, 1);
console.log(finalResult); // 10

The initial value for multiplication

We cannot begin a multiplication with a value of 0. This is due to the fact that any number multiplied by 0 will produce 0, 1 * 0 = 0. Given that any number multiplied by 1 would result in the same number, the number 1 act as the neutral multiplier in multiplication. Example: 1 * 1 = 1.

This is why we use a starting value of 1 for multiplication and a starting value of 0 for addition.

Example:

const numbers = [1, 2, 5];

const finalResult = numbers.reduce((accumulator, current) => {
   return accumulator * current;
}, 1);

Detailed Explanation:

The first time the callback is executed, accumulator is set to 1 (due to the initial value) and current is set to the first element of the array. Consequently, accumulator is 1 and current is 1.

Then we output accumulator * current, which is 1 * 1 = 1. The updated value of the accumulator is 1.

The callback executes a second time, with current = 2 (the second item in the array) and accumulator = 1. We return accumulator * current, which is 1 * 2 = 2. The accumulator is 2.

The callback executes a third time, with current = 5 (the third item in the array) and accumulator = 2. We return accumulator * current, which is 2 * 5 = 10. The accumulator is 10.

The result of the .reduce() is 10 which is stored in the variable finalResult.

Please share your thoughts in the comments section below. I'd love to hear your thoughts. Or please drop by and say '👋'.

What is an Arrow Function? -Part 2

Jin Choo — Thu, 01 Sep 2022 01:05:04 +0000

Implict Return

In JavaScript, an implicit return undefined occurs when the return statement is omitted from a function. The word implicit in this context refers to something that is implied but not directly stated. In other words, there was no return undefined as it would result in undefined.

Example:

const sum = (a, b) => {
   a + b;
}

sum(2, 5); // undefined

In the above example, sum(2,5) returns undefined because we don't have the return keyword in the function body.

Example:

// implicit return
const sum = (a, b) => a + b;

sum(2, 5); // 7

The return keyword and curly braces are not necessary if your arrow function is only one line long.

//without implicit return
const canVote = age => {
   return age >= 18;
}

Let's utilize implicit return by:

removing the curly braces
removing the return keyword

const canVote = age => age >= 18;

This is the clearest and shortest approach to write this function.

Array Methods Using Implicit Returns

Now let's see how to create the callback using arrow functions and implicit returns.

Array.filter()

//without implicit return
const ages = [10, 15, 21 45];

const agesAboveTwentyOne = ages.filter(function(age) {
   return age > 21;
});
console.log(agesAboveTwentyOne); //[21, 45]


//with implicit return
const agesAboveTwentyOne = ages.filter(age => age > 21);

We filter the ages where the age is bigger than 21.

Array.find()

//without implicit return
const furBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];

const findNames = furBabies.find(function(furBaby) {
   return furBaby === 'Benny';
});
console.log(findNames); // 'Benny'


//with implicit return
const findNames = furBabies.find(furBaby => furBaby === 'Benny');

From the furBabies array, find the furBaby that is equal to the string 'Benny'.

Array.map()

//Without implicit return
const numbers = [2, 6, 8, 10];

const tripled = numbers.map(function(number){
  return number * 3;
});
console.log(tripled); //[6, 18, 24, 30]


//with implicit return
const tripled = numbers.map(number => number *3);

Create a new array based on the numbers array, where every number is multiplied by 3.

Please share your thoughts in the comments section below. I'd love to hear your thoughts. Or please drop by and say '👋'.

What is an Arrow Function? - Part 1

Jin Choo — Wed, 31 Aug 2022 00:34:40 +0000

Arrow functions are introduced in ES6, which allows you to write functions in JavaScript more precisely. They enable us to write shorter function syntax. Arrow functions improve the readability and structure of your code.

Anonymous functions are arrow functions (the functions that do not have a name and are not associated with an identifier). They produce no output and can be used without the function keyword. Arrow functions may not be used as constructors. The context of the arrow functions can be specified lexically or statically. In other languages, they are known as Lambda.

The use of the arrow function syntax reduces the size of the code. Using the arrow function allows us to write less code.

From function to arrow function

In JavaScript, there are several ways to write a function. You could either define and name a function or define a variable and assign it to an anonymous function.

Example:

function multiply(a, b) {
   return a * b;
}

Can be written as:

const multiply = function(a, b){
   return a * b;
}

Take note of how we defined a variable multiply and then assigned it to a function with two parameters, a and b.

Let's rewrite using the arrow function by following these two steps:

remove the function keyword
add an arrow function, also called fat arrow => between the parameters (a, b) and the opening curly brace {

Example:

const multiply = (a, b) => {
   return a * b;
}

Arrow functions always begin with the parameters, then the arrow =>, and finally the function body.

In ES5, the return statement must be defined in the functions, but in ES6, the return statement is not required for single-line functions. For single-line functions, functional braces are also optional.

// ES5
function show(value){
return value/2

// ES6
let show = value => value/2;
console.log(show(50));

Array.forEach() using the arrow function

// Without the fat arrow
const ages = [10, 15, 22, 45];

ages.forEach(function(ages) {
   console.log(ages);
});

// With the fat arrow
ages.forEach((grade) => {
   console.log(ages);
});

Because the arrow function only has one parameter, the parentheses () surrounding the parameter are unnecessary.

ages.forEach(grade => {
  console.log(grade);
});

The arrow function lexically or statically binds the context. This is handled differently in arrow functions than in regular functions. There is no binding of this in the arrow function. This keyword is used in regular functions to represent the objects that called the function, which could be a window, a button, a document, or anything else.

//ES5
this.num.forEach(function(num) {
  if(num < 20)
   this.child.push(num);
}.bind(this));

//ES6
this.num.forEach(num => {
  if(num < 20)
    this.child.push(num);
});

This keyword, however, always represents the object that defines the arrow function when used with arrow functions.

We do not need to bind it implicitly when using the arrow function because it performs automatically.

Array.filter() using the arrow function

// Without the fat arrow
const ages = [10, 15, 22, 25];

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

// With the fat arrow
let agesAboveTwentyOne = ages.filter(age => {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

Because the arrow function only has one parameter, the parentheses () surrounding the parameter are unnecessary.

Please share your thoughts in the comments section below. I'd love to hear your thoughts. Or please drop by and say '👋'.

What is an Object? - Part I

Jin Choo — Tue, 30 Aug 2022 02:38:00 +0000

Objects

An object is a data type that allows you to combine several variables into a single variable with keys and values. This is frequently used to represent or describe an entity.

Example:

const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};

Read the value of a property

Use the dot notation to read the value of a property in an object.

const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};

user.id; // 1
user.firstName; // 'Charlie'
user.lastName; // 'undefined'(property does not exists)

Updating Property Value

The same dot notation followed by an equal sign can be used to update a property value as well:

const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};

user.firstName = 'Brody';
user.age = user.age + 1;
console.log(user); // {id: 1, firstName: 'Brody', age: 22}

const does not imply that a variable is a constant; it only indicates that you cannot reassign it, therefore you are able to change the property value of an object defined by const. As a result, even if the variable's content (properties) can change, it is always an object.

What are Arrays - Part III

Jin Choo — Sun, 28 Aug 2022 23:33:15 +0000

Array.map()

You can change one array into another using the .map(callback) method.

For example:

const numbers = [5, 4, 7, 10]

const tripled = numbers.map(function(number) {
    return number * 3;
});
console.log(tripled); // [15, 12, 21, 30]

and

const furBabyNames = ['dutches', 'monty', 'benny', 'lucky', 'chili'];
const furBabyUpperNames = furBabyNames(function(furBabyName){
    return furBabyName.toUpperCase();
});
console.log(furBabyNames); // ['DUTCHES', 'MONTY', 'BENNY', 'LUCKY', 'CHILI'];

Array.includes(item)

The Array .includes(item) method is one of the simplest array methods. This is because instead of a callback it takes an element and returns true if that element is in the array and false otherwise.

const fruits = ['Grapes', 'Mango', 'Watermelon'];

fruits.includes('Mango'); // true
fruits.includes('Pineapple'); // false

Array.join()

The join() method concatenates all of the elements in an array (or an array-like object), separated by commas or a specified separator string, to create and return a new string. If the array only contains one item, that item will be returned without the separator.

const furBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];
furBabies.join('; '); // 'Dutches; Monty; Benny; Lucky; Chili'
furBabies.join(' . '); // 'Dutches . Monty . Benny . Lucky . Chili'

What are Arrays? - Part II

Jin Choo — Sun, 28 Aug 2022 02:58:00 +0000

Array.filter()

The.filter() method is a frequently used array method. In response to the condition you give, this method returns another array with some of the elements from the original array.

let ages = [15, 20, 22, 25, 49]

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); // [22, 25, 49]

Notice how we received a new array containing the items that met the condition. The condition is that the age be greater than 21.

Array.filter(callback)

The first argument to the .filter() method is a callback.

Example:

function(age) {
  return age > 21;
}

Javascript will call your callback for each single item in the array. Because our numbers array contains 5 items, it will be called 5 times. It will assign a value to the number parameter that you specified inside the callback every time it calls this function.

If the callback function returns true, the item is added to the final array returned by .filter(). If the callback function returns false, the item will be removed from the final array.

Array.find()

Calling the .find(callback) method on an array retrieves the first element that matches the specified criteria. Returns undefined if the item is not found.

For example:

let myFurBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];

let babies = myFurBabies.find(function(myFurBaby) {
    return myFurBaby === 'Monty';
});
console.log(babies); // 'Monty'

Therefore, until one of the callbacks returns true, the .fine(callback) method will invoke the callback that you specified for each item in the array. It will then stop calling the other callbacks and give you the item for which the callback returned true.

function(myFurBaby) {
  return myFurBaby === 'Monty';
}

'Dutches' is the command that myFurBaby calls (first item of the array). myFurBaby === 'Dutches', thus the callback will return false. Therefore, the callback will be repeated with the following name value. The callback will be called again with the next value of name. The name this time = 'Monty'. The callback returns true because myFurBaby === 'Monty' (the condition in the callback) returns true. So the .find() method stops and returns 'Monty'.

.filter() vs. .fine()

What is the difference between .filter() and .find()?

The difference has to do with the return type of these 2 methods.

These two approaches provide different return type.

The filter() method ALWAYS returns an array.
The find() method returns the first element that matches the condition or undefined.

Examples:

let ages = [15, 20, 22, 25, 49];

// .filter() ALWAYS returns an array 
ages.filter(function(age) {
   return age >= 40;
}); // [49]

// .filter() ALWAYS return an array (even if it's empty)
ages.filter(function(age) {
    return age =< 12;
}); // []

// .find() returns the first match or undefined(even if there are 3 numbers that satisfy the condition)
ages.find(function(age) {
   return age >= 21;
}); // 22

ages.find(function(age) {
   return age <= 14;
}); // undefined

The filter() method will return an array, even if it is an empty array or 1 item that matches the condition. On the other hand, the find() method returns the first element that matches the condition.

What are Arrays? - Part I

Jin Choo — Sat, 27 Aug 2022 08:09:00 +0000

Arrays are where you can store multiple elements in the same variable. You can store numbers, strings, booleans, arrays, objects, etc.

Examples:

const numbers = []; // empty array
const ages = [10, 21, 35, 45]; // array of numbers
const names = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili']; // array of strings
const mixAndMatch = [25, false, 'Brody'] // mixed

.length property

.length property gives the number of elements in an array.

Examples:

[].length; // 0

const numbers = [22, 35, 43, 49, 98];
numbers.length; // 5

.length is a property of objects that are instances of type array. Objects have a property, and that property tracks length. So length is like an object key. Calling it will return that value.

Get Element by Index

If you use square bracket [] syntax with an index starting at 0, you can retrieve a specific element from an array.

For example:

const members = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];
members[2]; // 'Benny'

You can alternatively use the .at(index) method, which makes it simpler to locate the array's final element because it permits negative indices.

const members = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];
members.at(3); // 'Lucky'
members.at(-2); // 'Lucky'

.push() method

The .push() method can be used to add an element to an array.

const ages = [12, 25, 45, 49];
ages.push(64);// returns 5 (the new length of the array)
console.log(ages); // [12, 25, 45, 49, 64];

Array.push() returns the new length of the array.

We were able to add new data into the variable ages even though it was defined with const. The const states that once a variable is defined, it can only be assigned once. The variable may not always be immutable, but the contents are flexible.

Array.forEach()

One of the most important concepts in javascript is array iteration.

Let's imagine you want to loop (or iterate) through every element in an array of ages.

const ages = [21, 35, 49];
ages.forEach(function(age) {
   // do something with individual age
   console.log(age);
});

Always begin your .forEach() with a console.log() so you can visualize the transition from array to array item.

The callback function can be executed for each element in the array using the .forEach(callback) method.

A callback is a function definition passed as an argument to another function.

function(ages) {
   // do something with individual age
   console.log(grade);
}

When a grade is received, this callback function logs it to the console. This is a function definition because it's not being executed. It just describes how the function will behave. On the other hand, the .forEach() method receives this function definition as an argument.

ages.forEach(callBackHere);

When you combine them together, pass the function definition as an argument to the .forEach() method:

ages.forEach(function(age) {
   // do something with individual age
   console.log(age)
});

The code above will print each age from the ages array to the console.

21 
35 
49

Returning Booleans

Jin Choo — Fri, 26 Aug 2022 04:48:06 +0000

If you're returning a boolean (true or false), sometimes it can be redundant. Example:

function canVote(age) {
   if (age >= 18 ) {
     return true;
   } else {
     return false;
   }
}

canVote(18);

The code above is redundant because grade >= 18 already evaluates to true or false depending on the age.

You can use without if/else, which will always return a boolean. Example:

function canVote(age) {
   return age >= 18;
}

This only works when you're returning a boolean from a function.