DEV Community: Milan Mohapatra

You are JS noob without knowing these methods

Milan Mohapatra — Wed, 06 Dec 2023 16:09:13 +0000

Most important methods of your JavaScript codebase.

In day-to-day development with JavaScript in the form of frontend framework or backend framework, I use some methods to manipulate arrays or objects, these are so frequently used in project development and fun to do.

What I mentioned after are not the only methods for Arrays and Objects, these are just frequent and popular ones.

find()

To find the single element present in an array.
It returns the first element that satisfies the condition.
It takes one callback function as an argument, callback function returns a boolean.
If the condition is false with every element it returns undefind.
UseCase: Find a student whose rank is 5, in this case, it will return one object.

students.find((student) => {
    return student.rank == 5;
  })

// { id: 5, name: 'nitish', rank: 5 }

filter()

To find the array of elements present in the array.
It returns one array of elements that satisfy the conditions.
It takes one callback function as an argument, callback function returns a boolean.
If the condition is false with every element it returns an empty array [].
UseCase: Find the top three students.

students.filter((student) => {
    return student.rank <= 3;
  })

/*
[
  { id: 1, name: 'milan', rank: 1 },
  { id: 2, name: 'kiran', rank: 2 },
  { id: 3, name: 'priya', rank: 3 } 
]
*/

map()

To transfer the array of elements.
Return the array with the same number of elements present.
It takes one callback function and returns the expression to transform the array.
UseCase: Create an array of strings declaring who has what rank.

const result = students.map((student) => `${student.name} has rank: ${student.rank}`);

console.log(students)
console.log(result)

/*
[
  { id: 1, name: 'milan', rank: 1, fee: 1000 },
  { id: 2, name: 'kiran', rank: 2, fee: 2000 },
  { id: 3, name: 'nitish', rank: 3, fee: 3000 },
  { id: 4, name: 'priya', rank: 4, fee: 4000 },
  { id: 5, name: 'pratyush', rank: 4, fee: 5000 }
]
[
  'milan has rank: 1',
  'kiran has rank: 2',
  'nitish has rank: 3',
  'priya has rank: 4',
  'pratyush has rank: 4'
]
*/

reduce()

It can convert one array to a single element.
It takes one callback and one initial accumulator value(option) and returns one digested accumulator value.
If you do not initialize the accumulator value it will consider the first element of the array as the initial accumulator value.
UseCase: Find the sum of fees of students.

students.reduce((acc, next) => {
    acc += next.fee
    return acc;
  }, 0)

// 15000

every()

Return true, if the condition is satisfied by all elements present in the array.
If one of the conditions is not satisfied then it will return false.
It takes one callback and returns a boolean if the condition is satisfied.
UseCase: check if all students cleared the fees or not.

students.every((student) => {
    return students.fee == 0
  })

// false

some()

Return true, if the condition is satisfied by a minimum of one element present in the array.
It takes one callback and returns a boolean if the condition is satisfied.
UseCase: check if all students cleared the fees or not.

students.some((students) => {
    return students.fee == 0
  })

// true

findIndex()

It returns the first index of an element that satisfies the condition.
It takes one callback and checks to try to satisfy the condition, if the condition is satisfied then it returns the index of that element.
UseCase: find the index of the student who has ranked one.

students.findIndex((students) => {
    return students.rank == 1
  })

// 0

concat()

It returns a concatenate/joined array.
It is an immutable array method.

const a = [10, 20]
const b = [30, 40]

const c = a.concat(b)

// [ 10, 20, 30, 40 ]

In the case of an array you can't contact arrays with a + operator like string. If you try it will return 10,2030,40.

entries()

It returns an array that contains a key-value pair in the form of an array([[key, value], [key, value]]).
key as index 0 and value as index 1 in the inner array.
UseCase: Make an Object iterable.

const obj = { a: 10, b: 20, c: 30, d: 40 };

console.log(Object.entries(obj));
// [ [ 'a', 10 ], [ 'b', 20 ], [ 'c', 30 ], [ 'd', 40 ] ]

keys()

It returns an array of keys present in an object.
UseCase: at the time of converting object keys to React elements.

Object.keys(obj)
// [ 'a', 'b', 'c', 'd' ]

values()

It returns an array of values present in an object.
UseCase: at the time of converting an object values to React elements.

Object.values(obj)
// [ 10, 20, 30, 40 ]

assign()

It returns one concerted object.
UseCase: at the time of the shallow copy.

const source = { a: 10, b: 20 }
const target1 = { b: 30, c: 40 }
const target2 = { c: 50, d: 60}

console.log(Object.assign(source, target1, target2));
// { a: 10, b: 30, c: 50, d: 60 }

JSON.parse() & JSON.stingify()

