Forem: Matt Eddy

What is Node.js?

Matt Eddy — Thu, 08 Dec 2022 15:08:21 +0000

Overview

This article is Part 8 of the series Working With NodeJS, a series of article to help simplify working with Node.js. In this article I will briefly cover what Node.js is and what it is not.

What is Node.js

Node.js is an open source cross-platform JavaScript runtime environment. It uses Chromes v8 engine, which is written in C++, to execute our JavaScript code in our applications on the platform of choice, as well as translate our JavaScript code into C++ code. Because chrome's v8 engine cannot interact with the filesystem or operating system, v8 must translate our JavaScript code so that C++ code can understand it which can interact with the filesystem and operating system. Node.js also uses the Libuv project, written in C, which provides The Event Loop. The Event Loop is like a scheduler that manages all asynchronous operations within our JavaScript program. When you start a Node.js program a single instance of The Event Loop is created and placed into a single thread. This means that our program runs on one core of the CPU. Node.js is not entirely single threaded. There are functions utilized within the Node.js library that run outside The Event Loop thus creating and using additional threads. You can manage the amount of threads available for these functions with the process.env.UV_THREADPOOL_SIZE. The default number of threads available is 4.

Resources

How do you read a computer program?

Matt Eddy — Sat, 29 May 2021 01:02:05 +0000

React - Redux In Less Then 7 Minutes

Matt Eddy — Wed, 17 Mar 2021 13:37:47 +0000

Attention!!!

The code shown in this article is a valid implementation of the redux pattern referenced from the Official Redux.js.org. However, redux has provided us with an enhanced toolkit which they recommend using when developing with react and redux. It is completely your decesion on which path you take. You can learn more about reduxjs/toolkit by checking out the link.

Overview

In this article, I will cover some fundamental concepts of redux and how to build a simple application(Counter App) using react and redux.

Redux

Redux is predictable state container for javascript applications. This means whenever there are changes within the application including both data and UI changes, those changes are contained in a single javascript object called the state. The state is often referred to as the single-source-of-truth because it is never mutated or modified, but instead recreated. With a single-source-of-truth we can better predict the state of the application at a giving moment.

Redux Fundamentals

Before diving into the application lets cover some Redux fundamentals.

State

The state is a javascript object that represents the entire state of a redux application. It can be a simple object with a single value or a more complex object.

{counter: 0}

The state is accessible throughout the entire application and is managed by a centralized container known as the store. The only way to access the store is by dispatching an action.

Actions

An action is an description of how the store should change the state.

{
  type: 'INCREMENT',
  value: 5, 
}

The change within the application is understood by the action's type property. All actions have a type property. The type property explains to the store how to respond and recreate the state. The creation of the state is handled by a reducer.

Reducers

A reducer is a javascript function that will create a new state based on some action type.

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.ADD:
            return {
                ...state,
                counter: state.counter + 1
          }
    }
    return state;
}

Reducers are often referred to as pure javascript functions. A pure javascript function is a function that giving the same input will always return the same output. They are called pure functions because they are predictable and include no side effects such as network or database calls. The most import job of a reducer is to recreate the state for the store.

Store

A store is a javascript object that holds the application's state. There should only be a single store in a redux application.

{
  dispatch: Dispatch
  getState: () => State
  subscribe: (listener: () => void) => () => void
  replaceReducer: (reducer: Reducer) => void
}

Store Methods

dispatch(action): Dispatches an action
getState(): Returns the current state
subscribe(listener): Adds a change listener
replaceReducer(nextReducer): Replaces the reducer

Redux Pattern

The redux pattern can visualized as below.

React and Redux (Counter App)

In this section, I will cover the steps to build a simple counter application with react and redux. To see the application Code.

Getting Started

First, I'll create a basic react app with npx and install the needed dependencies: react-redux and redux.

npx create-react-app redux-practice
cd redux-practice
npm i react-redux redux

Next, I'll create three new directories to manage the files of my application.

mkdir src/store
mkdir src/containers
mkdir src/components

src/store - Reducers and actions needed for redux store
src/containers - Components connected to the redux store
src/components - Presentational level components

I'll start off by working on the actions and reducers which will be located in the the store directory.

touch src/store/actions.js
touch src/store/reducers.js

First, I'll define my actions. This application wont have very many for the sake of simplicity and demonstration.

src/store/actions.js

export const ADD = 'ADD';
export const SUBTRACT = 'SUBTRACT';

Next, I'll create the reducer function needed for the store.

src/store/reducers.js

import * as actionType from './actions';
const initialState = {
    counter: 0
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.ADD:
            return {
                ...state,
                counter: state.counter + 1
            }
        case actionType.SUBTRACT:
            return {
                ...state,
                counter: state.counter - 1
            }
        default:
            return state
    }
}
export default reducer;

In the above code snippet I've imported all the actions from actions.js , then created a state variable to initialize the state for this reducer, and created my reducer function. The reducer function takes two arguments state, which if not initialized will be set to the initialState, and action which will be passed in once an action is dispatched. I'll use a switch state to determine the action type and using the actions from actions.js handle each case accordingly.

Now that I have my reducer and actions created I'll create my store. The store should be created at the top level component which in this case is index.js

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './store/reducers';
import './index.css';
import App from './App';

const store = createStore(reducer);

ReactDOM.render(
  <React.Fragment>
    <Provider store={store}><App /></Provider>
  </React.Fragment>,
  document.getElementById('root')
);

In the index.js file I imported createStore from redux, as well as Provider from react-redux. I also imported my reducers which I will need for my createStore function. The createStore function takes in the reducers and returns the redux store. I use the Provider which has a prop called store and I pass the store created above to the Provider prop. At this point the redux store is accessible throughout the entire react application.

Next, I'll create two components to represent the counter application.

mkdir src/components/CounterButton
mkdir src/components/CounterLabel
touch src/components/CounterButton/CounterButton.js
touch src/components/CounterLabel/CounterLabel.js

These components are presentational components so they will be very simple.

CounterButton.js

import React from 'react';
import './CounterButton.css';

function CounterButton(props) {
    return (
        <div className="CounterButton">
            <button
                type="button"
                onClick={props.clicked}
                className="btn btn-primary">
                {props.label}
            </button>
        </div>
    )
}
export default CounterButton;

CounterLabel.js

import React from 'react';

import './CounterLabel.css'

