In this article, we will try to understand all the details which are associated with the library called Sugar-JS. Sugar is an open-source JavaScript utility library that is used for working with native objects. Users can define methods or use plugins to handle specialized use cases.
Purpose of using Sugar-JS:
- The main purpose of using Sugar-JS is that this library provides the utility functions for working with native objects (like Array, String, Date, Range, Object, and so on).
- The Sugar is actually the main point of interaction (that is the global object) through which any user could the predefined methods available under this library.
- Sugar defines helpful utility methods that can be called static functions on the Sugar global object.
Installation: Use the following command (to be entered on command prompt itself) for installing sugar in the local system-
npm install sugar --save
Running Sugar-JS: Sugar’s code could easily be run in two different ways:
- Over browser’s console (since here sugar is already available and could easily be executed successfully)
- Using custom build available (in local system or PC)
1. Over browser’s console: Since the browser’s console already has inbuilt sugar installed, therefore here we may directly use Sugar along with its predefined methods.
Let us see some of the following examples which if we write over browser’s console, may result in some output which is display over console itself (Note these code snippets we have to run over browser’s console using CTRL + Shift + I then writing or pasting code over there and pressing Enter to see the output)-
Example 1: In this example, we would be creating an array using the inbuilt method provided by Sugar itself.
Javascript
let new_array = Sugar.Array.create("abcde"); console.log(new_array); |
Output:
Example 2: In this example, we will see some functions provided by Sugar which are of both Array and String.
Javascript
console.log(Sugar.Array.isEqual(['a','b'], ['a','b'])); console.log(Sugar.String.isEmpty('')); console.log(Sugar.String.reverse('neveropen')); console.log(Sugar.String.shift('a', 7)); |
Output:
2. Using custom build available (in local system or PC):
Following steps you need to follow first to make custom build available in local system or PC-
Step 1: Go the link (mentioned forward): https://sugarjs.com/download/
Step 2: Scroll down until the Custom Build section is available in front.
Step 3: Two options are available on the bottom right part of the screen (Download Dev and Build Minified as shown in the below image too) and further click on the Build Minified button.
Step 4: After clicking on Build Minified Button, the custom build starts building its own and if it stops after getting built successfully it will output something like shown in the below image
Step 5: Click on Download Min and thereafter a custom build file is downloaded paste over any specific location in the local system or PC since it will be used in the later part of the sections (that is while writing the code snippet it is used)
Step 6: In order to use that JavaScript file that was downloaded in the previous step, one more file (which is a .html file) has to be created and in that file, we have to attach (or import) the JavaScript file using the following tag line-
<script src = "<path_to_file\sugar-custom.min.js"></script>
Example 3: In this example, we will be implementing Sugar methods in the “.html” file and will see the result after running the file over the browser successfully.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sugar.js</title> <script src = "..\\sugar-custom.min.js"></script> </head> <body> <p id="print"></p> <p id ="print2"></p> <script> let array = Sugar.Array.construct(5, (i) => { return (i * i) }); document.getElementById("print").innerHTML = array; let string_creation = Sugar.String.reverse('neveropen'); document.getElementById("print2").innerHTML = string_creation; </script> </body> </html> |
Output:
