DEV Community: Code Craft-Fun with Javascript

New Features in ES2023

Code Craft-Fun with Javascript — Fri, 23 Jun 2023 06:34:45 +0000

New Methods in `Array.prototype` - Copy Array

The reverse(), sort() and splice() methods on Array.prototype mutate the array in place. To avoid the mutation es2023 introduced the equivalent methods that returns the copy of the array on which these operations are performed.

toReversed() method

const original = [1, 2, 3, 4];
const reversed = original.toReversed();

console.log(original);
// [ 1, 2, 3, 4 ]

console.log(reversed);
// [ 4, 3, 2, 1 ]

toSorted(compareFn) method

const original = [1, 3, 2, 4];
const sorted = original.toSorted();

console.log(original);
// [ 1, 3, 2, 4 ]

console.log(sorted);
// [ 1, 2, 3, 4 ]

toSpliced(start, deleteCount, ...items) method

const original = [1, 4];
const spliced = original.toSpliced(1, 2);

console.log(original);
// [ 1, 4 ]

console.log(spliced);
// [ 1, 2, 3, 4 ]

with(index, value) method

const original = [1, 2, 3, 4];
const withThree = original.with(2, 5);

console.log(original);
// [ 1, 2, 3, 4 ]

console.log(withThree);
// [ 1, 2, 5, 4 ]

Use of Symbols as `WeakMap` Keys

In JavaScript, Objects and Symbols are guaranteed to be unique and cannot be re-created, which makes them both great candidates for the WeakMap keys. Previous versions or specifications allowed only Objects to be used that way, but in es2023 we can use Symbols as the WeakMap key.

const weak = new WeakMap();
const key = Symbol("ref");
weak.set(key, "ECMAScript 2023");

console.log(weak.get(key));
// ECMAScript 2023

Array find from last

es2023 adds findLast() and findLastIndex() methods on Array and TypedArray prototype. They are similar to find() and findIndex() but iterates over items in reverse order.

const isEven = (number) => number % 2 === 0;
const numbers = [1, 2, 3, 4];

// from first to the last lookup
console.log(numbers.find(isEven));
// 2
console.log(numbers.findIndex(isEven));
// 1

// from last to the first lookup
console.log(numbers.findLast(isEven));
// 4
console.log(numbers.findLastIndex(isEven));
// 3

Hashbang Grammar

Hashbang, also known as a shebang is a sequence of characters at the beginning of an executable script that defines the interpreter for the program to be run on.

#!/usr/bin/env node

console.log('hello');

With this change we would not require to invoke a file explicitly using node interpreter as node <file-path>

These new features will going to be very handy in lots of use cases. Hope you find it useful and are eagerly waiting to use these features in your upcoming projects.😀

Javascript 【tricky】💡interview output questions (Part 2)

Code Craft-Fun with Javascript — Fri, 23 Jun 2023 04:53:07 +0000

What is the output for each code mentioned below and Why ?

Add your solutions with explanation in the comment section.

Question 1

var y = 1;
  if (function f(){}) {
    y += typeof f;
  }
  console.log(y);

Question 2

var output = (function(x){
    delete x;
    return x;
  })(0);
  console.log(output);

Question 3

var Employee = {
  company: ’myCompany’
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

Question 4

(function() {
   var a = b = 5;
})();
console.log(b);

Question 5

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
return 2; }
}
test();

Promise.all() vs Promise.race()

Code Craft-Fun with Javascript — Tue, 20 Jun 2023 10:17:29 +0000

Asynchronous programming is a fundamental aspect of JavaScript, and promises have emerged as a powerful tool for managing asynchronous operations. Among the various promise functions, Promise.all() and Promise.race() stand out for their ability to handle parallel and competitive asynchronous tasks, respectively. In this article, we will explore the differences between Promise.all() and Promise.race(), providing code examples and code examples to demonstrate their capabilities.

Understanding `Promise.all()`:

Promise.all() allows for the parallel execution of multiple asynchronous operations. It offers several benefits, including:

Synchronous Parallel Execution: Promise.all() enables concurrent execution of promises, enhancing performance by avoiding sequential processing.
Handling Multiple Promises: By accepting an array of promises, Promise.all() waits for all promises to fulfil or any to reject.
Resolving with an Array of Results: The returned promise resolves with an array containing the results of the fulfilled promises, maintaining order according to the input promises.

To illustrate, consider the following code example:

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(([result1, result2]) => {
    // Process the results
    console.log(result1, result2);
  })
  .catch((error) => {
    // Handle errors
    console.error(error);
  });

Exploring `Promise.race()`:

Promise.race() focuses on competitive asynchronous operations, resolving with the fastest settling promise. Key aspects include:

Competitive Asynchronous Operations: Promise.race() determines the outcome based on the first promise to settle, regardless of fulfilment or rejection.
Resolving with the Fastest Promise: The returned promise resolves or rejects with the value or rejection reason of the fastest settling promise.

To visualise this, consider the following example:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, 'Result 1');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'Result 2');
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // Output: 'Result 2'
  })
  .catch((error) => {
    console.error(error);
  });

