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.
- Regular Function: Same as other languages.
- 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 🙂