DEV Community: tutorials-kept-simple

'Single' vs "Double" quotes for strings in javascript

tutorials-kept-simple — Wed, 11 Nov 2020 08:38:53 +0000

Often while coding using javascript, you would have come across the use of 'single' or "double" quotes for strings and would have wondered, if there is any real difference between the two and if there is, is there an advantage of using one type of quote over the other? This article is going to answer just that! Read on!

Difference between the two quote styles
Choosing the right quoting style
Single vs Double Quotes - Pros and Cons
Popular Quoting Styles
Parting Words

Difference between the two quoting styles

Both single (' ') and double (" ") quotes are used to represent a string in Javascript. Choosing a quoting style is up to you and there is no special semantics for one style over the other. Nevertheless, it is important to note that there is no type for a single character in javascript, everything is always a string!

'apple' === "apple"

Some of the other key points that both styles of quoting are as follows:

Whichever quoting style you open a string with, close it with the same style.

'apple' //correct
"apple" //correct
"apple' //incorrect

The system doesn't care which one you use.
On German, Hungarian, Austrian, and many other keyboards, you have to use the Shift key for both single or double-quotes.
On Turkish Q keyboards, we need to press Shift for a single quote and not for a double quote!

Choosing the right quoting style

Wise selection of quoting can help you from escaping single (') or double(") quotes within a string. For example, if you wish to store a HTML snippet in a variable, you can use double quotes (") for HTML attribute values and use single quotes (') for enclosing the JavaScript string:

var div = '<div class="panel">...</div>'

Quote within a quote

Using quotations within a string gives rise to an error. for example,

var message='Javascript's beauty is simplicity';

There is no way for the browser to know which one is the closing quote. The interpreter sees the second quote in 'Javascript's as the ending quote - so the rest of the line becomes invalid.

We can fix this by using the fact that javascript allows both single and double quotes to define a string. So in this case you can go for double-quotes.

var message="Javascript's beauty is simplicity";

An alternate method is to escape quote arks using a forward slash "\". You use a forward slash in front of the character you intend to escape. So the same message becomes:

var message='Javascript\'s beauty is simplicity';

Points to remember

A double-quoted string can have single quotes without escaping them, conversely, a single-quoted string can have double quotes within it without having to escape them.
Double quotes ( \" ) must escape a double quote and vice versa single quotes ( \' ) must escape a single quote.

Single vs Double Quotes - Pros and Cons

Pros

Single Quotes	Double Quotes
Better readability for empty strings (' ') looks better than ("" "")	In JSON the only quoting style allowed is double quotes (" ")
Easier if you wish to write html within javascript	Eliminates the need to escape apostrophes when writing sentences in english

Cons

Single Quotes	Double Quotes
Not supported by JSON	Must press an extra key (Shift) when wanting to use double quotes

Popular Quoting Style

Combing through a few popular JavaScript projects we can see a clear preference for single quotes over double-quotes.

Project	Dominant quote style
lodash	' - 99% of quotes
chalk	' - 100% of quotes
react	' - 90% of quotes
request	' - 97% of quotes
commander.js	' - 97% of quotes
moment	' - 90% of quotes
express	' - 92% of quotes
tslib	" - 100% of quotes
debug	' - 97% of quotes
node-fs-extra	' - 98% of quotes
axios	' - 81% of quotes

Data obtained from https://bytearcher.com/

However, a considerable number of front-end libraries prefer double quote style which might have to do with the presence of HTML fragments.

Parting words

To sum it up, try to stick with one quoting style throughout. If you are confused about which one to pick, go with the widely-used single quotes. In ES6, you also have a third option to enclose strings - the backtick string.

How to check if a value exists in an array using JavaScript?

tutorials-kept-simple — Wed, 11 Nov 2020 04:15:35 +0000

We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In this article, we will solve for a specific case: To check if a value exists in an array.
We then also look at its implementation in Javascript and jQuery.

Where can we use this?

You might find this useful when,

You want to execute a particular script if a certain value exists in an array
You want to avoid adding duplicate values to the array

If you are new to programming or quite unfamiliar with javascript, we recommend you read through the entire article, as each section of the article would be useful.

However, If you are just looking for the code, you can quickly check out the section below.

Code Implementation
Word of Caution

Code Implementation

We are going to check for a value's existence in an array in 2 different ways using jQuery and Javascript

1) Using jQuery

If you are someone strongly committed to using the jQuery library, you can use the .inArray( ) method.

If the function finds the value, it returns the index position of the value and -1 if it doesn't.

Syntax

jQuery.inArray( search-value, array-or-string-in-which-to-search);

Code

//code to check if a value exists in an array using jQuery
<script type='text/javascript'>
var fruits_arr = ['Apple','Mango','Grapes','Orange','Fig','Cherry'];
var text = "Watermelon";
// Searching in Array
console.log( 'Index : ' + jQuery.inArray('Fig', fruits_arr) );
console.log( 'Index : ' + jQuery.inArray('Peach', fruits_arr ));

// Searching in String variable
console.log( 'Index : ' + jQuery.inArray( "m", text ));

Output

Index : 4
Index : -1
Index : 5

2) Using Javascript

Using Loop

The Idea behind it: We can check for the value we need by traversing the entire array using a looping function

<script type='text/javascript'>

//code to check if a value exists in an array using javascript for loop
var fruits_arr = ['Apple','Mango','Grapes','Orange','Fig','Cherry'];

