DEV Community

Cover image for Javascript Beginner to Advanced: Value Bomb in one Shot
server side digest
server side digest

Posted on

Javascript Beginner to Advanced: Value Bomb in one Shot

✨ Javascript is the most popular language till date and its popularity is not gonna decrease any near future. And today we'll try to get our hands dirty with all of the major JS concepts in depth.

Javascript meme

It is also popular because so many frameworks are being built using javascript.

📌 We'll cover

  • JS Functions, loops and default parameters
  • Scoping and Closures
  • Anonymous and self invoking functions
  • Callbacks and Higher order functions
  • Classes and Objects
  • Promises
  • Async Programming

And If you guys prefer video tutorials, Then follow this YouTube video.

📌 Javascript Functions

Function is a way to collate the code at one place which can be called at any place so that we don't have to write that code again and again. Functions are just to make code reusable.

JS Functions

Ways to define functions:-



// using function keyword
function add(x,y){
    return x+y;
}
console.log(add(2,3));


Enter fullscreen mode Exit fullscreen mode


// Arrow functions
const add = (x,y)=>{
    return x+y;
}

console.log(add(2,3));


Enter fullscreen mode Exit fullscreen mode


// declaring a function and giving a name
const add = function(x,y){
    console.log(x,y);
    return x+y;
}

console.log(typeof add());


Enter fullscreen mode Exit fullscreen mode

📌 Javascript Loops

Whenever you learn a language, the most common thing is loops and they are used where we have to write same and same code multiple times



// for loop
for (let i = 0; i < 5; i++) {
  console.log("Iteration: " + i);
}



Enter fullscreen mode Exit fullscreen mode


// do-while loop
let i = 0;
do {
  console.log("Iteration: " + i);
  i++;
} while (i < 5);



Enter fullscreen mode Exit fullscreen mode


// difference between while loop and do while loop is that 
// while loop checks the condition first and then runs
// if the condition gives value as true while in other one 
// i.e. do-while loop, it runs first and then checks the // condition
let i = 0;

while (i < 5) {
  console.log("Iteration: " + i);
  i++;
}


Enter fullscreen mode Exit fullscreen mode

📌 Javascript Default parameters



function add(x,y=0){
    return x+y;
}
// If no value is being passed for y, 0 will be picked
console.log(add(2,3));


Enter fullscreen mode Exit fullscreen mode

📌 Javascript Arrays

Arrays or Lists are the data structures or containers to store the different variables. In most of the languages only same data type variables are allowed to store in the array while in JS we can store all datatype variables in one array like string, nummber, boolean

  • Different methods to initialize the arrays


let arr1 = [1, 2, 3, 4, 5];
let arr2 = new Array(1, 2, 3, 4, 5);
let arr3 = Array.from([1, 2, 3, 4, 5]);


Enter fullscreen mode Exit fullscreen mode
  • Pushing and Popping the elements ```JAVASCRIPT

// push
let arr = [1, 2, 3];
arr.push(4); // Adds 4 to the end of the array
console.log(arr); // Output: [1, 2, 3, 4]

// pop
let arr = [1, 2, 3, 4];
let lastElement = arr.pop(); // Removes and returns 4
console.log(lastElement); // Output: 4
console.log(arr); // Output: [1, 2, 3]


- Iterating through the arrays

```JAVASCRIPT


// for loop
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// for-of loop
let arr = [1, 2, 3, 4, 5];
for (let element of arr) {
  console.log(element);
}

// forEach loop
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
  console.log(element);
});


Enter fullscreen mode Exit fullscreen mode

📌 Javascript Closures

JS Scoping and Closures

Here, we can see the nested functions and closures is just a concept which says inner function can access the outer function state/variables even if the outer function's execution ended.



function outer(x){
    function inner(y){
        return x+y;
    }
    return inner;
}

const outerFunction = outer(2); // Execution of outer() ended

console.log(outerFunction(3)); // even after outer() function 
// ended its execution still we can access the value 2.


Enter fullscreen mode Exit fullscreen mode

Note:- For more detailed explanation with real world examples, refer to this YouTube Video

📌 Javascript multiple parameters



function add(x, ...y){
    var result = 0;
    for(let index = 0; index<y.length; index++){
        result = result + y[index];
    }
    return x+result;
}

console.log(add(1,2,3,4,5));


Enter fullscreen mode Exit fullscreen mode

Here, we can see if multiple parameters are being passed they will be stored as in array.

JS Meme

📌 Anonymous and self invoking functions

Anonymous functions are the functions with having no name. For ex:-



function foo(bar){
    console.log("I am foo")
    bar(); // callback

}

foo(function(){
    console.log("I am bar")
})


Enter fullscreen mode Exit fullscreen mode

Here, the argument that we are passing to foo() is an anonymous function having no name. And interestingly here we can see that we can pass functions as a parameter too in JS. This is the biggest advantage of using JS.

🚀 Self invoking functions are the functions that we don't need to call explicitly. These self invoking functions are used in cases like fetching the products from the DB on the start of the website. Where function will be invoked automatically and also it increases the code readibility.



(function fetchItems(){
    console.log("Hello there");
    // fetch the items from the DB
})();


Enter fullscreen mode Exit fullscreen mode

📌 Callbacks

Callbacks are just the functions that are being passed to an another function and then we call from there.



function foo(bar){
    console.log("I am foo")
    bar(); // callback

}


foo(function(){
    console.log("I am bar")
})


Enter fullscreen mode Exit fullscreen mode

📌 Higher Order Functions

Higher order functions are the functions that have one or more than one function as its parameters



// filter, map, forEach --> Higher Order functions


const a = [1,2,3,4,5,6,7,8,9,10].filter(function(x){
    return x%2==0;
});
console.log(a);


Enter fullscreen mode Exit fullscreen mode

📌 Classes and Objects

Classes and Objects

Classes and Objects in JS



class Student{
    constructor(name, className){
        this.studentName = name;
        this.studentClass = className;
    }

    printDetails(){
        console.log(`My name is ${this.studentName} and my class is ${this.studentClass}`);

    }
}

const Rahul = new Student("Rahul", "12th");


Enter fullscreen mode Exit fullscreen mode

Note:- For Async Programming, Promises and more in depth concept coverage with real world examples, Follow this video

📌 Follow my Blog and Subscribe our YouTube channel. Because we are running a series of Building 10 Great projects in JS, TS and NodeJS.

✨ Build Your Resume and Ace interviews for free. THANKS and Do Support

Top comments (0)