DEV Community: G U BHARATH CHANDRA

Understanding the new keyword in JavaScript

G U BHARATH CHANDRA — Sat, 05 Jun 2021 07:16:24 +0000

Hey 👋 this will be a bit long , but detailed post where we will try to understand using an example.

Assume we have to build a game where users can register with username against which score would be updated. So, the below code would do the job right?

function generateUser(name,score){
  let newUser = {};
  newUser.name = name;
  newUser.score = score;
  return newUser;
}

When ever we need to create a new User, we can use generateUser("<User entered name>" , 0) which would return us the new user Object.

So, the next thing we need to take into consideration is to increment the score if the user wins the game.

Obviously, the immediate choice would be to create a new function as below :

function incrementScore(user){
  user.score++;
  console.log(user);
}

and whenever we need to increment the score, we can just use this function incrementScore(user1);

But the problem here is that, when our code is modular/grows into huge codebase in future, we might not know where the increment function is located and also, in a case where we might need other operations like changing the name or adding a new property , we cannot just keep creating new functions as that would clutter the codebase and would become difficult to maintain.

So , how do we solve that?

Well, in 1 word → prototype.

But lets slowly try to solve this problem by understanding each step.

What if we could just put the functions inside out generateUser as below?

function generateUser(name,score){
  let newUser = {};
  newUser.name = name;
  newUser.score = score;
  newUser.incrementScore = function() {
    newUser.score++;
    }
  return newUser;
}

By this we can achieve the below :

let user1 = generateUser('BruceWayne',10);
user1.incrementScore();

Perfect! , now we can just use the user Object itself to incrementScore or change name or whatever...

But, let's consider there are 200 users, in which case it is really painful/in-efficient memory usage to save the incrementScore function for every user when we know all it does is incrementScore by 1 and this operation is same across all users.

Turns out we can further optimize this approach using Object.create() method as below :

function generateUser(name,score){
  let newUser = Object.create(userFunctionsStore);
  newUser.name = name;
  newUser.score = score;
  return newUser;
}

let userFunctionsStore = {
  increment: function() { this.score++ ;}
}

let user1 = generateUser('BruceWayne',10);
console.log(user1); // { name: 'BruceWayne', score: 10 }
user1.increment();
console.log(user1); // { name: 'BruceWayne', score: 11 }

Ohkay! , Bunch of stuff there..

We have now modified the generateUser() to create a new Object using Object.create() method instead of {}, using which we can now achieve classical inheritance.
More information here do check it out.

So, Object.create(userFunctionsStore) means, any and all functions declared inside of userFunctionsStore will be accessible by all newUser Objects. this is possible because the functions inside userFunctionsStore are present in the Object instance of Object.create in the prototype property which is present in the global memory space, which is referred by any new newUser Objects using a link in _proto_ property implicitly.

Using this property explicitly is deprecated , more info here

Now, the code is looking little better and also more maintainable.

But , there still is a bunch of code that we can avoid, As currently we are creating the prototype bond using Object.create() using a userFunctionsStore Object , but we can automate all of that using a keyword new as below :

function generateUser(name,score){
  this.name = name;
  this.score = score;
}

generateUser.prototype.increment = function() {this.score++};

let user1 = new generateUser('Bruce Wayne',10);
console.log(user1); // { name: 'Bruce Wayne', score: 10 }
user1.increment();
console.log(user1); // { name: 'Bruce Wayne', score: 11 }

We are able to add functions to the prototype of the generateUser function explicitly and also we need not create , call , return the object from generateUser. And All user Object will be able to access the prototype functions by utilizing prototypal inheritance.

It's amazing how much stuff the new keyword does for us. Read more about it here

The code now seems perfect. But there are still some changes we can do to make the code more elegant, Since currently to call generateUser() the new keyword is needed, without which the this keyword would point to Global this.
To solve this we can use a new syntax called class.

Also the best practice is to capitalize the first letter of function when we need to use new keyword for calling the function , in this case :

function GenerateUser(name,score){
  this.name = name;
  this.score = score;
}

Bonus :- class in JS

Ohkay! , Now we will try to use class to replace the function as below :

class GenerateUser {

}