function CounterLabel(props) {
    return (
        <div className='CounterLabel'>
            {props.value}
        </div>
    )
}

export default CounterLabel;

Next, I'll create the counter component which will be connected to the redux store.

touch src/containers/Counter.js

Counter.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../store/actions';
import CounterLabel from
    '../components/CounterLabel/CounterLabel';
import CounterButton from
    '../components/CounterButton/CounterButton';

import './Counter.css';

class Counter extends Component {
    render() {
        return (
            <div className="Counter">
                <CounterLabel value={this.props.ctr} />
                <CounterButton
                    clicked={this.props.onAdd}
                    label="Add" />
                <CounterButton
                    clicked={this.props.onSubtract}
                    label="Subtract" />
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        ctr: state.counter
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onAdd: () => dispatch({ type: actionType.ADD }),
        onSubtract: () => dispatch({type: actionType.SUBTRACT})
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

Within the Counter.js I import the connect function from react-redux package which is used directly on the component at the end of the file. The connect function takes two arguments, first mapStateToProps which is responsible for selecting a part of the state that the component needs, and second mapDispatchToProps which is responsible for dispatching actions to the store. The onAdd and onSubtract functions are passed as props to the ControlButtons and when clicked dispatch their respective actions to the store. At this point are simple counter application is complete.

When To Use Redux

The application in this article is very simple for learning purposes. In most cases you will not need redux for an application of this size. A state management system is good for large scale applications where state management is difficult to understand. Here are a few pointers on when to use redux that I got from Maxillian over at Academind.

Local UI State - Redux not recommended
Persistent State - Redux can be used for the data you need to display
Client State - Look to use Redux

Conclusion

As always take care and if you found this article helpful please leave a rating or if you have a question leave a comment and I'll try to get back to you as soon as possible.

React.js - Components

Matt Eddy — Fri, 12 Mar 2021 16:59:10 +0000

Introduction

React.js is about building a UI. Every object or function in a React.js application contributes to the UI. In this article, I will explain the types of components used in React.js and possible use cases for each type.

Component Scope

As long as React is within scope a JavaScript Function or ES6 JavaScript Class can be made into a React Component.

import React from 'react';

Components Types

Functional

Functional components are functions that accept props as arguments and return valid JSX. Functional components are usually the preferred choice when building components with react because they require less overhead.

import React from 'react';

function Todo(props){

    return (
      <div className="Todo">
        <h1>New Task: {props.task}</h1>
      </div>
    );
}

export default Todo;

Use Case - When you need a generic starting template for building a component.

Component (React Class)

Class components in React.js inherit the Component constructor. They can initialize state, implement the render method and use lifecycle hooks.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Use Case - If the component will render to the DOM and requires full capability of react.

Pure (React Class)

The difference between the Pure and Component class is the render method. A Pure component will not update the state if the values have not changed.

   import React, { PureComponent } from 'react';

    class Result extends PureComponent {
      render() {
        return <li>{this.props.result}</li>;
      }
    }

    export default Result;

Use Case - If you need to avoid consistent renders of the component.

Stateful - (Containers, Smart)

Stateful components are components that manage the state of the component. The component may manage state by means of the this.state object or the useState hook. Stateful components are often referred to as Container or Smart components because the state is often connected to a live data source.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     text: 'Do Something',
     completed: false
    }
  }

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Another Example

import React from 'react';
import { useState } from 'react'


function Todo(props){

  const [todo, setTodo] = useState({
    text: 'Do something',
    completed: false
    })
    return (
      <div className="Todo">
        <h1>New Task: {todo.text}</h1>
      </div>
    );
}

export default Todo;

Use Case - When you need to manage or update the state of a component.

Stateless - (Presentational, Dumb)

Stateless components do not manage the state of a component. They are often referred to as Presentational or Dumb components because its only job is to provide a piece of the UI.

import React from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo

Another Example

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
export default TodoList

Use Case - If the component will be reused in different parts of the application and act as only as a view.

Higher Order(HOC)

A higher order component is a function or component per se that takes a component as props and returns a new component. Its different from other components because it doesn't render any view to the DOM.

import React from 'react';

const withClass = props => (
  <div className={props.classes}>{props.children}</div>
);

export default withClass;

Use Case - You want to add some additional features or styling to a component.

Conclusion

These are the different types of components within React.js. The two most commonly used components used within development are Class and Functional. As always take care, and I hope this article helps you on the path to learning React.js

Securing An Express Application

Matt Eddy — Fri, 12 Mar 2021 16:54:22 +0000

Overview

The focus of the article is to understand how to secure a Node.js and Express application.

Introduction

Security is a big concern in the digital world. If your application is not properly secure, then its not a matter if you get hacked, but when you get hacked. Here are a few things you can do to protect your application out in the wild.

Security Best Practices

First, lets cover some best practices from Express. Express tells us that we should disable the X-Powered-By header as it provides attackers with information about how are site works. A simple fix would be to install the package helmet. Helmet adds some out-of-the-box security changes to the application so that its less vulnerable to attacks.

const express = require("express");
const helmet = require("helmet");

const app = express();

app.use(helmet());

Another recommendation is to avoid using the default Set-Cookie, but instead use cookie-session. The reason for this is the Set-Cookie stores the whole session object whereas the cookieSession will store only session I.D. For example we can set a cookie with cookieSession the in Node.js as such:

const express = require('express')
const cookieSession = require('cookie-session')

const app = express()
const expiryDate = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
app.use(cookieSession({
  name: 'trusted cookie', // Don't use Set-Cookie
  path: '/',
  expires: expiryDate,
  keys: ['some random key'] 
}))
 ...

To add an extra layer of security on the cookie we can change it's sameSite property. By default sameSite is set to lax if we change to strict the usage of the cookie is restricted to the domain that issued the cookie.

const express = require('express')
const cookieSession = require('cookie-session')

const app = express()
const expiryDate = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
app.use(cookieSession({
  name: 'trusted cookie', // Don't use Set-Cookie
  path: '/',
  expires: expiryDate,
  keys: ['some random key'],
  sameSite: 'strict'
}))
 ...

Next, we want to make sure our dependencies do not have security issues. We can run a npm audit, or use snyk to check for security issues in our dependencies. For example, testing dependencies with snyk will produce the following output:

Testing /Users/meddy/projects/demo...

Organization:      creativethoughtz.team
Package manager:   npm
Target file:       package-lock.json
Project name:      demo
Open source:       no
Project path:      /Users/meddy/projects/demo
Licenses:          enabled

✓ Tested 56 dependencies for known issues, no vulnerable paths found.

Synk is one option, but we also can use just regular npm. With npm we can run a npm audit fix to scan our project for vulnerabilities and automatically install any compatible updates to vulnerable dependencies. To see the complete list of recommendations from the Express Team visit Security Best Practices. At this point the application has minimal defenses. Lets see how we can improve the application security.

Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery is one of the most common attacks used on web applications. The attack happens when a web server provides a user with an access key of some type, perhaps a cookie or token, so the user may avoid re-authentication. Once the user visits another website where a CSRF attack is set up, the malicious website will be able to make request to the server on behalf of the user. To prevent CSRF attacks use the csurf package. The csurf package ensures that all request made to the server come from your website. The csurf package enables you to store cryptographic tokens within the forms of your website. When a request is made to the server the payload must contain the token stored within the form.

Example server

const express = require('express')
const cookieSession = require('cookie-session');
const csrf = require('csurf')
const expressHandlebars = require('express-handlebars');
const bodyParser = require('body-parser')

// setup csrf Protection middleware
const csrfProtection = csrf();

const parseForm = bodyParser.urlencoded({ extended: false })

const app = express()

app.engine('handlebars', expressHandlebars({ defaultLayout: 'main' }));
app.set('view engine', 'handlebars')
const expiryDate = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
app.use(cookieSession({
  name: 'session',
  path: '/',
  expires: expiryDate,
  sameSite: 'strict',
  keys: ['some random key']
}))

app.get('/form', csrfProtection, function (req, res) {
  // pass the csrfToken to the view
  res.render('send', { csrfToken: req.csrfToken() })
})
 // when a post is made verify the token
app.post('/process', parseForm, csrfProtection, function (req, res) {
  res.send('data is being processed')
})

Basic form with _csrf token

<form action="/process" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">
  Favorite color: <input type="text" name="favoriteColor">
  <button type="submit">Submit</button>
</form>

Another approach to provide CSRF protection is to check the origin and referrer headers which are known as forbidden headers. Forbidden headers are headers that cannot be modified programmatically because the user agent retains full control over them. These headers contain the host from which the request was made, and we can use this information to compare that to the host of our application.

This will help provide an extra layer of security against CSRF attacks. Lets continue exploring other security options for our application.

Cross-Site Scripting (XSS)

Cross-Site Scripting is when an attacker is able to inject malicious code within your application. The good news is that if you're using a frontend framework such as Angular, React, or Pug then your data will be sanitized by the framework protecting you from XSS. However, the only way to ensure the data within the database is sanitized is by sanitizing the data on the server. We can use the package sanitize-html to sanitize data.

const sanitizeHtml = require('sanitize-html');
const dirty = 'some really tacky <script>alert("Hi")</script>';
const clean = sanitizeHtml(dirty);

You can take this approach if you are not using a framework to render your frontend or if you do want any html tags stored within database. To learn more about the different types of XSS attacks and how to prevent them check out the OWASP Cheat Sheet.

Rate Limiting

Rate Limiting is another defensive mechanism we can deploy to protect our resources from exploitation. Rate Limiting will limit the number of request that can be made to the sever. When a maximum number of request have been reached the server will limit request from that source.

Authorization

Authorization represent the privileges of a user on our system. The privileges are in reference to a particular resource, and are defined by the acronym CRUD, which stands for create, read, update, and delete. When determining the privileges of a user the rule of thumb is Principle of least privilege. This means you should grant privileges only as needed to the users of the system.

Authentication

Password Authentication Protocol (PAP) is one of the weakest authentication schemes, yet the most used. Passwords are easily hacked, and even worse their daisy-chained. The problem arises from the fact the average users has over 90 online accounts. Therefore, if our application requires a password for authentication, then the application should enforce strong password requirements. This will help ensure that our authentication scheme is not the weakest in the chain. Also, we should consider the encryption algorithm for passwords to prevent password cracking. When choosing a hashing algorithm we should avoid encryption methods using the sha2 hashing algorithm and instead use methods that use the argon2 hashing algorithm as it is more secure.

hashing code snippet

const argon2 = require('argon2');

try {
  const hash = await argon2.hash("password");
} catch (err) {
  //...
}

verify password code snippet

try {
  if (await argon2.verify("<big long hash>", "password")) {
    // password match
  } else {
    // password did not match
  }
} catch (err) {
  // internal failure
}

If it is possible we should avoid building our own authentication system, and look to leverage an existing authentication system. One popular authentication system is passport. Passport provides us with options for authentication. We can delegate the entire authentication process to use OAuth, or SAML standards, or if we want to manage authentication ourselves we can use a Local strategy.

passport.use(new LocalStrategy(
  function(username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      if (err) { return done(err); }
      if (!user) { return done(null, false); }
      if (!user.verifyPassword(password)) { return done(null, false); }
      return done(null, user);
    });
  }
));

