DEV Community: Blessing Hirwa

Guide to Callbacks & Higher-Order Functions in JavaScript.

Blessing Hirwa — Tue, 27 Apr 2021 16:09:45 +0000

Callbacks and Higher Order functions are some of the most misunderstood concepts in JavaScript. During this post, we will become familiar with them to write pro-level code as JavaScript engineers.

Before continuing, let's ask ourselves a question.

Why do we even have functions

Let’s see why…

Create a function 10 squared

Takes no input
Returns 10*10

tenSquared

function tenSquared() {
 return 10*10;
}
tenSquared() // 100

What about a 9 squared function?

nineSquared

function nineSquared() {
 return 9*9;
}
nineSquared() // 81

And an 8 squared function? 125 squared?

What principle are we breaking? DRY (Don’t Repeat Yourself )

👉 We can generalize the function to make it reusable.

function squareNum(num){
 return num*num;
}
squareNum(10); // 100
squareNum(9); // 81
squareNum(8); // 64

Generalizing functions

Parameters (placeholders) mean we don’t need to decide what data to run our functionality on until we run the function. Then provide an actual value (argument) when we run the function. Higher-order functions follow this same principle, we may not want to decide exactly what some of our functionality is until we run our function.

Now suppose we have a function copyArrayAndMultiplyBy2.

function copyArrayAndMultiplyBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] * 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndMultiplyBy2(myArray)

What if want to copy the array and divide it by 2?

function copyArrayAndDivideBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] / 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndDivideBy2(myArray)

Or add 3?

function copyArrayAndAdd3(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] + 3);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);

What principle are we breaking? DRY (Don’t Repeat Yourself )

👉 We could generalize our function, so we pass in our specific instruction only when we run copyArrayAndManipulate!

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) { return input * 2; }
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

How was this possible?

Functions in javascript = first-class objects. In addition to this, let's highlight some of the other features of functions:

They can co-exist with and can be treated like any other javascript object
Assigned to variables and properties of other objects
Passed as arguments into functions
Returned as values from functions

Consider this piece of code

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) {return input * 2;}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

Which is our Higher Order Function ☝?

The outer function that takes in a function is our higher-order.

Which is our Callback Function

The function we insert is our callback function.

Higher-order functions

Takes in a function or passes out a function. Just a term to describe these functions - any function that does it we call that - but there's nothing different about them inherently.

Why do we need to master these two concepts

Callbacks and Higher-Order Functions simplify our code
and keep it DRY.
Declarative readable code: Map, filter, reduce - the most readable way to write code to work with data.
Codesmith & pro interview prep: One of the most popular topics to test in an interview both for Codesmith and other mid/senior-level job interviews.
Asynchronous JavaScript: Callbacks are a core aspect of async JavaScript, and are under the hood of promises, async/await.

Conclusion
What's more, there we have it. If you made it here thank you for reading! I hope this post will help you get started with writing pro-level JavaScript codes.

👋Let's be friends! Follow me on Twitter and instagram for more related content. Don't forget to follow me also here on Dev as well to get updated for new content.

Cheers!

5 important skills you need as a Javascript Developer in 2021.

Blessing Hirwa — Wed, 03 Mar 2021 11:35:24 +0000

The life of a developer 💻 is not easy as they're problem solvers 👨‍🏫 and constantly learning people. They have to keep upgrading 💹 in order to stay valuable on the market.

skills make you rich, not theories
--Robert Kiyosaki

Are you looking for a better paying job or searching for a new skill to pick up and impress your co-workers, clients or your boss? Then stick with me to the end.

In this post, I've chosen top 5 skills 🤹‍♂ that are on high demand on the market and recruiters are ready to pay large sum of money to developers with the following skills. Also if you're a newbie to software development field then this can help too.

That's enough with the talking let's jump right into the main topic of today.

1. React

According to Indeed there are more than 50,000 job openings to React in the USA alone! Moreover, the demand for react developers isn’t showing any decline at all.

React is a JavaScript library primarily used for building amazing user interfaces in a short time. There are other libraries that serve the same purpose, but React is in the competition of its own. It is super easy and lightweight. You can start using react in 5 days.

React works with reusable components, that leads to way less code. There are already tons of Components readily available, you just need to download and plugin and boom, you're ready to go 😎!