Choosing Between `Promise.all()` and `Promise.race()`:

To decide between Promise.all() and Promise.race(), consider the following factors:

Nature of Operations: Use Promise.all() for parallel execution of multiple promises, while Promise.race() is ideal for competitive scenarios where the fastest result matters.
Handling Results: Promise.all() provides an array of results, allowing further processing or aggregation, whereas Promise.race() returns the result of the fastest promise, which may be sufficient in some cases.

By carefully assessing your use case and requirements, you can choose the appropriate function to achieve the desired outcome.

Encrypt your Local Storage data!

Code Craft-Fun with Javascript — Sat, 17 Jun 2023 15:53:52 +0000

Before going further I would suggest you first check out my article on the prototypes. Yes, we will be using the prototype concept to add our custom encryption functions to the local storage API. Let's see how we can achieve this.

The localStorage function is available globally on the browser's window object. And if you have ever noticed, this function has the type Storage.

If you check the function definition you will notice that this Storage is an interface.

Now, we got to know that the localStorage has a type of Storage interface, we can manipulate the prototype object of the Storage interface and add our encryption/decryption custom functions to it.

Adding custom functions in the Storage Interface

We will use the crypto-js library for encrypting/decrypting our data. We will be using a node package manager (npm) to download this library so make sure your project is initialised by npm first.

Now install the library using the command npm install crypto-js. It will be added to the node_modules folder. We will be adding two functions named encrypt and decrypt which will handle the encryption and decryption of data.

Here we have taken a secret key which is passed to the functions of the crypto-js library to encrypt and decrypt the data. This secret key can be anything but it should be stored in a safe place for security.

Now, we will be adding our two custom functions to the prototype object of the Storage interface.

setEncryptedItem and getDecryptedItem is added to the Storage interface and will be available to our native function localStorage once our code will be executed.

Note that, before using our added custom functions, we have to first store it in the prototype of the Storage interface and therefore as per our code we are required to call manipulateLocalStorage function first.

Our whole code will look like the following -



import * as CryptoJS from 'crypto-js';

function storageEncryption() {
    /**
  * secret key should be stored in a safe place. This is only for a demo purpose.
  */
    let _key = "secret_key"

    function encrypt(txt) {
        return CryptoJS.AES.encrypt(txt, _key).toString();
    }

    function decrypt(txtToDecrypt) {
        return CryptoJS.AES.decrypt(txtToDecrypt, _key).toString(CryptoJS.enc.Utf8);
    }

    function manipulateLocalStorage() {
        Storage.prototype.setEncryptedItem = (key, value) => {
            localStorage.setItem(key, encrypt(value));
        };

        Storage.prototype.getDecryptedItem = (key) => {
            let data = localStorage.getItem(key) || "";
            return decrypt(data) || null;
        }
    }
 /**
  * First call this function to add our custom functions to the Storage interface
  * 
  */
    manipulateLocalStorage();
    /**
     * you can use the setEncryptedItem and getDecryptedItem functions
     * to encrypt and decrypt the data
     * */ 

    localStorage.setEncryptedItem("token", "12345");
    const token = localStorage.getDecryptedItem("token");
    console.log(token);
}
storageEncryption();

Let me show you how our data got stored in the browser's local storage.

You can see our token 12345 is unreadable. Now let's check the decrypted value that we have printed in our console.

Yes! it's our decrypted token. 😃

Javascript 【tricky】💡interview output questions (Part 1)

Code Craft-Fun with Javascript — Sat, 17 Jun 2023 11:48:11 +0000

What is the output for each code mentioned below and Why ?

Add your solutions with explanation in the comment section.

Question 1

(function(){
  var variable1 = variable2 = 3;
})();
console.log("variable1 defined? " + (typeof variable1 !== 'undefined'));
console.log("variable2 defined? " + (typeof variable2 !== 'undefined'));

Question 2

var myObject = {
    value: 1,
    printVal: function() {
        var self = this;
        console.log("printVal:  this.value = " + this.value);
        console.log("printVal:  self.value = " + self.value);
        (function() {
            console.log("inner printVal:  this.value = " + this.value);
            console.log("inner printVal:  self.value = " + self.value);
        }());
        } };
myObject.printVal();

Question 3

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);

Question 4

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000 * i);
}

Question 5

var arr1 = "john".split("");
var arr2 = arr1.reverse();

arr2.splice(arr2.length - 1, 1);

console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

Javascript Objects: Best Practices

Code Craft-Fun with Javascript — Sat, 17 Jun 2023 08:24:11 +0000

While working on Javascript we have to deal with objects as its a building block of the Javascript. Knowing how to use the objects effectively makes your code more readable, efficient, and bug free. In this blog we are going to see a few good practices while working with objects in Javascript.So lets get started !

Tip 1: Use the literal syntax for object creation

This seems to be a small change while initialising the objects variable , but after knowing this information you will better understand why this is important.

// not recommended
const item = new Object();

// good practice
const item = {};

The literal syntax provides a concise and intuitive way to define objects. It is easier to read and understand compared to the Object constructor, which requires invoking a function with the new keyword.
Creating objects with the literal syntax is faster compared to using the Object constructor. The literal syntax directly creates the object without invoking any additional functions or constructors.
Object constructor is actually a property of the global object, so it can be overwritten.This can be dangerous!
consider the below code-