Another concept gaining popularity is passwordless authentication. Passwordless authentication allow users to log in without the need to remember a password. Instead, users enter their mobile number or email address and receive a one-time code or link, which they can then use to log in. We now have a few options for authenticating users on the web, lets continue increasing the security of the application.

HTTPS (Data In Transit)

HTTPS is probably one of the simplest security mechanism you can employ to protect the integrity of your data. Https encrypts the data while it is in transit, making it extremely difficult for hackers to gain access to the information being exchange between client and server.

AES-256 (Data At Rest)

Another security feature we can use to protect our application and resources is to encrypt the data while its stored in the database or at rest. A strong encryption algorithm such as AES-256 can be used to encrypt data at rest. One popular approach, that uses AES-256, to encrypt data at rest is AWS KMS Envelope Encryption Strategy. The scheme uses a master key to encrypt a data key, which the data key can then be used to encrypt the data at rest. When we want to decrypt our data we must use the same data key that was used to encrypt the data at rest.

Have A Plan

Having a security plan will be the ultimate determinant of your security initiatives and survival of your application. Knowing what to do, who to notify, the type of attack, and how to respond is something outlined in a security plan. A security plan is usually something produce by a security team, which is outside the scope of this article. However, the AWS Security Whitepapers outlines some of the best security practices in the industry, many which they use in their own software projects.

Conclusion

As always, take care, and thank you for reading this article. If you found this article helpful please leave a rating or comment, or if you have question don't hesitate to ask.

How Do You Login?

