What is Dot vs Bracket Notation in Accessing JavaScript Object

What is Dot vs Bracket Notation in Accessing JavaScript Object

Learn when to use dot and bracket notation in JavaScript.

Dot vs Bracket Notation in Accessing JavaScript Object. Learn when to use dot and bracket notation in JavaScript.

Dot Notation

This is the most popular and most used way of accessing the property of an object. This makes code more readable. Dot notation is used most frequently.

Syntax: **obj.property_name**

var user = {name : "Mark"};

user.name ; // "Mark"

When not to use dot notation

Consider that we are having a property name as 123

var obj = {
 '123' : 123
};

In the above case if we cannot access using

obj.123; 

So, If the property name is not a valid **identifier** , then we cannot access its value using . notation.

What is an Identifier?

An identifier is a sequence of characters in the code that identifies a variable, function, or property. Generally name of function or variable or property name of Object

What is a valid Identifier?

  • In JavaScript, identifiers are case-sensitive and
  • can contain Unicode letters, $, _, and digits (0-9),
  • but may not start with a digit.

In this case, we can use bracket notation

var obj = {
 '123' : 123
};
obj['123']; // 123

Note: In JavaScript $ , and _ are valid identifiers. so we can access those properties using . notation.

var obj = {
   $ : 10,
   _ : 20
}

obj.$; // 10

obj._; // 20
Bracket Notation

The bracket notation is used when the property name is an invalid identifier(starts with a number, contains symbols).

var obj = {
 test-123 : "test"
}

// in this case we cannot use dot notation

obj['test-123']; // "test"

If the property name is **number** then we don’t need to wrap the property name inside single /double quotes in object creation. But in bracket notation, if the property name is whole number , then we don’t need to wrap the name inside single /double quotes . But if the property name is double , then need to warp the property name inside single /double quotes .

Example 1: whole number

var obj = {
 123456 : 10
}

obj[123456];

Example 2: Double

var obj = {
 123.456 : 10
}

obj[123.456]; // undefined

obj['123.456']; // 10

Example 3: Using an invalid number

var obj = {
   123.123.123 : 10 // throws invalid number error
}

For this case use single/double quotes

var obj = {
   '123.123.123' : 10
}

Example 4: Using special symbols

var obj = {
  '123-test' : "test" 
}

obj[123-test]; // error(test is not defined)

obj['123-test']; // "test"
Using variable as the property name

Example 1:

var test = "test";

var obj = {
 test : "Test success"
}

obj[test] // "Test success"

Example 2 :

var obj = {
  name : "Mark"
  age : 20
}

var name = "age";

obj["name"]; // Mark
obj[name]; // 20

Example 3: Real-world Example of using bracket notation

function getFood(user) {

let foods ={
      veg :      ["🍏", "🌽", "🍕", "🍅"],
			
      'non-veg': ["🐓", "🐣", "🥩", "🍖"] 
   }
	 
   let {foodPreference} = user;
	 
   return foods[foodPreference];
	 
}

let user = {name: "Mark", foodPreference : "veg"};

getFood(user); // ["🍏", "🌽", "🍕", "🍅"]

We can also use object as the property name, but that will be converted into **[object Object]**

var a = {};

var b = {};

var c = {};

c[a] = 10;

c ; {[object Object]: 10}

c[b] = 20; // this will replace old [object Object]

c; {[object Object]: 20}

We can also have empty string as property name

var obj= {};

var emptyString = "";

obj[emptyString] = "10";

obj[emptyString]; // 10

Thank you for reading ! Hope this tutorial will surely help and you!

Is Low-code or no-code development is future of mobile app development

Is Low-code or no-code development is future of mobile app development

Mobile app development has skyrocketed over these years with the increasing demand of mobile apps for a variety of purposes like entertainment, banking, weather update, health, booking movie tickets, booking a taxi etc. With the latest...