Now we need a function, which to assign the name and score , which we can do in the constructor which is called when we call the class.

class GenerateUser{
  constructor(name,score){
    this.name = name;
    this.score = score;
  }
}

let user1 = new GenerateUser('Bruce Wayne' , 10);
console.log(user1); //{ name: 'Bruce Wayne', score: 10 }

As simple as that, looks more clean.

But now we need to make an increment() function which we can directly declare inside a class as below :

class GenerateUser{
  constructor(name,score){
    this.name = name;
    this.score = score;
  }

  increment() {
    this.score ++;
  }
}

let user1 = new GenerateUser('Bruce Wayne' , 10);
console.log(user1); //{ name: 'Bruce Wayne', score: 10 }
user1.increment();
console.log(user1); //{ name: 'Bruce Wayne', score: 11 }

Nothing has changed by using class instead of function, all the underlying principles are same, as we saw before using function prototypes. Just that the code is more readable and maintainable. And now you know how it works under the hood.

Thanks to Will Sentance and Kyle Simpson for their amazing work.

Let me know if you have any doubts or any issues!.

Thank you 🙏 !

CALLBACK FUNCTIONS

G U BHARATH CHANDRA — Wed, 26 Feb 2020 14:59:08 +0000

What is a callback function? 🤔

As you might already know in javascript we can pass functions as arguments to another function.
✔️ will explain why you would want that later in this post.

So, yeah a callback function is a function that is passed as an argument to another function [which is called a higher order function] to be called back at a later time.

Let's see an example 😃


function Higher_Order_function(function(){
        setTimeout(function(){
            console.log('Served!');
        }, 2000);
    }
}

As you can see, here we are calling a function called Higher_Order_function and expecting it to log Served after 2s ⌛.

It is important to know that javascript is Single Threaded. and synchronous [on the barebones]. That means it's not going to stop running for anything.

We can use ajax , callbacks , async + await , promises to write asynchronous javascript code.

Let's dig deeper ⛏️

Let's learn a few things on how javascript handles code so that we can dig a little deeper into how callbacks work.

✔️ CALL STACK
✔️ WEB API
✔️ CALLBACK QUEUE

Whenever javascript needs to excecute a function or a statement, it puts it into the call stack. After calling the function, it decides based upon the function wether it's a web api and if there is something which needs to be queued (callback queue) [remember javascript is single threaded].
Web apis just means that it needs to be handled asynchronously because we are not sure when we might receive the information needed from the api
ex: an external api, event loop , or basically anything we need to wait for.

Thanks to PHILIP ROBERTS for the visualization tool. You can see that in action by visiting this link. 🔰

Why use callback functions?

The idea here is to queue up the tasks which are currently waiting for something else to be resolved [Say, response from an external api] so that the Call Stack is free for the normal tasks to run. So, callbacks are useful for writing some asynchronous code when needed.

But it's not all butterflies and sunshine!

Have you ever heard of Callback Hell?

Well, the name is no mistake. There is an entire website dedicated to it http://callbackhell.com/ ℹ️.

It basically is a conundrum where we end up writing some asynchronous code using callbacks but chained and entagled to each other which makes it difficult for us to debug or even understand what's happening.
Huh! feels like hell 😨

Let's see that with an example:


getData(function(x){
    getMoreData(x, function(y){
        getMoreData(y, function(z){ 
            ...
        });
    });
});

What is "callback hell" and how and why does RX solve it?

Aug 2 '14 Comments: 1 Answers: 8

124

Can someone give a clear definition together with a simple example that explains what is a "callback hell" for someone who does not know JavaScript and node.js ?

When (in what kind of settings) does the "callback hell problem" occur?

Why does it occur?

Is "callback hell" always related to…

Open Full Question

Some interesting things worth learning 📗

Should i be using callbacks? 😕

Well, as long as you understand what you are working with, you are good to use it. But if any other incremental changes may have to be done to that function then you are better off with promises.

I still use callbacks sometimes especially when i need a function like setTimeout. But other than that i always use promises and/or Rxjs.

Why do i use promises or Rxjs instead of callbacks? 💭