Object = 10;
var obj = new Object();

This will throw an error TypeError: Object is not a constructor as the Object property is assigned to a number 10;

Tip 2: Use computed property names

function getKey(k) {
  return `${k}_key`; //generates key name dynamically
}

// not recommended
const obj = {
  id: 1,
  name: 'Foo',
};
obj[getKey('enabled')] = true;

// good practice!
const obj = {
  id: 1,
  name: 'Foo',
  [getKey('enabled')]: true, // computed property syntax
};

This will allow to define all the properties at once while creating the object.

Tip 3: Use object method and property shorthand

use object method shorthand

// looks ugly
const obj = {
  value: 1,

  addValue: function (value) {
    return this.value + value;
  },
};

// looks clean!
const obj = {
  value: 1,

  addValue(value) {
    return this.value + value;
  },
};

use property value shorthand

const property = 'property';

// looks ugly
const obj = {
  property: property,
};

// good practice
const obj = {
  property,
};

Group all shorthand properties at the beginning of your object declaration.In this way it's easier to see which properties are using the shorthand.

Tip 4: Provide quotes for properties with invalid identifiers

There is no need to quote all the properties defined inside the object. This hampers the readability and object looks bulky. If you are using any invalid identifiers such as identifiers with kebab cases, then you can quote that particular property.

// bulky
const obj = {
  'prop1': 1,
  'prop2': 2,
  'prop-3': 3,
};

// good practice!
const obj = {
  prop1: 1,
  prop2: 2,
  'prop-3': 3,
};

Tip 5: shallow / deep copy object to avoid object mutability

There are few tricks and methods which allows the object to be copied to another object variable to avoid mutating the original object. Based on the requirement we can create a shallow copy or deep copy of the original object or else completely store the reference of the original object into another object variable.

avoid using Object.assign() in this way:

const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign(originalObj, { c: 3 }); // this mutates `originalObj`
delete copiedObj.a; // this will be deleted from the originalObj as well!!!!

shallow copy using Object.assign:

const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign({}, originalObj, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj

shallow copy using spread object syntax:

const originalObj = { a: 1, b: 2 };
const copiedObj = {...originalObj, c: 3} // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj

deep copy using JSON.parse and JSON.stringify

const originalObj = { a: 1, b: {
  b1: 1,
  b2: 2
} };
const copiedObj = JSON.parse(JSON.stringify(originalObj)) // copy => { a: 1, b: {b1: 1, b2: 2} }
delete copiedObj.b.b1
console.log(originalObj) // {a: 1, b: {b1: 1, b2: 2}}
console.log(copiedObj) // {a: 1, b: { b2: 2}}

🐍 Snake Game using Javascript!

Code Craft-Fun with Javascript — Fri, 16 Jun 2023 06:12:16 +0000

Excited to build your own Snake Game? 😃
Checkout the complete code here

This project is completely built on the core Javascript.This will help you understand and practice the Javascript code.

I would recommend the following points before going through the code -

Create your own project from scratch.
Copy the code line by line and try to execute it to better understand each part of the code.
Once you understand the code, try to add / improve existing functionality. for eg: you can improve the UI/UX of the code, you can provide game levels from easy to hard based on certain metrics etc.

Brag about this project in your resume, portfolios or on social media accounts. 😎
Hope you will enjoy building your own Snake Game. Follow me for more such content.

Asynchronous JavaScript: Understanding Promises

Code Craft-Fun with Javascript — Thu, 15 Jun 2023 09:22:21 +0000

Asynchronous JavaScript is a way of executing code that allows multiple tasks to run simultaneously, without blocking the main thread. This is especially useful when dealing with long-running operations, such as network requests or file I/O.
One of the most popular ways of implementing asynchronous code in JavaScript is through the use of promises. In this post, we'll explore what promises are, how they work, and some common problems that you may encounter when using them.

What are Promises?

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It is a placeholder for a value that may not be available yet, but will be available at some point in the future.
Promises have three states:

Pending: The initial state. The promise is neither fulfilled nor rejected.
Fulfilled: The operation completed successfully, and the promise now has a resulting value.
Rejected: The operation failed, and the promise now has an error value.

Creating Promises

Promises can be created using the Promise constructor. The constructor takes a single argument, which is a function that defines the asynchronous operation.

const promise = new Promise((resolve, reject) => {
// Perform some asynchronous operation
// If it succeeds, call resolve with the resulting value
// If it fails, call reject with an error object
});

The resolve and reject functions are provided by the Promise constructor, and are used to transition the promise from the pending state to either the fulfilled or rejected state.
Here's an example of a promise that resolves to a string after a 1-second delay:

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hello, world!');
    }, 1000);
});

Consuming Promises

Once a promise has been created, you can consume its result using the .then() method. This method takes two arguments: a callback function to handle the fulfilment of the promise, and an optional callback function to handle the rejection of the promise.

promise.then(
    (result) => {
        console.log(result); // "Hello, world!"
    },
    (error) => {
        console.error(error);
    }
);

