Forem: Aris Zagakos

Implement JavaScript Array Methods From Scratch

Aris Zagakos — Sun, 05 Dec 2021 00:24:06 +0000

Introduction
prototype
this
Array Methods
Resources

Introduction

The JavaScript Array class is a global object that is used in the construction of arrays. Array is a special type of object that is mutable and it is used to store multiple values.

In this article, we will implement our own array methods from scratch. These implementations don't intend to replace the existing methods but to provide a better understanding of how these methods work and their uses.

Methods	Description
indexOf()	Returns the first index at which a given element can be found in the array, otherwise returns -1.
lastIndexOf()	Returns the last index at which a given element can be found in the array, otherwise returns -1.
reverse()	Returns the reversed array.
forEach()	Executes a provided function once for each array element.
map()	Creates a new array with the results of calling a provided function on every element in the calling array.
filter()	Creates a new array with all elements that pass the test implemented by the provided function.
reduce()	Applies a function against an accumulator and each element in the array to reduce it to a single value.

For a better understanding of Higher Orders Functions and specifically map(), filter() and reduce() methods you can check this article.

Before we start to implement these methods, we will take a quick look on how prototype and this work.

What is prototype?

In JavaScript, every function and object has a property named prototype by default. Prototypes are the mechanism by which JavaScript objects inherit methods and properties with each other. Prototypes are very useful when we want to add new properties to an object which will be shared across all the instances.

function User () {
    this.name = 'George',
    this.age = 23
}

User.prototype.email = 'george@email.com';
User.prototype.userInfo = function () {
    console.log('[User name]: ', this.name, ' [User age]: ', this.age);
}

const user = new User();

console.log(user.email); // george@email.com

user.userInfo(); // [User name]:  George  [User age]:  23

In the example above, we create the function object User that has the properties name and age. Then, we access the User function object with prototype property and we add the property email and the function userInfo() to it.

What is this?

The value of this is determined by the object that currently owns the space that this keyword is in (runtime binding).

function User () {
    this.name = 'George',
    this.age = 23,
    this.printInfo = function() {
        console.log(this);
    }
    this.orders = {
        orderId: '12345',
        printOrderId: function() {
            console.log(this);
        }
    }
}

const user = new User();

user.printInfo(); // User { name: 'George', age: 23, printInfo: [Function], orders: { orderId: '12345', printOrderId: [Function: printOrderId] } }

user.orders.printOrderId(); // { orderId: '12345', printOrderId: [Function: printOrderId] }

In the example above, we use again the function object User and add the object orders to it. The user.printInfo() prints the this value and in this case it contains all the properties of the User function object. The user.orders.printOrderId() prints only the properties of the orders object and that happens because the method printOrderId() is called through the orders object.

Let's implement the Array Methods

In order to implement the methods, we will access the Array object via prototype property and then we will add our new methods. The this keyword inside the methods has the value of the array that is calling the corresponding array method.

Custom indexOf

Array.prototype.customIndexOf = function (value) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] == value)
            return i;        
    }
    return -1;
}

const output = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(output.customIndexOf(2)); // 1

In the example above, the customIndexOf method takes as a parameter a value and then we iterate the array until we find the corresponding value and return its index.

Custom lastIndexOf

Array.prototype.customLastIndexOf = function (value) {
    for (let i = this.length - 1; i >= 0; i--) {
        if (this[i] == value)
            return i;        
    }
    return -1;
}

const output = [1, 2, 3, 4, 5, 9, 7, 9, 9, 10];

console.log(output.customLastIndexOf(9)); // 8

In the example above, the customLastIndexOf method takes as a parameter a value and then we iterate the array until we find the last corresponding value and return its index.

Custom reverse

Array.prototype.customReverse = function () {
    let left = 0;
    let right = this.length - 1;

    while(left < right) {
        let temp = this[left];
        this[left] = this[right];
        this[right] = temp;
        left++;
        right--;
    }
    return this;
}

const output = [1, 'b', 'abc', { name: 'Jonh' }, 10];

console.log(output.customReverse()); // [10, { name: 'Jonh' }, 'abc', 'b', 1]

In the example above, the customReverse method reverses in place the array and returns it.

Custom forEach

Array.prototype.customForEach = function (callback) {
    for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this);
    }
}

const output = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