function checkValue(value,arr){
  var status = 'Not exist';

  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      status = 'Exist';
      break;
    }
  }

  return status;
}
console.log('status : ' + checkValue('Mango', fruits_arr) );
console.log('status : ' + checkValue('Peach', fruits_arr) );
</script>

Output

status : Exist
status : Not exist

Code Explanation:

From line 3 of the code, you can see that we have an array of fruits with the name fruits_arr. This contains 6 elements namely Apple, Mango, Grapes, Orange, Fig, and Cherry.

The function checkValue takes 2 parameters as input, the value that needs to be searched, and the array in which the value needs to be searched.

Using a for loop the function compares each element of the array with the input value you wanted to check for. If it finds a match, the function breaks and the variable status is set to Exist, else it is set to Not Exist.

Using Inbuilt function in Javascript

However, instead of writing a loop for this case, you can use the inbuilt function of Array.indexOf () for the same case. If the value exists, then the function will return the index value of the element, else it will return -1

Syntax

put-array-or-string-here.indexOf()

Code

//code to check if a value exists in an array using javascript indexOf
var fruits_arr = ['Apple','Mango','Grapes','Orange','Fig','Cherry'];

var string = "Orange";

// Find in Array
fruits_arr.indexOf('Tomato');

fruits_arr.indexOf('Grapes');

// Find in String
string.indexOf('g');

Output

-1
2
4

If you are using modern browsers you may also use the includes() function instead of the indexOf() function
If you are using modern browsers you may also use the includes() function instead of the indexOf() function

Like indexOf() function, theincludes() function also works well with primitive types.

const symbol = Symbol('symbol');

const array = [
  'hello',
  300,
  0,
  undefined,
  null,
  symbol
];

Using includes( )

//code to check if a value exists in an array using includes function
array.includes('hello'); // true
array.includes(300); // true
array.includes(0); // true
array.includes(undefined); // true
array.includes(null); // true
array.includes(symbol); // true

Using indexOf()

array.indexOf('hello') !== -1; // true
array.indexOf(300) !== -1; // true
array.indexOf(0) !== -1; // true
array.indexOf(undefined) !== -1; // true
array.indexOf(null) !== -1; // true
array.indexOf(symbol) !== -1; // true

Word of Caution

Case Sensitivity

Both includes() and indexOf()function are case sensitive

const array = ['MANGO'];
array.includes('mango'); // false
array.indexOf('mango') !== -1; // false

You can make it case insensitive by changing the case of the array

const array = ['MANGO'];

const sameCaseArray = array.map(value => value.toLowerCase());
// ['mango']

sameCaseArray.includes('mango'); // true
sameCaseArray.indexOf('mango') !== -1; // true

For a more versatile solution, you can check out using the .some() function which works well for a diverse array of data types.

Caveat of IndexOf()

One place where indexOf() and includes() differ is shown below

const array = [NaN];

// 😄
array.includes(NaN); // true

// 😞
array.indexOf(NaN) !== -1; // false

Browser Support

includes() function is not supported by IE and in that case you might want to use the indexOf() function to check if there is a value in a given array but keep in mind the caveat and limitations of the indexOf() function.

How to disable or enable buttons using javascript and jQuery?

tutorials-kept-simple — Mon, 09 Nov 2020 12:09:41 +0000

Let us learn how to enable or disable buttons using javascript and jQuery based on whether the input field is filled or empty.

If you are a beginner or not very familiar with javascript or jQuery, we recommend that you go through the entire article. However, if you are just looking for the code, click here!

Introduction to disabling/enabling buttons
Code Implementation using Javascript and jQuery
Visualization

Introduction to disabling/enabling buttons

Often while filling out web forms have you noticed how the submit button just won't work unless we have filled all the required fields?

This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.

Do you wish to implement such a feature on your web form too? Read on!

Before diving into the code let us first look at the logic behind toggling between different states of the button.

Logic behind toggling between disabled and enabled states of buttons

Set button to disabled state in the beginning
If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)
If the input value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE).

Below, we are going to see how to disable/enable a button with one required text field implemented using Javascript and jQuery.

Code Implementation for changing the state of the button

1. Using Javascript

A) HTML

Add the following HTML Code to your editor

//defining button and input field
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>

Code Explanation

Using the above code we have defined two HTML elements namely an input text field and a button.

B) Javascript Code

//Program to disable or enable a button using javascript
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");

button.disabled = true; //setting button state to disabled

input.addEventListener("change", stateHandle);

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true; //button remains disabled
  } else {
    button.disabled = false; //button is enabled
  }
}
</script>

Code Explanation

Now, using javascript we store a reference to each element, namely input, and button.
By default a button's state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.
Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.
Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.
The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input field.
The function compares the value of the input field (the text field) with an empty string.
If the user has not typed anything, then the text field will be equal ( === ) to the empty string and the button will remain disabled (disabled = true).
If the user inputs text in the input field, then the button will get enabled (disabled = false).

Complete Code

<html>
<body>
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
</body>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}
</script>
</html>

Output

A) Inactive State

The button is disabled as the text field is empty

B) Active State

The button is enabled as the text field is not empty

Using jQuery to enable/disable a button

<html>
<head>
    <title>jQuery - Enable or Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
      Name: <input type="text" id="tbName" />
    <input type="submit" id="submit" disabled="disabled" />
</body>

<script>
    $(document).ready(function () {
        $('#tbName').on('input change', function () {
            if ($(this).val() != '') {
                $('#submit').prop('disabled', false);
            }
            else {
                $('#submit').prop('disabled', true);
            }
        });
    });
</script>
</html>

For the jQuery method too, we start by creating an HTML button and text field (submit and tbName respectively) and setting the button to disabled state initially.
Here the ready() function is used to make the function available once the document has been loaded. 3. The .on() method in jquery attaches the event handler to the input field (tbName).
The change event will check for changes in the input field and run the function accordingly.
Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled.
Here the .prop() method is used to change the state of the button.

Visualization

You can play around with the above code using this editor and see which part of the code does what. You can also try out different CSS options for the button etc.

How to check if an array is empty using Javascript?

tutorials-kept-simple — Sat, 07 Nov 2020 13:11:43 +0000

We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In this article, we will solve for a specific case: To check if an array is empty using Javascript.

Where can we use this?

You might find this useful when you want to execute a particular script if the array is empty - like enabling or disabling buttons based on if there is any input in the required field, etc.

If you are new to programming or quite unfamiliar with javascript, we recommend you read through the entire article, as each section of the article would be useful.

However, if you are just looking for the code, you can quickly check out the section below.

Code Implementation to check if an array is empty or not using Javascript
Browser Support

Code to check if an array is empty using javascript

We will quickly go over the code and its demonstration to check if an array is empty or not and also see why these specific functions are used.

//To check if an array is empty using javascript
function arrayIsEmpty(array){
    //If it's not an array, return FALSE.
    if(!Array.isArray(array)){
        return FALSE;
    }
    //If it is an array, check its length property
    if(array.length == 0){
        //Return TRUE if the array is empty
        return true;
    }
    //Otherwise, return FALSE.
    return false;
}

Code Explanation

Let's breakdown this code step by step!

First we check if a variable is an array using the Array.isArray() method.
If the variable passed is an array then the condition !Array.isArray() will be False and so the variable will go to the else condition.
If the variable passed is anything but an array such as, undefined or another variable type such as a string or object, the function will return False.
Having confirmed that the variable is an array, now we can check the length of the array using the Array.length property.
If the length of the object is 0, then the array is considered to be empty and the function will return TRUE.
Else the array is not empty and the function will return False.

Demonstration of checking if the array is empty using Javascript

var fruitArr = new Array('Apple', 'Mango', 'Grapes');

//An example of a JavaScript array that is empty.
var arrTwo = new Array();

console.log(arrayIsEmpty(fruitArr)); //returns FALSE
console.log(arrayIsEmpty(arrTwo)); //returns TRUE

Output

FALSE
TRUE

Output Explanation

We can see here that fruitArr is an array and hence passes into the second condition to check if the length of the array is empty.
Since the array has 3 elements it is not empty and therefore the function returns False.
In the second case, arrTwo, it is again an array and so passes into the second condition.
Here, since the array is empty, the function returns True.

Why use the Array.isArray() method?

The Array.isArray() method is a sure shot method to check if a variable is an array or not and it automatically eliminates the cases of null and undefined without writing an additional script to check for it.

The Array.isArray() method returns true for the following cases

Array.isArray([]);
Array.isArray([3]);
Array.isArray(new Array());
Array.isArray(new Array('apple', 'mango', 'grapes'));
Array.isArray(new Array(5));
Array.isArray(Array.prototype);

Note: Array.prototype itself is an array so the function Array.isArray() returns TRUE.

The Array.isArray() returns False for the following cases

Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(21);
Array.isArray('Random String');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32));
Array.isArray({ __proto__: Array.prototype });

Can we use typeof instead of the Array.isArray?

The answer is NO, because an array in JavaScript is an instance of the Array object and typeof would return the type object for it.

To illustrate this, consider for example:

const array = ['a', 'b', 'c'];

console.log(typeof array);   // output: 'object'

console.log(array instanceof Array); // output: true

Can we use instanceof instead of Array.isArray?

While instanceof can be used for most cases in place Array.isArray , the Array.isArray is preferred over instanceof as it works through multiple contexts (such as frames or windows) correctly whereas instanceof does not.

The reason for this is that in javascript each window or frame has its own execution environment, thus having a different scope from each other. This means that they have different built-in objects (i.e. different global objects, different constructors, etc.). This may lead to unexpected results when using instanceof, for example, for scripts passing objects from one context to another via functions.

Considering such cases, it is best to simply use Array.isArray, especially when creating a framework, library, or a plugin, where the environment in which it will be used is not known in advance.

Using the length property

Once we have made sure we are dealing only with an array, we can easily check if the array is empty or not using the length property. If the length of the array is 0, then the array is empty otherwise it is not empty.

One obvious question we might have is why not just use the length property at the beginning itself? Won't it make the code simpler?

True, but length property can return that the variable is empty even for non-array variables so we need to ensure that we are dealing with an array first before using the length property.

Browser Support

The Array.isArray method has very good browser support as it is part of the ES5 specification. However, if the browsers you're targeting lack the support, you can use a polyfill for it which is given below.

The polyfill works well with browsers that are compatible with ES3 specifications and works across frames.

if (!Array.isArray) {
    Array.isArray = function(arg) {
        return Object.prototype.toString.call(arg) === '[object Array]';
    };
}

