DEV Community: Akash Chauhan

Top 5 most used javascript functions with examples that you must try.

Akash Chauhan — Sat, 15 Oct 2022 06:40:59 +0000

Javascript functions are very useful because they allow us to reuse code. We can write a function once and then call it whenever we need it. This saves us a lot of time and makes our code more organized.

Javascript functions are also great for making our code more modular. By breaking our code up into smaller pieces, we can make changes to one part without affecting the rest of the code. This makes debugging and maintenance much easier.

Javascript functions are a great tool that we should take advantage of. They can save us a lot of time and help us keep our code more organized and manageable.

When it comes to programming, there is a wide range of functions that can be used in order to make code more efficient.

However, with JavaScript specifically, there are a few functions that tend to be more useful than others. This article will highlight the five most useful javascript built-in functions with source code.

In this article , Today we are going to be discussing about top 10 most useful javascript functions with example that you must try.

1. JavaScript foreach

JavaScript foreach function in javascript is a powerful tool that allows you to iterate through arrays or objects. This article will show you how to use the foreach function and how it can be used to simplify your code.

The foreach function takes two arguments, the first is the array or object to iterate through and the second is a callback function. The callback function takes three arguments, the first is the value of the current element, the second is the index of the current element and the third is the array or object being iterated over.

JavaScript foreach function executes the callback function once for each element in the array or object. The value of this within the callback function is set to the array or object being iterated over.

Javascript foreach functions have key, value that works as back bone for javascript foreach so,

You can exit early from a foreach loop by returning false from within your callback function.

JavaScript foreach function example:

let students = ['Yogesh', 'Avinash', 'Kamal'];

// using forEach
students.forEach(myFunction);

function myFunction(item, index, arr) {

    // adding strings to the array elements
    arr[index] = 'Hello ' + item;
}

console.log(students);
// ['Hello Yogesh', 'Hello Avinash', 'Hello Kamal'];

2. JavaScript filter

When working with arrays, it is often necessary to only select certain elements that meet certain criteria. For example, you may want to find all of the users in a database who are over the age of 21. The JavaScript filter function makes this task easy.

To use the javaScript filter function, you first need to create a callback function that defines the criteria for inclusion in the new array. This callback function should take in one argument (the element being evaluated) and return a Boolean value indicating whether or not the element should be included in the new array.

Once you have defined your callback function, you can pass it into the filter function along with the original array. The filter function will then return a new array containing only those elements from the original array that met the criteria specified by your callback function.

JavaScript filter function example:

const colors = [
  { name: "red", quantity: 2 },
  { name: "black", quantity: 0 },
  { name: "blue", quantity: 5 },
];

function isBlack(color) {
  return color.name === "black";
}

console.log(colors.find(isBlack));
// { name: 'black', quantity: 0 }

3. JavaScript map

JavaScript map function is a built-in method in JavaScript that allows you to transform one array into another.

The map function calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

The map function is often used to transform an array of data into a new array of data. For example, you could use the map function to convert an array of strings into an array of numbers.

If you have an array of data that you need to transform, the map function is a great tool to use.

//create an array of total no
var totalNo = [10, 30, 10, 22, 14];

//javascript map calls a function where "element" passed as parameter
//this map will pass each element of totalNo as "item" in this 
 result = totalNo.map(function(element) {
  return element*2;
});

console.log(result); 
// [20, 60, 20, 44, 28]

4. JavaScript find and findIndex

JavaScript find() method returns the value of the first element in an array that passes a test implemented by a callback function. It executes the callback function once for each element present in the array until it finds one where callback returns a true value. If such an element is found, find immediately returns the value of that element. Otherwise, it returns undefined.

callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

JavaScript find example:

function searchItem(itemKey, myArray){
    for (var i=0; i < itemArray.length; i++) {
        if (itemArray[i].name === itemKey) {
            return itemArray[i];
        }
    }
}

var itemArray = [
    { name:"string1", value:"1" },
    { name:"string2", value:"2" }
];

var resultObject = searchItem("string1", itemArray);

console.log(resultObject);

// { name: "string 1" value: "this" }