output.customForEach(elem => {
    console.log(elem);
}); // 1 2 3 4 5 6 7 8 9 10

In the example above, the customForEach method takes as a parameter a callback function and it is applied on every element in the array. Also, the callback function receives additional the index and the array itself in case that will be used.

Custom map

Array.prototype.customMap = function map(callback) {
    const results = [];
    for (let i = 0; i < this.length; i++) {
        results.push(callback(this[i], i, this));
    }
    return results;
}

let output = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

output = output.customMap(elem => {
    return 3*elem;
});

console.log(output); // [ 3, 6, 9, 12, 15, 18, 21, 24, 27, 30]

In the example above, the customMap method takes as a parameter a callback function and for each element in the array we apply the callback function and we return the result in a new array. Again, the callback function receives additional the index and the array itself in case that will be used.

Custom filter

Array.prototype.customFilter = function (callback) {
    const results = [];
    for (let i = 0; i < this.length; i++) {
        if(callback(this[i], i, this))
            results.push(this[i]);
    }
    return results;
}

let output = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

output = output.customFilter((elem) => {
    return elem % 2 === 0;
});

console.log(output); // [ 2, 4, 6, 8, 10 ]

In the example above, the customFilter method takes as a parameter a callback function and for each element in the array we apply the callback function and for the values that pass the callback function we return the result in a new array.

Custom reduce

Array.prototype.customReduce = function (callback, initialValue) {
    let value = initialValue;

    for (let i = 0; i < this.length; i++) {
        value = callback(value, this[i]);
    }

    return value;
}

const output = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = output.customReduce((acc = 0, elem) => {
    return acc + elem;
});

console.log(sum); // 55

In the example above, the customReduce method takes as parameters a callback function and an accumulator variable and we apply the callback function against the accumulator for each element in the array until to reduce it to a single value.

You can check my github repository here.

Resources

Build a Restful CRUD API with Node.js

Aris Zagakos — Thu, 07 Oct 2021 19:46:13 +0000

What CRUD API means
Let's Start

What CRUD API means?

The CRUD paradigm stands for the four primitive database operations that are CREATE, READ, UPDATE and DELETE.

So, with the term CRUD API we mean, the API which have the ability to create, read, update and delete entities from a database. For this example, the entity is the employee.

Let's Start

API Endpoints are the following

Methods	Urls	Description
GET	api/employees	Get all employees
GET	api/employees/id	Get a specific employee
POST	api/employees	Create a new employee
PUT	api/employees/id	Update an existing employee
DELETE	api/employees/id	Delete an existing employee

We create the repository and install the dependencies.
The entry point is the server.js file.

 mkdir express-api
 cd express-api
 npm init
 npm install express helmet morgan body-parser monk joi dotenv --save 
 npm install nodemon --save-dev

About the packages

express: It is a minimal and flexible Node.js web application framework.
helmet: It helps in securing HTTP headers in express applications.
morgan: It is an HTTP request logger middleware for Node. js
body-parser: It is responsible for parsing the incoming request bodies.
monk: A tiny layer that provides substantial usability improvements for MongoDB usage.
joi: It is an object schema description language and object validator.
dotenv: It loads environment variables from a .env file.
nodemon: It restarts automatically the node application when file changes in the directory have been detected.

Setup Express Web Server
./src/server.js

const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const bodyParser = require('body-parser');

require('dotenv').config();

const app = express();
const monk = require('monk');

app.use(helmet());
app.use(morgan('dev'));
app.use(bodyParser.json());

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

Create and configure the .env file
./.env
It contains all the enviroment variables that we use.
TEST_DB_URL variable is for test cases in order to prevent the insertion of test data in the database. Also, you can specify the port number you want.

DB_URL = localhost/my-employees
TEST_DB_URL = localhost/test-my-employees
PORT = 5000

./src/db/schema.js
Create the data schema and define the validation rules that the properties name and job have to follow.

const Joi = require('joi');

const schema = Joi.object({
    name: Joi.string()
        .min(3)
        .max(30)
        .required(),
    job: Joi.string()
        .min(3)
        .max(30)
        .required(),
})

module.exports = schema;

./src/db/connection.js
Connect to the database

const monk = require('monk');

let dbUrl = process.env.DB_URL;

if (process.env.NODE_ENV === 'test') {
  dbUrl = process.env.TEST_DB_URL;
}