The same software built with pure JavaScript is tougher and time-consuming and the worst of all your code won't have a robust structure.

Who is using React?

WhatsApp, Netflix, Paypal, Reddit, Tesla, Twitter, Facebook, and many more.

Another advantage of learning React is in no time you can start making native Android and IOS apps using React Native. If you want a valuable and worth skill to learn go for React.

2. Node.js

Node is used for building backend services or APIs. It is best for building Highly scalable, data Intensive, and real-time apps. If you know JavaScript then this is a must skill to add. You get to become a real full stack developer in a blink of an eye.

3. Git

Git is essentially a Version Control System. If you were to summarize Git in four words: it is time travel.

It is used to manage different versions of your apps. Think you are building an amazing app, you keep on adding new shiny features, but at one time due to a new feature, your app starts crashing! which always happen to me and other developers in general😁.

But if you had used git, then with a single click you can revert back the changes you made that lead to your app crashing. Git is a handy skill for Developers to know.
I haven't seen in my life a professional developer who doesn't know git .

4. TypeScript

TypeScript is an open-source language that builds on JavaScript, by adding static type definitions.
In easy terms, it is just JavaScript, plus some cool stuff
JavaScript is dynamically typed, this simply means that you don't have to explicitly declare the data type of your variables. You can use the same variable type to store all the different data types. this leads to your code being less stable and difficult to debug. This is the reason why JavaScript is soo confusing.
But here comes TypeScript.
It is statically typed. that means you need to declare the data type as you go along. This leads to your code being more: stable, robust, readable, with fewer errors.
These days people are willing to pay large amounts for developers with TypeScript skills.

5. Firebase

Mark my words, learn Firebase!
Imagine you made a cool website/app, people start visiting your website rapidly and it is becoming a hit. With the increase in traffic, you need servers and strong infrastructure, setting up servers is a headache and infrastructures are really expensive 🤯. But firebase came to rescue.

Firebase is an ecosystem of Google tools that can be used to make full-stack, scalable applications in the Google Cloud or Realtime Database.

It’s categorized as a backend-as-a-service (or BaaS) which gives developers the opportunity to create applications without even writing a single code on the backend.

In contrast to Firebase we have AWS but setting up AWS is a frustrating. Firebase is a lot more easier to learn and setup.
This is a high in-demand skill, people are learning it like crazy.

If you were looking a new skill to pick up and increase your own value as a developer then I have shown you what to learn, you can only compensate my time only if, you start learning one of them.

If you want to become a great developer then mark these words:

Build your skills, not your resume.
— Sheryl Sandberg

I think you enjoyed reading this post 😃. I like making new friends, why don't we be friends? Hit me up on Twitter, Linkedin.

17 Javascript optimization tips to know in 2021 🚀

Blessing Hirwa — Mon, 25 Jan 2021 16:32:43 +0000

You might be using Javascript development for a long time but sometimes you might not be updated with newest beautiful features that it offers which can solve your issues without writing extra codes. These techniques can help you write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.

After one of my articles about 8 neat javascript skills you didn't know in 4 minutes, here I am coming with a new series to cover shorthand techniques that help you to write more clean and optimized JavaScript Code.My motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.This is a Cheat list for JavaScript Coding you must know in 2021.

1. If with multiple conditions

We can store multiple values in the array and we can use the array includes method.

//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2. If true … else Shorthand

This is a greater shortcut for when we have if-else conditions that do not contain bigger logics inside. We can simply use the ternary operators to achieve this shorthand.

// Longhand
let test= boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;
console.log(test);

After nesting the condition we remain with something which looks like this:

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

3. Null, Undefined, Empty Checks

When we do create new variables sometimes we want to check if the variable we are referencing for its value is not null or undefined. JavaScript does have a really good shorthand to achieve these functions.

// Longhand
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}
// Shorthand
let second = first|| '';

4. Null Value checks and Assigning Default Value

let first = null,
let second = first || '';
console.log("null check", test2); // output will be ""

5. Undefined Value checks and Assigning Default Value

let first= undefined,
let second = first || '';
console.log("undefined check", test2); // output will be ""

6.foreach Loop Shorthand

This is a useful short hand for iteration

