Java Script ES 6 Objects Objects Classes are

Java. Script ES 6 Objects

Objects • Classes are syntactical sugar over objects • we’ll talk about classes later • Objects are more like a C struct • An object is an instance which contains a set of key-value pairs. • The contents of an object are called properties (or members), • properties consist of a name (or key) and value. • Property names must be strings or symbols • values can be any type (including other objects) • the object name and the property name are case sensitive. Reference: tutorialspoint ES 6 - objects

Objects • You access the properties of an object with a simple dot-notation. object. Name. property. Name • Object initializers • You create objects with the curly bracket syntax. var person = { firstname: "Tom", lastname: "Hanks", func: function(){return "Hello!!"}, }; //access the object values console. log(person. firstname) console. log(person. lastname) console. log(person. func()) What does this output?

initializers • There are various syntactical shortcuts • What do these print? var foo = 'bar’ var baz = { foo } console. log(baz. foo) var foo = 'bar’ var baz = { foo: foo } console. log(baz. foo)

Creating “classes” • You can create a class using the class keyword beginning in ES 6 • Earlier versions of Javascript used on of two methods: • Using function syntax (called the “constructor function”) and the keyword new • Using the create() function

The constructor function An object can be created using the following two steps Step 1 − Define the object type by writing a constructor function_name() { this. property_name = value } The ‘this’ keyword refers to the current object in use and defines the object’s property.

The constructor function An object can be created using the following two steps Step 2 − Create an instance of the object with the new syntax. var Object_name= new function_name() //Access the property value Object_name. property_name The new keyword invokes the function constructor and initializes the function’s property keys.

Example function Car() { this. make = "Ford" this. model = "F 123" } var obj = new Car() console. log(obj. make) console. log(obj. model) function Car() { this. make = "Ford" } var obj = new Car() obj. model = "F 123" console. log(obj. make) console. log(obj. model)

Example 2 function Auto() { this. make = "Ford" this. model = "F 123” this. style = {eng: ”V 8”, dr: “all-wheel”} Note that a nested object uses a different syntax! } var obj = new Auto() console. log(obj. make) console. log(obj. model) console. log(obj. style. eng)

Object. create method • allows you to create the prototype for the object you want, without having to define a constructor function. var roles = { type: "Admin", // Default value of properties display. Type : function() { // Method which will display type of role console. log(this. type); } } // Create new role type called super_role var super_role = Object. create(roles); super_role. display. Type(); // Output: Admin // Create new role type called Guest var guest_role = Object. create(roles); guest_role. type = "Guest"; guest_role. display. Type(); // Output: Guest Add a new object of type “student_role” and give it the role of ”Student” and add the property “year”

Object. create method • allows you to create the prototype for the object you want, without having to define a constructor function. var roles = { type: "Admin", // Default value of properties display. Type : function() { // Method which will display type of role console. log(this. type); } } // Create new role type called super_role var super_role = Object. create(roles); super_role. display. Type(); // Output: Admin // Create new role type called Guest var guest_role = Object. create(roles); guest_role. type = "Guest"; guest_role. display. Type(); // Output: Guest Add a new object of type “student_role” and give it the role of ”Student” and add the property “year” // Create new role type called Guest var student_role = Object. create(roles); student_role. type = "Student"; student_role. display. Type(); student_role. year = 'sophomore'; console. log(student_role. year);

Other object methods • Object. assign() • used to copy the values of all enumerable own properties from one or more source objects to a target object • Can use to clone or merge objects • See https: //www. tutorialspoint. com/es 6_objects. htm • Delete object. property • removing a property from an object • See https: //www. tutorialspoint. com/es 6_objects. htm

Comparing objects • Objects are a reference type. • Two distinct objects are never equal, even if they have the same properties. • they point to a completely different memory address. • Only those objects that share a common reference yields true on comparison.

Comparison example var val 1 = {name: "Tom"}; var val 2 = {name: "Tom"}; console. log(val 1 == val 2) // return false console. log(val 1 === val 2) // return false

Comparison 2 var val 1 = {name: "Tom"}; var val 2 = val 1 console. log(val 1 == val 2) // return true console. log(val 1 === val 2) // return true

Object de-structuring • The term destructuring refers to breaking up an object (or array) based on the structure of its properties. • The destructuring assignment syntax makes it possible to extract data from arrays or objects into distinct variables.

De-structuring example let student = { rollno: 20, We create an object named “student” There are 3 properties name: 'Prijin', cgpa: 7. 2 What is the output? } //destructuring to same property name let {name, cgpa} = student console. log(name) Extract the name and cgpa properties console. log(cgpa) //destructuring to different name let {name: student_name, cgpa: student_cgpa}=student console. log(student_cgpa) console. log("student_name", student_name) Extract the name and cgpa properties

De-structuring • If the variable and assignment are in two different steps, then the destructuring object syntax will be surrounded by ()

De-structuring example 2 let student = { rollno: 20, name: 'Prijin', cgpa: 7. 2 } // destructuring to already declared variable let rollno; ({rollno} = student) Use parenthesis here console. log(rollno) // assign default values to variables let product ={ id: 1001, price: 2000} //discount is not product property let {id, price, discount=. 10} = product Don’t use parenthesis here console. log(id) console. log(price) console. log(discount) What happens if you change the let to: let {pid, price, discount=. 10} = product console. log(pid)

De-structuring using the rest operator // rest operator with object destructuring let customers= { c 1: 101, c 2: 102, c 3: 103 } let {c 1, . . . others} = customers console. log(c 1) console. log(others) What is this doing?

De-structuring nested objects //nested objects let emp = { id: 101, address: { city: 'Mumbai', pin: 1234 } } let {address} = emp; console. log(address) let {address: {city, pin}} = emp console. log(city) What is this doing?

De-structuring nested objects //nested objects let emp = { id: 101, address: { city: 'Mumbai', pin: 1234 } } This extracts the properties into standalone variables let {address} = emp; console. log(address) let {address: {city, pin}} = emp console. log(city)

Destructuring with parameters • Use the same destructuring methods, but in the parameter list Same destructing syntax let de. Fun = ({c 1, c 2, c 3}) => { console. log("destructuring with parameters"); console. log(c 1); console. log(c 2); console. log(c 3); } de. Fun(customers); let customers= { c 1: 101, c 2: 102, c 3: 103 } Output?

Destructuring with rest parameters • Use the same destructuring methods, but in the parameter list Same destructing rest syntax let de. Rest = ({c 1, . . . more. Param}) => { console. log("destructuring with rest parameters"); console. log(c 1); console. log(more. Param); } de. Rest(customers); let customers= { c 1: 101, c 2: 102, c 3: 103 } Output?