DEV Community: Rakesh Patel

Set Data Structure in JavaScript

Rakesh Patel — Sat, 22 Jan 2022 19:12:03 +0000

Map, WeakMap, Set and WeakSet these 4 are new Data structure which was introduced in ES6.

Before diving deep into these DS, let's first understand What is DS?

Data structures, at a high level, are techniques for storing and organizing data that make it easier to modify, navigate, and access.

Data structures are like container, which hold data ( primitive, object, etc.) and these container's have their own constraint/rule/pattern to access, modify, delete their data.

DS are not limited to particular programming language only. Data structures are used in almost all areas of computer science and programming, from operating systems to basic vanilla code to artificial intelligence.

Now, let's come to our topic,

Before Set & Map, JavaScript only have inbuild Array and Object DS. but in some scenarios this both not perform well and we needed to manually add extra functionality for getting things done. and therefore this new DS are introduced.

1. Set

Set DS hold only unique data. so Set guaranteed of no data is duplicated.

E.g.

In above example, we have passed array of duplicate values to Set constructor but when we logged Set value, it returned only object with unique value's

Note : Set is object type not array type. that's why return value is object.

In above example, I used shortcut way of initialization of Set via array. click here to read more detailed information of Set
Set are implemented with Iterator protocol [Symbol.iterator] that means Set are by default Iterable object. so we can iterate the Set value with for...of loop

Advantage's of Set over Array

Set hold only unique data (no duplicate value are allowed)
Time Complexity of searching element in Set is constant i.e. O(1). where as in Array it's linear i.e. O(n).

Real time Application

Suppose you have user list. where some user's name are repeated. then with the help of Set you can easily remove duplicate name

Searching for particular user name in huge list ( e.g. 5_00_000 records) because with array it take time O(n) complexity. but with Set we can quickly find user name

(output in time may varies machine to machine)

Refernces :

Getter & Setter in JavaScript

Rakesh Patel — Sat, 08 Jan 2022 11:52:52 +0000

Getter and Setter are property which are defined inside object/classes. both are the type of function, by which we can get and set value of property in object.

Before going to details of Getter & Setter, first let see why do we need this.

Why we need?

suppose you have following Student object,

let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  }
}

Now you want to calculate total marks.
some of the way to get total marks are,

const total = Student.marks.python + Student.marks.js;
creating getTotalMarks method in Student object

let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  },
  getTotalMarks() {
    return this.marks.python + this.marks.js
  }
}

and by calling Student.getTotalMarks() we will get the total marks

Above solution works. but syntax is not cleaner ( Getter & Setter have many advantages over traditional method ). How if we get total marks, simple as property name? like Student.totalMarks.

Here getter are come into picture.

let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  },
  get getTotalMarks() {
    return this.marks.python + this.marks.js
  }
}

and now we can get total marks simply as,
const total = Student.getTotalMarks;

1. Getter :

below is the description of Getter from MDN,

Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter.

Getter function are declared with get keyword,
e.g :

{
    get functionName() {}
}

Click here to read more about Getter

2. Setter

all properties/advantages of Setter are same as Getter. Except Getter are used to get computed value from object where as Setter are used to set desirable value to property.
Setter function are declared with set keyword,
e.g. :

{
   set functionName() {}
}

Below is sample program using Setter,

let Student = {
  name : 'Setter',
  marks : {
    python : 80,
    js: 85,
  },
}

Now, suppose we want to ensure that user must enter marks between 0 - 100. so, for this we can use Setter function

let Student = {
  name: "Setter",
  marks: {
    python: 80,
    js: 85,
  },
  set pythonMarks(mark) {
      if(mark <= 100 && mark >= 0 ) {
          this.marks.python = mark;
      } else {
          throw new Error("Please enter python mark between 0 to 100")
      }
  },
};

Now, whenever user try to set python marks greater than 100 or lower than 0 it will throw error

Click here to read more about Setter

Closure in JavaScript

Rakesh Patel — Tue, 04 Jan 2022 09:30:50 +0000

Most of us, as soon as they read/hear the name of closure. either immediately skip the topic or find it very difficult to understand the concept. In this post I will try my best to simplify the concept of closure.

before coming to definition, look at the below code snippets.

When the above code is executed, then first outerFunc() get into callstack. outerFunc() will return innerFunc() and outerFunc() is pop out from callstack means all variables present inside outerFunc() is get garbage collected. but if now we call innerFunc() a.k.a closureDemo() it will print value of outerVar (which is member of outerFunc()). when running above code, you will see below output.

Outer Variable

But how it's possible? outerVar which is defined inside outerFunc(). and now outerFunc() is no longer available in callstack. but still innerFunc() have access to variable outerVar.

outerVar is declared with let and we know let variable are function scoped.

So, here comes the concept of closure.

The closure is a function that closes over ( a.k.a. capture, remembers) the variables from it's lexical scope.

so even after executing function from anywhere (even outside of it's lexical scope) it remembers the variables/function from the place where it's defined.

In above code, add the below line in last

console.dir(clouserDemo);

after running the code, you will see below output in console.

Key Notes

If any variables/function from their lexical scope is referenced inside inner function. then only closure is created else closure will not created
Closure function will remember variable reference not value.

if we run above code it log Changed Value in console

I am newbie in writing technical content, So may be this post will not clear your closure concepts. For more detailed explanation & information about closure, I would suggest you to please go through the articles mentioned in References

References

JavaScript & Web API

Rakesh Patel — Thu, 09 Dec 2021 10:58:53 +0000

As we all know, API stands for Application Programming Interface. API is actually some kind of interface which is having a set of functions. These set of functions will allow programmers to acquire some specific features or the data of an application.
Our web browser ( Chrome, Mozilla, Safari, etc. ) also provide some API, which is used by JavaScript engine.

Note that these API's are not the part of JavaScript language.

Below are the some most commonly used Web API's,

1. Timer API ( setTimeout, setInterval)

These API are used for executing task after specific time duration.

click here to read more...

2. Console API

Yes, console is not the part of JavaScript language but it's browser API. We can access many console features like `console.log`, `console.error`, `console.dir`, etc through this API.

click here to read more...

3. Document Object Model (DOM) API

DOM API are used to access, modify web document i.e. HTML pages. some commonly used DOM properties are `document.getElementById`, `document.append`, etc.

click here to read more...

4. Storage API ( localStorage, sessionStorage)

Storage API's are used for storing data locally in client side.

click here to read more...

5. Geolocation API ( Navigatior)

To get user's location related information , this API is used.

click here to read more...

There are many Web API's are available. click here to read more about all of API's

DEV Community: Rakesh Patel

Set Data Structure in JavaScript

1. Set

Advantage's of Set over Array

Real time Application

Refernces :

Getter & Setter in JavaScript

Why we need?

1. Getter :

2. Setter

Closure in JavaScript

Key Notes

References

JavaScript & Web API

Note that these API's are not the part of JavaScript language.

1. Timer API ( setTimeout, setInterval)

These API are used for executing task after specific time duration.

2. Console API

Yes, console is not the part of JavaScript language but it's browser API. We can access many console features like console.log, console.error, console.dir, etc through this API.

3. Document Object Model (DOM) API

DOM API are used to access, modify web document i.e. HTML pages. some commonly used DOM properties are document.getElementById, document.append, etc.

4. Storage API ( localStorage, sessionStorage)

Storage API's are used for storing data locally in client side.

5. Geolocation API ( Navigatior)

To get user's location related information , this API is used.

Yes, console is not the part of JavaScript language but it's browser API. We can access many console features like `console.log`, `console.error`, `console.dir`, etc through this API.

DOM API are used to access, modify web document i.e. HTML pages. some commonly used DOM properties are `document.getElementById`, `document.append`, etc.