Matt Eddy — Sun, 24 Jan 2021 17:31:35 +0000

Based on web login trends i.e captcha, MFA, strength meters, SSO, etc and the types of authentication, do you think the future of web authentication will remain in the browser?

Node.js - Processes & OS

Matt Eddy — Fri, 25 Dec 2020 02:54:26 +0000

Overview

This article is Part 7 of the series Working With NodeJS, a series of article to help simplify working with Node.js. In this article I will cover the Processes and OS Module.

Introduction

A Node.js process is the program that is currently running our code. We can control and gather information about a process using the global process object. The operating system is the host system on which a process runs and we can find information about the operating system using the core os module.

Processes

A process object is a global object that provides information about, and control over, the current Node.js process. The process object is an instance of the EventEmitter and therefore able to register events. Two of the commonly used events are beforeExit and exit.

process.once('beforeExit', (code) => {
  setTimeout(() => { console.log('Do some work') }, 200);
  console.log('Process beforeExit event with code: ', code);
});

process.on('exit', (code) => {
  console.log('Process exit event with code: ', code);
});

console.log('This message is displayed first.');

In the above code snippet, we register the beforeExit and exit events. The beforeExit event is emitted when Node.js empties the event loop and has no additional work to schedule. Notice the beforeExit event is registered using the once method. We use the once method because asynchronous operations are possible within this method. If we changed the event to use the on method the process would enter into an infinite loop because the setTimeout will be placed back into the event loop before exiting. Try it out. Now, within the exit event only synchronous operations are allowed. When the exit event is emitted any additional work scheduled for the event loop will be abandoned. Another commonly used method is uncaughtException. This method is used for exceptions that were not accounted for within the application and may cause the process to crash. However, you should avoid using this method as it is know to lead to an unexpected and dangerous state in your application. To handle unaccounted exceptions you should have an effective restart policy in place using tools like PM2 and forever.

STDIO

Three properties commonly used with the process object are stdin, stdout, and stderr. These properties provide the ability to interact with the terminal input an output also know as stdio. The stdin is a readable stream which means it behaves as an input. Both stdout and stderr are writable streams meaning they act as outputs. The one common method all streams implement is the pipe method. Lets see an example. I'll provide some input to the process.stdin via the terminal using Node.js crypto module. I'll then log that input to the console from another file called index.js using the pipe method.

terminal

node -p "crypto.randomBytes(10).toString('hex')" | node index.js

index.js

'use strict';
console.log('initialized');
process.stdin.pipe(process.stdout);

Running the code snippet above, outputs initialized and the random bytes generated by the crypto.randomBytes method.

As stated before, the process object contains information about the process, lets see a few examples

'use strict'
console.log('Current Directory', process.cwd());
console.log('Process Platform', process.platform);
console.log('Process ID', process.pid);
console.log('Process CPU usage', process.cpuUsage());
console.log('Process', process.memoryUsage());

In the code snippet above, The current working directory is whatever folder the process was executed in. The process.platform indicates the host operating system. The process.pid returns the id of the current process. The process.cpuUsage() returns the user and system CPU time usage of the current process. The process.memoryUsage() returns an object describing the memory usage of the Node.js process measured in bytes.

OS Module

The os module provides functions to retrieve information from operating system and the currently running program.

'use strict'
const os = require('os');

console.log('Hostname', os.hostname());
console.log('Home dir', os.homedir());
console.log('Temp dir', os.tmpdir());
console.log('type', os.type());

In the above code snippet the os.hostname will return the host name of the operating system as string. The os.homedir returns the string path of the current user's home directory. The os.tmpdir returns the operating system's default directory for temporary files as a string. The os.type returns the operating system name as returned by uname. To see a complete list of available methods visit the Official Node.js Documentation for the os module.

Thank you for taking time to read this article. If you found it helpful please subscribe to the series and take care.

Node.js - Buffers

Matt Eddy — Sun, 20 Dec 2020 03:10:00 +0000

Overview

This article is Part 6 of the series Working With NodeJS a series of articles to help simplify learning Node.js. In this article I will cover Buffers.

Introduction

Handling binary data in server-side programming is essential. Binary data is much faster and more efficient in terms of memory storage and processing then plain text. In Node.js, binary data is handled with a Buffer. Buffers act somewhat like arrays of integers, but aren't resizable and have a bunch of methods specifically for binary data.

The Buffers Instance

The Buffer constructor is a global object, so there's no need to require any core module in order to use it. There are a few ways to create a Buffer:

Instance 1

const buffer = Buffer.alloc(10);

The above would allocate a buffer of 10 bytes. By default the Buffer.alloc function produces a zero-filled buffer. Using Buffer.alloc is the safe way to allocate buffers.

Instance 2

const buffer = Buffer.allocUnsafe(10);

The allocUnsafe method poses potential security risk, but has it's advantages. Unallocated memory is only unlinked, it isn't wiped. This means that unless the buffer is overwritten (e.g. zero-filled) then an allocated buffer might contain fragments of previously deleted data. However, it is much faster then its counterpart alloc method. If we need to allocate memory for a buffer, it's strongly recommended to use Buffer.alloc instead of Buffer.allocUnsafe.

Instance 3

const buffer = Buffer.from([1, 2, 3]);

This initializes a buffer from an array.

Instance 4

const buffer = Buffer.from("I'm a string!", "utf-8");

This initializes a buffer from a string with encoding specified by the second argument in this case utf-8.

Working With Buffers

Working with buffers are pretty straight forward. When a buffer is created using the alloc method, it zero-fills the buffer with the number of bytes that was passed to the alloc method.

const buffer = Buffer.alloc(10);
console.log(buffer);
// <Buffer 00 00 00 00 00 00 00 00 00 00>

In the above code snippet, the buffer is zero-filled with a fixed length of ten bytes that can be used for the buffer. To write data to the buffer, we can use the write method.

const buffer = Buffer.alloc(10);
buffer.write("Some data");
console.log(buffer);
// <Buffer 53 6f 6d 65 20 64 61 74 61 00>

Now, the buffer is filled with Some data just in the form of bytes. Each byte in the buffer represents a character in the string Some data. Notice the 00 at the end of the byte sequence. If you count the characters in Some data, including the space, it equates to nine. The 00 represents unused memory that was allocated for the buffer. If I add an additional character to the string Some data the buffer will fill its allocated memory.