const db = monk(dbUrl);

module.exports = db;

./src/middlewares/index.js
Create the error middleware to handle the errors and give properly responses.

function notFound(req, res, next) {
    res.status(404);
    const error = new Error('Not Found', req.originalUrl);
    next(error);
}

function errorHandler(err, req, res, next){
    res.status(res.statusCode || 500);
    res.json({
        message: err.message,
        stack: err.stack
    });
}

module.exports = {
    notFound,
    errorHandler
}

We import ./src/db/connection.js, ./src/db/schema.js and ./src/middlewares/index.js files in ./src/server.js

const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const bodyParser = require('body-parser');

const { notFound, errorHandler } = require('./middlewares');

require('dotenv').config();

const schema = require('./db/schema');
const db = require('./db/connection');
const employees = db.get('employees');

const app = express();

app.use(helmet());
app.use(morgan('dev'));
app.use(bodyParser.json());

app.use(notFound);
app.use(errorHandler);

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

Now, we code the API Endpoints

const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const bodyParser = require('body-parser');

const { notFound, errorHandler } = require('./middlewares');

require('dotenv').config();

const schema = require('./db/schema');
const db = require('./db/connection');
const employees = db.get('employees');

const app = express();

app.use(helmet());
app.use(morgan('dev'));
app.use(bodyParser.json());

/* Get all employees */
app.get('/', async (req, res, next) => {
    try {
        const allEmployees = await employees.find({});
        res.json(allEmployees);
    } catch(error) {
        next(error);
    }
});

/* Get a specific employee */
app.get('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const employee = await employees.findOne({
            _id: id
        });

        if(!employee) {
            const error = new Error('Employee does not exist');
            return next(error);
        }

    res.json(employee);
    } catch(error) {
        next(error);
    }
});

/* Create a new employee */
app.post('/', async (req, res, next) => {
    try {
        const { name, job } = req.body;
        const result = await schema.validateAsync({ name, job });

        const employee = await employees.findOne({
            name,
        })

        // Employee already exists
        if (employee) {
            res.status(409); // conflict error
            const error = new Error('Employee already exists');
            return next(error);
        } 

        const newuser = await employees.insert({
            name,
            job,
        });

        console.log('New employee has been created');
        res.status(201).json(newuser);
    } catch(error) {
        next(error);
    }
});

/* Update a specific employee */
app.put('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const { name, job } = req.body;
        const result = await schema.validateAsync({ name, job });
        const employee = await employees.findOne({
            _id: id
        });

        // Employee does not exist
        if(!employee) {
            return next();
        }

        const updatedEmployee = await employees.update({
            _id: id,
            }, {  
            $set: result},
            { upsert: true }
        );

        res.json(updatedEmployee);
    } catch(error) {
        next(error);
    }
});

/* Delete a specific employee */
app.delete('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const employee = await employees.findOne({
            _id: id
        });

        // Employee does not exist
        if(!employee) {
            return next();
        }
        await employees.remove({
            _id: id
        });

        res.json({
            message: 'Success'
        });

    } catch(error) {
        next(error);
    }
});

app.use(notFound);
app.use(errorHandler);

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

We go to the package.json file and replace the script section with the following

"scripts": {
    "start": "node src/server.js",
    "dev": "nodemon src/server.js"
  },

The command npm start starts the Node.js application and the command npm run dev starts the Node.js application with the only difference that any change we do, will automatically be monitored by nodemon.

We "split" the ./src/server.js and create the ./src/app.js file.

./src/app.js

const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const bodyParser = require('body-parser');

const { notFound, errorHandler } = require('./middlewares');

require('dotenv').config();

const schema = require('./db/schema');
const db = require('./db/connection');
const employees = db.get('employees');

const app = express();

app.use(helmet());
app.use(morgan('dev'));
app.use(bodyParser.json());

/* Get all employees */
app.get('/', async (req, res, next) => {
    try {
        const allEmployees = await employees.find({});
        res.json(allEmployees);
    } catch(error) {
        next(error);
    }
});

/* Get a specific employee */
app.get('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const employee = await employees.findOne({
            _id: id
        });

        if(!employee) {
            const error = new Error('Employee does not exist');
            return next(error);
        }

    res.json(employee);
    } catch(error) {
        next(error);
    }
});

