Skip to main content

Know Everything about Objects in Javascript - Basics

As we know in Javascript there are two different datatypes - Primitive Datatype like string, number, boolean, undefined, null, Symbol(introduced in ES6) and Reference Datatype like object.
Primitive datatypes are immutable(cannot be changed) and values contain only a single thing (a string or a number etc) whereas Objects are mutable(can be changed).

What is Object?

An object is an unordered list of data types, stored as name-value(or key-value) pairs. Each item in the list is called a property (and functions are called methods).e.g.
let person = {name : "Alex",  age: 27 };
console.log(person); 
output:
    1. {name: "Alex", age: 27}
      1. age27
      2. name"Alex"
      3. We can also create the same person object differently
let person = new Object();
person.name = "Alex";
person.age = 27;
console.log(person);
output:
  1. {name: "Alex", age: 27}
Generally, property names are kept as string but it can be a string or a number.e.g.
let person = { name : "Alex", 34 : "age", "Year of graduation": 2014 };
  1. {34: "age", name: "Alex"}

NOTE : If the property name is a number or string with space, it has to be accessed with the bracket notation.

Is object a Reference datatype?

An object, is a reference data type. Variables(e.g. person) that are assigned a reference value(means object) are given a reference or a pointer to the location in memory. The variables don’t actually store the value.This is the reason why objects are called reference datatype.
Also because of reference type, when a object is changed, all its referenced objects gets changed and vice-versa.e.g.
let person = { name : "Alex" , age : 27 };
let man = person;
console.log(man);
  1. {name: "Alex", age: 27}
// Now if we change the property of man,it will change person object and vice-versa
man.name = "Chris";
console.log(man);
  1. {name: "Chris", age: 27}
console.log(person);
  1. {name: "Chris", age: 27}
Similarly if we change person,it will reflect in man also.

NOTE : To avoid this we can use spread operator introduced in ES - 6.

Creating object from another object

let person = { name : "Alex" , age : 27 };
let man = {...person};
Assign new property 
let lynda = {...person,sex : "female" };
Reassign value to existing property
let marrie = {...lynda, name : "Marrie"};

Accessing properties of object

The properties of an object can be accessed in two ways:
  • Dot Notation
  • Bracket Notation
Dot Notation is highly used to access the property value of object. We can use dot-notation to read/change or create a property of object.
let person = { name : "Alex" , age : 27 };
console.log(person.name); // Alex
person.name = "Alex Voucher";
If we try to access a property which doesn't exist for an object we get undefined value for it.
console.log(person.profession); // undefined
person.profession = "Engineering";
console.log(person);
  1. {name: "Alex Voucher", age: 27, profession: "Engineering"}
The key or property name of object can be a string, number or string with spaces. In case of property name with single word can be accessed with dot-notation but property with number or string with space can be accessed with bracket-notation.
let person = { name : "Alex" , age : 27 , "year of birth" : 1990 , 3 : "graduation degree"};
console.log(person["name"]); // Alex
console.log(person["year of birth"]); // 1990
console.log(person[3]); // graduation degree
person["profession"] = "Engineering";
console.log(person);
  1. {3: "graduation degree", name: "Alex", age: 27, year of birth: 1990, profession: "Engineering"}

Object as a property
let person = { name : "Alex" , age : 27 , 
                address : { 
                    city : "New Delhi", 
                    country : "India"}
             };
console.log(person.address.country); // India
Deleting a property
delete person.age;   // true
console.log(person.age); // undefined

So in this article we have covered the basics of Javascript object. Hope this article was helpful. Subscribe and leave your comments to support.
Thank you!!

Comments

  1. Easy to understand.
    I found it helpful. kindly write on hoisting and closure as well.

    ReplyDelete

Post a Comment

Popular Posts

Come Closure in Javascript

What is a closure? If we want to derive a definition,we can say, A closure is a feature of Javascript where inner function has access to the outer (enclosing) function’s variables—scope chain. This scope chains means inner function has: access to its own scope (variables defined between its curly brackets and its parameters),access to the outer function’s variables and parameters, access to the global variables. Now we will look into it in detail. Consider following example
var globalVar = "xyz"; function outerFunc(outerArg) { var outerVar = 'Alex'; function innerFunc(innerArg) { var innerVar = 'Chris'; console.log("globalVar = " + globalVar); console.log("outerArg = " + outerArg); console.log("innerArg = " + innerArg); console.log("outerVar = " + outerVar); console.log("innerVar = " + innerVar); } innerFunc(456); } outerFunc(123); In this example, i…

Javascript Hoisting Interview Question and Answers - 5

In this post,I have tried to cover all the types of possible interview questions and answers on hoisting. If you are not familiar with the hoisting, I would highly recommend you to go to my post on hoisting. Once you are comfortable with the topic, you can attempt these questions. Understanding the type of question will help you to answer. I have provided the hint after each question. All the answers are given at the end of the post.
//Question 1 console.log('bar:', bar) bar = 15 var foo = 1 console.log(foo, bar) var bar Hint: Basics of hoisting //Question 2 var foo = 5 console.log('foo:', foo) var foo; var bar = 10; var bar; console.log('bar:', bar) var baz = 10 var baz = 12 console.log('baz:', baz) Hint: Basics of hoisting //Question 3 function foo() { function bar() { return 5 } return bar() function bar() { return 10 } } console.log(foo()); Hint: Think what happens if two functions wit…

Javascript Interview Question and Answer - 1

In this article we are going to discuss 2 javascript interview question and their answers.These questions are highly asked in the Javascript interviews.

Disclaimer: - You might have different solution working with all test cases for both the problems.

So lets discuss the first question.This question is to test your ability in terms javascript object knowledge and your logical thinking.

Q1. You have been given a nested object "Person" which has one of the property as "password".Write a generic function to change the value of all the "password" property to "*****". Object is nested and may contain other object with property "password" and so on. Here is a sample object.

var Person = {
     name: 'Alex',
     age : 40,
    password : 'abc',
    x : {
       name : 'Chris',
       password: 'abcd',
       y : {
          name : 'Mike',
          password: 'abcd',
         },
     }
.
.
}

Before we …