Well as you know callback functions are .... functions! that means they do not return a value themselves but will call a function at later point in time which returns a value.
But promises return value as soon as they are resolved or rejected.
Same way with Rxjs Observables, it returns an observable which we subscribe to and then will return a value when the asynchronous task finishes.

Note: An advantage of using Observables is that unlike promises we can emit multiple values over time using Observables, we can cancel if we choose to and can use with map, filter, reduce etc...with ease.

While there are many asynchronous tasks we can make use of promises in, I personally do a lot of API calls and that is where i use promises and Observables [For caching and stuff] where previously when i was just using ajax or jQuery with callbacks, it was a nightmare to chain multiple requests and merge them to return the result [Rxjs just makes it easier].

Let's see that with a simple example:

Using ajax and callback:


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

The above code, on success will run the function handleData which can have the logic you need.

Using promises:


const baseUrl = `https://placeholder.com/`;

function callPlaceholder(){
    return this.http.get(baseUrl).toPromise();
}

And then use then() with callPlaceholder() as below:


callPlaceholder().then( res => {
        console.log(res);
    },
    error => {
        console.log(error);
    }
)

So, yeah since we now have many ways to handle asynchronous requests, it's better to use them: [Especially for http requests]

✔️ XMLHTTPRequest.onreadystatechange()
✔️ jQuery methods
✔️ fetchApi
✔️ Axios
✔️ httpClients for respective frameworks & Rxjs🔥

For more info visit this link

If you are curious about why javascript isn't multithreaded 👇

Why doesn't JavaScript support multithreading?

Sep 2 '08 Comments: 5 Answers: 15

293

Is it a deliberate design decision or a problem with our current day browsers which will be rectified in the coming versions?

Open Full Question

Wrapping up

We now know:

✅ what callback functions are
✅ how to use them
✅ why we use them
✅ the concept behind why we might need them
✅ and when to use them.

Hope this article has helped you! 💁‍♂️

Stay tuned 🍿 for the final post in this series Generator functions.

Thank you!😀

