Javascript Functions and Objects
Javascript Functions and Objects
Functions in JavaScript
A function in JavaScript is a block of code that can be defined once and executed multiple times.
Functions are useful for performing operations like calculations, validations, and repeating tasks.
Function Declaration:
function addNumbers(a, b) {
return a + b;
}
Function Expression:
In JavaScript, functions are first-class objects. This means that functions can be passed as
arguments, returned from other functions, and assigned to variables.
Returning Functions:
Functions can also return other functions.
function multiplyBy(factor) {
return function (number) {
return number * factor;
};
}
2. Objects in JavaScript
Objects are essential to JavaScript and are used to store collections of data and more complex
entities. Objects are composed of key-value pairs where the keys are typically strings (or
symbols) and the values can be any valid data type, including other objects or functions.
Object Creation:
Objects can be created using literal notation or the new Object() constructor.
You can also use the new Object() syntax, but using object literals is more common:
3. Object Properties
Properties are key-value pairs stored in an object. You can access properties using dot notation or
bracket notation.
Dot Notation:
let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
Bracket Notation (useful when the property name contains spaces or is dynamic):
let student = {
"first name": "Alice",
"last name": "Smith",
age: 22
};
Adding/Modifying Properties:
4. Object Methods
Methods are functions that are stored as properties of objects. They can access and modify object
properties using the this keyword.
let person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name + " and I am " + this.age +
" years old.");
}
};
As mentioned earlier, arrow functions do not bind their own this, which can lead to issues when
used as object methods.
let person = {
name: "Bob",
greet: () => {
console.log("Hello, my name is " + this.name); // `this` will refer to
the global object
}
};
let person = {
name: "Bob",
greet: function() {
console.log("Hello, my name is " + this.name); // `this` correctly
refers to the object
}
};
5. Object Display
Displaying objects and their properties is a common task for debugging or output purposes.
There are several ways to display or inspect an object’s properties.
Using console.log():
The simplest way to display the entire object is by logging it to the console.
let user = {
username: "john_doe",
email: "john@example.com"
};
You can loop through all properties of an object using the for...in loop.
let person = {
name: "Sarah",
age: 25,
profession: "Engineer"
};
let person = {
name: "David",
age: 34
};
// Get keys
console.log(Object.keys(person)); // Output: ["name", "age"]
// Get values
console.log(Object.values(person)); // Output: ["David", 34]
6. Object Constructors
Constructor functions are a way to create multiple instances of objects that share the same
structure and methods. When you call a constructor function with the new keyword, a new object
is created, and the constructor function's this refers to that object.
Using Prototypes:
Instead of adding methods inside the constructor function (which can be inefficient as each
instance gets its own copy of the method), you can use prototypes to share methods across
instances.
new Keyword:
The new keyword creates a new object, sets the context (this) of the constructor function to that
object, and finally returns the object.
Summary
• Functions: Functions are a way to encapsulate code into reusable blocks. They can be
declared, expressed, or written as arrow functions.
• Objects: Objects group related data and functions (methods). They are essential for
modeling real-world entities.
• Object Properties: Object properties store data. You can access and modify them using
dot notation or bracket notation.
• Object Methods: Methods are functions that belong to an object. They can manipulate or
access object properties via the this keyword.
• Object Display: You can display or iterate through objects using console.log(),
for...in loops, and methods like Object.keys(), Object.values(), and
Object.entries().
• Object Constructors: Constructors are functions used to create multiple instances of
objects with the same structure. Methods can be added using prototypes to avoid
duplication across instances.