It converts JSON string to Object or Object to JSON String
UseCase: Converting API response to usable data.

Correct me if I am wrong!!!

Linkedin | Twitter | GitHub

Your values are 'Truthy' or 'Falsy', JavaScript

Milan Mohapatra — Fri, 24 Nov 2023 12:33:41 +0000

"Truthy" and "Falsy" value in JavaScript.

When I am taking about truthy and falsy value, I am talking about Boolean type in JavaScript. As computer only understand 0 or 1, true or false so, JVM also understand only truthy or falsy value.

What are these?

JVM only need to understand about truthy or falsy values, at the time of evaluation in Boolean context of expression or statement.
These truthy or falsy values may not be strictly Boolean true or false but it treated as Boolean value in conditional statement.

All 6 Falsy values

Empty string (' ')
Boolean false
Numeric zero (0)
NaN (Not a Number)
null
undefined

Except these 6 values all other values are treated as Truthy value in JavaScript.

console. log(0, Boolean(0)) // false
console. log(undefined, Boolean(undefined)) // false
console. log(null, Boolean(null)) // false
console. log(NaN, Boolean(NaN)) // false
console. log('', Boolean('')) // false
console. log(false, Boolean(false)) // false

console.log(1, Boolean(1)) // true
console. log(-1, Boolean(-1)) // true
console. log('dct',Boolean('dct')) // true
console. log([], Boolean([])) // true
console. log({}, Boolean({})) // true
console. log(true, Boolean(true)) // true

Correct me if I am wrong!!!

Linkedin | Twitter | GitHub

You like 'deep' or 'shallow' copy

Milan Mohapatra — Fri, 24 Nov 2023 09:58:15 +0000

Copy process of Primitives and Objects.

Before discussing "deep copy" and "shallow copy" we should discuss how "primitive" and "objects" are getting copied in JavaScript.

Primitives are by default independent and they get copy by value.
Copy by value means if you assign one primitive variable to another variable or pass a primitive value as an argument, then JVM allocates copy the primitive value and allocates new memory for the copied value.

Objects are copied by reference, which means a memory block is allocated once for values of the object, and the memory address or reference is shared in case of assignment and passing as argument.
It saves lots of memory due to the pass-by-reference mechanism.

Types of copy in JavaScript

Deep Copy
Shallow Copy

We can only do shallow copy with objects not with primitive.

What is this?

In shallow copy, JVM allocates a new memory block and copies the top-level property or value to a new memory block. However, if the original obj contains nested objects, the reference to the nested object is still shared between the original obj and copied obj. The copy is one level deep.

let original = { prop: "value", nested: { prop: "nested value" } };

// Shallow copy using Object.assign()
let shallowCopy = Object.assign({}, original);

// Modifying the nested property in the shallow copy
shallowCopy.nested.prop = "modified value";

console.log(original.nested.prop);   // "modified value"
console.log(shallowCopy.nested.prop); // "modified value"

If we modify the value of the nested object in the copied object it will reflect the original object.

In deep copy, JVM allocates memory blocks and recursively copies value and property at every level. It is a completely independent memory block with no reference shared between original and copied objects.

let original = { prop: "value", nested: { prop: "nested value" } };

// Deep copy using JSON methods
let deepCopy = JSON.parse(JSON.stringify(original));

// Modifying the nested property in the deep copy
deepCopy.nested.prop = "modified value";

console.log(original.nested.prop);   // "nested value"
console.log(deepCopy.nested.prop);   // "modified value"

Methods for copy

Array slice method. (Array | Shallow)
Array concat method. (Array | Shallow)
Object assign method. (Object | Shallow)
Spraid operator.(Array / Object | Shallow)
JSON.parse(JSON.stringify()) (Array / Object | Deep)
structuredClone() (Array / Object | Deep)

Difference between deep copy and shallow copy

Deep copy	Shallow Copy
*Advantages*
1. Creates independent objects	1. Generally faster and less resource-intensive
2. Suitable for complex objects	2. Suitable for simple data structures, with no deeply nested objects or references.
*Disadvantages*
1. More resource-intensive and time-consuming.	1. hallow copying may lead to unexpected behavior when dealing with mutable objects. If the original and copied objects share references to the same nested objects, changes made to those nested objects will be reflected in both the original and copied objects.
2. Handling circular references in deep copy implementations can be challenging and might lead to infinite loops if not managed properly.	2. Shallow copy doesn't handle deeply nested structures well. If there are nested objects or arrays within the copied object, changes to those nested structures will affect both the original and copied objects.

What is the difference between JSON.parse(JSON.stringify()) & structuredClone().

The only difference is structuredClone() can copy object if, object has circular reference but JSON.parse(JSON.stringify()) can't.

Circular Reference?

// Creating circular reference
const objA = {};
const objB = {};