/* Create a new employee */
app.post('/', async (req, res, next) => {
    try {
        const { name, job } = req.body;
        const result = await schema.validateAsync({ name, job });

        const employee = await employees.findOne({
            name,
        })

        // Employee already exists
        if (employee) {
            res.status(409); // conflict error
            const error = new Error('Employee already exists');
            return next(error);
        } 

        const newuser = await employees.insert({
            name,
            job,
        });

        console.log('New employee has been created');
        res.status(201).json(newuser);
    } catch(error) {
        next(error);
    }
});

/* Update a specific employee */
app.put('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const { name, job } = req.body;
        const result = await schema.validateAsync({ name, job });
        const employee = await employees.findOne({
            _id: id
        });

        // Employee does not exist
        if(!employee) {
            return next();
        }

        const updatedEmployee = await employees.update({
            _id: id,
            }, {  
            $set: result},
            { upsert: true }
        );

        res.json(updatedEmployee);
    } catch(error) {
        next(error);
    }
});

/* Delete a specific employee */
app.delete('/:id', async (req, res, next) => {
    try {
        const { id } = req.params;
        const employee = await employees.findOne({
            _id: id
        });

        // Employee does not exist
        if(!employee) {
            return next();
        }
        await employees.remove({
            _id: id
        });

        res.json({
            message: 'Success'
        });

    } catch(error) {
        next(error);
    }
});

app.use(notFound);
app.use(errorHandler);

module.exports = app;

./src/server.js

const app = require('./app');

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

Last step is to refactor our code and create ./src/routes/employees.

./src/routes/employees.js

const express = require('express');
const schema = require('../db/schema');
const db = require('../db/connection');

const employees = db.get('employees');

const router = express.Router();

/* Get all employees */
router.get('/', async (req, res, next) => {
  try {
    const allEmployees = await employees.find({});
    res.json(allEmployees);
  } catch (error) {
    next(error);
  }
});

/* Get a specific employee */
router.get('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    const employee = await employees.findOne({
      _id: id,
    });

    if (!employee) {
      const error = new Error('Employee does not exist');
      return next(error);
    }

    res.json(employee);
  } catch (error) {
    next(error);
  }
});

/* Create a new employee */
router.post('/', async (req, res, next) => {
  try {
    const { name, job } = req.body;
    const result = await schema.validateAsync({ name, job });

    const employee = await employees.findOne({
      name,
    });

    // Employee already exists
    if (employee) {
      const error = new Error('Employee already exists');
      res.status(409); // conflict error
      return next(error);
    }

    const newuser = await employees.insert({
        name,
        job,
    });

    res.status(201).json(newuser);
  } catch (error) {
    next(error);
  }
});

/* Update a specific employee */
router.put('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    const { name, job } = req.body;
    const result = await schema.validateAsync({ name, job });
    const employee = await employees.findOne({
      _id: id,
    });

    // Employee does not exist
    if (!employee) {
      return next();
    }

    const updatedEmployee = await employees.update({
      _id: id,
    }, { $set: result },
    { upsert: true });

    res.json(updatedEmployee);
  } catch (error) {
    next(error);
  }
});

/* Delete a specific employee */
router.delete('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    const employee = await employees.findOne({
      _id: id,
    });

    // Employee does not exist
    if (!employee) {
      return next();
    }
    await employees.remove({
      _id: id,
    });

    res.json({
      message: 'Employee has been deleted',
    });
  } catch (error) {
    next(error);
  }
});

module.exports = router;

and the ./src/app.js file looks like this

const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const bodyParser = require('body-parser');

const { notFound, errorHandler } = require('./middlewares');

const app = express();

require('dotenv').config();

app.use(helmet());
app.use(morgan('dev'));
app.use(bodyParser.json());

const employees = require('./routes/employees');

app.use('/api/employees', employees);

app.use(notFound);
app.use(errorHandler);

module.exports = app;

You can check the whole project in my github repository express-api

An Introduction to Flexbox

Aris Zagakos — Mon, 04 Oct 2021 16:57:11 +0000

What is Flexbox
How Flexbox works
Example
Resources

What is Flexbox and why we use it?

Flexbox is a CSS3 layout model that provides a much easier and efficient way to arrange items within a container and create highly adaptive designs.
It is most appropriate and used for small-scale applications and layouts like navigation menus, card layouts and web forms. Usually, when it comes to large-scale and enterprise applications CSS grid is used most frequently.

How Flexbox works?

Flexbox is not a css style property but a whole CSS module, that contains it's own properties and operators. Some of these properties are applied on the container (flex container) whereas the others are applied on the children (flex items).

Flexbox is an one-dimensional layout system that we can use to create a row or a column axis layout. Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

In the example bellow, we will discuss how Flexbox works, how flex container communicates with flex items and some properties that it uses.

Example

⚫ The display: flex property sets the container as a flex container, so every item that exists inside it becomes a flex item.

⚫ Now as you can see the flex items are aligned in a row in the main axis. This happens because flexbox sets the flex-direction: row property to the flex container by default.
The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction.
We can change the main direction of the items to be the one we want by adding to the flex-direction the properly value.

flex-direction takes 4 values:

row(default): left to right.
column: same as row but top to bottom.
row-reverse: right to left.
column-reverse: same as row-reverse but bottom to top.

⚫ The order property changes the order of the flex items inside the container.

⚫ The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available within the flex container. This shorthand is setting three separate CSS properties (flex factors) at the same time, these are flex-grow, flex-shrink and flex-basis. The last two properties (flex-shrink and flex-basis) are optional. A flex item is fully inflexible if flex-grow and flex-shrink values are zero and flexible otherwise.

In the example above, flex: 1 is equivalent to:
flex-grow : 1 flex-shrink : 1 flex-basis : 0

flex-grow: Specifies how much the item will grow relative to the rest of the flexible items.

flex-shrink: Specifies how much the item will shrink relative to the rest of the flexible items.

flex-basis: Sets the initial main size of the flex item, before free space is distributed according to the flex factors.

⚫ In the flex container we have added the justify-content: center property and as you can see the items are aligned to the center.
The justify-content CSS property defines and controls the alignment along the main axis of all the items of the flex container.

Some frequently used values justify-content takes are:

flex-start (default): The flex items are packed toward the start of the flex-direction.
flex-end: The flex items are packed toward the end of the flex-direction.
center: The flex items are packed flush to each other toward the center of the alignment container along the main axis.
space-between: The flex items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same.
space-around: The flex items are evenly distributed within the alignment container along the main axis, with half-size spaces on either end. The spacing between each pair of adjacent items is the same.
space-evenly: The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

⚫ In the flex container we have added the flex-wrap: wrap property and as you can see when the size of the window changes the flex items are separated to multiple lines.
The flex-wrap CSS property sets whether flex items are forced into one line or can be flowed into multiple lines.
By default, flex items try to fit into one line. We can change that and allow the items to wrap as needed with this property.

The flex-wrap takes the values:

nowrap(default): The flex items are laid out in a single line which may cause the flex container to overflow.
wrap: The flex items break into multiple lines and the direction is defined by flex-direction.
wrap-reverse: Behaves the same as wrap but opposite to direction defined by flex-direction.

Resources

Understanding CSS Media Queries

Aris Zagakos — Sun, 18 Jul 2021 13:46:41 +0000

What are CSS media queries
How CSS media queries work
Example 1
Example 2
Resources

What are CSS media queries and why are useful?

CSS media queries give us the ability to control, modify and make the layout of a website responsive based on some rules we apply on them.

How CSS media queries work?

Media queries work with @media declaration that gives to the applied block a condition. If the given condition is true then the corresponding rule is applied.

The CSS media queries have four possible types:

all /* apply to all media type devices */
print /* apply on printers */
screen /* apply on screens */
speech /* apply on speech synthesizers */

The @media type is optional and if we skip it, the all type will be implied by default.

Now, let's see some examples on how to apply @media declaration based on different screen resolutions.

@media screen and (min-width: 600px) {
 /* Apply when the browser is at least 600px or above */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) */
}

@media screen and (max-width: 800px) {
 /* Apply when the browser is at maximum 800px or less */
 /* Equivalently we can write for any device */
 /* @media (max-width: 800px) */
}

@media screen and (min-width: 600px) and (max-width: 800px)
 /* Apply when the browser is from 600px to 800px */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) and (max-width: 800px) */
}

In the examples bellow, we will discuss two cases where we use media queries. In these examples, the idea is how the navbar items change and reorganize as the screen resolution changes.

Moreover, on these examples i don't emphasize so much in the style of the elements, but in the way the media queries are applied on them. You can see the code in detail on the pinned codepens.

Example 1

When the screen width size is 800px or less, the navbar items will be centered in a column and when the screen width size is 600px or less, the navbar items will be blue.

@media (max-width: 800px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    nav {
        background-color: rgb(62, 109, 149);
    }
}

Example 2

When the screen width size is 800px or less, a button appears and the navbar becomes hidden.
When we click the button the navbar items will appear in a column and when the screen width size is 600px or less, the navbar items will be blue.

@media (max-width: 800px) {
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
}

@media (max-width: 600px) {
    nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
  nav {
    background-color: rgb(62, 109, 149);
  }
}

Resources

Understanding Destructuring in JavaScript

Aris Zagakos — Sun, 27 Jun 2021 21:53:56 +0000

What is Destructuring
Why Destructuring is useful
Destructuring objects
Destructuring arrays
Bonus Part
Resources

What is Destructuring?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values
from arrays, or properties from objects, into distinct variables.

In this post we will discuss how destructuring works on both objects and arrays in JavaScript.

Why Destructuring is useful?

With destructuring we can read a property and assign its value to a variable without duplicating the property name. More than that, we can read multiple properties from the same object in just one statement. This is very useful especially when we are dealing with large or nested arrays and objects.

At the end of the day destructuring is a syntactic sugar that
makes our development process easier, faster and more convenient!

Destructuring objects

In the example below we create the object person that contains the fields name and age. Let's say that we want to extract these properties from the object.

Without Destructuring

const person = {
    name: 'Alex',
    age: '22',
};

const name = person.name;
const age =  person.age;

// Alex
console.log(name);
// 22
console.log(age);

In the example below we do the same, but now we are using destructuring.

With Destructuring

const person = {
    name: 'Alex',
    age: '22',
};

const { name, age } = person;

// Alex
console.log(name);
// 22
console.log(age);

const { name, age } = person is an object destructuring assignment. This statement defines the variables name and age, then assigns to them the values of properties person.name and person.age correspondingly.

Let's try to expand our previous example and add the nested object address in the object person.

Without Destructuring

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const name = person.name;
const age =  person.age;
const street = person.address.street;
const number = person.address.number;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);

With Destructuring

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name, 
    age, 
    address,
    address: {
        street,
        number,
    }, 
} = person;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);

There are many cases where we would want to use a different name than what is provided on the object itself, so adding a colon after the property name allows us to rename it. This is especially useful when we are dealing with name collisions or when we are working on objects that use property names that are not valid variable names. In the example below we rename all the variables that we used before.

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name: myName, 
    age: myAge, 
    address: {
        street: streetName,
        number: numberName,
    }, 
} = person;

// Alex
console.log(myName);
// 22
console.log(myAge);
// Wall Street
console.log(streetName);
// 21
console.log(numberName);

Destructuring arrays

In the example below we create the array result. Let's say that we want to assign the array values to some variables.

Without Destructuring

const result = [1, 5, 'koala'];

const first = result[0];
const second = result[1];
const third = result[2];

// 1 5 'koala'
console.log(first, second, third);

With Destructuring

const result = [1, 5, 'koala'];
const [first, second, third] = result;

// 1 5 'koala'
console.log(first, second, third);

The way that destructuring works in the arrays is simple. The position of the variable name matches the values index in the array.

Moreover, you can do more complex things like skipping array elements or assigning the rest of the items in an array to a particular variable.

const result = [1, 5, 'koala'];
const [,,third] = result;
const [first,...rest] = result;

// 'koala'
console.log(third);
// 1
console.log(first);
// [ 5, 'koala' ]
console.log(rest);

Bonus Part

We can use Destructuring at function parameters, passing arguments that are coming from objects and arrays.

In the example below, we will use the object person and we will create the array cities. Then we will implement the function printInfo that prints the name of the person and the city that person lives.

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const cities = ['Athens', 'New York', 'Tokyo'];

function printInfo({ name }, [,,city]) {
    console.log('My name is', name, "and i live in", city);
}

// My name is Alex and i live in Tokyo
printInfo(person, cities);

Resources

MDN: Destructuring assignment

Understanding map(), filter() and reduce() in JavaScript

Aris Zagakos — Mon, 14 Jun 2021 11:21:03 +0000

