Wednesday Day 2 Objects, Arrays, Prototypal Inheritance, OOP

JavaScript Variable Declarations

• Variables in JavaScript can be defined using three keywords: var, let, and const.

• Reassignment:

  • var and let: Can be reassigned to a new value.

  • const: Cannot be reassigned after initial assignment.

Scoping Differences

• Function Scoped vs Block Scoped:

  • var: Function scoped, meaning it is accessible within the function it is defined in. If defined outside a function, it is globally scoped.

  • let & const: Block scoped, meaning they are only accessible within the block (enclosed by curly braces {}) they are defined in.

  • Example:

    function example() {  
        if (true) {  
            var x = 5;  
            let y = 10;  
        }  
        console.log(x); // Works: 5  
        console.log(y); // Reference Error: y is not defined  
    }  

Practical Implications of Scoping

• If a variable is declared with let or const inside a block (like an if statement or loop), it won’t be available outside that block.

• With variables declared with var, they remain available even after the block ends.

Object-Oriented Programming in JavaScript

• Objects:

  • Objects are collections of key-value pairs, where each key is unique and can be a string or a symbol.

  • JavaScript allows you to create an object using literal notation:

    const user = {  
        name: "John",  
        age: 30  
    };  

  • Object keys are automatically treated as strings, even without quotes.

Method Definition and Invocation

• Functions defined inside an object are referred to as methods.

• You can invoke a method using dot notation. For example, user.greet().

• This keyword: In methods, this refers to the object the method was called on.

Prototypal Inheritance

• JavaScript uses a prototypal inheritance model, where objects inherit properties and methods from their prototype.

• An object can be created with a prototype using Object.create(proto) which allows for shared methods or properties across multiple objects.

  • Example:

  const userFunctionStore = {  
      increment: function() { this.score++; }  
  };  
  const user1 = Object.create(userFunctionStore);  
  user1.score = 0;  
  user1.increment();  // Calls increment method from userFunctionStore

Understanding this in JavaScript

• Behavior of this:

  • In regular functions, this refers to the object that the function is called on.

  • In arrow functions, this behaves lexically, meaning it refers to this from the enclosing context rather than the object from which it is called.

Using Arrow Functions

• Arrow functions should be used with caution especially when defining methods in objects, as they do not bind their own this.

• Use traditional function expressions for defining methods on objects to ensure the correct binding of this.

Arrays in JavaScript

• Arrays are Special Objects:

  • Arrays are objects under the hood, which means they also utilize the prototypal inheritance model.

  • When calling array methods like push() or pop(), JavaScript looks up these methods in the prototype chain of the array.

  • Example of array creation:

  const arr = [1, 2, 3];  
  arr.push(4);  
  console.log(arr);  // Output: [1, 2, 3, 4]

Key Takeaways

• Objects group data and functionality in JavaScript, allowing developers to maintain organized code.

• Prototypal inheritance allows for efficient memory usage and shared methods across multiple objects.

• Understanding scope, this behavior, and the differences between var, let, and const is crucial for effective JavaScript programming.

JavaScript Variable Declarations

JavaScript provides three primary keywords to declare variables: var, let, and const. Each has its own characteristics and use cases:

Reassignment:

• var and let: These keywords allow variables to be reassigned to new values after their initial definition.

• const: This keyword creates a read-only reference to a value, meaning that a variable declared with const cannot be reassigned after it has been assigned an initial value.

Scoping Differences

Function Scoped vs Block Scoped:

• var: Variables declared with var are function-scoped, meaning they are accessible throughout the function in which they are defined. If declared outside any function, they become globally scoped and can be accessed anywhere in the global context.

• let and const: These keywords introduce block scoping. They are only accessible within the block in which they are defined, denoted by curly braces {}.

Example:

function example() {  
    if (true) {  
        var x = 5;  
        let y = 10;  
    }  
    console.log(x); // Works: 5  
    console.log(y); // Reference Error: y is not defined  
}

Practical Implications of Scoping

When a variable is declared with let or const inside a block (like an if statement or loop), it will not be accessible outside that block, which prevents unintentional variable collisions and bugs. Conversely, variables declared with var remain available even after the block ends, which can lead to unexpected behavior if not carefully managed.

Object-Oriented Programming in JavaScript

Objects:

Objects in JavaScript are versatile data types that consist of collections of key-value pairs, with each key being unique. Keys can be either strings or symbols, and they maintain association with their values. Objects can be created using literal notation:

const user = {  
    name: "John",  
    age: 30  
};  

In this example, name and age are keys, and their associated values are "John" and 30, respectively. Note that object keys are automatically converted to strings, even if quotes are omitted.

Method Definition and Invocation

Functions defined within an object are referred to as methods. You can invoke a method using dot notation. For example:

user.greet();  // Assuming a greet method exists in the user object

The this Keyword:

Within methods, this refers to the object on which the method was called, providing context to the method's execution.

Prototypal Inheritance

JavaScript utilizes a prototypal inheritance model where objects can inherit properties and methods from a prototype object. This is achieved using Object.create(proto), which allows sharing methods or properties across multiple object instances, facilitating code reuse.

Example:

const userFunctionStore = {  
    increment: function() { this.score++; }  
};  
const user1 = Object.create(userFunctionStore);  
user1.score = 0;  
user1.increment();  // Calls increment method from userFunctionStore

Here, user1 inherits the increment method from userFunctionStore while maintaining its own score property.

Understanding this in JavaScript

Behavior of this:

• In regular functions, this refers to the object that the function is called on, which depends on the invocation context.

• In arrow functions, this behaves lexically, meaning it retains the value of this from the enclosing context rather than being defined by the caller.

Using Arrow Functions:

Arrow functions can be tracing the parent scope of this, but should be used cautiously, especially when defining methods on objects. To ensure the correct binding of this, traditional function expressions are recommended for methods.

Arrays in JavaScript

Arrays are Special Objects:

Arrays in JavaScript are essentially objects that leverage the prototypal inheritance model. This characteristic allows array methods like push() and pop() to function as part of the array's prototype chain, enabling storage and management of ordered lists of data.

Example of array creation:

const arr = [1, 2, 3];  
arr.push(4);  
console.log(arr);  // Output: [1, 2, 3, 4]

Key Takeaways

• Objects effectively group data and associated functionality in JavaScript, facilitating the organization and readability of code.

• Prototypal inheritance promotes memory efficiency and allows for shared methods across various object instances, thereby optimizing performance.

• A thorough understanding of variable scoping, the behavior of this, and the differences between var, let, and const is essential for effective programming in JavaScript. Furthermore, grasping how to leverage arrays and objects correctly can significantly enhance coding efficiency and maintainability.

Object-Oriented Programming in JavaScript

Objects: Objects are collections of key-value pairs, where each key is unique and can be a string or a symbol. JavaScript allows you to create an object using literal notation: const user = {name: "John",age: 30};Object keys are automatically treated as strings, even without quotes.

Method Definition and Invocation

Functions defined inside an object are referred to as methods. You can invoke a method using dot notation. For example, user.greet(). The this keyword: In methods, this refers to the object the method was called on.

Prototypal Inheritance

JavaScript uses a prototypal inheritance model, where objects inherit properties and methods from their prototype. An object can be created with a prototype using Object.create(proto) which allows for shared methods or properties across multiple objects. Example: const userFunctionStore = {increment: function() { this.score++; }};const user1 = Object.create(userFunctionStore);user1.score = 0;user1.increment(); // Calls increment method from userFunctionStore

Understanding this in JavaScript

Behavior of this: In regular functions, this refers to the object that the function is called on. In arrow functions, this behaves lexically, meaning it refers to this from the enclosing context rather than the object from which it is called.

Using Arrow Functions Arrow functions should be used with caution especially when defining methods in objects, as they do not bind their own this. Use traditional function expressions for defining methods on objects to ensure the correct binding of this.

Arrays in JavaScript

Arrays are Special Objects: Arrays are objects under the hood, which means they also utilize the prototypal inheritance model. When calling array methods like push() or pop(), JavaScript looks up these methods in the prototype chain of the array. Example of array creation: const arr = [1, 2, 3];arr.push(4);console.log(arr); // Output: [1, 2, 3, 4]

Key Takeaways

• Objects group data and functionality in JavaScript, allowing developers to maintain organized code.

• Prototypal inheritance allows for efficient memory usage and shared methods across multiple objects.

• Understanding scope, this behavior, and the differences between var, let, and const is crucial for effective JavaScript programming.

JavaScript Variable Declarations Variables in JavaScript can be defined using three keywords: var, let, and const. Reassignment: var and let: Can be reassigned to a new value. const: Cannot be reassigned after initial assignment. Scoping Differences Function Scoped vs Block Scoped: var: Function scoped, meaning it is accessible within the function it is defined in. If defined outside a function, it is globally scoped. let & const: Block scoped, meaning they are only accessible within the block (enclosed by curly braces {}) they are defined in. Example: function example() {if (true) {var x = 5;let y = 10;}console.log(x); // Works: 5console.log(y); // Reference Error: y is not defined}Practical Implications of Scoping If a variable is declared with let or const inside a block (like an if statement or loop), it won’t be available outside that block. With variables declared with var, they remain available even after the block ends.

Object-Oriented Programming in JavaScript

Objects: Objects are collections of key-value pairs, where each key is unique and can be a string or a symbol. JavaScript allows you to create an object using literal notation: const user = {name: "John",age: 30};Object keys are automatically treated as strings, even without quotes.

Method Definition and Invocation

Functions defined inside an object are referred to as methods. You can invoke a method using dot notation. For example, user.greet(). The this keyword: In methods, this refers to the object the method was called on.

Prototypal Inheritance

JavaScript uses a prototypal inheritance model, where objects inherit properties and methods from their prototype. An object can be created with a prototype using Object.create(proto) which allows for shared methods or properties across multiple objects. Example: const userFunctionStore = {increment: function() { this.score++; }};const user1 = Object.create(userFunctionStore);user1.score = 0;user1.increment(); // Calls increment method from userFunctionStore

Understanding this in JavaScript

Behavior of this: In regular functions, this refers to the object that the function is called on. In arrow functions, this behaves lexically, meaning it refers to this from the enclosing context rather than the object from which it is called.

Using Arrow Functions Arrow functions should be used with caution especially when defining methods in objects, as they do not bind their own this. Use traditional function expressions for defining methods on objects to ensure the correct binding of this.

Arrays in JavaScript

Arrays are Special Objects: Arrays are objects under the hood, which means they also utilize the prototypal inheritance model. When calling array methods like push() or pop(), JavaScript looks up these methods in the prototype chain of the array. Example of array creation: const arr = [1, 2, 3];arr.push(4);console.log(arr); // Output: [1, 2, 3, 4]

Key Takeaways

• Objects group data and functionality in JavaScript, allowing developers to maintain organized code.

• Prototypal inheritance allows for efficient memory usage and shared methods across multiple objects.

• Understanding scope, this behavior, and the differences between var, let, and const is crucial for effective JavaScript programming.