JavaScript findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1.

JavaScript calls the findIndex() method on an array, passing in a callback function as an argument. The findIndex() method then calls that callback function once for each element in the array until it finds an element where callback returns a true value. If such an element is found, findIndex() returns the index of that element; otherwise, it returns -1.

For example, let's say you have an array of objects and you want to find the first object that has a particular property value. Now let's have a look at example for javascript find index of object in array by key value

JavaScript findIndex example:

var itemArray = [-10, -20, 30,10, 40, -9, -50];

var foundObj = itemArray.findIndex(function (element) {
     return element > == 10;
});

console.log(foundObj);

// 3

5. JavaScript Object key

JavaScript object key() is a function that returns a list of all the keys in an object. The keys are returned in the order they were added to the object.

If you need to get the keys of an object in a specific order, you can use the key() function. By default, the key() function returns the keys in the order they were added to the object.

However, you can also specify a compare function to control how the keys are sorted before being returned.

The key() function is useful for looping through objects. For example, you could use it to get an array of all the usernames on a website.

JavaScript Object key example:

const location = {
  Street: 'Gouverneur Street',
  City: 'New York',
  Country: 'USA'
};

console.log(Object.keys(location));

Summary

So , we discussed top 5 most used javascript functions including JavaScript filter, javascript map, javascript foreach, javascript find and findindex, javascript object key etc in this article.

Each of these functions has a different purpose and can be used in a variety of ways. Try using each of these functions in your own code to see how they work.

Original source at: akashminds.com

Top 9 commonly used javascript functions with example | Akashminds

How Javascript games can improve your coding skills
The 10 essential frontend developer skills that you will need to know in 2023.
How much Javascript is required for Selenium Automation tester ?

How to rotate image clockwise anticlockwise onclick button javascript | Akashminds

Akash Chauhan — Sat, 15 Oct 2022 06:33:32 +0000

Assuming you would like 8 sentences in 2-3 paragraphs:

With a little bit of coding, you can use JavaScript to rotate images. This is a great way to add some interactivity to your web page without having to use a heavy plugin. You can also use CSS to rotate images, but JavaScript gives you more control over the animation.

With a little bit of code, you canrotate imagesonclick buttons with JavaScript. It's a fairly simple process that only requires a few lines of code.

Knowing how to rotate images clockwise and anticlockwise is essential for anyone who wants to create beautiful or practical designs.

In order to rotate an image using CSS, the rotate property must be used. This property is a part of the transform property. It takes one value, which is an angle in degrees.

In this article, I am going to show you how you can rotate image clockwise anticlockwise onclick button javascript

Learning Objectives:

1. Rotate image css properties
2. Get the image element using JavaScript
3. JavaScript click event to change css
4. Rotate image clockwise onclick JavaScript
5. Rotate image anticlockwise onclick JavaScript
6. Summary

Rotate image css properties

There are many ways to rotate an image on a web page using CSS. One way is to use the CSS transform property. This property allows you to rotate, scale, skew, or translate an element. To rotate an image, you can use thetransform property with the "rotate" value.

The number of degrees that you want to rotate the image can be set as a positive or negative number. You can also set the rotation to happen around a certain point, such as the center of the image, by using the transform-origin property.

Another way to rotate an image on a web page is by using CSS animations. To do this, you first need to create a @keyframes rule with a name that you will use later.

In this rule, you will specify the amount of rotation that should happen at specific points in time.

The image can be rotated clockwise or anticlockwise.

For example, to rotate an image clockwise by 90 degrees clockwise, the code would be as follows:



img {

  transform: rotate(90deg);

}

If you want to rotate an image anticlockwise by 90 degrees, you would use:



img {

  transform: rotate(-90deg);

}

Get the image element using JavaScript

In order to get the image element using JavaScript, one must first understand how the img tag works in HTML. The img tag is used to embed an image into a web page.

The image tag has two attributes, src and alt. The src attribute specifies the URL of the image to be displayed. The alt attribute provides alternate text for the image, if the image cannot be displayed.

To get the image element using JavaScript, one can use the getElementById method. This method returns the element with the specified id attribute.