If the promise is fulfilled, the first callback function will be called with the resulting value as its argument. If the promise is rejected, the second callback function will be called with the error object as its argument.

Chaining Promises

One of the key benefits of promises is that they can be chained together, allowing for more complex asynchronous operations to be constructed.
The .then() method returns a new promise, which can be used to chain additional .then() methods. Each .then() method can perform its own asynchronous operation, and its result will be passed to the next .then() method in the chain.

const promise = new Promise < any > ((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 1000);
});
promise
    .then((result) => {
        // Multiply the result by 2
        return result * 2;
    })
    .then((result) => {
        // Add 5 to the result
        return result + 5;
    })
    .then((result) => {
        console.log(result); // 25
    });

In this example, the promise resolves to the value 10. The first .then() method multiplies this value by 2, resulting in 20. The second .then() method adds 5 to this value, resulting in 25.

Promises allow us to chain operations, enabling cleaner and more readable code. The catch() method can also be chained with the then() method as follows-

myPromise
  .then(result => {
    // Handle the resolved value
  })
  .catch(error => {
    // Handle the rejected error
  });

Handling Multiple Promises

When dealing with multiple Promises, we can use Promise.all() or Promise.race() to coordinate their execution:

Promise.all(): Waits for all Promises to fulfil and returns an array of results.
Promise.race(): Resolves or rejects as soon as any of the Promises resolves or rejects.

const promises = [promise1, promise2, promise3];
Promise.all(promises)
  .then(results => {
    // Handle the array of results
  })
  .catch(error => {
    // Handle any errors
  });

Read more about Promise.all() and Promise.race() here.

Problems with Promises

While promises are a powerful tool for asynchronous programming, they can also be a source of frustration if not used correctly.

1. Callback Hell
One problem with using promises is that it can lead to a phenomenon known as "callback hell". This occurs when you have multiple layers of nested callbacks, making the code difficult to read and maintain.

 getData().then(data => {
    processData(data).then(result => {
        displayResult(result).then(() => {
            // perform final task
        }).catch(error => {
            // Handle the rejected error
        });
    }).catch(error => {
        // Handle the rejected error
    });
}).catch(error => {
    // Handle the rejected error
});;

This situation can be handled using the await keyword. This makes the code more readable and provides the synchronous structure of the code.

try {
    const data = await getData();
    const result = await processData(data);
    await displayResult(result);
}catch(error) {
    // log error
}

2. Unhandled Rejections
Another problem with promises is that they can result in unhandled rejections if an error occurs and there is no .catch() method present to handle it.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error('Something went wrong!'));
    }, 1000);
});
promise.then(
    (result) => {
        console.log(result);
    }
);

In this example, the promise is rejected with an error after a 1-second delay. Because there is no .catch() method present to handle the error, it will result in an unhandled rejection.

3. Too Many Promises
Finally, another problem with promises is that they can result in "promise overload" if too many promises are created at once. This can lead to performance issues and memory leaks.
To avoid this problem, it's important to use techniques like throttling and debouncing to control the rate at which promises are created.

Conclusion

Promises are a powerful tool for asynchronous programming in JavaScript, and understanding how they work is essential for any web developer. By using promises correctly, you can write more efficient and maintainable code, while avoiding common pitfalls like callback hell and unhandled rejections.

Angular Code Structuring and Best Practices!

Code Craft-Fun with Javascript — Wed, 14 Jun 2023 16:11:23 +0000

A Guide to Maintainable and Scalable Angular Projects

Building robust and scalable applications with Angular requires thoughtful code structuring and adherence to best practices. In this blog post, we will explore essential guidelines and techniques to help you structure your Angular codebase effectively. By following these best practices, you can ensure maintainability, readability, and scalability in your Angular projects.

Module Organization:

If you choose to use the module based Angular application then organise the modules properly. It will improve the code clarity and maintainability. Consider the following tips:

Group related components, directives, and services within feature modules.
Create a shared module to house commonly used components, directives, and pipes.
Leverage lazy loading to load modules on demand and improve application performance.

If you are using the standalone component, then you should focus more on the organised architecture. The module based Angular apps forces you to be more stricter with the module pattern that it supports, but while using the standalone components you have a flexible approach towards maintaining the structure of your application. But this comes with the cost of designing the structure on your own. A well organised apps with code reusability leads to a good scalable architecture!

Component Structure:

Components play a crucial role in Angular applications. Structuring components in a consistent manner enhances code readability and reusability. Here are some recommendations:

Separate concerns by keeping the component files focused on a single responsibility.
Use a folder structure that includes separate files for the component class, template, styles.Keeping them in a single file can clutter the code as you build the functionality.
Keep your components small and focused on a specific task. This approach makes it easier to test and maintain your components, as well as reuse them in other parts of your application. If a component becomes too large, consider breaking it down into smaller components that are easier to manage.
Leverage Angular's component lifecycle hooks to manage component initialization and destruction.

Services and Dependency Injection:

Services provide reusable logic and facilitate communication between components. Follow these best practices when working with services :

