Forem: Abhishek Rath

Arrays in JavaScript

Abhishek Rath — Tue, 01 Feb 2022 19:07:21 +0000

What is an array?

An array is a finite collection of elements stored under one name.
Syntax
Example
From above example, we can note that - Array index in JavaScript starts from 0.

Accessing Array Elements

Array elements can be accessed using their index number.

Modifying Array Elements

Array elements can be modified by assigning value at some particular index to some other value
Example

Methods in Arrays

Methods allow us to manipulate arrays.
In this article we'll be looking some of them, let's go :)

1. length

As the name suggests, length returns the length of the array i.e. number of elements present in the array.

2. concat()

This method combines two arrays and returns a new array with combined elements.

3. push()

This method adds item to the end of the array.

4. pop()

Removes last item of an array, and returns the modified array.

5. slice(start, end)

This method returns selected elements in an array.
Selects elements from a given start, up to a given end (exclusive).
slice() method does not mutate the original array, but returns a new array.

6. splice()

The splice() method modifies an array, by adding, removing and inserting elements.
Syntax
- index here is the starting point for removing elements from the array.
- count specifies the number of elements to be deleted from the given index. This is optional parameter.
- value specifies the value to be added to the original array
- In above example, count parameter is set to 0, therefore it doesn't remove any elements from the array.
- value parameter Cedric is added to array at position 1.

7. reverse()

As the name says, reverse() method reverses the order of elements in the array.
reverse() method modifies the original array.

8. join()

Returns array as string.
Doesn't modify the original array.
join() method accepts an optional parameter - a separator.
Any separator can be specified. The default is comma (,).
Example with separator

9. map(fn)

One of the most used array methods in JavaScript.
Takes in function as a parameter, and creates a new array by calling a function for every array element.
Doesn't modify the original array.
In above example, map() takes every element from the arr and applies square function to it.
Inshort, map() method, maps every elements of the array to the specified function and returns a new array.

10. filter()

Another most used array method in JS.
This method creates a new array if the elements of an array pass a certain condition.
Doesn't modify the original array.
filter method in above example filters the elements based on the function provided in as its parameter. The function returns only the even numbers from the array.
Hence, filter method creates a new array with even numbers.

11. indexOf()

indexOf() method returns the first occurence of a specified value.
Returns -1 if the value is not found.

12. lastIndexOf()

lastIndexOf() method returns the last occurence of the element in the array.
Returns -1 if the value is not found.

13. forEach()

forEach() method calls a function for every element in an array.
Very useful for iterating through an array.
In above example, forEach() takes in an arrow function as its parameter, and logs every number multplied by 100 to the console.

Summary

concat() combines two arrays together.
push() adds item(s) to the end of an array .
pop() removes the last item of an array.
splice() changes an array, by adding, removing and inserting elements.
indexOf() searches for an element in the array and returns the index of its first occurence, else it returns -1.
lastIndexOf() searches for an element and returns the last index where the item was found.
filter() creates a new array if the elements of an array pass a certain condition.
map() creates a new array by calling a function for every array element.
forEach() iterates through an array, and applies a function on every element in an array.
reverse() reverses the order of elements in the array.

Conclusion

I hope this article provides you the basics of JavaScript arrays and its methods.
This article discusses some of the basic array methods, and there are many other methods out there.

Happy Learning!!

Truthy and Falsy Values in JavaScript

Abhishek Rath — Thu, 16 Dec 2021 07:31:17 +0000

Before diving into truthy and falsy values, let us understand what boolean data type is in JavaScript?

A JavaScript Boolean denotes one of two values: true or false.
For example,

Boolean() function can be used to find out if an expression (or a variable) is true or false.

Now let us know about truthy and falsy values.

Falsy Values

Falsy values are the values that are not actually false but will produce the result as false when converted into boolean.
There are total 5 falsy values in JS - 0, undefined, NaN, null, '' .

Truthy Values

Truthy values are the values that are considered true when converted into Boolean.
All values except false, 0, undefined, NaN, null, '' are truthy values.

I hope you find this article simple and easy to understand JavaScript truthy and falsy values.

Some popular string Methods in JavaScript

Abhishek Rath — Mon, 08 Nov 2021 16:14:13 +0000

What is a String?

The sequence of one or more characters enclosed within quotation marks is called a string.
The quotation can be single quotes '' or double quotes " " or backtick ``.
And, the sequence of characters can be alphabets, numbers, symbols, etc.

Example of creating strings

Some commonly used JavaScript methods:

Length

As the name suggests, length returns the length of the string.
Note, in the above example the whitespace, comma, and exclamation mark are also part of the string.

2.charAt(index)

The charAt() returns the character at a specified index in a string.
The very first character of the string has an index of 0, the second character has index 1, and so on...

3.substring(start, end)

This method extracts the part of the string between start and end and returns the substring.

4.substr(start, length)

The substr() method returns the specified number of characters from the specified index (start parameter) from a given string.
Here, start defines the starting index from where the substring is to be extracted from the original string.
And, length defines the number of characters to be extracted from the specified start index.
Note: If the length parameter isn't given, then all the characters from start till the end of the string are extracted.

5.concat()

The concat() method joins two or more strings.
The concat() method doesn't modify the original strings, but it returns a new string.

6.toUpperCase()

The toUpperCase() method converts the strings to upper case letters.

7.toLowerCase()

The toLowerCase() method converts the strings to lower case letters.

8.slice(start, end)

The slice() method extracts and returns a part of the string from start to (excluding) the end character.
If there's no second argument specified, then the slice method extracts till the end of the string.

slice() also works on negative indices. If a negative index is specified, the string is extracted from the right end.
The negative index starts from -1 and it indicates the last character of the string, -2 is the second last character, and so on...

9.replace(substring)

The replace() method is used to replace a part of a given string with a new substring.
One important thing to note here is that the replace() method does not change the original string on which it is called upon. It simply returns a new string.

10.includes(substring)

The includes() method does a case-sensitive search on the original string to see if the specified substring is present in the string or not.
If the specified string is present, the method returns true otherwise false.

11.trim()

The trim() method removes leading and trailing whitespaces from the given string.

Conclusion

That is all from my side. I hope this article provides you with the basics of some popular string methods used in JavaScript.
Working through the examples is the best idea to understand these methods. Play with the examples.

Keep Learning!!

Functions in JavaScript

Abhishek Rath — Sat, 16 Oct 2021 17:10:38 +0000

Introduction

One day a student was plotting some mischief in a class. The professor noticed this and as a way to punish him, he asked the student to write a program to calculate square of number. After a minute, the student came to professor to show his code, it was something like this
The professor looked at the code, and asked him, "how will you solve this particular question, if ask you calculate square of 10 distinct number"?. The student replied, sir I'll write console.log(x * x) 10 times.
To this the professor said it is one way to solve a problem, but now, if ask you to solve the same problem for 20 different numbers, what will you do? The student said, I'll print square of a number 20 times, but it is very boring and tedious task.
"Exactly", said the professor. Repeating yourself in a code violates the DRY (Don't Repeat Yourself) principle and it also makes your code look ugly. Therefore, the professor said to his students, "Let us learn about a important topic called "Functions".
Let us also learn with them...

What is a Function?

Function is a group of statements that are bundled together to perform a specific task.
The syntax to create a function is -

Function Declaration

The function declaration also called as function definition consists of function keyword followed by:
- Name of the function.
- A list of parameters (optional) enclosed within the parentheses and separated by commas.
- Statements that define what the function does.
- An optional return statement.

Example:

In above code snippet, square is the function name, followed by a parameter named num enclosed in parentheses and the function body prints the square of the number.

Calling a function

In above example we have defined a function, but it doesn't execute on its own. It only specifies what the function performs.
To execute the statements specified in the body of function, you need to call it or invoke it.
To invoke a function you need to write function name and pass the parameters enclosed within the parentheses, if any.
Example: The above function can be invoked as:
This function call passes the value 5 to the num in the function declaration above.

Return Statement

A function may or may not return a value.
If function has return statement, it returns the value to the caller function.
A function can have only one return statement.
Example
In above example, the return statement returns the value of the calculated expression to the calling function.
This returned value is stored in the variable age, and the next statement prints the value of age in the console.

What are parameters?

We saw in above syntax that parameters are something that are enclosed within parentheses. But what exactly does it do ?
The parameters act as a placeholder which accepts the value passed during calling the function.
The parameters are optional, a function may or may not have them.

Benefits of using functions -

To improve readability of the code.
To follow DRY (Don't repeat yourself) principle.
Improves reusability of code, i.e. same function can be called to perform a specific task as many times it is required.

Different ways to use functions in JavaScript

Declaring a function (most commonly used and discussed above).
Function Expressions
Arrow Functions

Function Expressions

Besides function declaration, the functions can also be created using function expressions.
Such a function can be anonymous; it does not need to have a name.
Example
The function in above example doesn't have name hence it is called anonymous function.
However, the function expression can also have a name.

Arrow Functions

Also called as one liner functions.
Has a shorter syntax compared to function expressions.
The arrow functions doesn't make use of function keyword to define a function. Instead, it uses a fat arrow => to define what a function does.
Arrow functions are anonymous.
Example

Summary

The functions are very useful to write reusable code.
A function can be written in one or more ways.
Arrow functions must be avoided since they don't have a name, which causes problems while debugging.

Conclusion

That will be all from my side. I hope, this article gave you a basic idea about the functions.
Although basics of function are covered in this article, please look into MDN documentation for more details and examples.

Keep Learning!!

Strict mode in JavaScript

Abhishek Rath — Thu, 14 Oct 2021 19:25:49 +0000

What is strict mode?

Strict mode was introduced in ECMAScript5 also known as ES5 in 2009.
Adding strict mode to JavaScript code allows your code to be checked more strictly.
Allows programmer to write more secure JavaScript code.

Benefits of Strict Mode

Using strict mode in JavaScript code throws visible errors in developer console which would otherwise fail silently (shown in the examples below).
Forbids programmers to use certain syntax.
In some cases using strict mode in code can make the code to run faster.

How to enable strict mode in JavaScript?

To enable strict mode write "use strict" or 'use strict' at the beginning of JavaScript code.
The strict mode can also be used for a function.
To enable strict mode in function, "use strict" or 'use strict' must be the very first line in function body.

Common mistakes that occur in non-strict mode

Using reserved words as variable names

Wait!! Isn't "let" a reserved word in the JavaScript? Therefore it mustn't be used as a variable name according to naming an identifier rules. Here in the above code snippet JavaScript fails silently instead of throwing an error.
But, if we use strict mode, JavaScript engine will throw an error-

Using variables before declaring them

Using strict mode gives Reference Error.
To know more about the strict mode, checkout the documentation by MDN

Conclusion

That will be all from my side. I hope, this article gave you a basic idea about the strict mode.

Keep Learning!!