Mobile app development has skyrocketed over these years with the increasing demand of mobile apps for a variety of purposes like entertainment, banking, weather update, health, booking movie tickets, booking a taxi etc. With the latest technologies adopted by mobile app development services, there are different app development approaches which are being practiced. Among them is low-code or no-code development. But will it be the future of mobile app development? Will any mobile application development company start taking this approach as the primary one. Let’s try to find a detailed answer to this question.

But first, let’s understand what this approach exactly is? Well, it is a streamlined approach which involves swift design as well as development with minimal coding, generally relying on different third-party APIs.

Even though there isn’t any single definition of no-code or low-code development because it is actually more of a mindset rather than something which can be directly measured, this mindset has certainly led to a vast community mushrooming up with this mentality. Android app development services are rapidly adopted by this approach. Low-code app innovators are rapidly disrupting all types of various industries. There are a plethora of benefits to these low code platforms and let’s look at this.

1. Less Number of Bugs

It is pretty evident that less code actually means fewer bugs. As simple as that. The entire bug testing phase is actually a major part of modern and latest application development. It is quite inevitable that various issues will come up if there is actually enough code present there. But the best thing regarding low code platforms is that there’s certainly less to test. Also, when they actually tap into APIs, those particular APIs are actually tested by other people.

Lesser number of bugs is better for both users, as well as developers since less amount of time, will be taken up with bug-fixes and troubleshooting. Also, the fast pace of this development approach actually means that if in any case a bug is found, it is generally better just to develop a new iteration rather than fixing it.

2. Significant Lower Costs

Among the most obvious reasons for why you would actually opt for any low code platform is that in reality, low code results in lower cost. Low code development leads to faster app development which saves a lot of time and as a result, lower cost.

It's not only good for companies but also for developers. It certainly cut out the intermediaries, and while they charge less, they use fewer resources and finally come out on top. It is fun for developers because it stops them from actually finding themselves stuck on one particular project which seems to last forever. This is why most of the companies hire app developer who is a well-versed with low-code development.

3. Better Accessibility

The lesser amount of code an application uses, the lesser bandwidth is needed to download it as well as run it. This is quite good news for the people who are based in rural areas or in different developing countries where access to the internet isn’t as prevalent as Western countries. Also, as low code applications can easily be created quite easily than a traditional app, they can easily be released much more swiftly and at a much lower price, and sometimes for free. iPhone app development services follow this approach because it will help in increasing the uptake of their apps as it reduces the entry barrier for every person from lower-income families.

Innovative Development Approach

Among the most promising instances of a low-code or no-code platform is Uber. The apps tap into Google for Maps, Dropbox for storage, Braintree for payments and much more. The most interesting thing about this is that app programming interfaces of APIs which Uber actually relies upon are easily available to anyone who wishes to use them. Uber took those APIs and then used them to create, which was new without requiring to develop each of those particular individual elements, all by themselves. They developed their own brand on top of it by means of looking at how they could actually differentiate themselves from the rest of the others. Mobile app development services should follow this example to create their own low code mobile app which disrupts the market.

The best thing about this is that it inspires innovation. At present, the marketplace actually decides, and only the best applications rise to the top. Also, low code development easily allows developers to iterate much more quickly and can aim for higher more.

The Role of Artificial Intelligence (AI)

Artificial Intelligence is certainly making big waves in different businesses, and as this technology improves further, it will find its way in different other uncharted areas. Among those areas is the low code app development, where it comes in quite useful for a wide range of tasks and actions including the integration of various data sources or just making sense of an entire unstructured or semi-structured data.

Artificial Intelligence is quite great at analysing and conducting trial and error. Hence, it won’t be quite long until the usage of AI becomes quite a standard part of the low code app development. A mobile application development company can find ways to reduce the total amount of code that it is using through AI and flagging potential and possible improvements.

Conclusion