const buffer = Buffer.alloc(10);
buffer.write("Some data2");
console.log(buffer);
// <Buffer 53 6f 6d 65 20 64 61 74 61 32>

The number of bytes written to the buffer is a value returned by the write method. If we attempt to append more characters to the string then what was allocated, the data will simply not be included in the buffer.

'use strict';

const buffer = Buffer.alloc(10);
const byteCount = buffer.write("Some data2 Adding more data");
console.log(byteCount); // 10

If we wanted to read the buffer, we can call the toString method on the buffer object.

'use strict';

const buffer = Buffer.alloc(10);
const byteCount = buffer.write("Some data2");
console.log(buffer.toString()); // Some data2

Before ending this article, you should know there are few security concerns with the buffer object. However, the examples shown in this article avoid the security issues highlighted on the Node.js Official Docs.

If you would like to learn more about the Buffer class and some of its methods, Head over to the Node.js Official Documentation. If you found this article helpful I ask that you subscribe to the series as more content is on the way. Take care.

Node.js - File System

Matt Eddy — Fri, 18 Dec 2020 16:41:11 +0000

Overview

This article is Part 5 of Working With NodeJS, a series of articles to help simplify learning Node.js. In this topic I will cover working with the file system.

Introduction

To be able to work with the file system using Node.js you need to understand the fs and path modules. These modules provide the means to interact with a file system. The path module is important for path manipulation and normalization across platforms, and the fs module provides APIs for reading, writing, file system meta-data, and file system watching.

Paths

When navigating a file system it is helpful to have a reference point. The __dirname and __filename variables can provide such a point. These two variables are defined whenever Node.js executes a modules code. The __filename variable holds the absolute path to the currently executing file, and __dirname holds the absolute path to the directory where the currently executing file resides.

console.log(__dirname); // Path to current working directory
console.log(__filename); // Path to current executing file

With these reference points, we can build paths for files and directories programmatically. The most commonly used method to build a path is the join method. The join method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

const { join } = require('path');
console.log(join(__dirname, 'out.txt'));

The above code snippet will output the absolute path for out.txt to the console. You can add as many segments to the path as you need. Lets say you wanted to construct the path for out.txt so the path leads to a subdirectory called text.

const { join } = require('path');
console.log(join(__dirname, 'text', 'out.txt'));

In the above code snippet, the segment text is now apart of the absolute path for out.txt. Its important to know the join method does not create the directory text, but only a path which leads to it. There are other methods within the path module which can be used to construct a path, however, the join method is the most commonly used. In addition to path builders, there are path deconstructors. A path deconstructor will break down a path into its properties.

const { parse } = require('path');
console.log(parse('/home/user/dir/file.txt'));

output

{ root: '/',
  dir: '/home/user/dir',
  base: 'file.txt',
  ext: '.txt',
  name: 'file' }

In the above code snippet, the parse method is used to deconstruct the path into the segments which compose it. The important thing to understand about the path module is that its platform specific. This means if you are working on a different operating system all the methods within the module are still applicable.

Files - Reading and Writing

The fs module provides methods for interacting with file system. The module contains both synchronous and asynchronous methods. All the names of synchronous methods in the fs module end with Sync. This important to remember because synchronous methods will block the main process until the operation has completed.

'use strict';
const { readFileSync } = require('fs');
const contents = readFileSync(__filename);
console.log(contents);

output

<Buffer 27 75 73 65 20 73 74 72 69 63 74 27 0a 63 6f 6e 73
74 20 7b 20 72 65 61 64 46 69 6c 65 53 79 6e 63 20 7d 20 3d
20 72 65 71 75 69 72 65 28 27 66 73 27 ... 66 more bytes>

In the above code snippet, the readFileSync is used to read its own file contents. If no encoding is specified then a Buffer is returned. The encoding can be set by configuring an options object on readFileSync.

'use strict';
const { readFileSync } = require('fs');
const contents = readFileSync(__filename, {encoding: 'utf8'});
console.log(contents);

In the above code snippet, the encoding was set to utf8 which will allow a string to be returned instead of a Buffer. Some encoding options you can set for read methods are: ascii, base64, hex, utf8, and binary.

Writing synchronously can be accomplished using the writeFileSync method. At a minimum the method takes a filename and the data to be written to the file.

'use strict';
const { join } = require('path');
const { writeFileSync } = require('fs');
const out = join(__dirname, 'out.txt');
writeFileSync(out, 'Hello');

If the file already exists then the operation will replace the file, and if not the file will be created. Like the read method, writeFileSync can be configured with options as well. If instead of replacing the entire file you wish to add to it, you can configure writeFileSync with the flag option and set it to append.

'use strict';
const { join } = require('path');
const { writeFileSync } = require('fs');
const out = join(__dirname, 'out.txt');
writeFileSync(out, 'Hello', {
    flag: 'a'
});

For a full list of supported flags, see File System Flags section of the Node.js Documentation. It is important to remember that synchronous read and write operations should be surrounded with try/catch blocks for error handling.

'use strict';
const { readFileSync } = require('fs');
try {
    const contents = readFileSync('noFile.txt');
    console.log(contents);
} catch (err) {
    console.error(err.message);
    return;
}

output

ENOENT: no such file or directory, open 'noFile.txt'

Up to this point, the reading and writing methods have been synchronous operations. However, Node.js is single threaded and therefore works best with asynchronous operations. The fs module provides both callback and promise based methods to perform asynchronous operations.

'use strict';
const { readFile } = require('fs');
readFile(__filename, {encoding: 'utf8'}, (err, contents) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(contents);
});

In the above code snippet, the readFile method is used instead of the readFileSync method. Both methods perform the same operation, however, readFile is an asynchronous operation. Let see an asynchronous writing operation.

'use strict'
const { join } = require('path');
const { writeFile } = require('fs');
const out = join(__dirname, 'out.txt');
writeFile(out, 'Hello', { flag: 'a' }, (err) => {
    if (err) { console.error(err); }
    else console.log('Write Successful');
});

In the above code snippet, the writeFile method performs the same operation as the writeFileSync, but now its an asynchronous operation. The important thing to remember is that Node.js is single threaded so you want to avoid using operations that block further execution of code. All methods within the fs module that will block further execution of code end in Sync.

The fs module also supports promise based asynchronous operations. To use the promise based operations append the .promises on the require('fs') function.

const { readFile, writeFile } = require('fs').promises;