Introduction
map()
filter()
reduce()
Resources

Introduction

In the previous post we talked about First Class Functions and how JavaScript treat functions as a first-class-citizens.

Higher Orders Functions are functions that either take one or more functions as its arguments and/or return a function. This is a concept that was born out of functional programming. JavaScript, is a language that uses a lot of the functional programming concepts and Higher-Order Functions is one of them.

In this post we will discuss map(), filter() and reduce() that are some of the most well-known and easy to use Higher-Order Functions.

What Is Map?

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

Let's say that we want to create a new array that contains the double values of the numbers array.

A way to do it is to create the function double and call it for every element in the forEach.

Map written with a forEach

const numbers = [1, 2, 3];
const result = [];

const double = (number) => {
    return number * 2;
};

// Iterate over an array
numbers.forEach((number) => {
  result.push(double(number)); 
})

// [2 4 6]
console.log(result);

And this is where map comes into play! Instead of calling the function manually, we can pass the function to map and javascript will call the function on every element for us!

Map written without a forEach

const numbers = [1, 2, 3];

const double = (number) => {
  return number * 2;
};

const result = numbers.map(double);

//[2,4,6]
console.log(result);

Now let's see some other examples that we can use map

In the example below we create a new array using map that contains the full name of each person.

const people = [{
    first_name: "Michael",
    last_name: "Jordan"
}, {
    first_name: "LeBron",
    last_name: "James"
}, {
    first_name: "Stephen",
    last_name: "Curry"
}];

const fullNames = people.map((person) => {
    return `${person.first_name} ${person.last_name}`;
});

// [ 'Michael Jordan', 'LeBron James', 'Stephen Curry' ]
console.log(fullNames);

In the example below we create a new array that contains the first two letters of each day.

const days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];

const newDays = days.map((day) => {
    return day.substring(0,2);
});

// [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ]
console.log(newDays);

When should you use a map?

When you want to create a new array of the same length as the original array.
When you want to transform an array of one thing into an array of another thing.

What Is Filter?

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The call to filter() will return a new array.

The callback function used with filter should either return true or false.

true if the current element should appear in the new array.

false if the current element should NOT appear in the new array.

Let's say that we want to create a new array that contains the even numbers of the numbers array.

A way to do it is to create the function isEven to check if the number is even or not and call it for every element in the forEach.

Filter written with a forEach

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

const isEven = (number) => {
    return number % 2 === 0;
  };

// 2. Iterate over an array
numbers.forEach((number) => {
  if (isEven(number)) {
    evenNumbers.push(number);
  }
});

// [ 2, 4, 6, 8, 10 ]
console.log(evenNumbers);

Filter written without a forEach

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const isEven = (number) => {
  return number % 2 === 0;
};

const evenNumbers = numbers.filter(isEven);

// [ 2, 4, 6, 8, 10 ]
console.log(evenNumbers);

Now let's see some other examples, that we can use filter

In the example below we create a new array that contains the people that their first_name has six or less characters.

const people = [{
    first_name: "Michael",
    last_name: "Jordan"
}, {
    first_name: "LeBron",
    last_name: "James"
}, {
    first_name: "Stephen",
    last_name: "Curry"
}];


const short = people.filter((person) => {
    return person.first_name.length <= 6;
});

// [ { first_name: 'LeBron', last_name: 'James' } ]
console.log(short);

In the example below we have an array that contains the weekly days and we want to create a new array that will contain only the days that the number of their letters is less than 7.

const days = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
];
// create a new array with only the days that the length of their characters is less than 7
const shortDays = days.filter(day => {
  return day.length < 7;
});

// [ 'Sunday', 'Monday', 'Friday' ]
console.log(shortDays);

When to use Filter:

When you want a new array of a different length, based on some condition that only some elements in the array satisfy.

What Is Reduce?

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. The accumulator can be anything (integer, string, object, etc.) and must be instantiated or passed when calling reduce().

The call to reduce() will return a single value.
The callback function used with reduce will get passed the accumulator value and an element in the array.
- The accumulator value is the value returned from the last call to the callback function.
- The callback function should always return a value to be used in the next callback.
The third argument to the reduce() function is the starting value for the accumulator.

Let's say that we want to calculate the sum of the numbers array.

Reduce written with a forEach

