Back then when I started learning programming, I used to wonder how some people know different programming languages and pick them up so fast. But over the years, after mastering and knowing to a large extent how JavaScript works under the hood, I proceeded to learn Typescript, C, and C# (I have done a bit of Python and Java but we are not talking about that today). I started to realize that these programming languages are similar to some extent and I would like to point out some key observations today.

It might interest you to know that these programming Languages are similar in syntax. They are all members of the C family of languages.

We would discuss these similarities under the following subheading:
1. Object Oriented Programming Language
2. Typed Language
3. Syntax
4. Function Hierarchies
5. Package Manager

Object Oriented Programming Language

C programming language is not traditionally an Object Oriented Language but has influenced the development of Object Oriented Programming (OOP) principles and shares certain characteristics with Object Oriented Programming.
Object-oriented programming (OOP) is a programming paradigm that structures software design around data, or objects, instead of focusing primarily on functions and logic. In this model, an object is described as a data field equipped with distinct attributes and behaviors.
OOP focuses on the objects that developers want to manipulate rather than the logic required to manipulate them. This approach to programming is well-suited for programs that are large, complex, and actively updated or maintained. This includes programs for manufacturing and design, as well as mobile applications; for example, OOP can be used for manufacturing system simulation software.
Some of C’s features have allowed developers to adopt OOP-like practices and these features include:

1. structs
2. function pointers
3. encapsulation through function interfaces

That being said, C# is an example of a programming language that is object-oriented. Javascript and Typescript on the other hand are both object-oriented and functional programming languages (I will write about functional programming later but like I said earlier functional programming is a type of programming where you deal with functions and logic where you give an input and get an expected output).

Typed Language

A typed language is one in which variables and values have types. There are languages that determine the types of variables in a program at compile-time. It would interest you to know that C and C# are strongly typed programming languages. They can also be referred to as statically typed languages.
Javascript on the other hand is a dynamically typed language. They are dynamic because you can only determine their type at runtime. This comes with a lot of advantages but to make it easy to track types, Typescript was created and it is statically typed.

Syntax

JavaScript, TypeScript, and C# are in the C family of languages. That similarity means you can already read and understand C#. There are some differences, but most of the syntax is the same as JavaScript and C. The curly braces and semicolons are familiar. The control statements like if, else, switch are the same. The looping statements of for, while, and do...while are same. The same keywords for class and interface are in both C# and TypeScript. The access modifiers in TypeScript and C#, from public to private, are the same. They also share the same async and await keywords for asynchronous programming. C# inheritance is part of the type declaration. A C# class declaration states any base class. In JavaScript, you can set the __proto__ property to set the base type on any instance.

Function Hierarchies

Javascript, C#, and Typescript languages support scoped/local functions and variables.

Package Manager

Javascript and Typescript can use either Yarn or NPM as package managers but C# uses NuGet.

With all this being said, have fun learning these programming languages.

There are five ways to loop through arrays. They include:

• While loop
• Do-while loop
• For loop
• ForEach loop
• Map loop

While Loop

A [while] statement executes its statements as long as a specified condition evaluates to true. The syntax for while loops are shown below:

while (condition)
  statement

If the condition becomes false, the statement within the loop stops executing, and control passes to the statement following the loop.

The condition test occurs before the statement in the loop is executed. If the condition returns true, the statement is executed and the condition is tested again. If the condition returns false, execution stops, and control is passed to the statement following while.

To execute multiple statements, use a block statement ({ }) to group those statements.

For example:

let n = 0;
let x = 0;
while (n < 3) {
  n++;
  x += n;
console.log('value of n', n)
console.log('value of x', x)
}

With each iteration, the loop increments n and adds that value to x. Therefore, x and n take on the following values:

• After the first pass: n = 1 and x = 1
• After the second pass: n = 2 and x = 3
• After the third pass: n = 3 and x = 6

After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.

Note that += is a concatenation symbol that either adds/joins two strings together or adds/sums two numbers together

DO-While Loop

The [do...while] statement repeats until a specified condition evaluates to false. The syntax for a do-while loop is shown below:

do
  statement
while (condition);

The statement is always executed once before the condition is checked. (To execute multiple statements, use a block statement ({ }) to group those statements.)

