DEV Community: Adarsh Pandya

Enough JavaScript to get you Started : #19 IIFE✨

Adarsh Pandya — Fri, 29 Jan 2021 08:04:30 +0000

IIFE ✨

👉 IIFE or immediately invoked functions as expressions simply refers to a function which runs as soon as it is defined.

👉 Which means if you have to write a function which runs in beginning of your web app , you can use IIFE.

👉 in early days if we want to do something like this we need to define a function and call it...

👉 but with IIFE design pattern the syntax and the code makes much more sense.

👉 IIFE takes 2 parentheses , one is meant for defining a anonymous function and another is meant to call the anonymous function.

👉 Syntax

(
  // anonymous function
  function () {
    //function body
})();

👉 We'll create one IIFE which will greet user as soon as he/she comes to our website 😀

👉 Example : the old way

function greet () {
    alert('hello user ! how are you?');
}

greet();

👉 Example : the new way

(function(){
    alert('hello user ! how are you?');
})();

👉 Example : Arrow functions as IIFE

( () => {
      alert('hello user ! how are you?');
})();

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter /
Github

Enough JavaScript to get you Started : #18 Optional chaining and nullish coalescing

Adarsh Pandya — Tue, 26 Jan 2021 06:52:14 +0000

Optional Chanining `?.`

👉 According to MDN The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

👉 To put it more simply , let's take an example where you have to fetch data to client side from the backend, so data come in form of JSON {javaScript object notation} but sometimes due to error or wrong credentials null will be returned...

👉 So to make our code more error proof we've to do something like

// ignore next line if you don't know , assume we're fetching data from server
let data = async fetch('https://randomuser.me/api')
let name ="";

// now data may or may not come so we've to check it like 
if(data)
{
   if(data.user !== null)
   {
       if(data.user.name !== "" or data.user.name !== null)
       {
              let name = data.user.name;
       }
   }
}

👉 This code is safer but also more verbose. Our data isn’t even that deeply nested; a more complicated object might have many more levels to check.

👉 Using Optional chaining ?.

let data = async fetch('https://randomuser.me/api')

// using optional chaining
let name = data?.user?.name;

👉 As we can see optional chaning (?.) helps us to write minimal and optimized code.

👉 To make it even more simpler , optional chaining looks that if data has user object or it is null. if it finds user object it goes one level down and check for name whether it's available or not. if it finds user null it won't go one level down which results in Cannot read property 'user' of undefined

👉 Unlike manual testing with our code , it won't give us error , rather it returns undefined.

Nullish coalescing `??`

👉 According to MDN the nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

👉 in simple words ?? will return right hand side operand if the left hand value is nullish

Can't we do that with || 🤔?

👉 The answer is yes definitely but this might not work in some falsy values like "" or NaN

👉a scenario where || won't work...

let cartItems = 0;
let msg = "";

let qty = cartItems  || 10;
let message = msg|| "hi!";
console.log(qty);     // 10 and not 0
console.log(message); // "hi!" and not ""

👉the values like "" , 0 , NaN are considered to be falsy value, so logically || is doing it's job , but not serving our purpose ! hence we need to use Nullish coalescing(??)

let cartItems = 0;
let msg = "";

let qty = cartItems  ?? 10;
let message = msg ?? "hi!";
console.log(qty);     // 0 ✔
console.log(message); // "" ✔

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey Let's Connect 👋
Twitter / GitHub

Enough JavaScript to get you Started : #17 rest,spread and destructuring

Adarsh Pandya — Sun, 24 Jan 2021 06:44:42 +0000

rest and spread operator (`...`)

👉 rest and spread operators came out with release of ECMA6

👉... can be used as rest as well as spread operator

rest

👉 collects all remaining params into a single array

👉 Problem statement : write a function which can perform sum of N numbers

👉Code

const sum = (n1,n2,n3) => {
       return n1+n2+n3;
}

👉 this solution works for only 3 numbers but as per the definition we've to add N numbers

👉 now the problem is we don't know how many params are going to passed maybe 3 maybe 5 maybe 100?

👉 we can't write 100 function for 100 numbers

👉 Solution : use rest operator

👉 rest operator (...) collects all the actual values passed and then combines them into one array , so we can pass n number of params without having to write separate functions for each of problems

👉 Example

const sumOfN = (...elements) => {
     let total = 0;
     // remember rest passes array as arguement
     // we'll loop through each element and add them into total.
     for(i=0;i<elements.length;i++)
     {
             // += is short hand for 'total = total + elements[i]`
             total+=elements[i]; // will add items from array one by one
     }
     return total;
}