Use the Angular Dependency Injection system to provide and inject services.
Keep services focused on a specific functionality or domain.
Avoid excessive logic in services and aim for single responsibility.
Utilize service hierarchies and module-level providers for sharing services across components. Note that the singleton nature of a service is based on the scope from where the service is provided.

File and Folder Naming Conventions:

Consistent file and folder naming conventions enhance readability and maintainability. Consider the following guidelines:

Use descriptive names for files, folders, and variables to improve code comprehension.
Use consistent casing (e.g., camelCase, kebab-case) for files and folders.
Prefix components, services, and directives with meaningful prefixes to avoid naming collisions.

File and Folder Structure:

Maintaining a proper file and folder structure is crucial to the scalability and maintainability of your Angular project. Following a consistent structure will make it easier to navigate your codebase and find what you need quickly.
A recommended module based application structure should look like the following -

app/
-- core/
  -- constants/
  -- guards/
  -- interceptors/
  -- models/
  -- services/
-- modules/
  -- feature1/
    -- components/
    -- services/
    -- feature1.module.ts
  -- feature2/
    -- components/
    -- services/
    -- feature2.module.ts
-- shared/
  -- components/
  -- directives/
  -- pipes/
  -- services/
-- app.component.ts
-- app.module.ts
-- app-routing.module.ts
-- app.component.html
-- app.component.scss
-- main.ts

RxJS and Observables:

RxJS is a powerful library for handling asynchronous operations in Angular. Angular has the inbuilt support to this library. Use these tips to effectively work with RxJS and Observables:

Leverage operators like map, filter, and switchMap to transform and manipulate data streams.
Unsubscribe from Observables when they are no longer needed to prevent memory leaks.
Use the async pipe in templates to handle subscriptions automatically and simplify code.
Avoid using the nested observables, for eg: HTTP call. Use the powerful operators such as SwitchMap, MergeMap, ConcatMap, combineLatest, based on your functionality needs.

Conclusion:

By following these code structuring and best practices in your Angular projects, you can ensure maintainability, readability, and scalability. Consistent module organization, thoughtful component structuring, proper usage of services and dependency injection, and adherence to file and folder naming conventions contribute to a clean and maintainable codebase. Additionally, leveraging RxJS, writing comprehensive tests, and emphasizing quality assurance will result in a robust Angular application. Following this will maximize your productivity to deliver high-quality Angular projects.

Note that these guidelines are not rigid rules but rather recommendations based on industry best practices. Adapt them to fit your project's specific requirements and ensure that your codebase remains organised, maintainable, and scalable.

Step-By-Step Guide for integrating NgRx State Management with Angular 16!

Code Craft-Fun with Javascript — Thu, 08 Jun 2023 10:15:36 +0000

NGRX is a popular library for state management in Angular applications. It helps to manage the state of an application in a predictable and scalable way. In this guide, we will go through the step-by-step process of implementing NGRX by building a small Todo application.

You can refer to the full code here

Step 1: Install NGRX

To install NGRX, run the following command in your terminal:

npm install @ngrx/store @ngrx/effects --save

The @ngrx/store package provides the core state management functionality for NGRX. The @ngrx/effects package provides a way to handle side-effects in your application.

Our application folder structure will look like this-

src/
   | store/
     | actions.ts
     | reducers.ts
     | selectors.ts
     | store.ts
     | todo.model.ts 
   | main.ts
   | todo.component.ts
   | todo.component.html

Step 2: Define the Model Todo

The first step is to define the model of your data in store/todo.model.ts -

export interface Todo {
  id: number | string;
  description: string;
  completed: boolean;
}

In this example, we define the Todo interface with some properties.

Step 3: Define the Service and Actions

Service will contain our todo api service with the getAll function. This will act as a fake backend service. We will be going to use the Observable and imitate the latency to show the loader.
Define the todo service in store/service.ts

@Injectable()
export class ToDoService {
 // fake backend
  getAll(): Observable<Todo[]> {
    return of(
      [{
        id: 1,
        description: 'description 1',
        completed: false
      },
      {
        id: 2,
        description: 'description 2',
        completed: false
      }]
    ).pipe(delay(2000))
  }
}

Actions are messages that describe a state change in your application. They are plain JavaScript objects that have a type property and an optional payload. Define the actions in store/actions.ts

export const loadTodos = createAction('[Todo] Load Todos');
export const loadTodosSuccess = createAction('[Todo] Load Todos Success', props<{ todos: Todo[] }>());
export const loadTodosFailure = createAction('[Todo] Load Todos Failure', props<{ error: string }>());
export const addTodo = createAction('[Todo] Add Todo', props<{ todo: Todo }>());
export const updateTodo = createAction('[Todo] Update Todo', props<{ todo: Todo }>());
export const deleteTodo = createAction('[Todo] Delete Todo', props<{ id: string }>());

In this example, we define several actions for managing the Todo state. The loadTodos action is used to load the list of todos from the server. The loadTodosSuccess action is dispatched when the todos are loaded successfully. The loadTodosFailure action is dispatched when there is an error loading the todos. The addTodo, updateTodo, and deleteTodo actions are used to add, update, and delete todos respectively.