If the condition is true, the statement executes again. At the end of every execution, the condition is checked. When the condition is false, execution stops, and control passes to the statement following do...while.

For example,

let i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

The do-while loop iterates at least once and reiterates until i is no longer less than 5.

For Loop

A [for] loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop. The syntax for forloops is shown below:

for (the declaration or initialization; the condition; the incrementation or decrementation)
  statement

When a for loop executes, the following occurs:

1. The initializing expression initialization, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
2. The condition expression is evaluated. If the value of condition is true, the loop statements execute. Otherwise, the for loop terminates. (If the condition expression is omitted entirely, the condition is assumed to be true.)
3. The statement executes. To execute multiple statements, use a block statement ({ }) to group those statements.
4. If present, the updated expression afterthought is executed.
5. Control returns to Step 2.

For example,

for(i = 0; i < 10; i++){
     if(i === 2){
         console.log('2 is my favorite')
           continue
};
    if(i === 8){
         console.log('find out why the loop broke at 8')
           break
};
     console.log('Number' + i)
}

ForEach Loop

The forEach() loop is a method that executes a provided function once for each array element. In order words, a forEach() can be seen as an iterating function. The syntax for forEach() loop is shown below:

forEach(callbackFn)
forEach(callbackFn, thisArg)

The forEach() method is an iterative method. It calls a provided callbackFn function once for each element in an array in ascending-index order. forEach() always returns undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.

forEach() does not mutate the array on which it is called, but the function provided as callbackFn can. Note, however, that the length of the array is saved before the first invocation of callbackFn. Therefore:

• callbackFn will not visit any elements added beyond the array's initial length when the call to forEach() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by thecallbackFn, its value passed to the callbackFn will be the value at the time that element gets visited.

The forEach() method only expects the this value to have a length property and integer-keyed properties.

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

forEach() expects a synchronous function — it does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as forEach callbacks.

callbackFn

A function to execute for each element in the array. Its return value is discarded. The function is called with the following arguments:

element

The current element is being processed in the array.

index

The index of the current element being processed in the array.

array

The array forEach() was called upon.

thisArg(optional)

A value to use as this when executing callbackFn.

For example,

const numbers = ['a', 'b', 'c'];

numbers.forEach(number => console.log(number));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Note, the forEach() method returns the elements in the array.

Map Loop

The map() method creates and returns a new array populated with the results of calling a provided function on every element in the calling array. The syntax for the map loop is shown below:

map(callbackFn)
map(callbackFn, thisArg)

The map() method is an iterative method. It calls a provided callbackFn function once for each element in an array and constructs a new array from the results.

callbackFn is invoked only for array indexes that have assigned values.

The map() method is a copying method. It does not alter this. However, the function provided as the callbackFn can mutate the array. Note, however, that the length of the array is saved before the first invocation of callbackFn. Therefore:

• callbackFn will not visit any elements added beyond the array's initial length when the call to map() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn, its value passed to the callbackFn will be the value at the time that element gets visited.

The map() method only expects the this value to have a length property and integer-keyed properties.

callbackFn

A function to execute for each element in the array. Its return value is added as a single element in the new array. The function is called with the following arguments:

element

The current element is being processed in the array.

index

The index of the current element being processed in the array.

array

The array map() was called upon.

thisArg (Optional)

A value to use as this when executing callbackFn.

Thanks for reading

C is designed to be a low-level language that can easily access memory locations and perform memory-related operations. For instance, the scanf() function places the value entered by the user at the location, or address, of the variable. This is accomplished by using the & symbol.

#include <stdio.h>

int main() {
    int age;
    printf("Enter an age: ");

    scanf("%d", &age);

    printf("%d", age);
    
	return 0;
}

&age is the address of variable age.

A memory address is given as a hexadecimal number. Hexadecimal, or hex, is a base-16 number system that uses digits 0 through 9 and letters A through F (16 characters) to represent a group of four binary digits that can have a value from 0 to 15.

It’s much easier to read a hex number that is 8 characters long for 32 bits of memory than to try to decipher 32 1s and 0s in binary.

The following program displays the memory addresses for variables i and k

#include <stdio.h>

void test(int k);

int main() {
    int i = 0;
    
    printf("The address of i is %x\\n", &i);
    test(i);
    printf("The address of i is %x\\n", &i);
    test(i);

    return 0;
}

void test(int k) {
    printf("The address of k is %x\\n", &k);
}

In the printf statement, %x is the hex format specifier.

Program output varies from run to run, but looks similar to:

The address of i is 846dd754
The address of k is 846dd758
The address of i is 846dd754
The address of k is 846dd758

The address of a variable stays the same from the time it is declared until the end of its scope.

Pointers

Pointers are very important in C programming because they allow you to easily work with memory locations.

They are fundamental to arrays, strings, and other data structures and algorithms. A pointer is a variable that contains the address of another variable. In other words, it “points” to the location assigned to a variable and can indirectly access the variable. Pointers are declared using the * symbol and take the form:

pointer_type *identifier

Pointer_type is the type of data the pointer will be pointing to. The actual pointer data type is a hexadecimal number, but when declaring a pointer, you must indicate what type of data it will be pointing to.

The asterisk * declares a pointer and should appear next to the identifier used for the pointer variable.

The following program demonstrates variables, pointers, and addresses:

int j = 63;
int *p = NULL;
p = &j; 
printf("The address of j is %x\\n", &j);
printf("p contains address %x\\n", p);
printf("The value of j is %d\\n", j);
printf("p is pointing to the value %d\\n", *p);

There are several things to notice about this program:

• Pointers should be initialized to NULL until they are assigned a valid location.
• Pointers can be assigned the address of a variable using the ampersand & sign.
• To see what a pointer is pointing to, use the * again, as in p. In this case, the * is called the indirection or dereference operator. The process is called dereferencing.

The program output is similar to:

The address of j is ff3652cc
p contains address ff3652cc
The value of j is 63
p is pointing to the value 63

Some algorithms use a pointer to a pointer. This type of variable declaration uses ******, and can be assigned the address of another pointer, as in:

int x = 12;

int *p = NULL;

int **ptr = NULL;

p = &x;

ptr = &p;

Pointers in Expression

Pointers can be used in expressions just as any variable. Arithmetic operators can be applied to whatever the pointer is pointing to.

For example:

#include <stdio.h>

int main() {
    int x = 5;
    int y;
    int *p = NULL;
    p = &x;
    
    y = *p + 2; /* y is assigned 7 */
    y += *p;     /* y is assigned 12 */
    *p = y;       /* x is assigned 12 */
    (*p)++;      /* x is incremented to 13 */

    printf("p is pointing to the value %d\\n", *p); 
}

Note that parentheses are required for the ++ operator to increment the value being pointed to. The same is true when using the — operator.

Pointers and Arrays

Pointers are especially useful with arrays. An array declaration reserves a block of contiguous memory addresses for its elements. With pointers, we can point to the first element and then use address arithmetic to traverse the array:

• + is used to move forward to a memory location
• - is used to move backward to a memory location

Consider the following program:

#include <stdio.h>

int main() {
    int a[5] = {22, 33, 44, 55, 66};
    int *ptr = NULL;
    int i;
    
    ptr = a;
    for (i = 0; i < 5; i++) {
        printf("%d ", *(ptr + i));
    }
}

The program output is 22 33 44 55 66. An important concept with arrays is that an array name

acts as a pointer to the first element of the array. Therefore, the statement ptr = a

can be thought of as ptr = &a[0].

Pointers and Functions

Pointers greatly expand the possibilities for functions. No longer are we limited to returning one value. With pointer parameters, your functions can alter actual data rather than a copy of data.

To change the actual values of variables, the calling statement passes addresses to pointer parameters in a function.

For example, the following program swaps two values:

#include <stdio.h>

void swap (int *num1, int *num2);

int main() {
    int x = 25;
    int y = 100;

    printf("x is %d, y is %d\\n", x, y); 
    swap(&x, &y);
    printf("x is %d, y is %d\\n", x, y); 

    return 0;
}
 
void swap (int *num1, int *num2) {
    int temp;
    
    temp = *num1;
    *num1 = *num2;
    *num2 = temp;
}

The program swaps the actual values of the variables, as the function accesses them by address using pointers.

An array is a data structure that stores a collection of related values that are all the same type.

Arrays are useful because they can represent related data with one descriptive name rather than using separate variables that each must be named uniquely.

An array has the following syntax:

dataType arrayName[arraySize] = {arrayElements};