It is quite certain that low-code or no-code app development is the future of app development for one of the simplest reasons that it is quite easier as well as faster and efficiently uses time. It actually doesn’t matter whether Android app development services or iPhone app development services are on-board with this particular change or not. This is quite inevitable as this approach is the path of least resistance. Also, as the inherent demand for low code platforms keeps in growing, developers will certainly find themselves to adopt it.

It is quite a great news as it will push the developers of mobile application development services to become the best. Also, there won’t be any time to redoing it to create the same thing, or any room for sloppy code as well as lengthy development processes which makes the mobile apps redundant even before they are actually finished. Hence, low-code or no-code development will certainly lead the future of mobile app development, and mobile app developers certainly have to get on the bandwagon, one way or the other.

Block any Event of Browser using Javascript codes

Block any Event of Browser using Javascript codes

In this article, we will go through possible ways to block any event using Javascript codes

In most browsers there are three possible kinds of events triggered when a keyboard key is pressed or released,

  1. keydown
  2. keypress
  3. keyup

You can check which key was pressed or released whenever KeyboardEvent is triggered because that event contains information and based on that event information you can write you custom logic to handle that event.

Note

The implementation will fail if the user disables JavaScript.

Base Code to trace any javascript event,

document.addEventListener("keydown", function(event)  
{  
   console.log(event.which);  
   console.log(event.keyCode);  
   console.log(event.shiftKey);  
   console.log(event.altKey);  
   console.log(event.ctrlKey);  
   console.log(event.metaKey);  
}   

List of Avaibale Javascript Code

We can use the below code to prevent opening of context menu, copy cut paste, or view source code on any page.

Many times we want to disable some existing functionality on a webpage for any security reason.

Eg: prevent images from being downloaded, copy the content, etc...,

Disable context menu on right click,

$("body").on("contextmenu", function (e)
   {
      return false;
   });
});

Or,

document.oncontextmenu = function() {
   return false;
}

Disable right click menu on particular section on page,

$(document).ready(function(){
   $("#youDivSectionId").bind("contextmenu", function(e) {
      return false;
   });
});

Disable Cut, copy, paste,

$(document).ready(function(){
   $('body').bind('cut copy paste', function (e)
   {
      e.preventDefault();
   });
});

Let's Block the same cut, copy, paste events with javascript codes,

$(document).ready(function(){
$(document).keydown(function(event) {
   //event.ctrlKey = check ctrl key is press or not
   //event.which = check for F7
   // event.which =check for v key
   if (event.ctrlKey==true && (event.which == '118' || event.which == '86')) {
      event.preventDefault();
      }
   });
});

Prevent browser Debugger console example,

$(document).keydown(function (event) {
// Prevent F12 -
if (event.keyCode == 123) {
   return false;
}
// Prevent Ctrl+a = disable select all
// Prevent Ctrl+u = disable view page source
// Prevent Ctrl+s = disable save
if (event.ctrlKey && (event.keyCode === 85 || event.keyCode === 83 || event.keyCode ===65 )) {
   return false;
}
// Prevent Ctrl+Shift+I = disabled debugger console using keys open
else if (event.ctrlKey && event.shiftKey && event.keyCode === 73)
{
   return false;
}
});

Thank you for reading ! I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers. Learn Functional Programming and how it enables developers to move from imperative to declarative programming. Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes. Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

Functional Programming for JavaScript Developers

Learn functional programming and how it enables developers to move from imperative to declarative programming

Improve your code with functional patterns like pure functions, compose & map/reduce/filter...plus advanced concepts like fusion, transducing and monads!

Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes

Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Go beyond the fundamentals of asynchronous JavaScript and use features and techniques that will help you reduce code and create smarter applications.

Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

What you'll learn

  • On the surface, this course is designed for beginning and intermediate JS developers who want to learn the fundamentals in order to understand and use functional programming in both ES5 and ES6. However, this course is also perfect for people preparing to enter into competitive JavaScript bootcamps