Step 4: Define the Reducers

Reducers are pure functions that take the current state and an action and return a new state. They are responsible for handling the state changes in your application. Define the actions in store/reducers.ts

export interface TodoState {
todos: Todo[];
loading: boolean;
error: string;
}
export const initialState: TodoState = {
todos: [],
loading: false,
error: ''
};
export const todoReducer = createReducer(
initialState,

on(TodoActions.loadTodos, state => ({ ...state, loading: true })),

on(TodoActions.loadTodosSuccess, (state, { todos }) =>({ ...state, todos, loading: false })),

on(TodoActions.loadTodosFailure, (state, { error }) => ({ ...state, error, loading: false })),

on(TodoActions.addTodo, (state, { todo }) => ({ ...state, todos: [...state.todos, todo] })),

on(TodoActions.updateTodo, (state, { todo }) => ({ ...state, todos: state.todos.map(t => t.id === todo.id ? todo : t) })),

on(TodoActions.deleteTodo, (state, { id }) => ({ ...state, todos: state.todos.filter(t => t.id !== id) })),
);

In this example, we define a reducer for managing the Todo state. The todoReducer function takes the initialState and a set of reducer functions defined using the on function from @ngrx/store. Each reducer function handles a specific action and returns a new state.

Step 5: Define the Effects

Effects are services that listen for actions and perform side-effects such as HTTP requests or interacting with the browser's APIs.


@Injectable()
export class TodoEffects {

  loadTodos$ = createEffect(() =>
    this.actions$.pipe(
      ofType(TodoActions.loadTodos),
      mergeMap(() =>
        this.todoService.getAll().pipe(
          map((todos) => TodoActions.loadTodosSuccess({ todos })),
          catchError((error) =>
            of(TodoActions.loadTodosFailure({ error: error.message }))
          )
        )
      )
    )
  );
  constructor(private actions$: Actions, private todoService: ToDoService) {}
}

In this example, we define an effect for handling the loadTodos action. The loadTodos$ effect listens for the loadTodos action using the ofType operator from @ngrx/effects. When the action is dispatched, the effect calls the getAll method from the TodoService and dispatches either the loadTodosSuccess or loadTodosFailure action depending on the result.

Step 6: Define interface for the Store

This will be defined in the store/sotre.ts file -

export interface AppState {
  todo: TodoState
}

export interface AppStore {
  todo: ActionReducer<TodoState, Action>;
}

export const appStore: AppStore = {
  todo: todoReducer
}

export const appEffects = [TodoEffects];

AppState interface will define all the feature properties of the application. Here we have a single feature called as todo which is of type TodoState. We can have multiple features inside our application like this.

AppStore interface will define all the reducer types used in our app. In this case we have a single todo reducer so we will map the todoReducer to the todo property. appStore will be used to config our Store Module.

appEffects will have the array of defined effects classes. This will be used to register the effects in the application.

Step 7: Register the Store and Effects in the main standalone component

To use the NGRX store in your application, you need to register the StoreModule in your AppModule. We will be using a standalone components here -

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    CommonModule
  ],
  template: ``,
})
export class App {
}

bootstrapApplication(App, {
  // register the store providers here
  providers: [
    provideStore(appStore),
    provideEffects(appEffects),
    ToDoService
  ]
});

In this example, we register the store using the appStore. We also register the Effects with appEffects.

Step 8: Use the Store in ToDo List Component

To use the store in your components, you need to inject the Store service and dispatch actions.We will create a standalone TodoListComponent in src/todo-list.component.ts with the html file in src/todo-list.component.html

@Component({
standalone: true,
selector: 'app-todo-list',
imports: [NgFor, NgIf, AsyncPipe, JsonPipe],
templateUrl: './todo-list.component.html'
})
export class TodoListComponent {
todos$: Observable<Todo[]>;
isLoading$: Observable<boolean>;

constructor(private store: Store<AppState>) {
  this.todos$ = this.store.select(todoSelector);
  this.isLoading$ = this.store.select(state => state.todo.loading);
  this.loadTodos();
}

loadTodos() {
this.store.dispatch(TodoActions.loadTodos());
}

addTodo(index: number) {

const todo: Todo = {id: index, description: 'New Todo', completed: false };
this.store.dispatch(TodoActions.addTodo({ todo }));
}

complete(todo: Todo) {
  this.store.dispatch(TodoActions.updateTodo({todo : {...todo, completed: true}}));
}
}

todo-list.component.html

<ng-container *ngIf="todos$ | async as todos;">

  <ul *ngIf="todos.length; else empty">
    <li *ngFor="let todo of todos$ | async; let i = index;">
    {{todo.id}}  {{ todo.description }} - {{ todo.completed ? 'Done' : 'Pending' }}
      <button [disabled]="todo.completed" (click)="complete(todo)">
      complete
    </button>
    </li>

  </ul>

  <ng-template #empty>
    <div>No Data</div>
  </ng-template>


<button (click)="loadTodos()">Refresh</button>
<button (click)="addTodo(todos.length + 1)">Add</button>

<div *ngIf="isLoading$ | async">Loading...</div>