For example, the array test_scores[25] can hold 25 test scores. Once declared, the size and the datatype of an array cannot be changed.

Accessing Array Elements

The contents of an array are called elements with each element accessible by an index number.

In C, index numbers start at 0.

An array with 5 elements will have index numbers 0, 1, 2, 3, and 4. Consider an array x:

#include <stdio.h>

int main() {
    int x[5] = {20, 45, 16, 18, 22};   
    return 0;
}

It can be thought of as:

0 => [20]

1 => [45]

2 => [16]

3 => [18]

4 => [22]

To access an array element, refer to its index number. So in our example above, to access the First number, we would write the code like this

#include <stdio.h>

int main() {
    int x[5] = {20, 45, 16, 18, 22};
    printf("The second element is %d\\n", x[0]); 
  // This will print the number 20
    
    return 0;
}

It is also possible to change the elements in an array using their index number:

#include <stdio.h>

int main() {
    int x[5] = {20, 45, 16, 18, 22};
     x[3] = 300;
    printf("The second element is %d\\n", x[3]);
    // This will return the number 300 as the second number or third index
    return 0;
}

If we created an array of 5 numbers for instance and only filled it up with 3 elements as shown below:

#include <stdio.h>

int main() {
    int x[5] = {20, 45, 16};
    printf("The second element is %d\\n", x[3]); 
    printf("The second element is %d\\n", x[4]); 
  // This will print the number 0 for index 3 and 4
    
    return 0;
}

the value returned in index 3 and 4 will be 0.

Using Loops with Arrays

Assuming we wanted to take 5 input values from a user and store these inputs in an array, we can use the for loop for this. Here is what the code will look like:

#include <stdio.h>

int main() {
    int num[5];
    
    for (int i = 0; i < 5; i++){
        printf("Enter a number: ");
        scanf("%d", &num[i]);
    }
    for (int i = 0; i < 5; i++){
        printf("%d, ", num[i]);
    }
    return 0;
}

Nested Arrays

You can think of a nested array (otherwise known as a two-dimensional array) as a grid for representing a chess board, city blocks, and much more.

For example:

int a[2][3] = { {3, 2, 6}, {4, 5, 20} };

This array above has two arrays, each containing 3 elements each. To access each element, both the row index and column index are required. For example:

#include <stdio.h>

int main() {
    int a[2][3] = {
        {3, 2, 6},
        {4, 5, 20}
    };
    printf("Element 3 in row 2 is %d\\n", a[1][2]); /* 20 */
    a[1][2] = 25;
    printf("Element 3 in row 2 is %d\\n", a[1][2]); /* 25 */
   
	return 0;
}

Just as a for loop is used to iterate through an array, nested for loops are used to traverse a nested array:

#include <stdio.h>

int main() {
    int a[2][3] = {
        {3, 2, 6},
        {4, 5, 20}
    };
    
    int k, j;
    /* display array contents */
    for (k = 0; k < 2; k++) {
        for (j = 0; j < 3; j++) {
            printf(" %d", a[k][j]);
        }
        printf("\\n");
    }
   
	return 0;
}

Variable scope refers to the visibility of variables within a program. Variables declared in a function are local to that block of code and cannot be referred to outside the function. Variables declared outside all functions are global to the entire program. For example, constants declared with a #define at the top of a program are visible to the entire program. The following program uses both local and global variables:

#include <stdio.h>

int global1 = 0; 

int main() {    
    int local1, local2;
  
    local1 = 5;
    local2 = 10;
    global1 = local1 + local2;
    printf("%d \\n", global1);  /* 15 */
    
    return 0;
}

When arguments are passed to function parameters, the parameters act as local variables. Upon exiting a function, parameters and any local variables in the function are destroyed.

Use global variables with caution. They should be initialized before using to avoid unexpected results. And because they can be changed anywhere in a program, global variables can lead to hard-to-detect errors.

Static Variables

Static variables have a local scope but are not destroyed when a function is exited. Therefore, a static variable retains its value for the life of the program and can be accessed every time the function is re-entered.

A static variable is initialized when declared and requires the prefix static.

The following program uses a static variable:

#include <stdio.h>

void say_hello();

int main() {	
    int i;

    for (i = 0; i < 5; i++) {
        say_hello();
    }
   
    return 0;
}

void say_hello() {
    static int num_calls = 1;

    printf("Hello number %d\\n", num_calls);
    num_calls++;
}

The program output is:

Hello number 1

Hello number 2

Hello number 3

Hello number 4

Hello number 5

A function:

• is a block of code that performs a specific task
• is reusable
• makes a program easier to test
• can be modified without changing the calling program

Even a simple program is easier to understand when main() is broken down into subtasks that are implemented with functions.

A function takes the following syntax:

return_type function_name(parameters){
    // body
};

The return_type is the type of value the function sends back to the calling statement. The function_name is followed by parentheses. Optional parameter names with type declarations are placed inside the parentheses.

A function is not required to return a value, but a return type must still be in the declaration. In this case, the keyword void is used. For example:

#include <stdio.h>

void greeting () {
    printf("Good morning!!!");
};

int main() {
    // Write C code here
   greeting();
    return 0;
}

Function Prototype

When the parameter types and names are included in a declaration, the declaration is called a

function prototype.

For example, the square function prototype appears above the main():

#include <stdio.h>

// declaration
int square (int num);

int main() {
    int x, result;
  
    x = 5;
    result = square(x);
    printf("%d squared is %d\\n", x, result);
    
    return 0;
}

// definition 
int square (int num) {
    int y;

    y = num * num;

    return(y);
}

Our square function returns an integer and takes one parameter of type int. The last step is actually defining the function. Function definitions usually appear after the main() function. As you can see, the square function calculates and returns the square of its parameter. A function can take multiple parameters — in this case, they must be separated by commas. The return statement is used to send a value back to the calling statement.

Function Parameters

A function’s parameters are used to receive values required by the function. Values are passed to these parameters as arguments through the function call. By default, arguments are passed by value, which means that a copy of data is given to the parameters of the called function. The actual variable isn’t passed into the function, so it won’t change. Arguments passed to a function are matched to parameters by position. Therefore, the first argument is passed to the first parameter, the second to the second parameter, and so on.

#include <stdio.h>

int sum_up (int x, int y); 

int main() {
    int x, y, result;
  
    x = 3;
    y = 12;
    result = sum_up(x, y);
    printf("%d + %d = %d", x, y, result);
    
    return 0;
}

int sum_up (int x, int y) { 
    x += y;
    return(x);
}

The program output is: 3 + 12 = 15 The values of x and y were passed to sum_up. Note that even though the value of parameter x was changed in sum_up, the value of argument x in main() was not changed because only its value was passed into the parameter x.

The parameters in a function declaration are the formal parameters. The values passed to these parameters are the arguments, sometimes called the actual parameters.

Loops are codes that can execute statements repeatedly while an expression is true, looping over and over again. An infinite loop is one that continues indefinitely because the loop condition never evaluates to false. This may cause a run-time error.

There are 3 types of loop codes:

1. While loops
2. Do-While loops
3. For loops

While loop

The while loop evaluates a condition before the loop is entered, making it possible that the while statements never execute.

It takes the form:

while (expression) {
  statements
}

An example of a while loop is shown below:

#include <stdio.h>

int main() {
    int count = 1;
  
    while (count < 8) {
        printf("Count = %d\\n", count);
        count++;
    }
    
    return 0;
}

In the example above, the code will output the count variable 7 times, meaning the code will run 7 times.

Do-While Loop

The do-while loop executes the loop statements before evaluating the expression to determine if the loop should be repeated.

it takes this form:

do {
  statements
} while (expression);

An example is shown below:

#include <stdio.h>

int main() {
    int count = 1;
  
    do {
        printf("Count = %d\\n", count);
        count++;
    } while (count < 8);
    
    return 0;
}

Note the semicolon after the while statement. The do-while loop always executes at least once, even if the expression evaluates to false.

Note:

The break statement was introduced for use in the switch statement. It is also useful for immediately exiting a loop. For example, the following program uses a break to exit a while loop:

#include <stdio.h>

int main() {
    int num = 5;
  
    while (num > 0) {
        if (num == 3)
            break;
        printf("%d\\n", num);
        num--;
    } 
    
    return 0;
}

This program displays:

5

4

and then exits the loop.

When you want to remain in the loop, but skip ahead to the next iteration, you use the continue statement.

#include <stdio.h>