// let's check
sumOfN(1); // ✔ returns 1
sumOfN(1,2); // ✔ returns 3
sumOfN(1,2,3); // ✔ returns 6
sumOfN(1,2,3,4); // ✔ returns 10

👉 according to ECMA standards the param which will use rest operator need to be last in parameters

👉 Example : sumOfN(someOtherVar,...elements)

Spread operator

👉 Spread operator have similar (...) expression as rest operator but it works in different context

👉Spread operators allows us to expand elements without having to write loops explicitly

Let's understand it through example
👉 Problem statement : create a program which can merge two arrays

👉 The old way :

let arr1=[1,2,3];
let arr2 = [4,5,6];
let mergedArray = [];
for(let item of arr1)
{      
       // push method is used to push elements into array at last index
       mergedArray.push(item);
}
for(let item of arr2)
{      
       mergedArray.push(item);
}

console.log(mergedArray);
// will print [1,2,3,4,5,6]

👉 The new way with spread operator :

let arr1 = [1,2,3];
let arr2 = [4,5,6];

// '...arr1' will unpack 1,2,3 into mergedArray
// '...arr2' will unpack 4,5,6 into mergedArray
let mergedArray = [...arr1,...arr2];

console.log(mergedArray);
// will print [1,2,3,4,5,6]

👉 Spread makes it easy to work with day to day array operations

Destructuring

👉 Descructuring in JavaScript simply refers to popping out the desired values from Objects and Arrays

👉 Example : The old way

const 🐕 = {
       name : "sharron",
       color : "black",
       age : 9
}

// old way to access values
const name = 🐕.name;
const color = 🐕.color;
const age = 🐕.age;

👉 Example : The new way

const 🐕 = {
       name : "sharron",
       color : "black",
       age : 9
}

// using destructuring to extract values
const {name,color,age} = 🐕;

console.log(name); // sharron
console.log(color);  // black
console.log(age);    // age

const heros = ['iron man', 'super man', 'spider man'];

const [hero1, hero2, hero3] = heros;
console.log(hero1); // "iron man"
console.log(hero2); // "super man"
console.log(hero3); // "spider man"

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter /
Github

Enough JavaScript to get you Started : #16 var vs let vs const

Adarsh Pandya — Fri, 22 Jan 2021 06:52:44 +0000

Before we start

👉 Before we start this article i would like to clarify some technical jargons for you

👉 Scope : Scope is nothing but a code block where the variable is accessible for usage

👉 Global Scope : Global Scope means variable is declared globally (not in some condition or function) hence it can be used any where throughout the execution of program

👉 Local/ Functional Scope : this simply means that when we declare a variable on function level or somewhere locally in code block then it's not accessible outside of that particular scope (imagine variables declared in functions , loops ,conditionals...)

👉 Block Scope : Blocks are nothing but piece of code written inside any curly braces {...} [ex. if block , or function's block]

Var

👉 Var is the oldest way of declaring variable

👉 Var can be globally and functionally scoped

👉 If we Declare var inside function it becomes functionally scoped if we declare it outside function it becomes globally scoped and is available anywhere in program

👉 can be redeclared or updated

👉Example of Scope

var a = 10; // global variable

function fun()
{
    // functional scoped variable
    var b = 20;
    console.log(a);
    console.log(b);
}
fun();
console.log(a);
console.log(b);

👉 output

-> inside function
10 ✔
20 ✔
-> outside function
10 ✔
uncaught reference : b is not defined ❌

👉 Notice that functions can access both global and functional variables.

👉 Example of Re-declaration

// variables with var can be re-decalred ✔
var a = 10;
var a = 20;
// you won't get any error

👉 Example of updatable variables

// variables with var can be updated ✔
var a =10;
a=20;
// you won't get any error

👉 Problems with var

👉 Redefining variables won't throw any errors which means it's tricky to remember which variable is already there and which variable is new.

Let

👉 Let is the modern way of declaring variables introduces in ES2015

👉 Let is now recommended way of declaring variables

👉 Let is block scoped

👉 Let can be updated but not redeclared

👉Example of Declaration

// let can be updated ✔
let a = 30; ✔
a = 40; ✔
// but not redeclared ❌
let b = 40; ✔
let b = 90 ;❌

// error : Identifier 'b' has already been declared

👉Example of block scope

let sayHi = "hi";
if(sayHi === "hi")
{
    let newMsg = "how are you?";
   console.log(sayHi); // outputs "hi"
}

console.log(sayHi); ✔
console.log(newMsg); ❌ // 'newMsg is not defined'

Const

👉 Variables declared with const remains same throughout the execution

👉 variables declared with const are not redeclarable or updatable

👉 if const variables declared outside any block they becomes global scoped , but if they are declared within block they becomes block scoped

👉 values can not be changes or new values can not be assigned to const variables

👉 Example:

const sayHi = "hi";
const sayHi = "hello"; ❌ // will throw error

//and ...

const msg = "buy bread from market";
msg = "new msg here"; ❌ // error:  assignment to constant variable.

👉 But...

const numbers = [1,2,3];
number[0] = 4; ✔ // works fine

// but...
numbers = [5,6,7]; ❌ // won't work

👉 the first case will work because we're within the rules , we're not redeclaring the const variable nor we're updating it. but we're mutating it. 😀

Summary

👉 var: Global/function scoped depending on declaration undefined when accessing a variable before it's declared. can be redeclared and updated.

👉 let: block scoped. can be updated but we can't redeclare.

👉const: block scoped. can not be reassigned nor we can redeclare.

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #15 Arrow Functions

Adarsh Pandya — Thu, 21 Jan 2021 11:53:20 +0000

Arrow Functions?

👉 Since we've covered Basics of JavaScript , it's now time to move towards slightly advance things 🎉

👉Arrow Functions are compact alternatives to regular JavaScript functions

👉Arrow Functions will help you jump into modern JS concepts , and extremely helpful before learning any JS frameworks like React or Angular

Have you seen something like this?

👉 Sometimes when our code doesn't work as expected so we go to stack overflow or GitHub for finding solutions.

👉 Let's say you were getting error in Adding 2 numbers (i know you won't😂, but still)...

