Introduction With Basic JavaScript

Nur A Alam Khan
The Startup
Published in
9 min readNov 2, 2020

The world’s most misunderstood programming language is JavaScript but JavaScript is now used by an incredible number of high-profile applications. So, it’s an important skill for any web or mobile developer to enrich the deeper knowledge in it.

Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.

Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes, instead of classes. JavaScript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object.

Let’s start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript’s types are:

· Number

· String

· Boolean

· Function

· Object

· Symbol

and undefined and null, which are … slightly odd. And Array, which is a special kind of object. Date and RegExp, which are objects that you get for free. And to be technically accurate, functions are just a special type of object. So the type of diagram looks like this:

· Number

· String

· Boolean

· Function

· Symbol

· Object

· Function

· Array

· Date

· null

· undefine

And there are some built-in Error types as well. Things are a lot easier if we stick with the first diagram, however, so we'll discuss the types listed there for now.

(Here are just short descriptions and functionalities of javascript you have to learn them in detail.)

1. Numbers

Numbers in JavaScript are “double-precision 64-bit format IEEE 754 values”, according to the spec — There’s no such thing as an integer in JavaScript (except BigInt, BigInt is a built-in object that provides a way to represent whole numbers larger than 253 - 1, which is the largest number JavaScript can reliably represent with the Number primitive and represented by the Number.MAX_SAFE_INTEGER constant. BigInt can be used for arbitrarily large integers) so you have to be a little careful.)

Example:

console.log(5/2); // 2.5 not 2

console.log(Math.floor(5/2)); // 2

So an apparent integer is in fact implicitly a float.

Using parseInt() function we can convert string to integer & also use the unary + operator to convert values to numbers

Example:

parseInt ( ‘213’ , 10 ); // 213

parseInt ( ‘010’ , 10 ); // 10

using unary operator:

+ ’ 50 ’; // 50

+ ‘ 100 ’; // 100

Using parseFloat() function we convert in float. And it always uses base 10.

A special value called NaN (short for "Not a Number") is returned if the string is non-numeric and NaN is toxic. If you provide it as an operand to any mathematical operation, the result will also be tested for NaN using the built-in isNaN() function.

Example:

parseInt( ‘Murad’ , 10); //NaN

NaN + 25; //NaN

isNan(NaN); // true

isNan(undefine); // false

Some Math function:

· Math.abs(): This function returns the absolute value of a number.

· Math.ceil(): This the function always rounds a number up to the next largest integer. Math.ceil(null) returns integer 0 and does not give a NaN error.

· Math.floor(): This the function returns the largest integer less than or equal to a given number.

· Math.min(): This returns the lowest-valued number passed into it, or NaN if any parameter isn't a number and can't be converted into one.

· Math.max(): function returns the largest of the zero or more numbers given as input parameters.

· Math.random(): This function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.

· Math.round(): This function returns the value of a number rounded to the nearest integer.

· Math.sqrt(): This function returns the square root of a number

2. String

Strings in JavaScript are sequences of Unicode characters. More accurately, they are sequences of UTF-16 code units; each code unit is represented by a 16-bit number. Each Unicode character is represented by either 1 or 2 code units. Strings are useful for holding data that can be represented in text form.

Some of the most-used operations on strings are to check their length, to build and concatenate them using the + and += string operators. checking for the existence or location of substrings with the indexOf() method, or extracting substrings with the substring() method.

a. chaeAt(): To access an individual character in a string.

b. concat(): This method concatenates the string arguments to the calling and returns a new string.

c. includes(): Thismethod determines whether one string may be found within another string returning true or false.

d. endsWith(): This method determines whether a string ends with the characters of a specified string, returning true or false as appropriate

e. indexOf(): This method returns the index within the calling string object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

f. lastIndexOf(): This method returns the index within the calling string object of the last occurrence of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.

g. replace(): This method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

h. slice(): This method extracts a section of a string and returns it as a new string, without modifying the original string.

i. split(): This method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

j. startsWith(): This method determines whether a string begins with the characters of a specified string, returning true or false as appropriate.

k. substr(): This method returns a portion of the string, starting at the specified index and extending for a given number of characters afterwards.

l. toLowerCase(): This method returns the calling string value converted to lower case.

m. toUpperCase() : This method returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one).

n. trim(): This method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters.

o. trimStart():This method removes whitespace from the beginning of a string. trimLeft() is an alias of this method.

p. trimEnd(): This method removes whitespace from the end of a string. trimRight() is an alias of this method.

3. Boolean:

JavaScript has a boolean type, with possible values true and false. Any value can be converted to a boolean according to the following rules:

a. False: false, 0, empty strings (“ ”), NaN, null, and undefined

b. True: All other values become.

Example:

Boolean(‘ ’); //false

Boolean(123); //true

4. null:

JavaScript distinguishes between null, which is a value that indicates a deliberate non-value. Which is accessible through the null keyword.

5. undefined:

undefined, which is a value of type undefined that indicates an uninitialized variable — that is, a value hasn't even been assigned yet. This is actually a constant.

6. Variables:

variables in JavaScript are declared using one of three keywords:

a. let : let allows you to declare block-level variables. The declared variable is available from the block it is enclosed in.

b. const : const allows you to declare variables whose values are never intended to change. The variable is available from the block it is declared in.

c. ver : var is the most common declarative keyword. It does not have the restrictions that the other two keywords have. This is because it was traditionally the only way to declare a variable in JavaScript. A variable declared with the var keyword is available from the function it is declared in.

7. Objects

There are two basic ways to create an empty object:

var obj = new Object ();

var obj = {};

Object literal syntax can be used to initialize an object in its entirety:

var obj = {

name: ‘Carrot’,

_for: ‘Max’, // ‘for’ is a reserved word, use ‘_for’ instead.

details: {

color: ‘orange’,

size: 12

}

};

Attribute access can be chained together:

obj.details.color; // orange

obj[‘details’][‘size’]; // 12

8. Array

Arrays in JavaScript are actually a special type of object. They work very much like regular objects but they have one magic property called ‘length'. This is always one more than the highest index in the array.

Example:

var a = [‘dog’, ‘cat’, ‘hen’];

a.length; // ourput: 3

Some basic function about array:

· concat(): method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

· every():method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

· filter(): method creates a new array with all elements that pass the test implemented by the provided function.

· find(): method returns the value of the first element in the provided array that satisfies the provided testing function.

· findIndex(): method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

· forEach(): method executes a provided function once for each array element.

· indexOf(): method returns the first index at which a given element can be found in the array, or -1 if it is not present.

· join(): method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

· map(): method creates a new array populated with the results of calling a provided function on every element in the calling array.

· lastIndexOf(): ethod returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex

· pop():ethod removes the last element from an array and returns that element. This method changes the length of the array.

· push():method adds one or more elements to the end of an array and returns the new length of the array.

· reduce():method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

· reverse(): method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

· shift(): method removes the first element from an array and returns that removed element. This method changes the length of the array

· slice(): method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified

· sort(): method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

· splice(): method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

· unshift(): method adds one or more elements to the beginning of an array and returns the new length of the array.

9. Function:

Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn’t be much simpler:

function add(x, y) {

var total = x + y;

return total;

}

add(); // NaN

// You can’t perform addition on undefined

add(2, 3, 4); // 5

// added the first two; 4 was ignored

10.Date

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC

--

--

Nur A Alam Khan
The Startup

Freelancer || Full Stack Developer || WordPress Expert || Content Creator