// Longhand
for (var i = 0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

Array for each variable

function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// prints: test[0] = 11, test[1] = 24, test[2] = 32

7. Comparison returns

Using the comparison in the return statement will avoid our 5 lines of code and reduced them to 1 line.

// Longhand
let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}
// Shorthand
function checkReturn() {
    return test || callMe('test');
}

8. Short function calling
We can achieve these types of functions using ternary operator.

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}
// Shorthand
(test3 === 1? test1:test2)();

9. Switch shorthand

We can save the conditions in the key-value objects and can be used based on the conditions.

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

10. Multi-line String Shorthand
When we are dealing with a multi-line string in code we can do it this way:

//longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`

11.Implicit Return Shorthand

With the use of arrow functions, we can return the value directly without having to write a return statement.

Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}
//shorthand
getArea = diameter => (
  Math.PI * diameter;
)

12.Lookup Conditions Shorthand

If we have code to check the type and based on the type need to call different methods we either have the option to use multiple else ifs or go for the switch, but what if we have better shorthand than that?

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

13.Object.entries()

This feature helps to convert the object to an array of objects.

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

14. Object.values()
This is also a new feature introduced in ES8 that performs a similar function to Object.entries(), but without the key part:

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

15. Repeat a string multiple times

To repeat the same characters again and again we can use the for loop and add them in the same loop but what if we have a shorthand for this?

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);

16. Power Shorthand

Shorthand for a Math exponent power function:

//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8

17. Numeric Separators

You can now easily separate numbers with just an _ . This will make life of developers working with large numbers more easier.

//old syntax
let number = 98234567

//new syntax
let number = 98_234_567

If you would like to get update yourself with the latest features of JavaScript newest version(ES2021/ES12) check below:

1. replaceAll(): returns a new string with all matches of a pattern replaced by the new replacement word.

2.Promise.any(): It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.

3. weakref: This object holds a weak reference to another object without preventing that object from getting garbage-collected.

4. FinalizationRegistry: Lets you request a callback when an object is garbage collected.

5. Private visibility: modifier for methods and accessors: Private methods can be declared with #.

6. Logical Operators: && and || operators.

7. Intl.ListFormat: This object enables language-sensitive list formatting.

8. Intl.DateTimeFormat: This object enables language-sensitive date and time formatting.

Conclusion
What's more, there we have it. 17 ways to optimize your code with modern JavaScript techniques.

👋Let's be friends! Follow me on Twitter and instagram for more related content. Don't forget to follow me also here on Dev as well to get updated for new content.

Stay safe 🏠

4 reasons why you should use GraphQL over REST APIs

Blessing Hirwa — Tue, 05 Jan 2021 05:38:12 +0000

REST has been preferred by many developers to send data over HTTP because they didn't need to install additional software or libraries when creating an API though GraphQL is ordinarily introduced as a technology to replace the legacy of REST APIs. In this article, I’ll be explaining the benefits, limitations, and differences between these two, which will help you decide what to chose for your next project. So without further ado let's dive right into it.

What is REST?

REST(Representational state transfer) is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. With REST you separate the implementation of client and server, to achieve this we use stateless operations including (GET, POST, PUT, and DELETE) to send and receive resources.

The idea behind this REST architecture is that you would retrieve a resource by putting through a request to the resource’s URL and get a response (usually JSON, but it depends on the API).

Benefits of REST

Rest is scalable as it separates the client from the server and gives you ability to scale your application with ease.
Flexibility is another advantage of REST as Data is not tied to resources or methods, so REST can handle different types of calls and return different data formats.

Limitations of REST

Over fetching: This is when the API endpoint provides way more information than required by the client.

Under fetching: This is when the API endpoint doesn’t provide all of the required information. So, the client has to make multiple requests to get everything the application needs.

We'll use an example to understand well the above concepts

What is GraphQL?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more. In addition to this, it lets you combine different entities into a single query.

Benefits of GraphQL

Retrieve precise data, and nothing extra. In GraphQL, you get what you request and nothing more, which is good.
Faster development in the Client. Usually, when there are changes in the data requirements, you would just need to modify the query and there isn’t much change required, thus allowing rapid product iterations. Both the client and server development teams can work independently, as long as both the teams know the structure of the data. i.e client and server implementations are independent to each other.

Example comparing both of them