👉 You go to stack overflow and see something like this...

var sum = (a,b) => {
      return a+b;  
}

WTF was that? Language of gods? 🤔

👉 Let's break down this into simple function

👉 So what's written here basically, is this...

function sum(a,b)
{
       return a+b;
}

👉 Arrow function helps to reduce syntax (often known as syntactic sugar) over vanilla js by ES2016

Benefits of Array Functions

👉 Helps to reduce syntax

👉 Arrow syntax automatically binds this to the surrounding code’s context (will be covered later in series 😁)

👉 Implicit Return

What are Arrow Functions any way?

👉 Arrow function is modern way of writing normal JavaScript function which helps us in writing lesser and more meaningfulfunctions.

👉 Arrow Functions are also known as Fat Arrow Functions because of the => expression in syntax

👉 Syntax

// normal function
var functionName = function (param1,param2) {
      // function body
      // ...
      // ...
}

// arrow function
var functionName = (param1,param2) => {
       // function body
       // ...
       // ...
}

👉 in simple terminology , we assign an anonymous function to a variable where the name of variable becomes the name of function and can be called by functionName(); .

👉 Parentheses in arrow function indicates number or params our function will take (in our case there are two , namely param1 and param2)

👉 After Arrow (=>) , the curly braces indicates the start of function body , where we can write whatever we want inside it.

Examples

👉 Writing a Arrow Function which can return sum of 2 nums

// sum : name of arrow function
// n1,n2 : params of arrow function
// {...} : body of arrow function

var sum = (n1,n2) => {
      return n1+n2;
}

// can be called like : 
sum(1,2);

👉 Writing a Arrow Function which can return cube of given number


// arrow function with one param
var cube = num => {
       return num*num;
}

// can be called like : 
cube(2);

👉 Writing a Arrow Function which can will ask for user age and checks if he/she is eligible for license

// arrow function with 0 params
var licenseValidator = () => {
    var age = +prompt("what's your age ? ");
    if(age > 18)
    {
          console.log("eligilbe")
    } else {
          console.log("not eligible"); 
    }
}

Rules for Writing Arrow functions

👉 => is compulsory before function body.

👉 we've to pass empty parentheses() compulsory if function takes 0 params. (otherwise we'll end up getting error 😂).

👉 If Arrow function takes single param , then the parentheses are optional.

Bonus🎁 : Concise arrow functions

👉 Concise arrow functions are more optimized than normal arrow functions

👉 Concise arrow functions can be used where we've only return expression in our function body (no {} curly parentheses)

👉 No need to write return explicitly in concise arrow functions

👉 Not every arrow function can be converted to Concise arrow function

👉 *Example : *

// making sum arrow function concise 
var sum = (num1,num2) => num1+num2;

sum(1,3); // returns 4

var cube = num1 => num1*num2;

cube(2); // returns 4

👉 Notice we haven't converted licenseValidator to concise arrow function because that function has some amount of calculations inside it's body.

👉 That's what i meant when i wrote 'not all arrow functions can be converted to concise arrow functions'

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #14 Understanding DOM

Adarsh Pandya — Wed, 20 Jan 2021 07:15:57 +0000

What is DOM?

👉 The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

Throw this out of the window , I'm Confused 😵

👉 Okay so let me give you a simple definition which will make your concepts clear. DOM represents all the HTML hierarchy for better access in JavaScript -> DOM have document object -> which have all of our HTML elements with structure and styling.

👉 DOM is there so we can play with elements within JavaScript directly we don't need any intermediate in between HTML and JS. it represent all the HTML elements with their attributes and styling.

DOM in visual context

Need of DOM

👉 Story : consider making a greeting website which says good morning on the click of button , you can not do that with simple HTML. adding more to it , suppose you want some styling to be applied dynamically that can be only possible through DOM

👉 DOM Creates a snapshot of our HTML code with Hierarchy and can be used to play with HTML directly from JS

👉 in very very simple words , DOM is there so you can manipulate ,add ,remove elements , add / remove styling of elements , get/set/remove HTML attributes like src and href.

👉 DOM can be used for

👉 Selecting Elements

👉 Manipulating them

👉 Changing their styles and attributes

👉 Adding events statically/dynamically

👉 Traversing through child and parent elements

What we'll be covering? 📓

👉 We'll create a greeting app which will cover selecting and manipulating elements as well as styles 😁

👉 Completing whole DOM is beyond the scope of this article , i strongly suggest you to read full article on MDN

👉 We'll go through

Selecting Elements
Adding events through addEventListener
Working with attributes
Manipulating Styles

Selecting Elements

👉 Selecting Element from DOM can be tricky , though we can select elements with above mentioned techniques

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()

👉 getElementById takes name of id given in HTML and returns node so that we can change or manipulate That node with JS.

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>greet</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="hide" id="heading1">Hey , How Are you?</h1>
    <br />
    <button id="btn">get greeting</button>
    <script src="app.js"></script>
</body>

</html>

👉 in app.js

// selecting node by id
var greet = document.getElementById("heading1");
// changing text of node
greet.textContent = "Hello world";

👉 this JavaScript can select the node with "heading1" and assigns it text of "Hello World"

👉 getElementsByClassName takes className as parameter and returns list of matched nodes who're having className same as param.

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>greet</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="header">Hey , How Are you?</h1>
    <br />
    <button id="btn">get greeting</button>
    <script src="app.js"></script>
</body>

</html>

👉 in app.js

// selecting node by className
// notice we're selecting first node from the list by writing '[0]'
var greet = document.getElementsByClassName("header")[0];
// changing text of node
greet.textContent = "Hello world";

👉 getElementsByTagName takes name of tag like h1,p,a as a parameter and returns array of matching node elements from DOM tree.

👉 querySelector takes className or Id as parameter and select the first node element

👉 if we are passing a class then we've to prefix class with . like .active and if we pass id we've to pass it like #id .

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>greet</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 id="header">Hey , How Are you?</h1>
    <br />
    <button id="btn">get greeting</button>
    <script src="app.js"></script>
</body>

</html>

👉 in app.js

var greet = document.querySelector("#header");
// changing text of node
greet.textContent = "Hello world";

Changing the styling of node elements

👉 Changing the styling of node elements can be done using 2 ways

using style
using classList

👉 Changing Background color od body using style property

document.body.style.backgroundColor = "red";

👉 Appending a css class (red) using ClassList

document.body.classList.add("red");

Changing Attributes of Attributes

👉 Consider you have to change background color or image at runtime, you can't do that statically in HTML

👉DOM also provides methods for setting or manipulating(adding/removing/changing) attributes when some event gets triggered or even without events

👉 Changing Body Color of <body> and src of <img> with JS

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="img" src="" alt="">
    <script src="./main.js"></script>
</body>

</html>

👉 in main.js

// setting bg color property of body to red
document.body.setAttribute("bgcolor", "red");
// setting src property of img to some image
document
  .getElementById("img")
  .setAttribute("src", "2.jpg");

👉 setAttibute is used to set value of HTML attributes which takes 2 params namely name of attribute and the value we want to set !

👉 Notice that i've written document.getElementById("img").setAttribute("src", "2.jpg"); in code , this is known as method chaining.

👉 method chaining is used to achieve same target but without storing that node/element in some variables which is not needed (results in code optimization 😁)

👉 In the same way getAttribute() takes name of attribute of element and return that attribute's value.

👉 removeAttribute() also takes name of attribute and removes that particular attribute from HTML .

Event Listeners

👉 Event listeners are used to determine what happens when some event is triggered

👉 so , for example i've button in index.html and i want to console.log() something on the click of button click i've to attach eventListener to button.

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">click me</button>
    <script src="./main.js"></script>
</body>

</html>

👉 in main.js

var btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  console.log("hello user");
});

👉 addEventListener is used for adding event listeners to HTML elements so we can do something with JS as an when that event happens.

👉 addEventListener takes 2 params, namely name of event ('click' in our case) and a function which tells events listener what to do when event happens (greeting user in our case).

👉 Notice that this function doesn't have name , these kind of functions are also known as anonymous functions because they're triggered as an when some event happens so they don't need any name.

Making an greeting app

👉 definition : when end user clicks on greet button JS need to load image depending on morning time or evening time

👉 We'll use all of these things which we've learnt previously and Date() object which will give us exact hours for passing it into condition and changing content dynamically

👉 in index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>greet</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="hide" id="heading1">Hey , How Are you?</h1>
    <br />
    <button id="btn">get greeting</button>
    <script src="app.js"></script>
</body>

</html>

👉 in app.js

// selecting elements
var btn = document.getElementById("btn");
var greet = document.getElementById("heading1");

// attaching event on click
btn.addEventListener("click", function () {
  // getting exact hour
  var hour = new Date().getHours();
// checking condition  
if (hour <= 12) {
    document.body.style.backgroundImage =
      "url('./morning.jpg')";
    greet.textContent = "Good Morning !";
  } else {
    document.body.style.backgroundImage =
      "url('./evening.jpg')";
    greet.textContent = "Good Evening!";
  }

  document.body.style.backgroundPosition = "center";
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundRepeat = "no-repeat";
  // hiding button
  btn.classList.add("hide");
  // display the greeting
  greet.classList.remove("hide");
});

👉 Praise yourselves, you've came this far 🎉

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #13 OOP in JS Practical Guide 👩‍💻👨‍💻

Adarsh Pandya — Tue, 19 Jan 2021 09:07:13 +0000

Classes and Objects

👉 To summarize previous article , classes are nothing but a template or blue print which decides how object will look and behave with different props/methods.

👉 We're Using OOP concepts because it provides us Encapsulation and Abstraction.

Enough ! Time to open VS code

👉 Start a new project , and go to app.js

👉 Let's make a Speedometer class

👉 Speedometer have properties like speed and type

👉 Speedometer will be having methods like increase and decrease speed

👉 in app.js

class Speedometer {
  speed = 0;
  type = "km/h";
  constructor(speed, type) {
    this.speed = speed;
    this.type = type;
  }
  increaseSpeed() {
    this.speed += 10;
  }
  decreaseSpeed() {
    this.speed -= 10;
  }
  getInfo() {
    console.log(this.speed);
    console.log(this.type);
  }
}

👉 If we decode our class there are two methods for increasing and decreasing speed of speedometer , and one method for showing information to user.

👉 Constructor is special function called automatically while creating object. we've used it to initialize initial speed and type of object.

👉 As of now class don't consume any resources but when we make objects they will surely occupy resources.

👉 Notice that by convention class names are always written in Pascal case

👉 Notice we haven't typed var or let and even function to specify in class. we don't need to specify that in class

👉 Currently(and even by default) we haven't specified and member access specifiers so our methods and props are accessible inside as well as outside the class.

Making Object 🌚

👉 Making Object of respective class simply means creating variable of that class.

👉 we'll use new keyword to allot resources to new object which we're creating.🏠

👉 The parentheses takes arguments specified in constructor parameters to initialize starter object 😁

👉 in app.js

var speedoMeter = new Speedmeter(0,"km/h");

👉 now speedoMeter is object of class Speedometer with initial value of speed:0 and type : "km/h"

👉speedoMeter can now access props and methods like increase and decrease speed

👉 Go ahead and try calling different methods

object1.getInfo();
object1.increaseSpeed();
object1.increaseSpeed();
object1.getInfo();
object1.decreaseSpeed();
object1.getInfo();

👉 this will output in console

0
km/h
20
km/h
10
km/h

What is `this`?

👉 this keyword in JavaScript refers to current running object

👉 it's like we're addressing speedoMeter object with this, so this refers to the instance which is in execution now.

👉 in speedoMeter object we can say like this object have intial speed of 0 and type of "km/h"

👉 Notice if in class we want to refer the current running object (which is not there at the moment of creation of class) we'll use this to access props of current running object.

👉 so if we write like this.speed it will refer to speedoMeter object which we have created afterwards.

Using member access specifiers

👉 '#' is used to make any property or method of the class private.

👉 Private methods or props are only accessed inside class

👉 Accessing private members outside class will result in error

class Speedometer {
  #speed = 0;
  #type = "km/h";

  increaseSpeed() {
    this.#speed += 10;
  }
  #decreaseSpeed() {
    this.#speed -= 10;
  }
  getInfo() {
    console.log(this.#speed);
    console.log(this.#type);
  }
}

👉 Notice that now if we create object of Speedometer the object can now only access increaseSpeed() and getInfo() because other members are private

console.log(object1.speed) ❌
console.log(object1.type) ❌
object1.getInfo(); ✅
object1.increaseSpeed(); ✅
object1.increaseSpeed(); ✅
object1.getInfo(); ✅
object1.decreaseSpeed(); ❌
object1.getInfo(); ✅

Inheritance

👉 Inheritance refers to deriving methods and props of parent class or super class to it's child class or sub class.

👉 Inheritance increases code reusability in our code

👉 now , think in terms of animals all animals have name and color, so what we can do is rather specifying this properties each and every time in new animal we can make a parent class with all these properties and a greet method which serves purpose of greeting.

👉 Syntax : class SubClass extends ParentClass that's it 😎 now we can use parent class's props and methods in child class 🎉

👉 Example

class Animal {
  color;
  name;

  greet() {
    console.log("hey i'm " + this.name);
    console.log("my color is " + this.color);
  }
}

class Dog extends Animal {
  constructor(name, color) {
    super();
    this.name = name;
    this.color = color;
  }
}

var dog = new Dog("tommy", "brown");
dog.greet();

👉 Output:

hey i'm tommy
my color is brown

👉 Notice if we call constructor of sub class it's compulsory to call parent class's constructor regardless of constructor is having params or not.

👉 Using a reserved keyword known as super we can call parent class's constructor like => super(); or super(name,color) [if constructor is having params]

👉 Something looks strange? we are using color,name and greet() inside as well as outside Dog class even though these props and methods wasn't declared in Dog class.

👉 That's how inheritance works, it simple words it will copy all the public and protected methods and props in child class which result in code reusability😀

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #12 Object Oriented JS (Theory)

Adarsh Pandya — Mon, 18 Jan 2021 06:21:00 +0000

What is Object oriented programming ?

👉 So far we've learnt functional JavaScript (process of making app using pure functions avoiding state, objects and mutability) whereas in Object oriented js we'll think in terms of real life examples which introduces us to class , objects , inheritance etc ...

👉 Object Oriented approach is used to remove Spaghetti code () ,and making it fully object dependent which groups related properties together.

👉 Removing Spaghetti code simply means removing unstructured and difficult to maintain source code.

👉 Notice that Objects we're talking about are as real as us in terms of methodology. These article covers only basics of OOP , there are much more things which are way beyond the scope of this article. for the sake of easiness we'll learn basics first.

👉 OOP is an art to knot Object's related data and function together , in terms of OOP data and functions are known as properties or methods

Problem with Functional JS

👉 Let's say you're making a racing game. so now there are many components in system which come into play but mainly there are two namely User and Cycle

👉 Now thinking in terms of functional programming , we'll need to specify lots of variables and functions here and there

👉 There'll be scattered code in terms of data (color,speed,type,gears) and functions (run,stop,reset)

How OOP solves the problem

👉 OOP ties a knot between data[properties] and functions[methods]
making it easy to work with and easy to maintain

👉 in OOP cycle is an object which have properties like color,speed,type, gears and methods like run,stop,reset but all of these in one large container

Object Oriented Paradigms

👉 Class : Class in OOP are blue prints or template which defines how a object will look like or how a object will behave , Classes don't hold any memory resources until their objects are made (in which case object will occupy resources).

👉 Objects : Objects are real instance of classes , which can look and behave in certain way. we can create multiple objects of same class. Objects are also known as variable of class which is defined.

👉 Constructor : A constructor in JS is a special method that is used to initialize objects. The constructor is called as an when object of a class is created. we don't need to call constructors explicitly.

👉 Member Access Specifiers : Member access specifiers are used to abstract or hide unnecessary information from end users. (a user don't need to know how cycle runs in run method 🤷‍♂️).

Public : these props/method can be accessed inside as well as out side of the class.
Private : these props/method can be accessed only inside class Private access specifiers are used to achieve abstraction in our program.
Protected : Protected simply refers to those props/methods which can be accessed inside class and it's sub classes

👉 Inheritance : Inheritance can be defined as using methods and props of one class and using it directly in another class which in this case known as sub class or derived class from parent class. Inheritance refers to code reusability.

👉 Encapsulation : Encapsulation is an art of wrapping related properties and methods of same object (think of a capsule containing multiple drugs in it). Class basically works on Encapsulation which removes spaghetti code and makes it even more optimized

Summary

👉 So far we've learnt the basic theory of OOP concepts like classes , objects , inheritance and constructors

👉 In the next article we'll see all of these concepts in action 😀

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Enough JavaScript to get you Started : #11 Functions

Adarsh Pandya — Sun, 17 Jan 2021 08:01:01 +0000

How to ruin your code (story) ? ☠

👉 As i said earlier , when i was beginning with programming i was so foolish to not to follow coding principles like DRY (don't repeat yourself).

👉 One definition was assigned to me , which was "write a program where have to do addition of 2 numbers 3 times"

👉 The code i wrote earlier :

var num1 = propmt("Enter no : ");
var num2 = propmt("Enter no : ");
var res = 0;
res = num1+num2;
console.log(res);
var num3 = propmt("Enter no : ");
var num4 = propmt("Enter no : ");
res = num3+num4;
console.log(res);
var num5 = propmt("Enter no : ");
var num6 = propmt("Enter no : ");
res = num5+num6;
console.log(res);

👉 This does make sense as a beginner , but when you think in terms of performance optimization , speed and quality of code - this doesn't make any sense.

👉 After that i was introduced to concept known as Function

Functions :

👉 According to internet , Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

👉 To put it more simply and making it clear we'll go to our previous definition of 3 times of addition. so what we can say is that a perfect function is a mechanism to reduce that 3 times repeating code into simple block of code which can work for 3 or 30 or even 300 times depending on logic inside it. function simply means act of writing a reusable code.

Syntax of function

👉 Making a function can be defined in three steps

Function Definition : telling your compiler that there's a function in our program.
Function Body : Block of code to be executed when function gets called.
Function Call : Calling a function simply tells your compiler that execute the code written in function body in respective context.

How does that looks like?

👉 functions takes parameters as input process it in function body and returns output.

👉 Parameters simply means input values which function is expecting for further process.

👉 Arguments means actual value passed to the respective parameter

👉 Example

// sum is name of function
// num1 and num2 are params
function sum(num1,num2){
    // function body
   var res = num1+num2;
   return res;
}

//2 and 5 are actual arguments
// function call ();
sum(2,5);
// outputs 7

Rules

👉 Name of function should be unique

👉 Function should be defined somewhere in program before calling it

👉 Function may or may not take parameters

👉 Function may or may not return value

👉 Function can take 0 to n number of parameters depending on need

👉 Function can be called multiple times during execution

👉 Example of function without params and return statements

function greet(){
      console.log("Good Morning");
}

// can be called n number of times
greet();
greet();
greet();

Let's make it more optimized 😎

👉 We'll take our addition program and turn it into a super optimized code

👉 in app.js

function sum()
{
      var num1 = +prompt("Enter no : ");
      var num2 = +prompt("Enter no : ");
      return num1+num2;
}

//calls function 3 times
for(var i=0;i<3;i++) {
      sum();
}

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #10 Objects

Adarsh Pandya — Sat, 16 Jan 2021 07:27:12 +0000

Everything is Object in JS

What are Objects ?

👉 Let's forgot about JS objects and talk about real world objects , every object in real world have certain properties and behaviors.

👉For Example : Girlfriend 😁 , yes ! girlfriend is object , girlfriend have properties like hairColor,eyeColor,name,number,address,likes,dislikes etc...

👉 In JavaScript Object can be defined as group of related properties.

👉 Grouping all the related properties to one thing (ex. Car, GF) makes much more sense , because now it's all stored in one place and is easy to access.

👉 Objects come under category of composite data type , which means mix and match of primitive data types.

How Objects work?

👉 as we can see we grouped all the related properties under one variable namely girlfriend

👉An object is a collection of properties, and a property is an association between a name (or key) and a value.

Before making object keep in mind

👉 Objects always work in key value pair [eg. name:"john"]

👉 Arrays are always objects in JS.

👉 Functions are always objects in JS.

👉 Objects are always embedded in curly braces {}

Syntax

var object = {
      property : value,
      property2: value,
      ....
}

The Girlfriend Object 😍

let girlFriend = {
     name : "alexa",
     surname : "grace",
     likes: ["reading","football"],
     number : 123456789
}

👉 We can access object properties using "."

👉 For Example girlFriend.name gives output "alexa"

👉 girlFriend.likes gives us array ["reading","football"] as output

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #9 Array

Adarsh Pandya — Fri, 15 Jan 2021 16:04:45 +0000

The definition resides in usage of Array

👉 imagine someone gave you a definition which says store all the fruits and display them

👉 Idea 1 (foolish way to manage things) : try to create 30 to 40 variables

👉 Idea 2 (smarter way to manage things) : creating a Array named fruits

What is Array anyway?

👉 Arrays are just collection of data types

👉 I'm sure if you are beginner the line i written above will not make any sense to you

👉 Imagine creating a one big variable or container which can hold multiple small variables ,so it's easy to access

👉 Real life example : box of chocolates 🍫🍫🍫🍫🍫 which can hold 100s of chocolates , now imagine managing 100 chocolates without box (pretty messed up right ? 🤣)

Graphical Representation of Array

👉 Array holds multiple values, whereas an ordinary variable hold a single value

👉 Array values must be inside Square braces [ ]

👉 Arrays are index based and index starts from 0

👉 In simple words if you want to access "Apple", you need to write

fruits = ["apple","banana","grapes,"cherry"]

console.log(fruits[1]); ❌

console.log(fruits[0]); ✅
// logs "apple"

👉 Printing Whole Array

fruits = ["apple","banana","grapes,"cherry"];

console.logs(fruits);

//logs ["apple","banana","grapes,"cherry"]

👉 Iterating over individual elements of array

fruits = ["apple","banana","grapes,"cherry"];

// for of generally used for arrays

for (var fruit of fruits)
{
      console.log(fruit);
}

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

Enough JavaScript to get you Started : #8 Loops

Adarsh Pandya — Thu, 14 Jan 2021 15:45:28 +0000

how to not write your code 🎃

👉 okay ! this is going to be a funny story , when i started programming someone challenged me to print 1 to 20 on console. i laughed because it was too easy

👉 completely out of logic i started typing console.log() for 20 times and yelled i'm done

👉 this is how i wrote progam

console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
console.log(7)
console.log(8)
console.log(9)
console.log(10)
console.log(11)
console.log(12)
console.log(13)
console.log(14)
console.log(15)
console.log(16)
console.log(17)
console.log(18)
console.log(19)
console.log(20)

👉 this looks stupid right? 😂 there's a principle in coding world known as DRY (don't repeat your self) and what i did was exact opposite of it 😂

Concept of Loops came in picture

👉 After i showed code to my colleagues they said there's something known as loop

👉 Loops are condition based iterative blocks which repeats themselves n number of time based on condition

Types of loop

For loop (we'll be learning this ✅)
While Loop
Do...while Loop

Logical flow of Loops

For Loop Syntax

for(intial value;exit condition;update statement)
{
    // loop body | block
}

Refactoring our old code

for(var i=1;i<20;i++)
{
      console.log(i);
}

👉 This syntax makes much more sense then previous one , and follows DRY principle

👉 meaning of this code : "start from 1 , increase by 1 every time and exit from loop when it becomes greather than 20"

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github

DEV Community: Adarsh Pandya

Enough JavaScript to get you Started : #19 IIFE✨

IIFE ✨

Hey , Let' Connect👋

Enough JavaScript to get you Started : #18 Optional chaining and nullish coalescing

Optional Chanining ?.

Nullish coalescing ??

Enough JavaScript to get you Started : #17 rest,spread and destructuring

rest and spread operator (...)

rest

Spread operator

Destructuring

Hey , Let' Connect👋

Enough JavaScript to get you Started : #16 var vs let vs const

Before we start

Var

Let

Const

Summary

Hey , Let' Connect👋

Enough JavaScript to get you Started : #15 Arrow Functions

Arrow Functions?

Have you seen something like this?

WTF was that? Language of gods? 🤔

Benefits of Array Functions

What are Arrow Functions any way?

Examples

Rules for Writing Arrow functions

Bonus🎁 : Concise arrow functions

Hey , Let' Connect👋

Enough JavaScript to get you Started : #14 Understanding DOM

What is DOM?

Throw this out of the window , I'm Confused 😵

DOM in visual context

Need of DOM

What we'll be covering? 📓

Selecting Elements

Changing the styling of node elements

Changing Attributes of Attributes

Event Listeners

Making an greeting app

Hey , Let' Connect👋

Enough JavaScript to get you Started : #13 OOP in JS Practical Guide 👩‍💻👨‍💻

Classes and Objects

Enough ! Time to open VS code

Making Object 🌚

What is this?

Using member access specifiers

Inheritance

Hey , Let' Connect👋

Enough JavaScript to get you Started : #12 Object Oriented JS (Theory)

What is Object oriented programming ?

Problem with Functional JS

How OOP solves the problem

Object Oriented Paradigms

Summary

Enough JavaScript to get you Started : #11 Functions

How to ruin your code (story) ? ☠

Functions :

Syntax of function

How does that looks like?

Rules

Let's make it more optimized 😎

Hey , Let' Connect👋

Enough JavaScript to get you Started : #10 Objects

What are Objects ?

How Objects work?

Before making object keep in mind

Syntax

The Girlfriend Object 😍

Hey , Let' Connect👋

Enough JavaScript to get you Started : #9 Array

The definition resides in usage of Array

What is Array anyway?

Graphical Representation of Array

Hey , Let' Connect👋

Enough JavaScript to get you Started : #8 Loops

how to not write your code 🎃

Concept of Loops came in picture

Types of loop

Optional Chanining `?.`

Nullish coalescing `??`

rest and spread operator (`...`)

What is `this`?