Check if a number is Prime or not

tutorials-kept-simple — Fri, 06 Nov 2020 11:11:25 +0000

In this tutorial let us look at different methods to check if a number is prime or not in JavaScript and understand where exactly are these useful.

A prime number is a natural number greater than 1 that cannot be obtained by multiplying two smaller natural numbers. All the other nonprime natural numbers greater than 1 are called composite numbers.

Examples of Prime numbers: 2,3,5,7,11,13 etc.
Examples of Composite numbers: 4,6,8,9,10,12,14 etc.

Where are prime numbers used in real life?
Code

Where are prime numbers used in real life?

Prime numbers are used widely in cryptography and in-turn in encryption. Check out this article to get a clear understanding. Prime numbers are also used in computer-generated pseudo-random numbers.

Code

Version 1

This version is very slow and but has the least number of lines of code. It checks if n is divisible by every integer up to the square root of the passed value. Before doing this it checks whether a value is NaN or not. NaN values are generated when arithmetic operations result in undefined or unpresentable values. The isNaN() function is used for this. It also checks if the value passed is finite or not by using the isFinite() function.

//isPrime Javascript Version 1
function isPrime1(n) {
 if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
 var m=Math.sqrt(n); //returns the square root of the passed value
 for (var i=2;i<=m;i++) if (n%i==0) return false;
 return true;
}

console.log(isPrime1(7)); //Output: True
console.log(isPrime1(6)); //Output: False

Version 2

This version relatively better than the first one. It first checks if the passed value is an even number or not. After this, it proceeds to check odd divisors only, from 3 up to the square root of the passed value. At most half of the numbers between 3 and the square root of the passed value are checked.

//isPrime Javascript Version 2
function isPrime2(n) {
 if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
 if (n%2==0) return (n==2);
 var m=Math.sqrt(n);
 for (var i=3;i<=m;i+=2) {
  if (n%i==0) return false;
 }
 return true;
}

console.log(isPrime2(7)); //Output: True
console.log(isPrime2(6)); //Output: False

Version 3

This version is even better. The following checks are performed in addition to the previous versions before checking the rest of the devisors in the loop.
Check 1: If n is divisible by 2 or 3.
Check 2: Check only the odd divisors that are not multiples of 3.
In this version, at least two-thirds of divisors up to the square root of n are eliminated(i.e. All the multiples of 2 & 3 are eliminated)

//isPrime Javascript Version 3
function isPrime3(n) {
 if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
 if (n%2==0) return (n==2);
 if (n%3==0) return (n==3);
 var m=Math.sqrt(n);
 for (var i=5;i<=m;i+=6) {
  if (n%i==0)     return false;
  if (n%(i+2)==0) return false;
 }
 return true;
}

console.log(isPrime3(7)); //Output: True
console.log(isPrime3(6)); //Output: False

Version 4

This is the fastest of all the versions. In addition to 2 and 3, multiples of 5 are also eliminated in the loop. The result of this would be that we end up checking at max quarter numbers between 2 and the square root of n.

//isPrime Javascript Version 4
isPrime = function(n) {
 if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
 if (n==leastFactor(n)) return true;
 return false;
}

leastFactor = function(n){
 if (isNaN(n) || !isFinite(n)) return NaN;
 if (n==0) return 0;
 if (n%1 || n*n<2) return 1;
 if (n%2==0) return 2;
 if (n%3==0) return 3;
 if (n%5==0) return 5;
 var m = Math.sqrt(n);
 for (var i=7;i<=m;i+=30) {
  if (n%i==0)      return i;
  if (n%(i+4)==0)  return i+4;
  if (n%(i+6)==0)  return i+6;
  if (n%(i+10)==0) return i+10;
  if (n%(i+12)==0) return i+12;
  if (n%(i+16)==0) return i+16;
  if (n%(i+22)==0) return i+22;
  if (n%(i+24)==0) return i+24;
 }
 return n;
}

console.log(isPrime(7)); //Output: True
console.log(isPrime(6)); //Output: False

findIndex method: JavaScript array

tutorials-kept-simple — Thu, 05 Nov 2020 12:30:33 +0000

JavaScript methods are actions that can be performed on objects. Today, let us understand how the findIndex() method works. This method was added to the array.prototype() in the JavaScript ES6. The prototype constructor allows you to add new properties and methods to the Array() object.

Syntax & Explanation
Example Code
Browser Support

Syntax and explanation

The findIndex() method returns the index of the first element in array that satisfies the given testing function. If no element of the array satisfies the testing condition, it returns -1.

The syntax of the findIndex() method is as follows

findIndex(testfunc(currentValue, index, arr), thisValue)

The above findIndex() method takes two arguments:
A. testfunc
B. thisValue

A. testFunc

The testFunc() is a function that is used to execute a condition on each element of the array until the function returns true, indicating that the element satisfying the condition was found.

The testFn() takes three arguments:

currentValue: This indicates the current element in the array being processed.
index: Indicates the index of the current element being processed.
arr: This is the array that the findIndex() was called upon.

B. thisValue

It is an optional argument that is passed to the function and used as its "this" value. If it is empty, the value "undefined" will be passed as its "this" value. In JavaScript, "this" keyword refers to the object it belongs to.

The findIndex() executes testFunc() for every element of the array and if true is returned by the testFunc(), findIndex() returns the index of that element and does not check for the rest of the array elements

Example Code