Let’s suppose, for example, we are displaying a user’s feed with a list of the user’s post and his/her followers. In our case, we have to display the author of the post, the posts as well as the followers for that user.

If we were to use REST, we would have made at least 2 or 3 requests, similar to this:

/user/<id> to get the User(Author) details likely the username.
/user/<id>/posts to get the list of posts posted by that user.
/user/<id>/followers to get the list of followers for that specific user.

But in all these cases we are over-fetching the data. For example, in the first request, we need only the name, but we get all the details related to the user when we use this approach.

This is when GraphQL shows it’s potential. We need to specify the query and we can get the desired output. To achieve the same using GraphQL, we can use a query similar to this:

query {
  User(id: '123') {
    name
    posts {
      title
    }
    followers {
      name
    }
  }
}

By using such a query we will be able to get a JSON response with the following properties. Clean and Simple, right?

GraphQL vs REST
To sum up, here are some couple of standout differences between GraphQL and REST:

1. Data fetching

REST causes over-fetching or under-fetching, whereas this isn’t the case with GraphQL. In GraphQL, What you ask for is what you get.

2. Object definition (JSON response)
In REST you can define the request object on the Backend and in GraphQL you define the object on the Frontend.

3. Automatic caching

REST automatically puts caching into effect whereas GraphQL has no automatic caching system, but using clients such as Apollo Client, Relay, etc. will make caching possible. Caching enables your client to respond to future queries for the same data without sending unnecessary network requests

4. Error Handling

Error handling in REST is much simpler as compared to GraphQL, which typically gives you a 200 OK status code, even if there’s an error. But, when using clients such as Apollo Client, Relay, etc, it is very much possible to handle errors easily.

GraphQL works best for the following scenarios

Apps for devices such as mobile phones, smartwatches, and IoT devices, where bandwidth usage matters.
Applications where nested data needs to be fetched in a single call.
A composite pattern, where an application retrieves data from multiple, different storage APIs.

Conclusion
GraphQL certainly has many advantages over REST, but it might not always be the best implementation. Like I said earlier, the choice depends on your application, whether to choose REST or GraphQL.

I hope this might help you make decisions in your future projects. If you like to share your experiences about GraphQL or REST, drop them in the comments section. Don't forget to connect with me on Twitter and
Linkedin. Thank you for reading 😊!

why you shouldn't use arrow functions?

Blessing Hirwa — Thu, 24 Dec 2020 13:51:25 +0000

Who doesn’t love the simplicity of arrow functions? Introduced as part of the ECMAScript 6, arrow functions went viral. The new syntax to declare functions saves us time and enhancing clarity in many situations, removing all the distracting, unnecessary, chunk that usually came with declaring a JS function 😫. In this article we'll talk more about when we should and not use arrow functions, so hold tight and continue with me until the end to avoid confusion.

Regular funciton declaration

function holidays(){ 
return "Merry Christmas and a happy new year 😀!"
}

const result = list.map(function(item) { return item; })

With Es6 functions

const holidays = () => "Merry Christmas and a happy new year 😀!"

const result = list.map((item) => item)

Isn't it lovely? In any case, we have to be cautious as the difference between them is not only just syntax, so we can't use it in every situation.

So when is using arrow functions not advisable 🙄?

1. Object methods

const post= {
likes: 0,
like: () => {
this.likes++;
}
}

In the example above, it would be instinctive to think that every time we call post.like() the property post.likes would increase by one, initially from 0 to 1.
Unfortunately, this is not the case, the value of likes will sadly remain the same and this post will never get to be popular.

Invoking the method like() would simply attempt to increment the property likes on the global window object.

However, if instead, we use the traditional syntax:

const post = {
likes: 0,
like: function() {
this.likes++;
}
}

2. Object Prototype

Similar to the example above, object prototypes will evaluate this as the global window object, like in the following example:

class Post {
constructor(title) {
this.title = title;
this.shared = false;
}
};

Post.prototype.share = () => {
return this.shared = true;
};

Similarly, in the previous case, the method share() won’t work due to the enclosed scope to the window object. And again the solution will look familiar:

Post.prototype.share2 = function() { return this.shared = true; };

In addition to what we saw above here are some limitations of arrow functions:

Does not have its own binding to this or super
Should not be used as an event handler, a method of an object, a method of a class, or a prototype method, or when you have a function that uses the arguments object.
Not suitable for call, apply and bind methods, which generally rely on establishing a scope
Cannot be used as a constructor
Cannot use yield within its body

Taken from MDN

To be continued...

Thank you for taking your time and read this post, hope you enjoyed it. Let me know what you think in the comments and don't forget to connect with me or hit me up on Twitter, Instagram and Linkedin. Once again, Merry Christmas and a happy new year of 2021 🌲.

8 neat Javascript tricks you didn't know in 4 minutes.

Blessing Hirwa — Thu, 10 Dec 2020 13:23:18 +0000

Introduction
Javascript is a powerful programming language especially in web development that is used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page. During the last 5 years Javascript is becoming famous because of it's simplicity and many feautres it has and also many packages out there. So without further ado let's dive right into it.

1. String to a number
Now you can easily convert a string to a number by just only using + sign. Unlike the old method, using + operator is much cleaner and easier.

my_string = "123";
console.log(+my_string);
// 123

my_string = "amazing";
console.log(+my_string);
// NaN

Please note that, it only works with string numbers as you can see in the example above.

2. A number to a string
You can convert a number to a string in a simpler way without using JavaScript built in toString() method.

Have a look at this:

let converted_number = 5 + "";
console.log(converted_number);
// 5

console.log(typeof converted_number); 
// string

3. Get unique values
We can extract unique values from an array i.e removing duplicate values in an array by simply using the Set object and Spread operator.

Here's a simple demo

let array_values = [1, 3, 3, 4, 5, 6, 6, 6,8, 4, 1]
let unique_values = [...new Set(array_values )];
console.log(unique_values );
// [1,3, 4, 5, 6, 8]

4. Replace all
We usually know string.replace method replaces on the first occurence. In any case, regular expressions in Javascript can be used to replace certain content on strings.

In our example we'll use global regex /g to replace all occurrences of of a string.

let replace_string = "Visit stunnitysoft. stunnitysoft is a software company";
console.log(replace_string.replace(/stunnity/, "Micro")); 
// "Visit Microsoft. stunnitysoft is a software company"
console.log(replace_string.replace(/stunnity/g, "Micro")); 
// "Visit Microsoft. Microsoft is a software company"

5. Optional Chaining
The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

Taken from MDN DOCS

Let's consider the expression a?.b.

This expression evaluates to a.b if a is not null and not undefined, otherwise, it evaluates to undefined.

You can also chain this multiple times like a?.b?.c

If a is undefined or null, then this expression evaluates to undefined
Else if b is undefined or null, then this expression evaluates to undefined
Else this evaluates to a.b.c

Syntax

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

6. Nullish Coalescing Operator
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Taken from MDN DOCS

Consider the expression a ?? b. This evaluates to b if a is null or undefined, otherwise, it evaluates to a

7. Logical AND (&&) and Logical OR (||) Operators

Logical AND (&&) Operator
Let's say we have the following expression where b and c are expressions.

b && c

This will be evaluated to the value of c only if b is truthy, otherwise, it will be evaluated to the value of b.

If b is falsy, then the expression c is not even going to be evaluated.
This is called short-circuit evaluation.
This is very useful while using React.

Logical OR (||) Operator
Let's say we have the following expression where b and c are expressions.

b || c

This will be evaluated to the value of b if b is truthy, otherwise, it will be evaluated to the value of c.

Short-circuit evaluation happens here too.
If b is truthy, then the expression c is not even going to be evaluated.
This is also used often in React.

8. Using length to resize and emptying an array
In javascript we can override a built in method called length and assign it a value of your choice.

Let's consider the following example:

let array_values= [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4,5]

Emptying an array

let array_values= [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

Note: Setting the length to 0 is not advisable as it can lead to a memory leak. In order to clean objects in an array from memory, they need to be explicitly removed.

Conclusion
As you can see, we did a lot of powerful stuff without writing too many lines of code. Go ahead and use these JavaScript skills as they will keep your code more cleaner and maintainable.

This was too long but thank you for holding on until the last line
😊, I hope this article was helpful, and if so please share it to other people who can find it useful. Feel free to give a suggestion or shoot me a message on Twitter or Linkedin.