Here they are: concat, flat!

concat

According to the docs:

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

for more information see the docs:

Array.prototype.concat() - JavaScript | MDN

Before jumping into code I encourage you to stop and think how you would solve this task. How would you write concat method?

To do that, you can write some pseudo code before any task.

Let’s get started!

This is pseudo code

//  define newArray as copy of baseArray

//  iterate over args

//  if arg is an array

//      iterate over arg

//      push arg[el] into newArray

//  else

//      push arg into newArray

//  return newArray

//  baseArr is an array we concat 'args' to

//  ...args is an array of all arguments passed into concat

function concat(baseArr, ...args) {

    const newArray = baseArr;

    for(let arg of args) {

        if(Array.isArray(arg)){

            arg.forEach(el => newArray.push(el));

        } else {

            newArray.push(arg);

        }

     }

     
     return newArray;

}

console.log(concat([1, 2, 3, 4], [5, 6, 7, 8]));

// Output
// [1, 2, 3, 4, 5, 6, 7, 8]

Ok, we got this! It’s not hard, right?

Now let’s move to flat!

flat

According to the docs:

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

for more information see the docs:

Array.prototype.flat() - JavaScript | MDN

I won’t implement depth parameter but you can try it yourself!

Checkout this video about callstack.

Hint: depth is height of callstack

Let’s dive into code

Pseudo code

//  1)  define flattened array

//  2)  iterate over arr

//  3)  if element is an array

//  4)      go back to step 2)

//  5)  else

//  6)      push element into flattened

//  7)  return flattened

function flat(baseArr) {

      const flattened = [];

      function flatFn(arr) {

          for(let element of arr) {

              if(Array.isArray(element)) {

                    flatFn(element);

              } else {

                    flattened.push(element);

              }

          }

       }

       flatFn(baseArr);

       return flattened;

}

const arr = [0, 1, 2, [[[3, 4]]]];

console.log(flat(arr));

// Output 

// [0, 1, 2, [3, 4]]

That’s it for today! Thank you for reading! Don’t forget to give a feedback if something is not clear!

See ya!

How to write your own polyfills in JavaScript#4 was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

replace

According to the docs:

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.

for more information see the docs:

String.prototype.replace() - JavaScript | MDN

I won’t make a function that supports RegExp. You can try to do it on you own and share the results in the comments section.

Let’s dive into the code!

function replace(str, substr, newSubstr) {

    //  first index of 'substr' in 'str'

    let firstIndexOfSubstr = str.indexOf(substr); // 0

    //  index of the rest of the 'str' after 'substr'

    let indexOfTheRest = firstIndexOfSubstr + substr.length; // 4

    
    //  string before 'substr'

    let strBefore = str.slice(0, firstIndexOfSubstr);

    
    //  string after 'substr'

    let strAfter = str.slice(indexOfTheRest);

    //  returns new string

    return strBefore + newSubstr + strAfter;

}

let email = 'mr_john@mail.com';

let replacedEmail = replace(email, 'john', 'Vadim');

console.log(replacedEmail);

//  Output

//  mr_Vadim@mail.com

Great! Now you know how you could create a String.prototype.replace polyfill for yourself.

In reality, it’s better not to write you own polyfills for production code, because it might create bugs. But it’s a great thing to do for your learning and development code.

See ya!

forEach

According to the docs:

the forEach method executes a provided function once for each array element.

for more information see the docs:

Array.prototype.forEach() - JavaScript | MDN

It iterates over each element of an array.

Sounds familiar, isn’t it?

Of course! That’s what a for loop does!

const array = [1, 2, 3, 4];

for(let i = 0; i < array.length; i++) {

    console.log(array[i]);

}

Under the hood, I believe, the forEach does something similar to the example above.

Remember that forEach accepts a callback function that is invoked with every element of a provided array?

Look at the for loop again, how do you think what can we do to invok a callback function and pass it every element of the array?

If you said, wrap it in a function, you’re right!

Let’s dive into the code:

// we moved array out of the forEach function

// now we pass it as an argument

const array = [1, 2, 3, 4];

function forEach(array, callback) {

   for(let i = 0; i < array.length; i++) {

       callback(array[i], i, array);

   }

}

forEach(array, console.log);

// output
// 1
// 2
// 3
// 4

Wow, now our code looks a lot more flexible! We can pass it whatever callback functions we like, and it’ll work!

map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

for more information see the docs:

Array.prototype.map() - JavaScript | MDN

Sounds almost the same as forEach, isn’t?

Again, you’re right! Let’s take a look at the implementation!

function map(array, callback) {
        
     // step #1. Define a new empty array

     let newArray = [];

     // step #2. Iterate over 'array' and push return value
     // of 'callback' to 'newArray'

     for(let i = 0; i < array.length; i++) {

         newArray.push(callback(array[i], i, array));

     }

     // step #3. Return the 'newArray'

     return newArray;

}

const array = [1, 2, 3, 4];

// es6

console.log(map(array, el => el * 2));