Immediately Invoked Function Expressions [IIFE's]

G U BHARATH CHANDRA — Sat, 08 Feb 2020 15:23:51 +0000

What are IIFE's? 😕

An immediately invoked function expression [IIFE] is a function, which runs as soon as it is created.

Whoa! that seems dope.

☐ So, can IIFE's be named?
☐ Can we assign it to a variable?
☐ Will these functions be hoisted?
☐ Do these functions allow closures?

Cool, we will answer all these questions and some more, further in this post. 😄

How to declare an IIFE?

Well, there is only one thing we can do, ie.. declare, but we cannot invoke it.

We just need to wrap a normal anonymous function in a parenthesis () and then append with (). We can also pass any arguments if needed.

(function sayHi(name){
    return `Hi ${name}`;
}) ('bruce');

If we run the above snippet, we will get -> "Hi bruce" without even invoking.
If we try to invoke it like a normal function, it will throw a

 sayHi(`BRUCE`);   //Uncaught ReferenceError: sayHi is not defined

There are many ways to declare an IIFE 😁

IIFE using Unary operators:

-(function() {
  // do something
})()

~(function() {
  // do something
})()

!(function() {
  // do something
})()

Named IIFE:

(function doSomething() {
  // do something
})()

IIFE using semicolons:

;(function() {
  // do something
})()

IIFE using arrow functions:

( () => {
    // do domething
})();

Why do we need IIFE? 🤔

Well, there are some cases where you want to achieve some or all of the below points:

Need a function that is not accessible anymore after being invoked.
Need a function whose variables are not accessible outside of it.
- You can use block-scoped variables or let and const depending on the use case.
When you don't want to pollute the global object.

Let's see an example where we can use IIFE 😄

Say you need a function that returns random Id every time you call it.

Well, yes we can use generators and there are many ways we can do this, but we will see how to do that using IIFE.

Let's make a function that returns an Id concatenated with a counter so that it is unique.

function(){
  ++count; 
  return `Id ${count}`
}

Now, we can wrap this function in an IIFE called IdMaker:

const IdMaker = (function(){
  let count = 0;
    function(){
      ++count; 
      return `Id ${count}`;
    }
}) ();

Now, we just return the function that increases the count and returns it:

const IdMaker = (function(){
  let count = 0;
    return function(){
      ++count; 
      return `Id ${count}`;
    }
}) ();

console.log(IdMaker()); // Id 1
console.log(IdMaker()); // Id 2
console.log(IdMaker()); // Id 3

Things we have learned so far: 💡

✔️ We can return functions in IIFE just like normal functions.
✔️ And we can also achieve closures in an IIFE.
✔️ No, IIFE's are not hoisted. Hoisting is good but we should take care of when to and when not to.
✔️ Yes, we can assign IIFE's to a variable but that won't hoist them.

I don't understand what's happening 😕

The basic idea here is not to pollute global object ie.. not to use a variable and a normal function which will be hoisted.

So, if we were to do this using normal functions then the variable count would be a global variable and then the function also would be hoisted.

So, by creating an IIFE:

Variable count is created when we call IdMaker() the first time.
The next time we call IdMaker() it just runs from the same memory because we have another function inside the IIFE and we can access that function and count is not created again.
So, when we invoke the IIFE using IdMaker() we are actually invoking the counter function inside the IIFE but not the IIFE itself.

Note 📗 : We cannot invoke an IIFE, it only runs once when it is created. But it does allow the concept of closures.🔥

Wrapping up

Now, we know:
✔️ What are IIFEs?
✔️ Why do we need them?
✔️ How to use them? and When to use them?

Hope! this post helped you understand the concept of IIFE's 👍

Stay tuned for further posts in this series. 😄

Thank you!

Methods

G U BHARATH CHANDRA — Thu, 06 Feb 2020 17:57:28 +0000

So what are methods?

Methods are basically functions that are defined inside an object.

Let's see that with an example: 😀

To scroll to a particular position we use window.scrollTo(x) right?
Here window is an object and scrollTo is a function. ie.. scrollTo is a method.

Similarly, console is an object and log is a function and since it lives inside a function, we call it a method.

Creating our own methods: 😁

The regular way:

const batman = {
    alias: function(){
        return "BRUCE WAYNE";
    }
}

batman.alias() // BRUCE WAYNE

Shorthand method:

const batman = {
    alias() {
        return "BRUCE WAYNE";
    }
}

batman.alias() // BRUCE WAYNE

Arrow function:

const batman = { alias: () => `BRUCE WAYNE`};

batman.alias() // BRUCE WAYNE

Generally, shorthand methods are preferred, arrow functions are best used when you know that you don't need the scope of this since arrow functions don't have the scope of this.

Why and when not to use arrow functions?

I have explained that in the previous post in this series "Arrow Functions".

Things you must know about methods 😆

Methods are not constructors, and we cannot instantiate them like constructors.
It will throw a TypeError. 😦

new batman.alias() //TypeError: batman.alias is not a constructor

Async methods:

Using short-hand syntax:

const batman = {
    async alias() {
        await somePromiseToResolve;
    }
}

Using arrow functions:

const batman = { alias: async () => {
    await do_something;
  } 
};

The same way we can use methods in Generator functions as well which we will see in the upcoming posts in this series.

Wrapping up

Well, we just understood what methods are and how to use them in different and efficient ways.

Stay tuned for further posts in this series. 👍

See you in the next post Immediately invoked function expressions. 😃

Thank you!

Arrow functions

G U BHARATH CHANDRA — Tue, 04 Feb 2020 16:11:45 +0000

What are Arrow Functions?

I have previously talked about arrow functions in my other post.

UNDERSTANDING ES6 ARROW FUNCTIONS

G U BHARATH CHANDRA ・ Jan 27 '20 ・ 2 min read

#javascript

Basically, arrow functions introduced in es6 are writing normal functions but in a more concise and shorter way.

Arrow functions are by default anonymous, you have to assign the function to a variable to access it.

Implicit return:

Using arrow function we can return something implicitly ie.. without actually using the keyword return

const sayHi = (name) => `Hi ${name}`;


sayHi('bruce');
//result
Hi bruce

See? the string is being returned without using the keyword return, well it's not a big thing but keeps the code clean.

Note: Since, arrow functions are assigned to a variable, these aren't hoisted.

Things you must know about Arrow function😆

Arrow functions do not bind their own this, instead, they inherit the one from the parent scope, which is called lexical scoping. This makes arrow functions to be a great choice in some scenarios but a very bad one in others.
ie.. this inside the arrow function would have the same value as it did right before the arrow function was assigned.
An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new).
Arrow functions are always anonymous. This means you cannot bind a value to this.
So, in a case where you want to make use of closures and utilize the power of this keyword then arrow functions are not a great choice and will break your code.

Here we talked about lexical scoping, this keyword and binding, if you have no idea what those mean, we will discuss those concepts at the end of this series. ☺️

WRAPPING UP

Now you know what arrow functions are, how and when to use them along with a concept called implicit returns to make your code look cleaner.

Stay tuned for further posts in this series. 😁

Thank you!

Function declaration and Anonymous function

G U BHARATH CHANDRA — Mon, 03 Feb 2020 04:49:00 +0000

How to write a Function?

You might already be familiar with these functions, which can be declared using the keyword function with a function name:

function sayHi(){
    console.log('HI');
}

Parameters and Arguments:

Just like in any other language we can declare a function with parameters;

function sayHi( name ){
    console.log(`HI ${name}!`);
}

Later we can invoke the function with an argument which the parameter will hold after getting invoked:

sayHi('BRUCE WAYNE');

// result
HI BRUCE WAYNE!

As you can see, parameters are what we call placeholders when we declare the function, Arguments are what we call the values or references we pass when we invoke the function.

We can also have default parameters:

function sayHi(firstName = 'john' , lastName='doe'){
    console.log(`HI ${firstName} ${lastName}`); 
}

We can pass arguments or not and the function will run just fine but with default parameters when we do not provide any arguments:

// No arguments passed
sayHi();
// result:
HI john doe

// Single argument passed:
sayHi('bruce');
HI bruce doe

But, what if we want to pass a lastName but not firstName:
In that case, we pass the firstName as undefined which will then default to the default value provided which is john:

sayHi(undefined , 'wayne');

// result 
HI john wayne

Anonymous Function, Function Expressions and Hoisting

Anonymous functions are normal function declarations but with no name.

function(){
    console.log('I AM ANONYMOUS');
}

No name? How do I invoke it then?

You cannot invoke an anonymous function explicitly, you either have to use function expressions(which you will learn below) or use IIFE (a seperate post in this series).

Why do we need it ?

Well, in javascript there is a concept called hoisting.

Hoisting simply means physically moving all the variable and function declarations to the top of your code, so that the declarations are accessible everywhere.

A normal function declaration is hoisted ie.. the function can be invoked even before the function has been declared as below:

console.log(sayHi('bruce'); // will print hi bruce

function sayHi(name){
    return `hi ${name}`;
}

The above snippet will successfully run without any errors or warnings because javascript will hoist the function sayHi above all invokes so that it is accessible everywhere.

If for some reason you do not want this, you can use an anonymous function by assigning it to a variable, which are basically called function expressions.

console.log(sayHi('bruce')); // will throw error.

const sayHi = function (name){
    return `hi ${name}`;
}

The above snippet will throw an error "Uncaught ReferenceError: sayHi is not defined". Cause it is not hoisted.

NOTE: Function expressions are not hoisted.

A question you might ask:

But why?
Since a variable is by default hoisted in javascript and function expressions are functions assigned to a variable, isn't that variable hoisted?
Well, yes that variable in which the function is stored is in fact hoisted but the assignment to a function is not hoisted since functions are not values.

Wrapping up

Well, that's pretty much everything about function declarations, Anonymous functions, and Hoisting. Do check out other posts of this series.

If you find any improvements or topics that I might have missed, do let me know!
Thank You!

Intro - Types of functions

G U BHARATH CHANDRA — Sun, 02 Feb 2020 16:19:30 +0000

A Function in javascript is a collection of instructions that run when the function is invoked.

A normal function declaration in javascript is as declared as below:

function square(n){
  return n*n;
}

// Then invoke it as :

console.log(square(5)); // 25

While the above is understood, functions can also be declared as Function expression:

const square = function(n){
  return n*n;
}

// Then invoke it as :

console.log(square(5)); // 25

There are many types of functions which I will cover in this 6 part series.

Different types of functions:

Function declaration and Anonymous functions
Arrow functions
Methods
Immediately invoked function expressions
Callback functions
Generator functions

Stay tuned for further posts.

Understanding and Working with Javascript Objects

G U BHARATH CHANDRA — Wed, 29 Jan 2020 11:34:18 +0000

Okay, So what are objects anyway?

According to MDN :

In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties.A cup has a color, a design, weight, a material it is made of, etc. In the same way, JavaScript objects can have properties, which define their characteristics.

So, yes javascript Objects in a way are entities to be created when we need these entities to hold some properties and most preferably relate to
some real-world object [or not based on your requirement].

How to create an object?

Well, if you explicitly have never used or created an object, chances are you technically have used an Object.

whaaa..t? how?

Here, it comes ... An Array in JavaScript is an Object [One of many things anyway].
Curious about why and what type of an Object?
Here is a stack overflow post that might help:

Are Javascript arrays primitives? Strings? Objects?

Feb 19 '11 Comments: 8 Answers: 7

Are arrays merely objects in disguise? Why/why not? In what way(s) are they (such/not)?

I have always thought of arrays and objects in JS as essentially the same, primarily because accessing them is identical.

var obj = {'I': 'me'};
var arr = new Array();
arr['you'] = 'them';

console.log(obj.I);
console.log(arr.you);
console.log(obj['I']);

…

Open Full Question

Here is a screenshot from the console:

But, as you probably are thinking, yes we cannot create custom properties and define them for an array.

So, how do we create our own object?

Well here is a sample code from MDN :

var myCar = new Object();

Pretty much straight forward right, but since it is JavaScript, we are not actually type checking. [By default, it is of type any]

In typescript:

For people who want to try it in typescript [cause it's pretty much just a superset of javascript], it enforces type checking.

By using the above JavaScript code we will get the below compile time error:
Property does not exist on type 'Object'
while setting a property to myCar.

So, we need to explicitly mention that it is of type any as below:

let myCar: any = {};

If you want an object to be of a specific type then you need to create an interface and then create an object with type as the interface.

Okay, let's now dig a little deeper into objects and it's properties:

Since now we have an object myCar, let's set some properties to it:

The below snippet is from MDN:

myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;

Since we now have an object with properties, let's now see what we can do with it:

Display all the keys:

Syntax: Object.keys(objectName)

console.log(Object.keys(myCar));

(3) ["make", "model", "year"]
    0: "make"
    1: "model"
    2: "year"
    length: 3
    __proto__: Array(0)

Display all the values:

Syntax: Object.values(myCar)

console.log(Object.values(myCar));

(3) ["Ford", "Mustang", 1969]
    0: "Ford"
    1: "Mustang"
    2: 1969
    length: 3
    __proto__: Array(0)

There is a method called Object.entries():

This method returns all the Object's own properties as an array in [key : value] format.

console.log(Object.entries(myCar));

(3) [Array(2), Array(2), Array(2)] // See, each property is an array.
    0: (2) ["make", "Ford"]
    1: (2) ["model", "Mustang"]
    2: (2) ["year", 1969]
    length: 3
    __proto__: Array(0)

Property Descriptors:

So, now we know different ways to retrieve the properties of an object. What further helps us is to know that each property has descriptors, which can be accessed by a method Object.getOwnPropertyDescriptors(Objectname)

console.log(Object.getOwnPropertyDescriptors(myCar));

{make: {…}, model: {…}, year: {…}}
    make: {value: "Ford", writable: true, enumerable: true, configurable: true}
    model: {value: "Mustang", writable: true, enumerable: true, configurable: true}
    year: {value: 1969, writable: true, enumerable: true, configurable: true}
    __proto__: Object

As we can see from the above snippet that by default these are the properties that javascript sets to an Object. Let's see what these properties mean:

value: Value of the property
writable: true by default which means the property can be changed
get: a getter function for the property, called when the property is read
set: a setter function for the property, called when the property is set to a value
configurable: true by default, the property can be removed or changed
enumerable: true if the property is enumerable

Note: Since we did not use any getters or setters in the above code snippet, we cannot see those properties.

Let's now see how we can change a property descriptor:

To know if an object has a particular property:

console.log(myCar.hasOwnProperty('make')); // return True if available and False otherwise

True

Adding or changing property descriptor:

Syntax: Object.defineProperty(Object,property,descriptor)

console.log(myCar.propertyIsConfigurable('make'));

True // By default

Object.defineProperty(myCar , 'make' , { 
  configurable: false
});

This method adds property if not present, in this case make is present in the Object so we are just changing the descriptor of make.

console.log(myCar.propertyIsConfigurable('make'));

False // Since we change it in the above snippet.

Changing writable property descriptor [Read-Only properties]:

Object.defineProperty(myCar , 'make' , {
  writable: false
});

console.log(myCar.make = 'SHELBY');

// Runtime error 
ERROR TypeError: Cannot assign to read-only property 'make' of object '[object Object]'

The above snippet throws an error because we changed writable to false. Hence, it's read-only property.

Now, let's talk about another method too which is Object.assign(TargetObject,AsigneeObject):
This method can be used to assign the properties of one object to another.

    // Let's make another object
    let myCar2: any = {};
    myCar2.driver = 'KEN MILES';
    myCar2.engine = 'STRAIGHT 6, 3.3L';
    myCar2.specs = '122PS @4000rpm , 257Nm';

    // assign myCar2 properties to myCar
    console.log(Object.assign(myCar,myCar2));

    {make: "Ford", model: "Mustang", year: 1969, driver: "KEN MILES", engine: "STRAIGHT 6, 3.3L", …}
        driver: "KEN MILES"
        engine: "STRAIGHT 6, 3.3L"
        model: "Mustang"
        specs: "122PS @4000rpm , 257Nm"
        year: 1969
        make: "Ford"
        __proto__: Object

As we can see from above that now myCar has the properties of myCar2.

But, why do we need this method?

Here is an excellent post on medium that can help you understand the same.

When to use Object.assign(). I have discussed about the shallow copy… | by Neetish Raj | Medium

Neetish Raj ・ Apr 28, 2018 ・
Medium

To operate on Objects sometimes we might need an index of the property or we might need to iterate through the property.

Iterating through Object values. [Can do the same for Keys with Object.keys]:

    Object.values(myCar).forEach((element,i) => {
      if(element == 'KEN MILES'){ console.log('INDEX : ',i); }
    });
3 // Index of the property driver.

Okay! Now we know how to iterate through Object properties, But what if we need a property that is not to be accessible for iteration but should be available in the Object.

In that case, we can make the property descriptor as non-enumerable as below:

    Object.defineProperty(myCar , 'make' , { 
      enumerable: false
    });

    console.log(myCar.propertyIsEnumerable('make'));

    False // since we changed it above

Now, since the property make is not enumerable, let's try displaying the properties:

console.log(Object.keys(myCar));

(5) ["model", "year", "driver", "engine", "specs"]
    0: "model"
    1: "year"
    2: "driver"
    3: "engine"
    4: "specs"
    length: 5
    __proto__: Array(0)

As we can see the property make is not accessible.

console.log(myCar.hasOwnProperty('make'));

True

But as seen above the property is present in the Object.

Wrapping Up

We now know in javascript and typescript what Objects are , Why do we need them , how to create them and how to operate on them.

Hope this post helps you understand Objects in javascript.

If you find any mistakes , improvements or important topic i have missed do let me know.

Thank You!

UNDERSTANDING ES6 ARROW FUNCTIONS

G U BHARATH CHANDRA — Mon, 27 Jan 2020 06:37:23 +0000

Arrow Function syntax and how to use it:

As you might know a normal function is written as below :

let square = function(num){
    return num * num;
}

An arrow function is written as :

let square = (num) => return (num * num);

It is as simple as it looks, we just didn't use the keyword function but instead used a fat Arrow ( => ) , it doesn't seem to be much of an improvement right now, but arrow functions are pretty useful and clean. let's see how and when to use it.

Understanding the scope of the normal and arrow functions

const result = {
name: 'place holder',

traditionalFunction: function(){
    return function(){
        console.log('name: ',this.name);
        console.log('Arguments: ' , arguments);
    }
},

fatArrowFunction: function() {
    return () => {
        console.log('name: ', this.name);
        console.log('Arguments: ' , arguments);
    }
}
};

Here, we just have a code block for an object const result with 3 properties:

name,
traditionalFunction [which is a function],
fatArrowFunction [a function as well]

Let's see the difference when we create instances of the above function with arguments.


    const tradFunctionResult = result.traditionalFunction('hello','I am normal function');
    const arrowFunctionResult = result.fatArrowFunction('hello','I am Fat Arrow Function');

    tradFunctionResult();
    name:  
    Arguments:  Arguments[callee: , Symbol(Symbol.iterator): ]

    arrowFunctionResult();
    name:  place holder
    Arguments:  Arguments(2)["hello", "I am Fat Arrow Function", callee: , Symbol(Symbol.iterator): ]

As you can see, once you create the traditionalFunction which is anonymous, the context of neither this.name nor arguments passed while creating are not available to the function.
But whereas, the the ArrowFunction has same context as of the function while creation for both this.name and arguments.
[Well, we can achieve the same effect of arrow functions in normal functions using one of or combination of bind() , call() or apply()]

note: Yes, Bind, call and apply can be ditched when using arrow functions as discussed above we have all the context we need to work with by default.But, these can still be used when the function needs to be called later in certain events when it's needed. But this case is very rare and there are some other workarounds which is out of scope for this post.

Where do arrow functions make more sense and make your life easier?

Well, let's say an array of objects need to be iterated through in which case forEach can be used with arrow function:

    this.arrayOfObjects.forEach( (element) => {
        console.log(element.name);
    });

nice , clean and simple right!

with promises:

     this.someAsyncFunction().then( 
     result => {
         console.log('SUCCESS: ', result);
         ....
         ....
     },
     error => {
         console.log('FAILURE: ',error);
         ....
         ....
     });

Same way with Observables:


     this.someObservable.subscribe(
        response => {
            console.log('success : ',response);
            ....
            ....
        },
        error => {
            console.log('failure : ',error);
            ....
            ....
        });

As we know everything inside { } curly brackets is called a code block, but when we just need to invoke a single function or say do a simple computation, then we need not consider using code blocks instead, just do a oneliner as below:

this.arrayOfNumbers.map(n => n*n)

Wrapping up

Now, we know what arrow functions are, when and how to use them and hence can write some clean and easily readable code.

Thank you for reading this post, if found are any mistakes or improvements, do let me know.

DEV Community: G U BHARATH CHANDRA

Understanding the new keyword in JavaScript

Bonus :- class in JS

CALLBACK FUNCTIONS

What is a callback function? 🤔

Let's dig deeper ⛏️

Why use callback functions?

What is "callback hell" and how and why does RX solve it?

Some interesting things worth learning 📗

Why doesn't JavaScript support multithreading?

Wrapping up

Immediately Invoked Function Expressions [IIFE's]

What are IIFE's? 😕

There are many ways to declare an IIFE 😁

Let's see an example where we can use IIFE 😄

I don't understand what's happening 😕

Wrapping up

Methods

So what are methods?

Creating our own methods: 😁

Things you must know about methods 😆

Wrapping up

Arrow functions

What are Arrow Functions?

UNDERSTANDING ES6 ARROW FUNCTIONS

G U BHARATH CHANDRA ・ Jan 27 '20 ・ 2 min read

Things you must know about Arrow function😆

WRAPPING UP

Function declaration and Anonymous function

Anonymous Function, Function Expressions and Hoisting

Wrapping up

Intro - Types of functions

Understanding and Working with Javascript Objects

Are Javascript arrays primitives? Strings? Objects?

Since we now have an object with properties, let's now see what we can do with it:

When to use Object.assign(). I have discussed about the shallow copy… | by Neetish Raj | Medium

Neetish Raj ・ Apr 28, 2018 ・ Medium

Wrapping Up

UNDERSTANDING ES6 ARROW FUNCTIONS

Arrow Function syntax and how to use it:

Understanding the scope of the normal and arrow functions

Where do arrow functions make more sense and make your life easier?

Wrapping up

Neetish Raj ・ Apr 28, 2018 ・
Medium