</ng-container>

In this example, we define a component that uses the Store service to load and display todos. We inject the Store service and select the todos property from the state using the select method. We also define three methods for dispatching the loadTodos, addTodo and updateTodo actions. The async pipe is used to subscribe to the todos$ observable and display the list of todos.

Step 9: Register the ToDo List Component in main component

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    CommonModule,
    TodoListComponent
  ],
  template: `
    <app-todo-list/>
  `,
})
export class App {
}

Add TodoListComponent in the imports array. Add the <app-todo-list/> tag to display the TodoListComponent.

Conclusion

In this guide, we have gone through the step-by-step process of implementing NGRX in an Angular application. We have seen how to define the state, actions, reducers, effects, and how to use the store in components. By following these steps, you can easily manage the state of your application in a scalable and predictable way using NGRX.

This Is How You Can Master JavaScript!

Code Craft-Fun with Javascript — Sun, 04 Jun 2023 18:49:20 +0000

JavaScript, the language of the web, is a powerful and versatile language. However, it is often perceived as confusing and peculiar by beginners. In reality, mastering JavaScript is within your reach. Just that you have to know how it works. With the right learning path, resources, and practice projects, you can unlock the full potential of this language. In this blog post, I will guide you through a clear roadmap to mastering JavaScript and dispel the notion that it is inherently weird or complicated.

