TechFacts007.in

Basic JavaScript Concepts

Before starting, We just let you know that in this article we will cover the practical part of JavaScript and we will not discuss any definition or explanation of any topic. You can find explanations on various topics in separate articles.

Let’s Introduce JavaScript then we will start the practical part

What is JavaScript?

JavaScript is a Scripting language and it is an interpreted language. So we do not need to compile the JavaScript code. It is often called JS. It was developed to make websites more interactive and user-friendly. With the help of javascript, we can do many things on the browser window like: change any text, change any font color, or send requests to the server without reloading the web page.

In javascript, we simply create functions and call them. JavaScript is similar to other programming languages but also javascript provides some additional features that other languages do not provide.

We will cover Functions, Anonymous Functions, Arrays, and Objects in this article.

---

 

Functions in JavaScript

// Creating functions in javascript
function myFunction(){
    alert("Hello World");
}

myFunction();

 

In JavaScript, we can write any function in two different ways.

1. Regular Function: Same as other languages.
2. Arrow Function: Introduced in ES6 in 2015.

 

// Regular Function

function myFunction(){
    alert("Hello World");
}
myFunction();

// ------ OR ------

// Arrow Function

const myFunction = () => {
    alert("Hello World");
}
myFunction();

 

To learn more about arrow functions. Read this article.

 

Anonymous functions in JavaScript

Anonymous functions are those functions that are declared without any function name.  Like in the Sum function the name of the function would be “sum” or something else but in the case of an anonymous function, we do not have any function name. The main advantage of the anonymous function is that we can pass the anonymous function as a parameter to another function. An example is given below:

 

// Anonymous function example

// first we will create a named function

function myFunction(a){
    let result = null;
    if( typeof a === 'function' ){
        result = a();
    }
    return result;
}

// now call the function myFunction and pass a function as parameter
// here we are passing an anonymous function

console.log( myFunction( function(){ // Anonymous function created
    return "Hello World From Anonymous Function.");
})

 

Output: 

Hello World From Anonymous Function.

How the code is executing

We created a function with the name “myFunction” and this function accepts a parameter. The name of the parameter is “a“. Now when we are calling myFunction, we are passing an argument. The argument is a function and in “myFunction“, the parameter “a” will receive the anonymous function. In the body of “myFunction“, the anonymous function can be called by “a()“.

In the body of the anonymous function, we are returning a string, and in “myFunction” the anonymous function is calling by “a()“. The function a() is returning the string from the anonymous function and storing it into the variable “result“. After this, we are returning the variable result from myFunction.

myFunction was called from console.log(), and we all know console.log() is a print statement in JavaScript. Therefore console.log() will print that string that was returned from myFunction.

To understand the above code easily, we are writing the same code without an anonymous function.

 

function myFunction(a){
    let result = null;
    if( typeof a === 'function' ){
        result = a();
    }
    return result;
}

function hello(){
    return "Hello World From Regular Function.";
}

console.log( myFunction( hello ) );

Output:

Hello World From Regular Function.

 

Array in JavaScript

Array in javascript can be created like other programming languages. In javascript, we can create an array by using Square Brackets or by the use of Array class. Both methods are explained below in the code.

// Array in javascript

let myArray = [1, 2, 3, 4, 5]
console.log(myArray[1]); // output = 2

// -------------------------

let myArray2 = new Array("Hello", "World", "Program");
console.log(myArray2[1]); // output = Hello

 

Objects in JavaScript

JavaScript also supports objects creation. We can create an object by the use of curly brackets. The value of objects can be accessed by dot (.).

An example is given below.

// JavaScript Object Example

const myObject = {"name": "Shanu Raj", "city": "New Delhi, "country": "India"}

// -- We can write the object in multi line

const myObject = {
    "name": "Shanu Raj",
    "city": "New Delhi,
    "country": "India"
}

console.log(myObject.name); // output = Shanu Raj
console.log(myObject.country); // output = India


// ---- ANOTHER EXAMPLE ----

const myObj = {
    "name": {
        "firstName": "Shanu",
        "lastName": "Raj"
    },
    "address": {
        "city": "New Delhi",
        "country": "India"
    },
    "email": "[email protected]"
}

console.log(myObj.name.firstName); // Shanu
console.log(myObj.name.lastName); // Raj
console.log(myObj.address); // {"city": "New Delhi", "country": "India"} 
console.log(myObj.address.country); // India
console.log(myObj.email); // [email protected]

 

---

If you like this article then please comment below. Thank You 🙂