In the above code snippet, the both readFile and writeFile are asynchronous operations, but now they now return promises. This is useful because now async/await can be used. This gives the code a cleaner and traditional look. Lets see an example. I'll use the readFile method to read its own content and then use the writeFile method to write the content to the file out.txt.

'use strict';
const { join } = require('path');
const { readFile, writeFile } = require('fs').promises;
async function run () {
  const contents = await readFile(__filename, {encoding: 'utf8'});
  const out = join(__dirname, 'out.txt');
  await writeFile(out, contents);
}

run().catch((err) => {
    console.error(err);
});

out.txt

'use strict';
const { join } = require('path');
const { readFile, writeFile } = require('fs').promises;
async function run () {
  const contents = await readFile(__filename, {encoding: 'utf8'});
  const out = join(__dirname, 'out.txt');
  await writeFile(out, contents);
}

run().catch((err) => {
    console.error(err);
});

File Streams

Remember the fs module has four API types: Synchronous, Callback-based, Promise-based, and Stream-based. The fs module has createReadStream and createWriteStream methods which allow us to read and write files in chunks. Streams are ideal when handling very large files that can be processed incrementally.

'use strict';
const { pipeline } = require('stream');
const { join } = require('path');
const { createReadStream, createWriteStream } = require('fs');
pipeline(
    createReadStream(__filename),
    createWriteStream(join(__dirname, 'out.txt')),
    (err) => {
        if (err) {
            console.error(err);
        }
        console.log('Finished writing');
    }
);

In the above code snippet, its the same as before, we read the content of the file and write it to out.txt, but now we are using streams. Quick note, notice that we didn't pass any content to createWriteStream like we did for writeFile. This is because we're using a pipeline and the data is automatically passed from one phase of the pipe to the next.

Before moving on to directories lets take a look at some other useful file methods within the fs module.

change the permissions of a file

'use strict';
const { chmodSync, readFileSync } = require('fs');
chmodSync('out.txt', 0o000);
try {
    const content = readFileSync('out.txt');
    console.log(content);
} catch (error) {
    console.error(error.message);
}

The above code snippet uses the chmodSync to change the permissions of the file out.txt. When the readFileSync method is used an error is thrown EACCES: permission denied, open 'out.txt'. To learn more about chmod or chmodSync see Node.js Documentation

change the owner of a file

'use strict';
const { chown } = require('fs');
chown('out.txt', 6101, 120, (err) => {
    if (err) {
        console.error(err);
    }
    console.log('Owner changed');
});

copying a file

const { copyFile } = require('fs');

copyFile('out.txt', 'out.backup.txt', (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('File copied successful');
});

deleting a file

const { rm } = require('fs');
rm('out.backup.txt', (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('File deleted');
});

Directories

The fs module provides the means for working with directories. Similar to files, the fs module provides three main operations to read the content of a directory.

Synchronous
Callback
Promise

To read the content of a directory you can use the readdirSync, readdir which is callback based, or its asynchronous counterpart readdir which is promise-based obtained through require('fs').promises. Lets see some examples.

Synchronous

'use strict'
const { readdirSync } = require('fs');

try {
    const content = readdirSync(__dirname);
    console.log(content);
} catch (error) {
    console.error(error);    
}

Callback

'use strict'
const { readdir } = require('fs');

readdir(__dirname, (err, files) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log('callback', files);
});

Promise


'use strict';
const { readdir } = require('fs').promises;

async function run () {
    const files = await readdir(__dirname);
    console.log('promise', files);
}

run().catch((err) => {
    console.error(err);
})

In the above code snippets, all three snippets do the same thing, that is read the content of the directory of the currently executing file.

File Meta Data

Metadata about files can be obtained with the following methods:

fs.stat, fs.statSync, fs.promises.stat
fs.lstat, fs.lstatSync, fs.promises.lstat

The only difference between the stat and lstat methods is that stat follows symbolic links, and lstat will get meta data for symbolic links instead of following them. Lets see an example of how we could read the content of a directory and determine wether if the content returned was a file or directory.

const { readdirSync, statSync } = require('fs');

const files = readdirSync(__dirname);

for (name of files) {
    const stat = statSync(name);
    const typeLabel = stat.isDirectory() ? 'dir: ' : 'file: ';
    console.log(typeLabel, name);
}

Watching Files and Directories

The fs module has the capabilities for watching changes to a file or directory using the watch method. Whenever changes are made the watch method is triggered and its callback function is executed. Let see a simple example.

'use strict';
const { watch } = require('fs');

watch(__dirname, (event, filename) => {
    console.log(event, filename);
});

The callback function of the watch method takes an event and filename as parameters. Both parameters correspond to the file or directory in which the change happened. For the final example we'll use a combination of what we learned in conjunction with the watch method. We'll create a small program(index.js) that will monitor the content of our working directory.

index.js

'use strict';
const { join, resolve } = require('path');
const { watch, readdirSync, statSync } = require('fs');

const cwd = resolve(__dirname);
const files = new Set(readdirSync(__dirname));
watch(__dirname, (evt, filename) => {
    try {
        const { ctimeMs, mtimeMs } = statSync(join(cwd, filename));
        if (files.has(filename) === false) {
            evt = 'created';
            files.add(filename);
        } else {
            if (ctimeMs === mtimeMs) evt = 'content-updated';
            else evt = 'status-updated';
        }
    } catch (err) {
        if (err.code === 'ENOENT') {
            files.delete(filename);
        } else {
            console.error(err);
        }
    } finally {
        console.log(evt, filename);
    }
});

In the above code snippet, we use Set, (a unique list), initializing it with the array of files already present in the current workings directory. To get the current working directory the resolve(__dirname) method is used. Alternatively, one could have used resolve('.') to achieve the same effect. Next, we begin to watch our current working directory. If a change is emitted within our working directory, we'll extract the ctimeMs and mtimeMs properties of the file using the statSync method. If the file is not apart of our list then we set the evt variable to created and add the filename using the add method. However, if the file is apart of our list then we'll check to see if the ctimeMs and mtimeMs are equal. If both properties are equal evt is set to content-updated and if not evt is set to status-updated. Finally, we log the event and filename to the console with within the finally block.

There is a lot more to discover within the path and fs modules of Node.js and you should take some time to explore the full power of its APIs. As always thank you for taking time to read this article and if you found it helpful subscribe to the series because more is on the way. Take care.

Staying Healthy In The Field Of Technology