int main() {
    int num = 5;
  
    while (num > 0) {
    num--;
    if (num == 3)
      continue;
      
    printf("%d\\n", num);
  } 
}

The program output displays:

4

2

1

0

As you can see, the value 3 is skipped. In the code above, if num was decremented after the

continue statement an infinite loop would be created.

For Loop

The for loop is a loop structure that executes statements a fixed number of times.

It takes the form:

for (initvalue; condition; increment) {
  statements;
}

The initvalue is a counter set to an initial value. This part of the for loop is performed only once. The

condition is a Boolean expression that compares the counter to a value before each loop iteration, stopping the loop when false is returned. The increment increases (or decreases) the counter by a set value. For example, the program below displays 0 through 9:

#include <stdio.h>

int main() {
    // Write C code here
   int sum = 0;
  for(int i = 0; i <= 100; i++){
      sum = sum + i;
      printf("the sum is:  %d\\n", sum);
  }
 printf("the sum of all numbers from 1 - 100 is:  %d\\n", sum);
    return 0;
}

the code above prints out the sum of all numbers between 1–100

There are also nested For loops

Conditional statements are used when you are anticipating certain events to occur and you require some action to be performed when those events happen.

There are 3 types of conditional statements in the C programming language

1. If and else statements
2. Ternary operators
3. Switch statements

The If Else Statement

The if-else statement has the following syntax:

if (the condition){
the first action
}else if{
the second action
} else{
the last action
}

You can have as many “if else” as you want. For example, you want to write a code for a voting app where only persons that are 18 years above are eligible to vote and those below are not eligible, this can be done using an “if else” statement as shown below:

#include <stdio.h>

int main() {
    // Write C code here
   int age = 15;
   printf("Please enter your age: ");
   scanf("%d", &age);
if(age >=18){
  printf("You are eligible to vote");
}else {
   printf("You are not eligible to vote");
}
    return 0;
}

The Ternary Operator

The ternary operator has the following syntax:

(the condition) ? the first action : the second action;

This type of conditional statement is usually used when there are not more than two different scenario actions to be performed. For instance, in the example used in the if-else statement above, the perfect way to write it is to use the ternary operator. Check below:

#include <stdio.h>

int main() {
    // Write C code here
   int age;
   printf("Please enter your age: ");
   scanf("%d", &age);
(age >= 18) ?  printf("You are eligible to vote") : printf("You are not eligible to vote");

    return 0;
}

This code will give the same result as the if-else statement above.

The Switch Statement

This type of conditional statement has the following syntax:

switch (variable/expression){
     case value1:
     // body of case 1
     break;

     case value2:
     // body of case 2
     break;

     case value3:
     // body of case 3
     break;

     default:
     // body of the default    
   }

Now if we were to write the above example using the switch statement, it would look like this:

#include <stdio.h>

int main() {
    // Write C code here
   int age;
 
   printf("Please enter your age: ");
   scanf("%d", &age);
   

   switch (age < 18){
     case 1:
     // body of case 1
     printf("you are not eligible")
     break;

     case 2:
     // body of case 2
     break;

     case value3:
     // body of case 3
     break;

     default:
     // body of the default    
   }
    return 0;
}

Hello and welcome back to my page. I will try to break down these concepts. By the end of this read, you will understand the concepts of Higher-Order functions, and Callback functions, why they are used, and when to use them. These concepts are usually asked during interviews for front-end developers.

Firstly, let us find out what Higher-Order functions are. Higher-order functions (HOFs) are functions that operate on other functions, either by taking them as arguments or by returning them. Operations here refer to either returning a function as the result OR accepting one or more functions as arguments. It is not required to carry out both tasks. A function is deemed a higher-order function if it does either one or the other.

The question to ask yourself is: ‘How is this possible? Why can a function take another function as an argument or return a function? How can a function take another function as an argument or return a function?’ Knowing these answers would really help you understand how HOFs work under the hood. Remember your data types? The one you learned when you were taking your first Javascript course? You were told that javascript has two types of data types:

1. Primitive Data Types
2. Non-Primitive Data Types.