The following example uses findIndex() method to find the first occurrence of a prime number in a given array.

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start < 1) {
      return false;
    } else {
      start++;
    }
  }
  return element > 1;
}

console.log([4, 6, 16, 32].findIndex(isPrime));
//Output: -1, not found
console.log([4, 7, 6, 12].findIndex(isPrime));
//Output:  1 (array[1] is 7)

Browser Support

Google Chrome 45.0 and above
Mozilla Firefox 25.0 and above
Microsoft Edge 12.0 and above
Internet Explorer does not Support findIndex() method
Safari 7.1 and above
Opera 32 and above

Get the last element of an array using JavaScript

tutorials-kept-simple — Wed, 04 Nov 2020 12:24:41 +0000

In this tutorial, we take a look at understanding different methods of accessing the last element of an array

If you are new to programming or JavaScript, we recommend you read through the entire article. However, If you are just looking for the code, you can skip to the code section below

An array is a container object that holds a fixed number of values of a single type. An array’s length, once created, would remain constant/fixed. Now that we have a basic idea of what an array is, let's find the last element in an array.

Code
- Using array length property
- Using the slice method
- Using the pop method
Performance

Code

1) Using the array length property

The length property returns the number of elements in an array. Subtracting 1 from the length of an array gives the index of the last element of an array using which the last element can be accessed. The reason we are subtracting 1 from the length is, in JavaScript, the array index numbering starts with 0. i.e. 1st element's index would 0. Therefore the last element's index would be array length-1.

let arry = [2, 4, 6, 8, 10, 12, 14, 16];
let lastElement = arry[arry.length - 1];

console.log(lastElement);
//16

2) Using the slice() method

The slice() method returns specific elements from an array, as a new array object. This method selects the elements starting at the given start index and ends at the given end index excluding the element at the end index. The slice() method does not modify the existing array. Providing one index value returns the element at that position & a negative index value calculates the index from the end of the array.

let arry = [2, 4, 6, 8, 10, 12, 14, 16];
let lastElement = arry.slice(-1);

console.log(lastElement);
//16

3) Using the pop() method

The pop() method pops/removes the last element of an array, and returns it. This method changes the length of the array.

let arry = [2, 4, 6, 8, 10, 12, 14, 16];
let lastElement = arry.pop();

console.log(lastElement);
//16

Performance

Let us now use all three methods on an array to get the last element and check which method is the fastest

let arry = [2, 4, 6, 8, 10, 12, 14, 16];
console.time('array length property');
let lastElement = arry[arry.length - 1];
console.log(lastElement);
console.timeEnd('array length property');

console.time('array slice method');
let lastElement1 = arry.slice(-1);
console.log(lastElement1);
console.timeEnd('array slice method');

console.time('array pop method');
let lastElement2 = arry.pop();
console.log(lastElement2);
console.timeEnd('array pop method');

//Output:
//16
//array length property: 13.798ms
//[ 16 ]
//array slice method: 8.839ms
//16
//array pop method: 0.138ms

As you can see, the pop() method is fastest. You can use it if you are fine with modifying the array. If you don't want to change the array, the slice() method can be used.

Check if a variable is of function type or not

tutorials-kept-simple — Tue, 03 Nov 2020 10:11:26 +0000

A JavaScript function is a block of code designed to perform a particular task. It is executed when it is invoked(when something calls it). A function can be either a named or an anonymous one. This article talks about how to go about checking whether a variable is of 'Function' type or not. Before we understand the different methods of implementing this and also why anyone would want to assign a function to a variable let's look at how named and anonymous functions are declared.

Function declaration types
Advantage of assigning a function to a variable
Code
Caveats

Function declaration types

Named Function declaration

This function has a named identifier associated with it which can be used to invoke the function

function functionName(parameter1, paramter2) {//code}

Anonymous Function declaration

It is a function that is declared without any named identifier to refer to it.

var anon = function(){//code }

Advantage of assigning a function to a variable

Assigning a function to a variable allows us to pass this variable as a parameter to another function. This is particularly useful in scenarios that require runtime flexibility. You would mainly use such functions to run a load of code in response to an event firing For example, a button being clicked using an event handler.

myButton.onclick = function() {
 //response actions
}

Code

Using instanceof operator

The instanceof operator is used to check the type of objects at run time. This operator returns a Boolean value(true or false). In the example below, an IF statement is used to check if the type of parameter passed to checkFunction() is of Function type or not.

//javascript check if function-Using instanceof operator
<script>

// Declare a variable and initialize it // Declare a variable and initialize it with an anonymous function
var exampleVar = function(){/* A set of statements */};

// to check a variable is of function type or not
function checkFunction(x)
{

    if(x instanceof Function) {
        document.write("Variable is of function type");
    }
    else {
        document.write("Variable is not of function type");
    }
}

// Function call
checkFunction(exampleVar);

</script>

Using Strict Equality comparison (===) along with typeof operator

In JavaScript, strict equality comparison (===) Operator is used to check whether two entities are of not only equal values but also of equal type. The typeof operator returns a string which indicates the type of the unevaluated operand. Both of these operators provide a Boolean result. This result can be compared using the IF statement to check if the object type is "Function'.
//javascript check if function-Using Strict Equality comparison (===) along with typeof operator

<script>

// Declare a variable and initialize it with an anonymous function
var exampleVar = function(){/* A set of statements */};

// to check a variable is of function type or not
function checkFunction(x)
{
    if (typeof x === "function") {
        document.write("Variable is of function type");
    }
    else {
        document.write("Variable is not of function type");
    }
}

// Function call
checkFunction(exampleVar);

</script>

Using object.prototype.toString

This method uses object.prototype.toString. Every object has a toString() method, which returns ‘[object type]’ where ‘type’ is the object type. An IF statement can be used to compare if the returned value is of the type 'Function'.

//javascript check if function-Using object.prototype.toString
<script>

// Declare a variable and initialize it with an anonymous function
var exampleVar = function(){/* A set of statements */};

// to check a variable is of function type or not
function checkFunction(x)
{
    if (Object.prototype.toString.call(x) == '[object Function]')
    {
        document.write("Variable is of function type");

    }
    else {
        document.write("Variable is not of function type");
    }
}

// Function call
checkFunction(exampleVar);

</script>

Caveats

In Chrome typeof(obj) === 'function' appears to be the fastest; however, in Firefox obj instanceof Function is performs relatively better. Related Concepts

forEach vs map method in Javascript

tutorials-kept-simple — Mon, 02 Nov 2020 11:06:19 +0000

In this tutorial, let us look at two commonly used, seemingly similar array methods and compare them to see different they are. To begin with, let's quickly understand what a method is and then look at the syntax, functionality followed by comparing forEach and map methods. These methods help us iterate through arrays. In JavaScript, methods are actions that can be performed on objects.

Syntax & Explanation
Example Code
Ability to chain other methods

Syntax and explanation

1) forEach method

The forEach() method executes a provided function once for each element in an array. After executing the function for every array element, this method changes the values of the existing array elements according to the result of the provided function. Hence forEach() is a mutator method. Also, forEach method doesn’t return anything (undefined).

2) map method

The map() method, similar to the forEach() method, executes the provided function once for each element in an array. But unlike the forEach() method, it creates a new array with the results of calling a function for every array element. Hence map() method relies on immutability. Also, map() does not execute/call the function for those array elements without values.

Syntax:

array.forEach(testfunc(currentValue, index, arr), thisValue)

array.map(testfunc(currentValue, index, arr), thisValue)

Both the methods take two arguments:

1) testFunc

The testFunc() is a function that is used to execute a condition on each element of the array until the function returns true, indicating that the element satisfying the condition was found.

The testFn() takes three arguments:

currentValue: This indicates the current element in the array being processed.
index: Indicates the index of the current element being processed.
arr: This is the array that the method was called upon.

2) thisValue

The method executes testFunc() for every element of the array and if true is returned by the testFunc().

Example Code

const exampleArray = [1, 2, 3, 4, 5]
console.log(exampleArray.forEach(x => x * x * x));
//Output: (undefined)
console.log(exampleArray.map(x => x * x * x));
//Output: [1 , 8, 27, 64, 125 ]

Ability to chain other methods

Chaining methods is the ability that one can attach another method after performing one method in one continuous line of code. i.e. Repeatedly calling one method after another on an object.

One of the main differences between forEach() and map() methods is their ability to chain other methods. map() is chainable but forEach isn't. This means that one could use reduce(), sort(), and other methods after map() but that's not possible with foreach() because it returns undefined.

const exampleArray = [5, 4, 3, 2, 1]
console.log(exampleArray.forEach(x => x * x * x).sort(function(a, b){return a-b}););
//Output: Uncaught TypeError: Cannot read property 'reduce' of undefined
console.log(exampleArray.map(x => x * x * x).sort(function(a, b){return a-b}););
//Output: [1 , 8, 27, 64, 125 ]

Declaring optional function parameters in JavaScript

tutorials-kept-simple — Fri, 30 Oct 2020 13:53:05 +0000

We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In today's article, let's take a dive into how Optional Parameters in JavaScript can be implemented and also understand where exactly using them would prove to be most useful.

What are Optional Parameters?
How Optional Parameters work?
Where is it most useful?
Code
Caveats & References

What are Optional Parameters?

By definition, an Optional Parameter is a handy feature that enables programmers to pass less number of parameters to a function and assign a default value.

Firstly, let us first understand what the word Optional Parameter means. Parameters are the names listed in the function definition. They are used to define a function and are also called formal parameters and formal arguments. In the following example, parameter1 and parameter2 are parameters of the 'exampleFunction' function.

function exampleFunction(parameter1, parameter2) {
  // code
}

In this context, Optional Parameters are those parameters that need not always be passed i.e. they're optional. The next obvious question would be "What value is passed when you don't pass a parameter?". So let's answer that in our next section.

Before moving ahead, if you find anything difficult , do checkout other Flexiple tech blogs where we cover various basic JS concepts and breaking them down so that they can be easily consumed.

How Optional Parameters work?

Usually, when you don't pass parameters, 'undefined' is passed instead. But using Optional Parameters, you can define a default value. So, whenever no value or undefined is passed, a default value is passed in its place.

Before we look at different ways to implement Optional Parameters in JavaScript, let's first see where we would need them.

Where is it most useful?

Optional parameters are great for simplifying code, and hiding advanced but not-often-used functionality. If majority of the time you are calling a function using the same values for some parameters, you should try making those parameters optional to avoid repetition.

