Posts

Imperative vs. declarative programming

  The code above is a good example of   imperative   programming.   You're writing the steps for   how   the user interface should be updated. But when it comes to building user interfaces, a declarative approach is often preferred because it can speed up the development process. Instead of having to write DOM methods, it would be helpful if developers were able to declare   what   they want to show (in this case, an   h1   tag with some text). In other words,  imperative programming  is like giving a chef step-by-step instructions on how to make a pizza.  Declarative programming  is like ordering a pizza without being concerned about the steps it takes to make the pizza. 🍕 React  is a popular declarative library that you can use build user interfaces.

Abstract Classes and Interfaces

Copied as is from  https://www.quickstart.com/software-engineering/when-and-how-to-use-abstract-class-and-interface/#:~:text=An%20interface%20in%20OOP%20is,return%20types)%20without%20any%20implementation. Understanding Abstract Classes An abstract class, in essence, is a class that cannot be instantiated on its own but serves as a foundation for other classes to be derived from. It acts as a template or a prototype, defining a common structure and a set of methods that must be implemented by its subclasses.  The primary purpose of abstract classes is to provide a blueprint or a skeletal framework for derived classes. They outline the essential attributes and methods that any class inheriting from them must include. By doing so, abstract classes enforce a certain structure and consistency among the derived classes, ensuring that they adhere to a specific design pattern or interface. Abstract classes find their utility in various scenarios within software development, serving as a valua

Destructuring Assignments

Destructuring Assignments: The destructuring assignment syntax in JavaScript makes it possible to unpack values from arrays or properties from objects into distinct variables. Example: ``` // Array destructuring const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // 1 2 3 // Object destructuring const obj = {x: "X", y: "Y"}; const {x, y} = obj; console.log(x, y); // X Y ``` In both examples, the variables a, b, c, x, and y are assigned new values from the array or object on the right side of the assignment.

Template Literals

 Template literals, introduced in ES6, are a new way to define strings in JavaScript. They use the backtick (`) character instead of single or double quotes.  Template literals have two main features that make them more powerful than traditional string literals: 1. Multi-line strings: With traditional string literals, creating a string that spans multiple lines requires the use of escape sequences or concatenation. With template literals, you can create a new line by simply pressing Enter, making the code look cleaner and more readable. ``` let greeting = `Hello, world!`; ``` 2. Interpolation (the insertion of something of a different nature into something else. ): String concatenation in JavaScript can sometimes be a bit clumsy, especially if you're interpolating multiple variables. With template literals, though, you can simply include variables or expressions right in your string using this syntax: ${ }.  ``` let name = 'Alice'; let greeting = `Hello, ${name}!`; ``` Wit

Arrow functions

Arrow functions are a compact and shorthand syntax for writing function expressions in JavaScript that were introduced with ES6. They are anonymous and change the way `this` binds in functions. Here is a simple example of an arrow function: const square = (x) => {   return x * x; }; In this example, the `square` function takes a number `x` as a parameter and returns the square of that number. The function doesn't have a name and is assigned to the variable `square`. Arrow functions can be made even shorter with implicit return for one-line expressions. const square = x => x * x; The above function does exactly the same as the previous example, but it's shorter. Because there's only one argument, we can omit the parentheses `( )`, and because the function body only contains one line of code that is being returned, we can omit the `return` statement and the `{ }` as well. Another key feature of arrow functions is that they don't have their own `this` value. `this` h

Optional Chaining

Optional Chaining: This feature allows you to access deeply nested property paths in an object without checking the existence of each level. Instead of writing multiple conditions to avoid getting undefined in case a property doesn’t exist, you can use optional chaining that automatically checks if the value is not undefined or null. For example: const car = { model: { name: 'BMW' } }; console.log(car?.model?.name); // "BMW" console.log(car?.manufacturer?.name); // undefined

Logical Or operator || vs Nullish Coalescing

 In JavaScript and TypeScript, the `||` operator is often used to provide a default value in case a variable is "falsy", meaning it's `undefined`, `null`, `0`, `NaN`, empty string `''`, or `false`. For example: let value = userDefinedValue || 'default'; In this snippet, if `userDefinedValue` is `undefined`, `null`, or any other falsy value, `value` will be set to `'default'`. However, this can be problematic. For instance, if a user intentionally sets `userDefinedValue` to `0` or `''`, this logic will still replace `userDefinedValue` with `'default'`, which is probably not what the user intended. Enter nullish coalescing operator `??`. It's similar to `||`, but it only returns the right-hand side if the left-hand side is `null` or `undefined`. Example: let value = userDefinedValue ?? 'default'; Now, `value` will only be set to `default` if `userDefinedValue` is `undefined` or `null`. This way, intentioned falsy values (s