For example, if one wanted to get the image element with an id of "myImage", they would use the following code:



<html>
   <body>
    <h1>How to rotate image clockwise anticlockwise onclick button javascript?</h1>
    <img alt="rotate image using javascript" border="0" data-original-height="495" data-original-width="742" height="133" id="myImage" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwkpk6tj0se2rhodoerq.jpg" width="200" />
    <script>
          var myImage = document.getElementById("myImage");
          console.log(myImage)
    </script>
   </body>
</html>

Once you have obtained a reference to the image element, you can access its properties and methods.

Result:

JavaScript click event to change css

To attach a function to button element element, you first need to create the function. The function can be anything you want it to be, but it must be defined before it can be attached to an element.

To attach the function to an element, you use the onclick attribute.

For example:

onclick="onButtonClick()"

This will cause the onButtonClick() function to be executed when the element is clicked. You can also define inline JavaScript functions using the onclick attribute.

Rotate image clockwise onclick JavaScript

When you click on an image, sometimes you want it to rotate. Rotating an image on a webpage can be done using JavaScript. Here's how to do it.

First, you need to have an image element on your HTML page like we done above. Then, you'll need to set up a function to rotate the image when it's clicked like in the previous step.

In this function, you'll use the CSS transform property to rotate the image by a certain number of degrees,

For that we'll first need to access the transform property so that you could give it some value according to the angle you need according to your requirements so first I am going to rotate it clockwise.



<img id="myImage" alt="rotate image using javascript" border="0"
data-original-height="495" data-original-width="742" height="133" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwkpk6tj0se2rhodoerq.jpg" width="200" /> <br/><button onclick="rotateImageClockWise()">Rotate image clockwise</button>

<script>
  function rotateImageClockWise() {
    var myImage = document.getElementById("myImage");
    myImage.style.transform = 'rotate(90deg)';
  }
</script>

Rotate image clockwise example:

Rotate image anticlockwise onclick JavaScript

In this case there is nothing specific required , You will just have to change the transform value in minus (-) so that it could be rotated anticlockwise just like this example below.



<img id="myImage" alt="rotate image using javascript" border="0"
data-original-height="495" data-original-width="742" height="133" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwkpk6tj0se2rhodoerq.jpg" width="200" /> <br/><button onclick="rotateImageAntiClockWise()">Rotate image Anticlockwise</button>

<script>
  function rotateImageAntiClockWise() {
    var myImage = document.getElementById("myImage");
    myImage.style.transform = 'rotate(-90deg)';
  }
</script>

Rotate image Anticlockwise example:

Summary

This article has shown you how to rotate an image clockwise or anticlockwise onclick using button javascript.

First, the function was defined.
Second, the event listener was added to the button.
Finally, the function was called when the button was clicked. This can be useful for creating games or interactive applications.

By following the steps outlined in this article, you can easily add this functionality to your own web applications.

Give it a try today!
Original source at: https://akashminds.com/

Related Articles

The 10 essential frontend developer skills that you will need to know in 2023.
Top 9 commonly used javascript functions with example
How much Javascript is required for Selenium Automation tester ?

What's New in Angular 14? Here Are the Highlights

Akash Chauhan — Fri, 07 Oct 2022 16:33:15 +0000