Matt Eddy — Fri, 18 Dec 2020 01:04:03 +0000

I remember my professor telling me about how much stress is brought forward while working on software projects. Moreover, if you add lack of activity, eating on the go, and smoking into the mix you are creating a recipe that could have irreversible consequences to you and possible family members. So I wanted to open up a discussion and ask "How do work within the field without compromising of your health?" "What are some of things you would recommend to alleviate stress within workplace?" "How do you stay healthy?"

Node.js - Streams

Matt Eddy — Thu, 10 Dec 2020 12:51:51 +0000

Overview

This article is Part 4 of Working With NodeJS, a series of articles to help simplify learning Node.js. In this article I will cover Streams.

Introduction

Working with large amounts of data usually means working with streams. Streams allow for large data processing without requiring excessive compute resources. With streams you read data piece by piece, processing its content without keeping it all in memory.

Stream Basics

A stream is a collection of data that may not be available all at once. Think about watching a Youtube or Netflix video. When the video starts, it starts with just enough data to get the video going and over time the remaining data is processed. This type of data handling provides two major advantages over other data handling methods:

Memory efficiency: you don't need to load large amounts of data in memory before you are able to process it.
Time efficiency: it takes way less time to start processing data as soon as you have it, rather than waiting until the whole data payload is available to start.

With efficient data handling, we can deliver high volume data processing applications in Node.js. The stream module provides the foundation upon which all streaming APIs are built in Node.js. Within the stream module are four types of streams: Readable, Writable, Duplex, and Transform. Each of these implement the pipe method, which takes the source of one stream and connects its output to another stream. The connecting of two or more streams can thought of as a pipeline where the data of a stream passes through each phase of the pipeline until reaching its final destination.

Readable Stream

A readable stream could be used to read a file, read data from an incoming HTTP request, or read user input from a command prompt to name a few examples. The Readable constructor inherits from the Stream constructor which inherits from the EventEmitter constructor, so readable streams are event emitters. To create a readable stream, the Readable constructor is called with the new keyword and passed an options object with a read method.

code snippet

'use strict'
const { Readable } = require('stream')
const createReadStream = () => {
  const data = ['some', 'data', 'to', 'read']
  return new Readable({
    encoding: 'utf8',
    read () {
      if (data.length === 0) this.push(null)
      else this.push(data.shift())
    }
  })
}
const readable = createReadStream()
readable.on('data', (data) => { console.log('got data', data) })
readable.on('end', () => { console.log('finished reading') })

output

got data some
got data data
got data to
got data read
finished reading

Writable Stream

A writable stream could be used to write a file, write data to an HTTP response, or write to the terminal. The Writable constructor inherits from the Stream constructor which inherits from the EventEmitter constructor, so writable streams are event emitters. To create a writable stream, call the Writable constructor with the new keyword. The options object of the Writable constructor can have a write function, which takes three arguments chunk, enc, next. To send data to a writable stream use the write method. The end method can be used write a final payload to the stream before ending it. Once the stream is ended the finish event is emitted.

'use strict'
const { Writable } = require('stream')
const createWriteStream = (data) => {
  return new Writable({
    decodeStrings: false,
    write (chunk, enc, next) {
      data.push(chunk);
      next();
    }
  })
}
const data = [];
const writable = createWriteStream(data);
writable.on('finish', () => {console.log('finished', data)});
writable.write('A');
writable.write('B');
writable.write('C');
writable.end('nothing more to write');

output

finished [ 'A', 'B', 'C', 'nothing more to write' ]

Duplex Stream

Duplex streams are streams that implement both the Readable and Writable interfaces. A good example of a Duplex stream would be a TCP socket. TCP socket can read data from a client connection as well as write back to the client. To demonstrate an example I'll create two files to simulate a TCP socket and client connection.

TCP server

'use strict'
const net = require('net')
net.createServer((socket) => {
  const interval = setInterval(() => {
    socket.write('beat')
  }, 1000)
  socket.on('data', (data) => {
    socket.write(data.toString().toUpperCase())
  })
  socket.on('end', () => { clearInterval(interval) })
}).listen(3000)

client connection

'use strict'
const net = require('net')
const socket = net.connect(3000)

socket.on('data', (data) => {
  console.log('got data:', data.toString())
})

setTimeout(() => {
  socket.write('all done')
  setTimeout(() => {
    socket.end()
  }, 250)
}, 3250)

Running both scripts will produce the following output:

output

got data: beat
got data: beat
got data: beat
got data: ALL DONE

Transform Stream

Transform streams are duplex streams with an additional constraint applied to enforce the relationship between the read and write interfaces. The constraint between the read and write interfaces is enforced through the transform function. The transform function has the same signature as the write function from the Writable stream object in that it takes chunk,enc, and next as parameters. The difference is the next function can be passed a second argument which should be the result of applying some kind of transform operation to the incoming chunk. Lets see a quick example.

code snippet

'use strict'
const { Transform } = require('stream')
const createTransformStream = () => {
  return new Transform({
    decodeStrings: false,
    encoding: 'utf8',
    transform (chunk, enc, next) {
     next(null, chunk.toUpperCase());
    }
  })
}
const transform = createTransformStream()
transform.on('data', (data) => {
  console.log('got data:', data);
})
transform.write('a\n');
transform.write('b\n');
transform.write('c\n');
transform.end('nothing more to write');

output

got data: A

got data: B

got data: C

got data: NOTHING MORE TO WRITE

Piping Streams

As stated before, the pipe method takes the source of one stream and pipes it into the destination of another stream. Lets see a quick example. I'll refactor the Readable and Writable examples from the previous sections so they work together using the pipe method.

'use strict'
const { Readable, Writable } = require('stream')
const createReadStream = () => {
  const readData = ['some', 'data', 'to', 'read'];
  return new Readable({
    encoding: 'utf8',
    read () {
      if (readData.length === 0) this.push(null)
      else this.push(readData.shift())
    }
  })
}

const createWriteStream = (data) => {
  return new Writable({
    decodeStrings: false,
    write (chunk, enc, next) {
      data.push(chunk);
      next();
    }
  })
}
const data = [];
const readable = createReadStream();
const writable = createWriteStream(data);
readable.pipe(writable);
writable.on('finish', () => {console.log('finished', data)});

output

finished [ 'some', 'data', 'to', 'read' ]