For example, assume you are using a function to perform a google search. This function accepts the following parameters
Parameter 1: searchEngineURL
Parameter 2: searchString
Now, because you always use Google search engine, you could assign a default value to the Parameter1 as Google's URL and not always pass this URL and only pass searchString each time you call the function. Hence the searchEngineURL is the optional parameter.

Code

Default function parameters

In this method, you can initialize named parameters with default values whenever no value or undefined is passed.

function add(a, b = 1) {
  return a + b;
}

console.log(add(1, 2));
// expected output: 3

console.log(add(1));
// expected output: 2

Using undefined property

Whenever no value or undefined is passed to a function, a conditional (IF) statement could be used to pass the default value instead if any of the parameters is undefined.

//optional parameters JavaScript-Using undefined property
function add(a, b) {
 if(a === undefined)
   {
      a = 1;
   }
 if(b === undefined)
   {
      b = 1;
   }
  return a + b;
}

console.log(add(1, 2));
// expected output: 3

console.log(add(1));
// expected output: 2

Using arguments variable

JavaScript functions have a built-in object called arguments. It contains an array of parameters. The length of this array gives the number of parameters passed. A conditional statement is used to check the number of parameters passed and pass default values in place of the undefined parameters.

//optional parameters Javascript-Using arguments variable
function add(a, b) {

    if(arguments.length == 0) // Means no parameters are passed
    {
      a = 1;
      b = 2;
    }

    if(arguments.length == 1) // Means second parameter is not passed
    {
      b = 2;
    }
    return a + b;
}
console.log(add(5,10));
// expected output: 15
console.log(add(5));
// expected output: 7

Using the Logical OR operator (‘||’)

In this method, the optional parameter is "Logically ORed" with the default value within the body of the function. In the example below, if the value of b is undefined, 2 is passed instead.

//optional parameters Javascript-Using the Logical OR operator (‘||’)
function add(a, b) {
   var b1 = b || 2;
   return a + b1;
}
add(5,10);
// expected output: 15
add(5);
// expected output: 7

Caveats & References

Checkout MDN's JavaScript default parameters doc for more nuances & limitations
ECMAScript 2015 allows default parameter values in the function declaration

Implementing Bubble Sort in Javascript

tutorials-kept-simple — Thu, 29 Oct 2020 10:14:07 +0000

In this article, we cover breakdown Bubble Sort and then also share its implementation in Javascript.

Firstly, let's get it out of the way. When we say "sort", the idea is to re-arrange the elements such that they are in ascending order.

If you are new to the concept of sorting, each section of the article would be useful - concept of bubble sort, its algorithms, efficiency, etc. However, If you are here to refresh your knowledge, jump straight to the javascript implementation of the sort.

Explanation of Bubble Sort
Code - Implementing Bubble Sort using Javascript
Visualization
Complexity of Bubble Sort

Explanation of Bubble Sort

If you are a newbie to sorting, Bubble sort is a great place to start! It is one of the more intuitive sorting methods as its algorithm mirrors how our brain generally thinks about sorting - by comparing.

Let's remove the vagueness and delve deeper into it.

A. What Bubble Sort Does?

To achieve sorting in Bubble Sort, the adjacent elements in the array are compared and the positions are swapped if the first element is greater than the second. In this fashion, the largest value "bubbles" to the top.

Usually, after each iteration the elements furthest to the right are in correct order. The process is repeated until all the elements are in their right position.

B. What Bubble Sort Does?

Starting with the first element, compare the current element with the next element of the array.
If the current element is greater than the next element of the array, swap them.
If the current element is less than the next element, just move to the next element.
Start again from Step 1.

C. Illustrating the Bubble sort method

Iteration 1: [6,4,2,5,7] → [4,6,2,5,7] → [4,2,6,5,7] → [4,2,5,6,7] → [4,2,5,6,7]

Iteration 2:[4,2,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7]

Iteration 3: [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7] → [2,4,5,6,7]

Other Alternatives

As you might have noticed, Bubble Sort only considers one element at a time. Thus, it is highly time consuming and inefficient. Due to its inefficiency, bubble sort is almost never used in production code.

You can use a built in function Array.prototype.sort() for sorting. This is an inplace algorithm just like bubble sort which converts the elements of the input array into strings and compares them based on their UTF-16 code unit values. Also, if you are interested, you can read about index sort which is another simple comparison based sort method that has a better performance than Bubble sort.

Implementing Bubble Sort using Javascript

Now as we have seen the logic behind bubble sort, we can write the code for it in a straightforward manner, using two nested loops.

let bubbleSort = (inputArr) => {
    let len = inputArr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            if (inputArr[j] > inputArr[j + 1]) {
                let tmp = inputArr[j];
                inputArr[j] = inputArr[j + 1];
                inputArr[j + 1] = tmp;
            }
        }
    }
    return inputArr;
};

As you can see here, the sorting function will run until the variable "i" is equal to the length of the array. This might not be the most efficient solution as it means the function will run on an already sorted array more than once.

A slightly better solution involves tracking a variable called "checked" which is initially set to FALSE and becomes true when there is a swap during the iteration. Running this code on a do while loop to run the sorting function only when "checked" is true ensures that the function will not run on a sorted array more than once.

let bubbleSort = (inputArr) => {
    let len = inputArr.length;
    let checked;
    do {
        checked = false;
        for (let i = 0; i < len; i++) {
            if (inputArr[i] > inputArr[i + 1]) {
                let tmp = inputArr[i];
                inputArr[i] = inputArr[i + 1];
                inputArr[i + 1] = tmp;
                checked = true;
            }
        }
    } while (checked);
    return inputArr;
 };