Why JavaScript Seems Confusing (But It's Not)

JavaScript's confusion arises from its flexible nature, dynamic typing, and occasionally inconsistent behaviour across browsers. Actually, these aspects make JavaScript highly adaptable and powerful. By understanding its core concepts and patterns, you can leverage JavaScript's strengths.

First of all, you need to understand how this is different from other programming languages especially the object oriented programming languages .Javascript is a scripting language and not the programming language. In modern programming pattern the difference seems blurry but it is important to understand the key differences between the scripting language and programming language.

Difference between scripting language & programming language

Execution Environment:
Scripting languages are primarily designed to be executed within a specific runtime environment or interpreter. They rely on an existing application or system to interpret and execute their code. Programming languages, on the other hand, are compiled or interpreted into machine code that can be executed directly by the computer's processor.

Code Execution:
Scripting languages are often used for automating tasks, controlling existing software applications, or manipulating data within a specific environment. They typically execute code line by line and have less control over low-level system operations. Programming languages, on the other hand, are used for developing standalone software applications and have more control over system operations, memory management, and hardware interactions.

Development Speed and Ease of Use:
Scripting languages prioritise simplicity and ease of use, focusing on rapid development and quick prototyping. They often have built-in libraries for common tasks, allowing developers to write code more efficiently. Programming languages tend to offer more comprehensive features and control, requiring a deeper understanding of programming concepts and often taking more time to develop complex applications.

How to think differently when learning JavaScript:

Understanding the following aspects of the Javascript can provide you the way to grasp the concepts easily.

Dynamic Typing:
JavaScript is dynamically typed, meaning variables can hold values of any type, and their types can change during runtime. This flexibility allows for quick prototyping and less verbose code compared to statically typed languages like Java. Focus on understanding how JavaScript's type coercion and conversion work.

Prototypal Inheritance:
Unlike classical inheritance in languages like Java, JavaScript uses prototypal inheritance. Instead of classes, JavaScript employs prototypes to create objects and share behaviour between them.Understand prototype chains, object delegation, and the power of object-oriented programming in JavaScript.

Asynchronous Programming:
JavaScript is designed for the web, where asynchronous operations like network requests and user interactions are crucial. Learn how to handle callbacks, Promises, and async/await syntax. Understand concepts like event-driven programming and the event loop, which differ from the traditional sequential execution model found in languages like Java.

Functional Programming:
JavaScript supports functional programming paradigms, allowing functions to be treated as first-class citizens. Functions can be assigned to variables, passed as arguments, and returned from other functions. Grasp this functional aspect of JavaScript by learning about higher-order functions, closures, and functional programming concepts like immutability and pure functions.

Going over these aspects and understanding the javascript paradigms is the actual key to master this language. Yes it will take some time to grasp this at first but once you get the idea about how javascript works it will be an easy journey to get more deeper into it. I would recommend you to practice through writing the code and building projects. Be it damn simple at first but eventually you will be able to create more complex projects and master the language!

Basic to Advanced projects:

Once you are familiarise with JavaScript's syntax and core concepts and understand the Javascript fundamentals such as variables, data types, operators, control flow, and functions, you can start building small projects.Below are the list of projects you can start with going from the basic to advanced level -

Interactive Form Validator:
Build a form validation tool that validates user input in real-time, providing feedback on required fields, email formats, password strength, etc.

Todo List Application:
Create a todo list application that allows users to add, delete, and update tasks. Implement features like filtering tasks, marking them as completed, and persisting data using local storage.

Weather Application:
Develop a weather application that fetches weather data from an API based on user input (e.g., city name or coordinates) and displays relevant information such as temperature, humidity, and weather conditions.

Memory Game:
Build a memory game where users have to match pairs of cards. Add features like a timer, score counter, and the ability to track high scores.

Image Slider:
Create an image slider/carousel that allows users to navigate through a collection of images using next/previous buttons or automatic transitions.

E-commerce Shopping Cart:
Develop a shopping cart system for an e-commerce website. Enable users to add products, update quantities, calculate totals, and implement features like checkout processes.

Social Media Dashboard:
Create a dashboard that displays social media feeds and statistics from platforms like Twitter, Instagram, or Facebook. Implement APIs to fetch and visualize data in a user-friendly interface.

Expense Tracker:
Build an expense tracker that allows users to track their income and expenses, categorize transactions, and generate reports or visualizations to analyze spending habits.

Chat Application:
Build a real-time chat application using technologies like WebSocket or Socket.io. Implement features such as user authentication, sending/receiving messages, and displaying online/offline status.

Full-Stack Web Application:
Combine your JavaScript skills with backend technologies (e.g., Node.js and Express) to develop a full-stack web application. Build features like user authentication, data storage, and interaction with external APIs.

Recommended Resources

"You Don't Know JS" series by Kyle Simpson: This book series explores JavaScript's core concepts and tackles misconceptions.

"JavaScript: The Good Parts" by Douglas Crockford: This book highlights the best practices and unique features of JavaScript.

Online platforms: Codecademy, FreeCodeCamp, MDN Web Docs, and W3Schools offer interactive tutorials and comprehensive documentation.

Engaging Content on Javascript Core Concepts 💻

Code Craft-Fun with Javascript — Thu, 01 Jun 2023 14:03:05 +0000

I have started a series on Javascript Core Concepts. This series covers all the important javascript concepts which are vital to understand as a javascript developer. Good understanding of a language can benefit the developer in writing clean and optimised code. It improves code debugging and thus increase the productivity.

ABOUT ME

I have 6+ years of experience in Frontend Development.I have worked in various product based companies and got a chance to build the enterprise applications from scratch which are used by prime hotel chain brands such as ESA, G6, Hilton which ranked in top 10 hotel chains. I have developed my coding skills through working in startups which are known to have a very fast paced environment. This really helped me gain lots of knowledge. Now I am here and available to share this vital knowledge with you. If you are a beginner or a working professional and want to be more efficient in coding and master the javascript language, I am here to help and guide you. Mastering the javascript will open the door for you to start working on any latest framework with ease. This will make you so powerful as a developer and you can simply crack any interviews with higher packages!

I am available for mentorship and training on Javascript.

Contact -

Email - codecraftjs@gmail.com
Instagram - codecraftjs
Hashnode - code-craft.hashnode.dev

DEV Community: Code Craft-Fun with Javascript

New Features in ES2023

New Methods in Array.prototype - Copy Array

Use of Symbols as WeakMap Keys

Array find from last

Hashbang Grammar

Javascript 【tricky】💡interview output questions (Part 2)

What is the output for each code mentioned below and Why ?

Question 1

Question 2

Question 3

Question 4

Question 5

Promise.all() vs Promise.race()

Understanding Promise.all():

Exploring Promise.race():

Choosing Between Promise.all() and Promise.race():

Encrypt your Local Storage data!

Adding custom functions in the Storage Interface

Javascript 【tricky】💡interview output questions (Part 1)

What is the output for each code mentioned below and Why ?

Question 1

Question 2

Question 3

Question 4

Question 5

Javascript Objects: Best Practices

Tip 1: Use the literal syntax for object creation

Tip 2: Use computed property names

Tip 3: Use object method and property shorthand

Tip 4: Provide quotes for properties with invalid identifiers

Tip 5: shallow / deep copy object to avoid object mutability

🐍 Snake Game using Javascript!

I would recommend the following points before going through the code -

Asynchronous JavaScript: Understanding Promises

What are Promises?

Creating Promises

Consuming Promises

Chaining Promises

Handling Multiple Promises

Problems with Promises

Conclusion

Angular Code Structuring and Best Practices!

A Guide to Maintainable and Scalable Angular Projects

Module Organization:

Component Structure:

Services and Dependency Injection:

File and Folder Naming Conventions:

File and Folder Structure:

RxJS and Observables:

Conclusion:

Step-By-Step Guide for integrating NgRx State Management with Angular 16!

Step 1: Install NGRX

Step 2: Define the Model Todo

Step 3: Define the Service and Actions

Step 4: Define the Reducers

Step 5: Define the Effects

Step 6: Define interface for the Store

Step 7: Register the Store and Effects in the main standalone component

Step 8: Use the Store in ToDo List Component

Step 9: Register the ToDo List Component in main component

Conclusion

This Is How You Can Master JavaScript!

Why JavaScript Seems Confusing (But It's Not)

Difference between scripting language & programming language

How to think differently when learning JavaScript:

Basic to Advanced projects:

Recommended Resources

Engaging Content on Javascript Core Concepts 💻

ABOUT ME

I am available for mentorship and training on Javascript.

Contact -

New Methods in `Array.prototype` - Copy Array

Use of Symbols as `WeakMap` Keys

Understanding `Promise.all()`:

Exploring `Promise.race()`:

Choosing Between `Promise.all()` and `Promise.race()`: