Scribd
Upload
2 views

javaScriptlesson9

The document covers how to display JavaScript objects using console.log() and iteration methods like Object.keys(). It explains constructor functions for creating objects, the importance of the new keyword, and how to add methods via prototypes. Additionally, it introduces ES6 class syntax for object creation and discusses prototype-based inheritance in JavaScript.

Uploaded by

vanguyen103
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

javaScriptlesson9

The document covers how to display JavaScript objects using console.log() and iteration methods like Object.keys(). It explains constructor functions for creating objects, the importance of the new keyword, and how to add methods via prototypes. Additionally, it introduces ES6 class syntax for object creation and discusses prototype-based inheritance in JavaScript.

Uploaded by

vanguyen103
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Lesson: JavaScript Object Display and Constructors

1. Displaying JavaScript Objects

To display an object in JavaScript, we commonly use console.log(). When you log an object to the
console, it is shown in a structured format where you can expand and collapse the properties for better
readability.

In more complex scenarios, you can iterate over the object to display its properties and values. There are
several methods you can use to display object properties:

 Using Object.keys() (to loop through the keys):

javascript

Copy code
2. Constructor Functions

A constructor function is a special type of function that is used to create and initialize objects in
JavaScript. It is a template for creating objects with the same properties and methods.

The syntax for a constructor function is:


In this example:

 We define a Person constructor function with three properties: name, age, and profession.

 We use the new keyword to create new instances of Person.

3. Adding Methods to Constructor Functions

You can also add methods to constructor functions. However, methods should not be added directly
inside the constructor function. Instead, they should be added to the prototype of the constructor
function.
In this case, the method greet() is added to the Person prototype. All instances of Person will have access
to this method.

4. Constructor Functions and the new Keyword

The new keyword is crucial when using constructor functions. It does several things:

1. Creates a new empty object.

2. Sets the prototype of the object to the constructor function's prototype.

3. Binds the this keyword to the new object.

4. Returns the new object, unless you explicitly return something else in the constructor.

For example:

5. Using ES6 Classes


With ES6 (ECMAScript 2015), JavaScript introduced the class syntax, which is a more modern and cleaner
way to define constructors and methods. A class is essentially a syntactic sugar over the prototype-based
inheritance of constructor functions.

In the class-based approach:

 The constructor() method is used to initialize properties.

 Methods are defined directly inside the class.

6. Prototypes and Inheritance

In JavaScript, objects created with constructors have an internal link to their constructor's prototype.
This is how inheritance works in JavaScript.

You can add methods to an object's prototype to allow all instances of that object to share the same
method.
In this example, the speak() method is shared across all instances of Animal.

You can also extend classes and create subclasses in JavaScript using extends and super.

Summary
 Displaying Objects: Use console.log(), Object.keys(), Object.values(), or Object.entries() to
display and iterate over object properties.

 Constructor Functions: Use a function with the new keyword to create new objects.

 Adding Methods: Methods can be added to the object's prototype, or directly within the
constructor (or class).

 Using ES6 Classes: ES6 introduces classes, which provide a cleaner syntax for creating objects
and methods.

 Inheritance: JavaScript uses prototype-based inheritance, allowing objects to share properties


and methods.

You might also like