objA.propertyB = objB;
objB.propertyA = objA;

// Now, objA refers to objB, and objB refers back to objA

console.log(objA); // The output will show that objA has a propertyB that references objB
console.log(objB); // The output will show that objB has a propertyA that references objA

Notes: In JS, except primitive type all are considered as objects. That's why I used the word Object which refers to Array and Object.

Correct me if I am wrong!!!

Linkedin | Twitter | GitHub

Do you know AJAX?

Milan Mohapatra — Thu, 23 Nov 2023 16:39:07 +0000

What AJAX(Asynchronous JavaScript and XML)?

It is a set of web development techniques, that help the web page to update data asynchronously by establishing communication with the server without loading the webpage(Dats exchange asynchronous behind the sean).

Why AJAX?

In general, if you want to send data to the server, the page has to reload, which is a bad user experience. But in the case of AJAX, it allows certain parts of the page to update asynchronously without reloading the page.

Stapes of AJAX

Event occurs on page.
Send a request to the server.
Receive the response data.
Update data and UI of the page.

In AJAX communication is happening asynchronously with the help of HTTP protocol and the medium is not only XML objects but JSON objects too.

How AJAX?

To implement AJAX I am creating a "Random joke" website. To send a request to the server I am using the XHR (XMLHttpRequest) object, which is provided by the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Jokes</title>

    <style>
      body {
        height: 100vh;
        background-color: rgb(69, 68, 68);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .btn button {
        background-color: #828181;
        color: white;
        text-align: center;
        border-radius: 10px;
        border: none;
        padding: 10px;
        margin: 10px;
        font-size: 14px;
      }

      .display {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 300px;
        width: 500px;
        border-radius: 10px;
        background-color: white;
        padding: 10px;
      }

      #joke {
        text-wrap: wrap;
        font-size: large;
        text-align: center;
      }
    </style>
  </head>
  <body>

    <div class="btn">
      <button onclick="getAJoke()">Tell me a joke</button>
    </div>

    <div class="display">
      <div id="joke">Click button to laugh!!</div>
    </div>

    <script>
      const jokeDiv = document.getElementById("joke");

      const getAJoke = () => {
        const xhr = new XMLHttpRequest();

        xhr.open("GET", "https://v2.jokeapi.dev/joke/Any?type=single");
        xhr.send();

        xhr.onload = () => {
          if (xhr.status == 200) {
            const data = JSON.parse(xhr.responseText);
            jokeDiv.innerText = data.joke;
          }
        };

        xhr.onerror = () => {
          console.log("Error");
        };
      };
    </script>
  </body>
</html>

I attached onclick event to the button, which is calling getAJoke () after getting clicked.
Creating a new XHR object and using xhr.open() which is taking arguments 'GET'(HTTP method) and URL. Then send a request by xhr.send()
After the request-response cycle the onload method is called.
As server response in JSON(JavaScript Object Notation) which is a string. To update the data I am using Object.parse() to convert into objects.

Correct me if I am wrong!!!
Linkedin | Twitter

JavaScript For Noobs : Part - 1

Milan Mohapatra — Fri, 21 Oct 2022 17:57:08 +0000

Basics Of JavaScript : " What you need to know to become PRO "

As a developer it is a ritual to say Hello! to world. So, let's learn how to write your first Hello! World in JavaScript

console.log('Hello! Word of Developer')

console is a JavaScript object who is identify as console of web.
there is a log() whose job is to print output.
and you know sentence between " and ' is string.

Eg.

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')

1. Comments in JavaScript

comments are the most essential part of programming. Because, if you don't know how to comment you are not a developer. In JavaScript we basicity have two types of comments.

Single line comment // this is a single line comment
Multiline comment /* This is a multiline comment This is a multiline comment */

2. Syntax

Every programming language has its own structures and rules to write code so, as JavaScript that called syntax. If you don't follow that syntax you will get error in console.

Tackle that syntactical by solving error is called debugging.

3. Adding JS to web page

There are three way to put your JS in HTML page

inline JavaScript
internal JavaScript
external JavaScript

Home Work: google HOW?

NOTES: Do you know you can add multiple JS file in a single HTML page. Yes! we do it externally.

4. Types

Numbers (both Integer and floating point number)
Strings
Booleans (true & false)
Undefined (Not assigned == Undefined)
Null (Empty)

NOTE:

null is a default type of objects

collection of one or more characters between two single & double quotes, or backticks.

you can check type of datatype by typeof operator

Eg.

console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

5. Variables

Variables are containers of data. Variables are used to store data in a memory location. When a variable is declared, a memory location is reserved. When a variable is assigned to a value (data), the memory space will be filled with that data. To declare a variable, we mostly use let to create non constant variable and const for constant variable. But we will ignore var due to avoid useless scoping error.

5.1. Variable Naming Rules

should not begin with a number
not allow special characters except $ & _
follows a camelCase convention
should not have space between words

Eg.

let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let country = 'Finland'
let city = 'Helsinki'
let age = 100
let isMarried = true
let age = 100
const gravity = 9.81
const boilingPoint = 100

6. Data Types

data types can be divided into two types

Primitive or inbuilt
Non Primitive or reference type

6.1. Primitive Datatypes

Numbers - Integers, floats
Strings - Any data under single quote, double quote or backtick quote
Booleans - true or false value
Null - empty value or no value
Undefined - a declared variable without a value
Symbol - A unique value that can be generated by Symbol constructor

6.2 Non-Primitive Datatypes

Objects
Arrays
Functions

NOTE: Primitive data types are immutable(non-modifiable) data types. Once a primitive data type is created we cannot modify it.

6.3 What is mutable and Immutable in JavaScript

As we create primitive variable if we want to change the value we have to reassign the value. Modification and reassignment is completely two different things. But in case of object or non-Pre variable there is a allocation of memory and reference is assigned to a variable that's way we can modify the vale of variable without re assigning that is the concept of mutability

NOTES: we do not compare non-pre data types. Do not compare arrays, function or objects. Non-pre values are referred to as reference types, because they are being compared by reference instead of value. Two objects are only strictly equal if they refer to the same underlying object.

7. Math Objects in JavaScript

Math objects has pre defined methods who helps to works with numbers.

Math.PI // 3.141592653589793
Math.round(PI) // 3 to round values to the nearest number
Math.floor(PI) // 3 rounding down
Math.ceil(PI)// 4 rounding up
Math.min(-5, 3, 20, 4, 5, 10) // -5
Math.max(-5, 3, 20, 4, 5, 10) // 20
Math.random() //random num bet 0 to 0.999999
Math.abs(-10) // 10
Math.sqrt(100) // 10
Math.pow(3, 2) // 9
Math.E // 2.718
Math.log(2) // 0.6931471805599453 (log 2 base E)
Math.LN2 // 0.69
Math.LN10 // 2.30 (ln 10)
Math.sin(0)
Math.cos(60)

Eg. generate a random number between 5 to 10 include

console.log(5 + Math.floor(Math.random() * 6))

8. Strings in JavaScript

Strings are texts, which are under single , double, back-tick quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double quote, or backtick quote.

Note : ' ' space also goes into strings in JS

8.1. String Concatenation

Connecting two or more strings together is called concatenation.

Eg.
let fullName = firstName + space + lastName

8.2. Escape Sequences

\n: new line
\t: Tab, means 8 spaces
\\: Back slash
\': Single quote (')
\": Double quote (")

8.3. Templet Literals

To create a template strings, we use two back-ticks. We can inject data as expressions inside a template string. To inject data, we enclose the expression with a curly bracket({}) preceded by a $ sign.

Eg.

console.log(`The sum of 2 and 3 is 5`)
let a = 2
let b = 3
console.log(`The sum of ${a} and ${b} is ${a + b}`) // injecting the data dynamically

Eg.

let a = 2
let b = 3
console.log(`${a} is greater than ${b}: ${a > b}`)

8.4 String Methods

String has inbuilt some methods who helps to work with strings

str.length
str.charAt(1) // access index 1
str.charCodeAt(5) // access ASCII of chat at index 5
str.toUpperCase() 
str.toLowerCase()
str.substring(0, 5) // 0 to 4
str.split(" ") // return array of splited string wrt space
str.trim(' ') // trim space from beginning and end
str.includes('string') // return true if present
str.replace('strx', 'stry')
str.indexOf('str') // return first occurance
str.lastIndexOf('str') //return last occurance
str.concat(str)
str.startsWith('str') // true if starts with
str.endsWith('str') // true if ends with
str. search('str') //return index
str.match('str') // return array
str.repeat(2) // repeat twice

9. Typecasting in JavaScript

As we know type casting is of two types

External Typecasting
Internal Typecasting

9.1. External Typecasting

To Number

parseInt(str)
Number(str)
console.log(+str)
parseFloat(str)
Number('mil') // NaN

9.1.1. Date to Number

Number(dt)
dt.getTime()

9.1.2. Boolean to Number

Number(true)

9.1.3. To String

String(num)
num.toString()

9.1.4. Date to String

String(dt)
dt.toString()

9.1.5. Boolean to String

String(false)

9.1.6. To Boolean

Boolean(0)
Boolean(1)

9.2 Internal type casting

It happen when one data type is automatically converted to other data type.

Eg.

console.log(10 + '10')  // 20
// string converted to int then added

PART - 2 IS COMING.........

LinkedIn
Twitter