DEV Community: Arif Imran

Beginners guide to Objects in Javascript

Arif Imran — Wed, 13 Jan 2021 12:53:30 +0000

In javascript, Most of the things are Objects. So having a grip over this concept is very necessary. In this guide, we are going to learn about objects, how it is created, used, and more. Let's get started 🔥

What is an Object?

According to Mozilla developer's guide, An object is a collection of related data and/or functionality. Basically, It consists of some key-value pairs that we call Properties. We can also store methods or functions inside objects.

Let's see how it looks and how we create an object -

var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   hobbies:['winning','driving Lexus'],
   isLion : true,
   message: function(){
      return `${this.firstName} says Lala!!!`
   }
}
console.log(user) //this will return all the object values 
console.log(user.message()) // this will run the function message inside the user object

Let's breakdown what's going on here.

Here we created an object name user and we stored all the properties inside {} brackets. For each property, we provide a key name and value for that, separated by a : colon ( in this case, firstName: 'Harshad'). And finally, all the properties are separated by , comma.

An Object can have properties of any data type, as we can see in the example, It has a string, number, boolean, array. Even we had a function in an object, which is called object methods.

How to access the object's properties:

Dot Notation(.) ⇒ This is what we used in that example to run the message function inside the user object. we access the values of properties in the object by using dot(.) after the key name. for example - we can get the age of the user in the previous example by doing console.log(user.age). This will give 45 as the result.
Bracket Notation [] ⇒ This is another way to access the values of the object. e.g.console.log(user['age']) this will give the age of the user that is 45.

Nesting objects ✨:

In the previous example, we could have also made a nested object instead of an array for hobbies. e.g.

//This is how we nest objects  
var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   isLion : true,
   hobbies:{
      firstHobby:'Winning',
      secondHobby:'Driving Lexus'
   },
   message: function(){
      return `${this.firstName} says Lala !! `
   }
}
// accessing nested object.
console.log(user.hobbies.firstHobby) // Winning
console.log(user['hobbies']['firstHobby']) //Winning

Set and update object members:

var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   isLion : true,
}

user.age = 55;
user.isLion = false;
console.log(user.age) //55
console.log(user.isLion) //false

I hope you go the idea of what is happening here, pretty straight-forward.

We can also set the new members by doing the same thing, e.g.

var user = {
   firstName: 'Harshad',
   age:45,
}
user.luckyNumber = 5; //this will create a nre property in user object
console.log(user) //{ firstName: 'Harshad', age: 45, luckyNumber: 5 }

What is 'this' keyword :

We have seen in the first example that we returned the firstName inside message function referring this.firstName. Basically, 'this' refers to the object itself in which it is written. In our example, this refers to the user object.

'this' is very useful — it always ensures that the correct values are used when a member's context changes. e.g.

var user1 = {
   name: "Harshad",
   age: 45,
   message: function () {
      return `${this.name} says Hii`;
   },
};
var user2 = {
   name: "John",
   age: 30,
   message: function () {
      return `${this.name} says Bye`;
   },
};
console.log(user1.message()); // Harshad says Hii
console.log(user2.message()); // John says Bye

Even we used ${this.name} in both the objects, but we get different results i.e. Harshad and John respectively. It is highly used when we dynamically create objects.

So that's it for now, this is enough for getting started. If you liked this post, pls upvote and share. Also, you can follow me on Twitter for more development-related info.Very much appreciated. Have a great day and Happy coding :)

Brief touch on map() , filter() and reduce() methods

Arif Imran — Mon, 11 Jan 2021 11:48:17 +0000

These are a few methods that are highly used in development and knowing these is a must. So let's begin!

Map:

The map() method creates a new array from an existing one and applies the function to each one of the elements of the first array.

eg.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

Filter:

The filter() method returns the values based on the conditional statement. It checks the condition for each element of the array and if the condition is true is returns it otherwise not.

eg.

const numbers = [4, 7, 12, 3];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [4, 12]

const students = [
  { name: 'abc', attendance: 96 },
  { name: 'mno', attendance: 60 },
  { name: 'def', attendance: 89 },
  { name: 'jkl', attendance: 65 },
  { name: 'xyz', attendance: 40 }
];

const eligibleStudent = students.filter(student => student.attendance >= 75);
return eligibleStudent; // [ { name: 'abc', grade: 96 }, { name: 'def', grade: 89}]

Reduce:

The reduce() method reduces the array to a single value, executing the provided function on each element of the array.

syntax:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Total (The initialValue, or the previously returned value of the function) and currentValue (value of the current element) are required parameters. InitialValue is optional, it sets the initial value of the array. If no initialValue is supplied, the first element in the array will be used as the initial. Calling reduce() on an empty array without an initialValue will throw a TypeError.

e.g.

const euros = [29.76, 41.85, 46.5];
const sum = euros.reduce((total, amount) => total + amount); 
console.log(sum)  // 118.11

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0); 
console.log(totalYears) //82

That's it for this topic. If you learned something, share it with your dev friends. Follow me on Twitter for daily tweets about development and tech stuff. Happy coding 👨‍💻❤.

Justify-content and Align-items in a nutshell

Arif Imran — Wed, 30 Dec 2020 16:28:59 +0000

Justify-content:

This is one of the most useful properties in flexbox. It provides alignment along the main-axis, distributes the free-space in an order. Lets's understand this visually.

justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;

There are start | end | left | right values too, that we don't use much often

Flex-start (default): items are towards the start of the flex-direction.

Flex-end: towards the end.

center : at the center.

space-between: Items are evenly distributed in the line; the first item is on the start line, the last item on the end line.

space-around: Items are evenly distributed in the line with equal space around them. Each item has equal space around them, look at the illustration carefully.

space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Align-items:

This gives positioning in the cross-axis of the flex-direction. It's just like justify-content but in cross-axis. Its values are,

align-content:stretch | flex-start | flex-end | center | baseline;

All the values are pretty self explanatory,

stretch (default): stretch to fill the container.

flex-start: items are placed at the start of the cross axis.

flex-end: items are placed at the end of the cross axis.

center: items are centered in the cross-axis

baseline: items are aligned such as their baselines align

That's it for justify-content and align-items.
This is a part of my complete guide to Flexbox post on my website. Hopefully, You liked it, if so then do check out the complete guide on my website. You can follow me on Twitter for daily tweets about development and design. Thank u. Happy coding :)