const numbers = [1,2,3,4,5,6];
let sum = 0;

// Iterate over the array
numbers.forEach((number) => {
    sum +=  number;
});

// 21
console.log(sum);

Reduce written without a forEach

const numbers = [1,2,3,4,5,6];

// Iterate over the array
const sum = numbers.reduce((sum, number) => {
    sum += number;
    return sum; // Return the accumulator
}, 0);  // Initialize accumulator variable

// 21
console.log(sum);

Now let's see some other examples, that we can use reduce.

In the example below we create a new object that contains as a key the name of the stock and as a value the frequency of the stock.

const stocks = ['TSLA', 'PLTR', 'TSLA', 'AAPL', 'PLTR', 'TSLA'];

const result = stocks.reduce((stockFreq, stock) => {
    if(stockFreq.hasOwnProperty(stock)) {
        stockFreq[stock]++;
    } else {
        stockFreq[stock] = 1;
    }

    return stockFreq;
}, {});

// { TSLA: 3, PLTR: 2, AAPL: 1 }
console.log(result);

In the example below we create a new string that contains the first two letters of each day.

const days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];

const newDay = days.reduce((buffer ,day) => {
    buffer += day.substring(0,2);
    return buffer;
}, "");

// SuMoTuWeThFrSa
console.log(newDay);

Resources

Understanding First-Class Functions in JavaScript

Aris Zagakos — Fri, 12 Mar 2021 15:46:00 +0000

Introduction
Resources

Introduction

JavaScript is a programming language with First-class Functions.

A programming language is said to have First-class Functions when functions in that language are treated like any other variable. For example, in such a language, a function can be assigned as a value to a variable, can be passed as an argument to other functions and can be returned by another function.

Assign a function to a variable

// Assign an Anonymous Function to a variable
const greeting = () => {
   console.log('Hi Mikaela!');
};

// Invoke the function using the variable
greeting();

Pass a function as an argument

const sayHi = () => {
   return 'Hi ';
};

const greeting = (hiFn, name) => {
  console.log(hiFn() + name);
};

// Pass `sayHi` as an argument to `greeting` function
greeting(sayHi, 'Mikaela!');

Return a function

const greeting = () => {
  return () => {
    console.log("Hi Mikaela!");
  };
};

// invoke the inner function

greeting()();
// or
var hi = greeting();
hi();

Let's try another example

Create a function that is called addTwoNumbers. This function takes one number as parameter and it returns another function that takes again one number as parameter and finally returns the sum of these two numbers.


function addTwoNumbers(num1) {
  return (num2) => {
    return num1 + num2;
  };
};

// Invoke the function
const add = addTwoNumbers(10);

// 15
console.log(add(5));

Conclusion

First-class functions are a very important part of the JavaScript ecosystem, using them you can work on powerful design patterns such as higher-order functions, partial function application, callbacks, and much more.

Resources

MDN: First-class Function

Forem: Aris Zagakos

Implement JavaScript Array Methods From Scratch

Table of Contents

Introduction

What is prototype?

What is this?

Let's implement the Array Methods

Resources

Build a Restful CRUD API with Node.js

Table of Contents

What CRUD API means?

Let's Start

An Introduction to Flexbox

Table of Contents

What is Flexbox and why we use it?

How Flexbox works?

Example

Resources

Understanding CSS Media Queries

Table of Contents

What are CSS media queries and why are useful?

How CSS media queries work?

Example 1

Example 2

Resources

Understanding Destructuring in JavaScript

Table of Contents

What is Destructuring?

Why Destructuring is useful?

Destructuring objects

Without Destructuring

With Destructuring

Without Destructuring

With Destructuring

Destructuring arrays

Without Destructuring

With Destructuring

Bonus Part

Resources

Understanding map(), filter() and reduce() in JavaScript

Table of Contents

Introduction

What Is Map?

Map written with a forEach

Map written without a forEach

Now let's see some other examples that we can use map

When should you use a map?

What Is Filter?

Filter written with a forEach

Filter written without a forEach

Now let's see some other examples, that we can use filter

When to use Filter:

What Is Reduce?

Reduce written with a forEach

Reduce written without a forEach

Resources

Understanding First-Class Functions in JavaScript

Table of Contents

Introduction

Assign a function to a variable

Pass a function as an argument

Return a function

Let's try another example

Conclusion

Resources