Angular version 14((angular 14) has arrived. This is a new major version of the popular front-end framework, and it comes with some exciting new features and improvements.

Exciting information for Angular Developers! Angular 14, the newest version of the TypeScript-based free and open-source webapp framework, was released on 2nd June 2022.

Taking a look at Angular 14 in light of previous releases, it provides us another in-depth view of what each new Angular release has to cover.

One of the most notable changes in this new version is the improved support for TypeScript 4.7. This will allow developers to take advantage of the latest TypeScript features in angular 14 and improve the type safety of their Angular applications.

Overall, Angular 14 provides a more reliable and robust platform for building large-scale web applications.

Lets discuss the new features of angular 14,

1. Strictly typed Angular Forms

Types forms are used to access the properties in a uniform way for angular forms. This makes it easier for developers to work with Angular forms and helps ensure that the code is maintainable.

In conclusion, using a form is the best way to access properties in an Angular application. By using a form, you can easily get to the properties you need and modify them as needed.

If you're looking for a quick way to add type-safety to your Angular forms, look no further than Typed Angular Forms. In angular 14 this library provides a simple way to create and validate forms in Angular while providing full TypeScript support.

2. Streamlined page title accessibility

Streamlined page title accessibility in angular 14 means that the title of each page is now more accessible to screen readers and other assistive technologies.

This is a critical change for users who rely on these technologies to navigate web pages.

In previous versions of angular, the page title was often hidden or displayed inconsistently, making it difficult for users to know which page they were on.

With this change, the page title will be displayed more consistently and prominently, making it easier for users to find their way around your site.

This new API makes it easier for developers to create accessible applications that support dynamic page titles.

For example,

developers can now set the title of a page based on the content that is currently being displayed.

This is especially important for single-page applications that dynamically load different content based on user interactions.

3. Angular CLI Auto-Completion

If your Angular CLI video game is strong, you can determine how to increase your productivity by providing the appropriate commands to produce parts, modules, and directives for your file.

However, there are a plethora of commands to choose from, but many times you will need to go to the official guide to review the commands and the command options.When you have a solid Angular CLI game,

You can instruct people to utilize useful tools and directives for improving your productivity in angular.

However, it is easy to gain access to a variety of commands, though often you may need assistance from the official guide to help you identify the commands.

If an Angular game in your CLI is robust, you can then settle on a technique for increasing productivity by implementing an assortment of commands used to produce such elements as elements, modules, and directives in your occupational project.

But, you should explore the Angular CLI guide to learn the various available commands and their functions.

4. Optional Injectors

Angular 14 adds the ability to pass an optional injector while developing an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView.

The injector then enables the dependency behavior to be personalized within the specific template.

In angular 14, Optional Injectors are a way to provide services to your application without having to explicitly specify them in the constructor.

This is especially useful for third-party services that you may not be able to control.

For example, if you're using a library that provides its own injector, you can use the Optional decorator to specify that the service is optional.

Optional Injectors in angular 14 are also a good way to avoid circular dependencies between services.
If two services depend on each other,
they can both use the Optional decorator to prevent an infinite loop when trying to resolve their dependencies.

5. Standalone Components

In Angular 14, modules are designed to be called as optional standalone components rather than piped together elements.
The primary objective of Angular, however, is to move away from the current state of affairs by creating artifacts such as pipes, elements, and directives--the focus of the TypeScript-based Angular framework.

Component level modules will be possible with Angular 14.

The main reason for Angular's current environment is the old approach of piping, specialists, and directives, the main aim of the framework that now uses TypeScript.

6. Built-in Enhancements

Angular14 is today supporting TypeScript 4.7, also supporting ES2020. It permits the CLI to make use of small JavaScript code without degrading it.
Angular latest version comes with inbuilt things , one more significant Angular14 attribute permits you connect to protected component members directly from our templates.

Giving you more control over the public surface API of reusable components.

7. ng completion

Angular 14 allows users to auto-complete commands such as ng serve in real-time.

When you get an error in the command line, incorrect vowel insertions typically cause those errors.

To avoid this, Angular 14 has introduced proactive spell correction and real-time auto-completion for commands.

8. ng analytics

The CLIs command has analytical settings settings that you can use to determine analytics configurations and generate analytics information in angular 14.

The more detailed reports effectively communicate your previous analysis configurations and provide information to make it easier to set your priorities.

9. ng cache

The simple ng cache command provides information on local cache on your system in angular 14.

It enables you to adjust, disable, or delete information from cache, and you can print cache statistics and information in angular 14.

*How to Install Angular 14? *

Following that, install the version of Angular CLI globally by running the following command from the command-line interface.

Install --global @angular cli@next .

Using this command, you can easily install Angular CLI’s latest version on your system.

*How to Upgrade to Angular 14? *

Here you can check how you can update the version.

Summary

So, alongside working with Angular version 14's features, you must be excited for accepting them into your development process.

We'll move on to this stop in your search for another release of Google's Angular setup soon.