Visualization

If you are finding it hard to visualize Bubble Sort, you can check this website https://visualgo.net/bn/sorting?slide=1.

You can play around with the code and see the specific function of each part of the code and how they play together to get the final sorted array.

Complexity of Bubble Sort

The worst case scenario: quadratic O(n²): this is the case when every element of the input array is exactly opposite of the sorted order.

Best case scenario: linear O(n): when the input array is already sorted. Even in this case, we have to iterate through each set of numbers once.

The space complexity of Bubble Sort is O(1).

Average or Arithmetic mean of an array using Javascript

tutorials-kept-simple — Wed, 28 Oct 2020 15:32:57 +0000

The goal of this article is to calculate the average of an array using JavaScript. Before we do that, let’s quickly understand what the terms ‘Average’ & ‘Array’ mean.

Average or Arithmetic mean is a representation of a set of numbers by a single number. Its value can be obtained by calculating the sum of all the values in a set and dividing the sum by the number of values.

For example:

Consider the following set of numbers: 1, 2, 3 & 4
Average/Mean = (1+2+3+4)/4

An array is a container object that holds a fixed number of values of a single type. An array’s length, once created, would remain constant/fixed.

You can go through other basic concepts of object-oriented programming such as looping, conditional statements, user-defined functions, and classes to understand this blog better.

Explanation
Code - Getting average of an array using JavaScript

Explanation

Simple approach to finding the average of an array

We would first count the total number of elements in an array followed by calculating the sum of these elements and then dividing the obtained sum by the total number of values to get the Average / Arithmetic mean

Breaking down the array average algorithm

Mean of an array can be obtained in 3 steps:

Step 1: Finding the total number of elements in an array (basically, its length)
This can be obtained by calculating the length of the array using the length method.

Step 2: Finding the sum of all the elements of an array (sum)
We would need to traverse the array to find the sum. We initialize a variable called ‘total’ and loop over the array and add each element of the array to the ‘total’ variable

Step 3: Dividing the values obtained in Step 1 & 2.(sum/length)

<>Code - Getting average of an array using JavaScript

class Avg{
    constructor(){}

    static average(array){
        var total = 0;
        var count = 0;

        jQuery.each(array, function(index, value){
            total += value;
            count++;
        });

        return total / count;
    }
}

var arry = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
console.log(Avg.average(arry));

Alternate Methods

Using Foreach loop

arry = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function calculateAverage(array){
    var total = 0;
    var count = 0;

    array.forEach(function(item, index){
        total += item;
        count++;
    });

    return total / count;
}

console.log(calculateAverage(arry));

Using jQuery

var arry = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var total = 0;
var count = 0;

jQuery.each(arry , function(index, value){
    total += value;
    count++;
});

console.log(total / count);

Using a function

var arry = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function calculateAverageOfArray(array){
    var total = 0;
    var count = 0;

    jQuery.each(arry , function(index, value)
    {
        total += value;
        count++;
    });

    return total/count;
}

console.log(calculateAverageOfArray(arry));

Using a class

class Avg{
    constructor(){}

    static average(array){
        var total = 0;
        var count = 0;

        jQuery.each(array, function(index, value){
            total += value;
            count++;
        });

        return total / count;
    }
}

var arry = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
console.log(Avg.average(arry));

DEV Community: tutorials-kept-simple

'Single' vs "Double" quotes for strings in javascript

Table of Contents

Difference between the two quoting styles

Some of the other key points that both styles of quoting are as follows:

Choosing the right quoting style

Quote within a quote

Points to remember

Single vs Double Quotes - Pros and Cons

Pros

Cons

Popular Quoting Style

Parting words

How to check if a value exists in an array using JavaScript?

Where can we use this?

Table of Contents

Code Implementation

1) Using jQuery

2) Using Javascript

Word of Caution

Caveat of IndexOf()

Browser Support

How to disable or enable buttons using javascript and jQuery?

Table of Contents

Introduction to disabling/enabling buttons

Logic behind toggling between disabled and enabled states of buttons

Code Implementation for changing the state of the button

1. Using Javascript

A) HTML

Code Explanation

B) Javascript Code

Code Explanation

Complete Code

Output

A) Inactive State

B) Active State

Using jQuery to enable/disable a button

Visualization

How to check if an array is empty using Javascript?

Where can we use this?

Table of Contents

Code to check if an array is empty using javascript

Code Explanation

Demonstration of checking if the array is empty using Javascript

Output

Output Explanation

Why use the Array.isArray() method?

Can we use typeof instead of the Array.isArray?

Can we use instanceof instead of Array.isArray?

Using the length property

Browser Support

Check if a number is Prime or not

Table of Contents

Where are prime numbers used in real life?

Code

Version 1

Version 2

Version 3

Version 4

findIndex method: JavaScript array

Table of Contents

Syntax and explanation

A. testFunc

B. thisValue

Example Code

Browser Support

Get the last element of an array using JavaScript

Table of Contents

Code

1) Using the array length property

2) Using the slice() method

3) Using the pop() method

Performance

Check if a variable is of function type or not

Table of Contents

Function declaration types

Named Function declaration

Anonymous Function declaration

Advantage of assigning a function to a variable

Code