The primitive data types in plain terms are data types that are not objects and they include Strings, Numbers, Boolean, Symbols, Bigint, Null and Undefined. The non-primitive data types include Arrays, Objects, and Functions. Now, this might be a bit confusing because a type of object is an Object. I am trying to draw your attention to this fact because it is very important. Objects are key-based, use methods, and take in properties. It would interest you to know that an Array is an object that works slightly differently from objects because they are index-based and use a different type of iterators along with other reasons too (research more on arrays and you will be amazed). It would also interest you to know that functions are objects too. They are the advanced type of objects in a way. Just like chess where the queen has the same powers as the rook, bishop, and pawn, functions have all the properties of the function and objects embedded in them. (I play a lot of chess and that's the best way I can explain functions for you to understand these concepts). JavaScript functions are “first-class” objects. Therefore:

• They have built-in properties and methods, such as the name property and the .toString() method.
• Properties and methods can be added to them.
• They can be passed as arguments and returned from other functions.
• They can be assigned to variables, array elements, and other objects.

//Assign a function to a variable originalFunc

const originalFunc = (num) => { return num + 2 };

//Re-assign the function to a new variable newFunc

const newFunc = originalFunc;

//Access the function's name property

newFunc.name; //'originalFunc'

//Return the function's body as a string

newFunc.toString(); //'(num) => { return num + 2 }'

//Add our own isMathFunction property to the function

newFunc.isMathFunction = true;

//Pass the function as an argument

const functionNameLength = (func) => { return func.name.length };

functionNameLength(originalFunc); //12

//Return the function

const returnFunc = () => { return newFunc };

returnFunc(); //[Function: originalFunc]

The above are examples that show you how functions behave like objects and with this you can start to understand what I am trying to explain and see functions in a different light.

Callback Function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. That means that a callback function is a type of HOFs.

Higher-order functions allow us to abstract over actions, not just values. They come in several forms. For example,

The .reduce() Method

The .reduce() method iterates through an array and returns a single value.

const arrayOfNumbers = [11, 12, 13, 14];

const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {

return accumulator + currentValue;

});

console.log(sum); // 50

In the above code example, the .reduce() method will sum up all the elements of the array. It takes a callback function with two parameters (accumulator, currentValue) as arguments. On each iteration, accumulator is the value returned by the last iteration, and the currentValue is the current element. Optionally, a second argument can be passed which acts as the initial value of the accumulator.

The .map() Method

The .map() method executes a callback function on each element in an array. It returns a new array made up of the return values from the callback function.

The original array does not get altered, and the returned array may contain different elements than the original array.

const siblings = ['Paul', 'Francis', 'Faith', 'Purity'];

// add string after each sibling

const announcements = siblings.map(sibling => {

return sibling + ' is my sibling.';

})

console.log(announcements);

In the example code above, the .map() method is used to add ' is my sibling.' string at the end of each element in the siblings array.

The .filter() Method

The .filter() method executes a callback function on each element in an array. The callback function for each of the elements must return either true or false. The returned array is a new array with any elements for which the callback function returns true.

const randomNumbers = [14, 21, 52, 24, 49];

const filteredArray = randomNumbers.filter(n => {

return n > 15;

});

In the above code example, the array filteredArray will contain all the elements of randomNumbers but 14.

Understanding these concepts will help you to understand how closures work. I will write on closures later.

Thanks for reading.

Let’s start by defining a JavaScript bundler. A JavaScript bundler is a program that compiles all of your code and its dependencies into a single JavaScript file that is ready for production and can be loaded into a browser. Also, when working with libraries that have numerous dependencies or when your project grows too big for a single file, you can utilize a JavaScript bundler. The fact that a bundler creates a dependency graph as it navigates through your first code files is a terrific feature. This indicates that the module bundler keeps track of both the dependencies of your source files and the requirements of third parties starting from the entry point you selected. This dependency tree ensures that all source code files and related files are kept up-to-date and free of errors.

The next question to ask is why would we want to use bundlers.

JavaScript hasn’t had a standard for requesting dependencies from your code historically. Older versions of browsers did not understand the modern es6 style of writing javascript code. Es6 style of coding came with features such as “import”, “export” or “require”, arrow functions, JSX, etc. So basically, the bundler bundles all your code into one single file and sends it down to the browser in a way that it would understand your code.

If you wanted to write a javascript code for a weather web app in the past, for instance, your code would look like this:

<head>
  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="/js/navbar.js"></script>
  <script src="/js/weatherapi.js"></script>
  <script src="/js/main.js"></script>
  <script>
  // Here goes some code
  </script>