In the code snippet above the readable.on method has been removed from the code. This is important because streams are in a paused state by default. The only way to get data flowing is to use the resume method, data event or the pipe method. You can pipe as many streams as you need in order to satisfy your use case, however, it is best practice to use a pipeline if piping more then two streams.

A pipeline can be used to pipe a series of streams together. Let see an example. I'll refactor the code from the Readable, Writable, and Transform sections so they work using a pipeline.

pipeline snippet

'use strict'
const { Readable, Writable, Transform, pipeline } = require('stream')
const createReadStream = () => {
  const readData = ['some', 'data', 'to', 'read'];
  return new Readable({
    encoding: 'utf8',
    read() {
      if (readData.length === 0) this.push(null);
      else this.push(readData.shift());
    }
  })
}

const createTransform = () => {
  return new Transform({
    transform(chunk, enc, next) {
      const changedData = chunk.toString().toUpperCase();
      next(null, changedData);
    }
  })
}

const createWriteStream = () => {
  const data = [];
  const writable = new Writable({
    decodeStrings: false,
    write(chunk, enc, next) {
      data.push(chunk.toString());
      next();
    }
  });
  writable.data = data;
  return writable;
}

const readable = createReadStream();
const writable = createWriteStream();
const transform = createTransform();
pipeline(readable, transform, writable, (err) => {
  if (err) console.error('Pipeline failed.', err);
  else console.log('Pipeline succeeded.', writable.data);
});

output

Pipeline succeeded. [ 'SOME', 'DATA', 'TO', 'READ' ]

In the above code snippet, I imported the pipeline function from the stream module. Next, I used three variables, which reference streaming functions, to interact with the data flowing through the pipeline. Finally, the pipeline takes a callback with an err parameter that will execute once the pipeline completes. If an error occurs the pipeline will fail, otherwise the console will log the data with a success message.

There are much more to streams then the examples in this article. I always suggest using the NodeJS Docs as your primary source when developing a solution for your use case. There is also a lot of good articles written by other developers here on DEV that can help you when developing with streams in Node.js. Another good author is Samer Buna. Samer has a lot good content on advanced topics about Node.js. As always if you have any questions post it in the discussions and I will reply. Take care and happy coding.

Node.js - Modern JavaScript

Matt Eddy — Fri, 04 Dec 2020 17:23:44 +0000

This article is Part 3 of Working With NodeJS, a series of articles to help simplify learning Node.js. In this topic, I will cover some tips on modernizing your JavaScript code.

Introduction

So you were tasked to write some code in JavaScript, and you've completed the task. Now, you want to submit your code for review so it can be merge to the project repository. Here are some things you should consider to give your code a cleaner look.

Variables

Unpacking Arrays

const x = [1, 2, 3, 4, 5];

let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Use Case - x[0], x[1]

Object Destructuring

const user = { id: 1, firstName: 'John', lastName: 'Doe' };

const { firstName, lastName } = user;
console.log(firstName); // John
console.log(lastName); // Doe

Use Case - user.firstName and user.lastName

Conditional Initializing

const fee = isMember ? '$2.00' : '$10.00';

Use Case - if/else

Copying Object Properties

const obj1 = {
    name: 'John Doe',
    email: 'doe@email.com',
};

const obj2 = {
    id: 1,
    ...obj1
};

Use Case - Object.assign({}, obj1);

Arrays

forEach to loop

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

items.forEach((item) => { // do something... });

Use Case - I want to loop through each index in the array and do something to it.

map a new array

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const halfOffItems = items.map((item) => { 
    return {
        ...item,
        price: item.price / 2
    }
 });

Use Case - I want a new array containing new copies or changes of each array element.

filter an array

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const expensiveItems = items.filter(item => item.price > 500);

Use Case - I want a new array containing just the items I need.

reduce an array

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const itemTotal = items.map(item => item.price)
    .reduce((prev, next) => prev + next);
console.log(expensiveItems); // 2200

Use Case - I want to reduce my array to a single value.

find an element in array


const items = [
    { id: 1, name: "TV", price: 300, promo: false },
    { id: 2, name: "Stereo", price: 100 , promo: false },
    { id: 3, name: "Computer", price: 1800, promo: true },
];

const promoItem = items.find(item => item.promo);
console.log(promoItem); // returns third object in items

Use Case - I want to find a particular element in my array.

some an array


const items = [
    { id: 1, name: "TV", price: 300, promo: false },
    { id: 2, name: "Stereo", price: 100 , promo: false },
    { id: 3, name: "Computer", price: 1800, promo: true },
];

const hasPromo = items.some(item => item.promo);
console.log(hasPromo); // true

Use Case - I want to check if any value(s) in my array meet a certain condition.

Functions

Closures - I want to call a function within a function.

function init(type) {
    let id = 0;
    return (name) => {
        id += 1;
        return { id: id, type: type, name: name };
    }
}
const createUser = init('user');
const createBook = init('book');
const dave = createUser('Dave');
const book = createBook('A book');
console.log(dave); //prints {id: 1, type: 'user', name: 'Dave'}
console.log(book) //prints {id: 1, type: 'book', name:'A book'}

The createUser and createBook have access to separate instances of the init functions closure scope.

Closure 2 - Another approach

 function doFunc() {
     let id = 0;
    function doSomething() {
        console.log('Do something...');
    }
    function doWork(name, email) {
         id += 1;
        console.log('Do work on user', name);
    }
    return {
         doSomething: doSomething,
         doWork: doWork,
    };
}
const fn = doFunc();
fn.doSomething();
fn.doWork('Timmy', 'tim@email.com');
// Do something...
// Do work on user Timmy

Destructure Parameters

function myFunc({ id, firstName, lastName }) {
    console.log(id); // 1
    console.log(firstName); // John
    console.log(lastName); // Doe
}
const user = { id: 1, firstName: 'John', lastName: 'Doe' };
myFunc(user);

Classes

Classes and inheritance are available in JavaScript

class Person {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log(`Hello ${this.name}!`);
    }
  }

class Student extends Person {
    constructor(name, level) {
      super(name);
      this.level = level;
    }
    greet() {
      console.log(`Hello ${this.name} from ${this.level}`);
    }
  }

  const max = new Person("Max");
  const tina = new Student("Tina", "1st Grade");
  const mary = new Student("Mary", "2nd Grade");

  max.greet();
  tina.greet();
  mary.greet();

The purpose of this article was to demonstrate some modern JavaScript code. If you found this article helpful please leave a rating and subscribe to the series.