// es5

console.log(map(array, function(el) {

     return el * 2

}));

// Output:
// 2
// 4
// 6
// 8

See? It looks very similar to forEach, the difference is just we create a new empty array and pass it return values of the ‘callback’ function. That’s it!

reduce

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an array.

for more information see the docs:

Array.prototype.reduce() - JavaScript | MDN

Oh boy, that’s a tricky one!

To understand reduce, we’ll take an array and sum all it’s elements.

// how would you sum all the elements?
// probably iterate over the array and add every value to a store
// like this:
// store = 1
// store = 1 + 2 = 3
// store = 3 + 3 = 6
// store = 6 + 4 = 10
// store = 10
// we did it!

const array = [1, 2, 3, 4];

function reduce(array, callback, initialValue) {
    // step #1. Create our 'store'

    let store = initialValue || 0;

    // step #2. Iterate over 'array' and save return value
    // of 'callback' to 'store'

    for(let i = 0; i < array.length; i++) {

        store = callback(store, array[i]);

    }

    
    // step #3. Return the 'store'

    return store;

}

// es6
// 'prev' means previous element of the array
// 'next' means next element of the array

console.log(reduce(array, (prev, next) => prev + next, 0));

// Output:
// 10

We did it! We found the sum of the array!

I hope it’s now clearer to you how reduce works under the hood.

filter

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

for more information see the docs:

Array.prototype.filter() - JavaScript | MDN

Last but not least, filter!

It works like map, but instead of modified copy of an array it filters out all elements that don’t match the condition.

Let’s dive into code!

const array = [1, 2, 3, 4];

function filter(array, callback) {
    // step #1. same as in map

    let newArray = [];

    // step #2. same as in map

    for(let i = 0; i < array.length; i++) {

        // difference between map and filter
        // before pushing to 'newArray' we make sure
        // that 'callback' returned 'true'

        if(callback(array[i], i, array)) {

            newArray.push(array[i]);

        }

    }

    
    // step #2. same as in map

    return newArray;

}

// es6

console.log(filter(array, el => el > 2));

// Output:
// [3, 4]

That’s it for today! These methods are very similar and very useful!

I hope you understand them better now! If there’s something you want to tell me, hit me up at the comments section below!

See ya!

In today’s article we’ll cover 3 popular function of Function.prototype:

Call, Apply and Bind!

Before, we dive in to code we need to add some definitions:

this: it is a keyword that refers to an object. Which object it refers to depends on where it’s used: in a method or in a function.

First of all, we’ll start with call function.

Call

Call function lets you invoke a function or a method with specific ‘this’.

func: it is a function being invoked by ‘call’ method.

thisArg: it refers to ‘this’ when you call ‘func’.

arg1, arg2, …argN: arguments for the ‘func’.

Implementation:

function call(func, thisArg, ...args) {

//  1. add 'func' to 'thisArg'

    thisArg['func'] = func;

//  2. call it with 'args' and save to 'result'

//  when we call thisArg.func(...args) we set 'this'
//  inside 'func' to 'thisArg'
//       i.e 
//  this === thisArg

    const result = thisArg.func(...args);

//  3. remove 'func' from 'thisArg'

    delete thisArg['func'];

//  4. return 'result'
  
    return result;

}

const obj = {

   name: 'John'

}

function sayName(...args) {
     //  this === obj
     //  this.name === obj.name

     console.log(this.name, ...args);

}

call(sayName, obj, 'Mike', 'Laura'); // John Mike Laura

In a function, ‘this’ refers to a global object. In a browser it is ‘window’ object, in Node.js it is ‘global’ object.

Keep in mind that in ‘strict mode’ in a function ‘this’ refers to undefined.

Apply

‘apply’ method is almost the same as ‘call’ but instead of taking ‘args’ separately, ‘apply’ takes them as an array.

Implementation:

function apply(func, thisArg, args) {

  // Note: 'args' is an array now

  thisArg['func'] = func;

  const result = thisArg.func(...args);

  delete thisArg['func'];
  
  return result;

}

const obj = {

name: 'John'

}

function sayName(...args) {

    console.log(this.name, ...args);

}

apply(sayName, obj, 'Mike', 'Laura'); // John Mike Laura

Bind

‘bind’ method is pretty similar to ‘apply’ and ‘call’ methods. But instead of returning the result of the invoked function, it returns an anonymous function, that is bound to ‘thisArg’. In other words, it wraps the logic of ‘call’ or ‘apply’ methods into a wrapper function. And all you have to do is to call this new function whenever you need.

function bind(func, thisArg, args) {

  return function(){

    thisArg['func'] = func;

    const result = thisArg.func(...args);

    delete thisArg['func'];

    return result;

  }

}

function sayName(...args) {

     console.log(this.name, ...args);

}

const newFuncFromBind = bind(sayName, obj, 'Mike', 'Laura');
newFuncFromBind(); // John Mike Laura

That’s it for today! If you have any questions or remarks, write them in the comments section below!

See ya!