</head

But now, while utilizing a bundler, the files and their dependencies will be combined into a single file, like this:

<head>
  <script type="text/javascript" src="/bundle.js"></script>
</head

From the above example, it is easy to see why bundlers are very useful. The code above is much easier to read and understand.

Below are some advantages of using bundlers:

1. Many popular module bundlers come with performance optimization features that make your code respond fast on the browser.
2. They offer a consistent tooling environment that relieves you of the burden of dependencies.
3. Bundlers offer features that boost productivity, such as robust error reporting that makes it easy for programmers to identify and correct issues.
4. We can use npm since require() and exports are implemented similarly to Node.js and look for dependencies in the “node modules” directory. On this basis, you can quickly install and publish new libraries and take advantage of the versioning capabilities of npm.
5. Some bundlers remove unnecessary code from the final file, leaving only the code your application requires to function.

There are different types of bundlers but I will only talk about parcel and webpack.

Parcel

Parcel bundler is a fast build tool that allows developers to configure modules (Js, CSS, and HTML) necessary for development. It is the second most popular bundler, behind webpack.

To get started, run npm i parcel.

Let’s say you have a sample HTML boilerplate:

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

After that, run parcel index.html to utilize Parcel to create the HTML file.

Pros

1. Zero configuration

Parcel solves the configuration issues faced with Webpack and Browserify providing developers with a performant architecture needed for rapid web development. There’s also multi-asset support like Webpack enabling bundles for all kinds of non-JavaScript assets like CSS, HTML, and images.

2. Fast

Parcel is fast providing premium resource optimization features like hot module replacement and lazy loading of split code. According to the most recent benchmarks, Parcel’s bundling speed is 9.98s, compared to Browserify’s 22.98s and Webpack’s 20.71s. Using Parcel’s built-in caching technique can even deliver quicker results, with a benchmark time of 2.64s.

3. Asset optimization

Features like code-splitting allow you to break code files into chunks, thereby reducing load time.

Cons

1. Lack of advanced customizations

As a highly-opinionated bundler, Parcel is perfect for small and medium-sized applications. Nonetheless, making it work for complex applications where you need to modify the configurations might be tedious. In this situation, most developers prefer to use Webpack.

Webpack

Webpack functions as a transformer, minifier, and optimizer of all types of file resources and assets as well as a static module bundler for JavaScript files thanks to a wealth of advanced and highly customizable features. Not only that. The ecosystem of plugins and loaders for Webpack is also fairly robust.

Getting started is as simple as running npm i webpack

Pros

1. Multi-resource support

In addition to providing out-of-the-box support for JS files, Webpack has a rich Plugin ecosystem it relies on to bundle other files like CSS and Images.

2. Asset optimization

Features like code-splitting allow you to break code files into chunks, thereby reducing load time. There’s the Hot module replacement that helps you to manage modules without fully reloading the browser. Developers can employ Loaders in preprocessing their files, resulting in a faster app runtime. These and more highly customizable optimization features have made Webpack the most popular JS bundler.

3. Developers’ productivity

When working with a complicated task like Module bundling as a developer, it’s crucial to have:

• Extensive documentation.
• A solid ecosystem of third-party tools you can lean on.
• Efficient error debugging process that makes your work easier.

These three needs are met by Webpack, which provides a vast ecosystem of plugins and loaders as well as source map-powered debugging. Not just that. The core caching technique of Webpack enables programmers to create apps quickly.

Cons

1. Complex

Numerous developers who have a love-hate relationship with Webpack find its complexity to be a double-edged sword. It also has a difficult learning curve and is sophisticated.

2. Buggy and Slow

Webpack’s all batteries included approach can sometimes cause Webpack app integrations to be over-engineered. Over-reliance on plugins to do simple functions can cause the bundler to slow W necessitating technical debugging to make it well-optimized.

3. In a way, not suitable for learners

Webpack in a way is good for learners because it just gives you all the tools you need to code without necessarily configuring anything. One line of command and you get all you need. Why I will say it's not suitable for learners is because using that one line of command kinda drops you“ in the middle of your project”, you would not know how you got there or how these packages work “under the hood”. This is opinionated anyway.

Start using a JavaScript bundler today. Check out parcel or webpack.

Inspired by Brian Holts from frontend masters.