How Do I Know I Am Ready?

How do I know I am ready? That was the question that had eluded me for years, hidden within the labyrinth of self-doubt that I navigated daily.

Amid this persistent self-doubt, my thoughts often wandered to the ever-evolving realm of front-end development. It was the field where my passion truly thrived, where creativity blended seamlessly with logic, and where user interfaces became digital canvases waiting to be brought to life. But even here, in the world, I loved so dearly, the question of readiness loomed like a spectral spectre.

I would glance at my screen, adorned with code that seemed both familiar and foreign at times. The JavaScript frameworks and libraries I had mastered had undergone updates and transformations. New methodologies and best practices emerged with each passing season. It felt like a marathon where the finish line kept moving further away, and I, the runner, struggled to keep pace.

And so, I began to seek answers. I scoured online forums and community discussions, looking for that elusive checklist that would declare, "You are ready." Yet, what I discovered was not a definitive list, but a realization that readiness in front-end development was a journey, not a destination.

It was about understanding that the learning never ceased. Each project, each new technology, and each interaction with fellow developers contributed to my growth. The uncertainty wasn't a sign of inadequacy; it was a testament to my commitment to staying on the cutting edge of front-end development.

With time, I learned that readiness was not a static state but a state of mind. It was the confidence to tackle new challenges head-on, armed with the knowledge that I had the skills to adapt and learn as I went. It was about embracing the constant evolution of technology and using it as a driving force to push my boundaries.

In that dimly lit room, as my eyes continued to scan the screen, I realized that perhaps the question of "Am I ready?" was not one with a single, definitive answer. Instead, it was a question I would carry with me throughout my career, a question that would motivate me to keep learning, growing, and innovating in the captivating world of front-end development.

Today we dive into expressions vs statements in Javascript so we will first have to know the dictionary definition of the two words.

Expression(declaration) - The action of making known one's thoughts or feelings.

Statement(assertion) - A definite or clear expression of something in speech or writing.

What are there in Javascript?

Javascript Expression

In JavaScript, an expression is a piece of code that produces a value. It can be a simple value, like a number or string, or a more complex value, like an object or array.

Some examples of JavaScript expressions are:

• Literal Values: 5, "Hello, world!", true, null, undefined.

• Variables: x, y, firstName, lastName.

• Arithmetic Expressions: 2 + 3, x * y, 10 / z.

• Comparison Expressions: x < y, firstName === lastName.

• Logical Expressions: x && y, x || y.

• Function Calls: square(5), console.log("Hello, world!").

• Array and Object Expressions: [1, 2, 3], { name: "John", age: 30 }.

JavaScript expressions can be used in a variety of ways, such as:

• Assigning values to variables: let x = 2 + 3;

• Passing arguments to functions: console.log(x * y);

• Comparing values: if (x < y) { /* do something */ }

• Returning values from functions: function square(x) { return x * x; }

• Creating objects and arrays: let person = { name: "John", age: 30 };

Understanding expressions is fundamental to writing JavaScript code, as they form the basis of many programming concepts, such as variables, functions, and operators.

Javascript Statements

In JavaScript, a statement is a piece of code that performs a specific action. It does not produce a value like an expression does, but instead instructs the computer to do something. There are many types of statements in JavaScript, including:

1. Variable Declarations:

let x = 10;
const PI = 3.14159;

Variable Declarations are considered a statement in JavaScript because they are an action that instructs the computer to create a variable and optionally assign a value to it. The process of declaring a variable reserves memory space for the variable in the computer's memory, which is an action that cannot be done through an expression.

1. Conditional Statements:

if (x < y) {
  // do something if x is less than y
} else {
  // do something else if x is not less than y
}

Conditional Statements are considered statements in JavaScript because they are an action that instructs the computer to make a decision based on a condition. The condition is an expression that produces a Boolean value (true or false), and the decision determines which block of code to execute based on the value of the condition.

1. Loop Statements:

for (let i = 0; i < 10; i++) {
  // do something 10 times
}

while (x < y) {
  // do something while x is less than y
}

Loop Statements are considered statements in JavaScript because they are an action that instructs the computer to repeat a block of code multiple times. The loop statement consists of a condition that determines whether to continue the loop or exit it, and a block of code to execute on each iteration of the loop.

1. Function Declarations:

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

Function Declarations are considered statements in JavaScript because they are an action that instructs the computer to create a new function with a given name and body. The function declaration defines the function and makes it available for use in the program.

1. Class Declarations:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

Class Declarations are considered statements in JavaScript because they are an action that instructs the computer to create a new class with a given name and body. The class declaration defines the class and makes it available for use in the program.

1. Expression Statements:

a + b;
console.log("Hello, world!");

In this example, you are telling the computer to evaluate the expression "Hello, world!" and pass it as an argument to the console.log() function. The console.log() function then prints the value of the expression to the console.

Expression Statements are considered statements in JavaScript because they are an action that instructs the computer to evaluate an expression and possibly do something with the resulting value. The expression statement consists of an expression followed by a semicolon.

These are just a few examples of statements in JavaScript, but there are many more. Statements are fundamental to JavaScript programming and are used to control the flow of execution in a program. Understanding statements is essential for writing functional, efficient, and easy-to-read JavaScript code.

Difference between Javascript expressions&Statements

Conclusion

In summary, expressions in JavaScript evaluate to a value, can be used as part of a statement, can be used as a function argument or returned value, and can be assigned to a variable.

Statements, on the other hand, perform an action, cannot be used as part of an expression, cannot be used as a function argument or returned value, and cannot be assigned to a variable. Control flow statements, such as break, continue, and return, can only be used in statements.

I hope you now understand the difference between expressions and statements in Javascript.

Please subscribe to our newsletter and we promise we won't spam your inbox. You will get the best resources about javascript and programming in general.

You can follow our 30in30 series using this link where we learn 30 concepts in 30 days.

Scope

Today we are going in-depth about the scope in Javascript programming.

In JavaScript, the term scope refers to the set of variables, functions, and objects that are accessible in a particular context. The context can be a function, a block of code, or the entire program.

JavaScript has two types of scope: global scope and local scope.

Global Scope

Global scope refers to variables, functions, and objects that are available throughout the entire program. They are accessible from any part of the code, including within functions and other blocks.

Example:

// Global variable
var myGlobalVariable = "Hello, world!";

function myFunction() {
  // Access global variable
  console.log(myGlobalVariable);
}

// Call function
myFunction(); // Output: "Hello, world!"

// Access global variable from outside function
console.log(myGlobalVariable); // Output: "Hello, world!"

Local Scope

Local scope, on the other hand, refers to variables, functions, and objects that are only accessible within a specific block or function. They are not accessible outside of that context.

Local scope is comprised of two types; Function scope and block scope.

Function Scope

In JavaScript, variables defined with the "var" keyword have a function-level scope, meaning they are only accessible within the function they are defined in.

Example:

function myFunction() {
  // Local variable
  var myLocalVariable = "Hello, world!";

  // Access local variable
  console.log(myLocalVariable);
}

// Call function
myFunction(); // Output: "Hello, world!"

// Attempt to access local variable from outside function
console.log(myLocalVariable); // Output: ReferenceError: myLocalVariable is not defined

In this example, the variable myLocalVariable is declared inside the myFunction function, making it a local variable with function scope. It can only be accessed within the myFunction function.

The myFunction function logs the value of the local variable to the console using console.log(myLocalVariable);.

After defining the function, we call it using myFunction(), which logs the value of the local variable to the console.

Finally, we attempt to access the local variable from outside the function using console.log(myLocalVariable);, which results in a ReferenceError because the variable is not defined outside the function's scope.

Block Scope

Variables defined with the let and const keywords have a block-level scope, meaning they are only accessible within the block they are defined in.

Example:

function myFunction() {
  // Local variable with block scope
  if (true) {
    let myLocalVariable = "Hello, world!";

    // Access local variable
    console.log(myLocalVariable);
  }

  // Attempt to access local variable from outside block
  console.log(myLocalVariable); // Output: ReferenceError: myLocalVariable is not defined
}

// Call function
myFunction();

In this example, the variable myLocalVariable is declared inside a block of code (an if statement) using the let keyword, which gives it block scope. It can only be accessed within the block where it is declared.

The myFunction function logs the value of the local variable to the console using console.log(myLocalVariable);.

After defining the function, we call it using myFunction(), which logs the value of the local variable to the console if the condition is true.

Finally, we attempt to access the local variable from outside the block using console.log(myLocalVariable);, which results in a ReferenceError because the variable is not defined outside the block's scope.

Lexical Scope

The lexical scope can refer to both local and global scopes. In JavaScript, the scope of a variable or function is determined by its location within the code's nested hierarchy of functions. The variable or function can be defined in a local scope, which means it is only accessible within the function where it is defined, or it can be defined in a global scope, which means it is accessible from anywhere in the program.

For example; If a variable is defined outside of any function, it has a global scope and can be accessed from any function or block within the program. On the other hand, if a variable is defined within a function, it has local scope and is only accessible within that function.

Here's an example of a variable with global scope and a variable with local scope:

// Global variable with global scope
var globalVariable = "Hello, world!";

function myFunction() {
  // Local variable with local scope
  var localVariable = "Hello, there!";
  console.log(globalVariable); // Output: "Hello, world!"
  console.log(localVariable); // Output: "Hello, there!"
}

myFunction();
console.log(globalVariable); // Output: "Hello, world!"
console.log(localVariable); // Output: ReferenceError: localVariable is not defined

In this example, globalVariable is defined outside of any function, giving it global scope. It can be accessed from within the myFunction function as well as from outside the function.

On the other hand, localVariable is defined within the myFunction function, giving it local scope. It can only be accessed from within the function and not from outside. When we attempt to log localVariable outside of the function, we get a ReferenceError because it is not defined in that scope.

Conclusion

Understanding scope is important in JavaScript because it can help prevent naming collisions and improve code organization. By using a local scope, you can limit the accessibility of variables and functions, which can help prevent unintended side effects and make your code easier to understand and maintain.

Please leave a comment if there is anything left out. I may not cover everything but hope this helps.

Here are the topics we covered with the links to access them:

1. The Call Stack

2. Primitive Types

3. Value Types and Reference Types

4. implicit, Explicit, Nominal, Structuring and duck typing

5. \== vs === vs typeof

The topics covered are really important as you grow or hone your skills as a Javascript developer.

Execution Context

Before we go into call-stack we should first understand what is Execution Context. This is one of the topics we missed in our first post about the Call Stack

Javascript is a single-threaded language because it runs on a single thread(single sequential flow of control) within a web browser or web server.

Javascript executes one instruction at a time, meaning that it can only run one task or process at a time.

The single-threaded nature of JavaScript means that it can only execute one task at a time, even if there are multiple tasks or events in-line for execution. For example, if a JavaScript function is running, any other functions or events that need to be processed must wait until the first function completes.

While JavaScript is single-threaded within a web browser, it does support asynchronous programming through the use of callbacks, promises, and async/await functions.

Asynchronous programming allows code to be executed in a non-blocking way, which can improve the performance of web applications by allowing them to handle multiple tasks at once.

When a javascript program is run this is what happens:

1. The JavaScript engine reads and interprets the code line by line, tokenizing and parsing it to create an abstract syntax tree (AST-data structure used by compilers and interpreters to represent the syntax of a programming language).

2. The engine creates a global execution context, which includes the global object (in a browser, this is the window object), any global variables, and any functions defined in the global scope.

3. As the engine executes each line of code, it creates a new execution context for each function that is called. This includes information about the function's local variables, any arguments that were passed to the function, and its scope chain.

4. Each new execution context is added to the call stack, which keeps track of the order in which functions were called. The top of the call stack is always the currently executing function.

5. When a function completes execution, its execution context is removed from the call stack, and the engine moves on to the next function in the call stack.

6. If an error occurs during execution, the engine stops executing the code and throws an error message.

The execution context and call stack are critical to understanding how a JavaScript program runs. The execution context is the environment in which code is executed, and it contains all the necessary information and data structures that the code needs to run correctly.

The call stack keeps track of the order in which functions were called, allowing the engine to execute them in the correct order and return control to the previous function when each one completes.

Overall, the execution context and call stack work together to ensure that a JavaScript program is executed in the correct order, with each function executing in the proper context and returning control to the previous function when it is finished.

Call Stack

What is Stack? Is it a pile of objects neatly arranged? Yes, it is, but that is the dictionary definition of the stack. Now, what is call stack? is it calling objects?

As it sounds that can be correct, but according to programming it is a bit different.

Stack - In computer science is an abstract(theoretical) datatype that serves as a collection of elements with two main operations; Push, which adds an element to the collection, and Pop, which removes the most recently added element that was not yet removed from the stack.

Based on this argument stack is a place in memory where your local variables and your function arguments go.

Since the stack uses basic operations such as Push and Pop, we have to add more functionality to the stack so that it can be efficient as possible.

These operations will be used to check the status of the stack:

• peek() - Used to get the top data element in the stack, without removing it.

• isEmpty() - Check if the stack is empty.

• isFull() - Check if the stack is full.

Let's now move to call stack, You might be wondering what is CALL?

A call in the call stack refers to a function or subroutine that is currently being executed by a program.

When a program runs, each function call is added to the call stack, which keeps track of the order in which the functions are called. As each function completes, it is removed from the call stack.

The call stack is important because it allows the program to keep track of where it is in the execution of a particular task. This is particularly important when a function calls another function, as the program needs to remember where it was in the original function after the second function completes.

Stack Overflow

Now that we understand call stack another thing that comes to mind is what happens when the stack is full. What happens to our program? Probably stops since there is no more memory left for execution.

In cases where too many functions are called, or if a function calls itself repeatedly (known as recursion), the call stack can become too large(overflow), which can cause a stack overflow error and crash the program or terminates unexpectedly, as it cannot continue to run without the necessary memory resources.

This can be avoided by writing efficient and well-structured code.

I hope this will help you understand how javascript is executed in-depth.

Please leave a comment if there is anything left out. I may not cover everything but hope this helps.

In yesterday's lesson, we covered implicit behavior in javascript. Implicit behavior refers to actions that occur automatically without being explicitly stated in the code.

Javascript has an implicit behavior where it automatically converts data types to a common type when performing operations. This is called type coercion.

For example: if you add a number to a string using the "+" operator, JavaScript will implicitly convert the number to a string and concatenate the two values.

//Type coercion
let result = "2" + 3;
console.log(result); // Output: "23"

Coming back to the topic of the day; when you see `==` , === and typeof what comes immediately to your mind is a comparison in Javascript but the latter is different as it is used to check the type of a datatype.

When used in combination with the equality operators == and ===, it can help ensure that the values being compared are of the same type.
For example, consider the following code:

let x = 5;
let y = "5";

if (typeof x === typeof y && x == y) {
  console.log("x and y are equal");
}
//Will log undefined since x and y are of different types.

In this code above, the typeof operator is used to check if x and y are of the same type before performing the loose equality comparison with the == operator. Since x is a number and y is a string, JavaScript will convert y to a number before performing the comparison, and the code will output "x and y are equal".

If we were to use the strict equality comparison operator === instead, the code would output "x and y are not equal", because the two values are of different types.

Note: it is recommended to use the typeof operator to check the data type of a value before using the == or === operators to perform equality comparisons, to ensure that the values being compared are of the same type.

I hope you have understood what all these operators do in javascript and how they can be used together can help you write more efficient and reliable JavaScript code.

Tomorrow we won't be handling any topic but we will summarize all 5 days in one post to improve our understanding of the concepts learned.

As always leave a comment and share this post if you found this post helpful:

Join me as we demystify these topics in Javascript first we should have a dictionary definition according to google:

• Implicit(inferred, understood, hinted) - Suggested though not directly expressed.

  In a Sentence: Mama Mboga's implicit pricing strategy was to give discounts to regular customers buying in bulk.

• Explicit(clear, direct, plain) - Stated clearly and in detail, leaving no room for confusion or doubt.

  In a Sentence: Through explicit communication, Mama Mboga made it clear that the prices of her vegetables were fixed and non-negotiable, even for her regular customers.

• Nominal(formal, official) - Existing in name only.

• Structuring - Construct or arrange according to a plan; give a pattern or organization.

• Duck Typing - According to Wikipedia, is an application of the duck test—"If it walks like a duck and it quacks like a duck, then it must be a duck"—to determine whether an object can be used for a particular purpose. With nominative typing, an object is of a given type if it is declared to be.

Having understood the basic meanings of these terms, let's now have a look at what they mean in Javascript and how they are used.

Implicit In Javascript

In JavaScript, implicit behavior refers to actions that occur automatically without being explicitly stated in the code.

Here are some examples of implicit behavior in JavaScript:

1. Type coercion: JavaScript automatically converts data types to a common type when performing operations. For example, if you add a number to a string using the "+" operator, JavaScript will implicitly convert the number to a string and concatenate the two values.

2. Default values: When a function is called with missing arguments, JavaScript will set the missing values to undefined by default.

3. Global scope: If you use a variable without declaring it using the "var", "let", or "const" keywords, JavaScript will automatically create a global variable with the same name, which can lead to unexpected behavior.

4. Truthy and falsy values: In JavaScript, some values are considered "truthy" (e.g., non-empty strings, numbers other than zero) and others are considered "falsy" (e.g., empty strings, zero, undefined). When evaluating expressions, JavaScript will implicitly convert values to their corresponding truthy or falsy values.

5. Binding of "this": The value of the "this" keyword inside a function depends on how the function is called. If the function is called a method of an object, "this" will refer to the object. If the function is called without an explicit context, "this" will refer to the global object.

When comparing values using the double equals (==) operator, JavaScript will perform implicit type conversion to compare values of different types. Similarly, when a function is called without a specified "this" context, JavaScript will use the global "this" context, which is implicit behavior. Understanding implicit behavior in JavaScript is important for writing efficient and bug-free code.

// Type coercion
let result = "2" + 3;
console.log(result); // Output: "23"

// Default values
function greet(name) {
  name = name || "stranger";
  console.log("Hello, " + name + "!");
}
greet(); // Output: "Hello, stranger!"

// Global scope
function foo() {
  bar = 10;
}
foo();
console.log(bar); // Output: 10

// Truthy and falsy values
function isTruthy(value) {
  if (value) {
    console.log(value + " is truthy");
  } else {
    console.log(value + " is falsy");
  }
}
isTruthy(1); // Output: "1 is truthy"
isTruthy(""); // Output: " is falsy"

// Binding of "this"
let person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};
let sayHello = person.sayHello;
sayHello(); // Output: "Hello, undefined!"

In the code above, you can see how implicit behavior occurs in different scenarios such as type coercion, default values, global scope, truthy and falsy values, and binding of "this". Understanding these behaviors is essential for writing effective and bug-free code in JavaScript.

Explicit In Javascript

In Javascript, explicit behavior refers to actions that are explicitly stated in the code and require specific instruction to occur.

Here are some examples of explicit behavior in JavaScript:

1. Type conversion: Unlike implicit type coercion, type conversion in JavaScript requires explicit instruction to convert a value from one type to another. For example, you can use the Number() function to convert a string to a number, or the String() function to convert a number to a string.

2. Method invocation: When a function is called a method of an object, you can explicitly set the value of "this" using the call() or apply() methods.

3. Variable scoping: In JavaScript, you can use the "var", "let", or "const" keywords to explicitly declare variables and control their scope.

4. Conditional statements: Using if-else statements, switch statements, and ternary operators allow you to explicitly control the flow of your code based on specific conditions.

5. Iteration: JavaScript provides explicit ways to iterate over arrays, objects, and other collections using loops, while loops, and forEach() methods.

Here's an example code that illustrates explicit behavior in JavaScript:

// Type conversion
let numString = "10";
let num = Number(numString);
console.log(typeof num); // Output: "number"

// Method invocation
let person1 = {
  name: "John",
  age: 30
};
let person2 = {
  name: "Jane",
  age: 25
};
function greet() {
  console.log("Hello, " + this.name + "!");
}
greet.call(person1); // Output: "Hello, John!"
greet.call(person2); // Output: "Hello, Jane!"
// Variable scoping
function foo() {
  var x = 1;
  let y = 2;
  const z = 3;
  console.log(x, y, z);
}
foo(); // Output: 1 2 3

// Conditional statements
let num1 = 10;
let num2 = 20;
if (num1 > num2) {
  console.log(num1 + " is greater than " + num2);
} else {
  console.log(num2 + " is greater than " + num1);
}

// Iteration
let nums = [1, 2, 3, 4, 5];
for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]);
}
nums.forEach(function(num) {
  console.log(num);
});

The call is a method that is used to explicitly set the value of this in the greet function.

When a function is invoked as a method of an object, this keyword is set to the object that the method is called on. However, when a function is invoked directly, this keyword refers to the global object (or undefined in strict mode).

In the example code, the greet function does not have an object context to refer to, so this would normally be undefined. However, the call method is used to explicitly set the value of this to the person1 and person2 objects respectively. This allows the greet function to access the name property of each object and print out a personalized greeting for each person.

So, in short, the call method is used to explicitly set the value of this in a function call.

In the code above, you can see how explicit behavior is used in different scenarios such as type conversion, method invocation, variable scoping, conditional statements, and iteration. These behaviors require explicit instructions to occur and provide greater control over the behavior of the code.

Nominal In Javascript

In programming languages, nominal typing is a type system in which variables and values are explicitly named and categorized according to their data type or class.

Nominal typing requires explicit declarations of data types and enforces strong typing, meaning that variables cannot be automatically coerced or converted to different types.

In JavaScript, nominal typing is not as strict as in some other languages, such as Java or C#. However, JavaScript does have some features that can be considered nominal typing:

1. Object constructors: JavaScript uses constructor functions to create objects with specific data types. For example, the Date constructor creates objects that represent dates and the RegExp constructor creates objects that represent regular expressions.

2. Classes: Starting from ES6, JavaScript supports classes, which allow you to define blueprints for objects with specific data types. Classes can be seen as a more formalized way of using constructor functions.

3. Type annotations: Although JavaScript does not enforce strong typing, you can use type annotations to explicitly declare the data type of a variable or function parameter. This can help catch type errors during development and make the code more self-documenting.

Structuring In Javascript

Structuring in Javascript refers to the process of organizing code into logical and reusable parts. Structuring can help make code easier to understand, maintain, and debug and also promote code reuse and modularity.

Some common techniques for structuring JavaScript code include:

1. Functions: Functions are one of the fundamental building blocks of JavaScript code. They allow you to encapsulate logic and behavior into reusable units that can be called from other parts of your code.

2. Objects: Objects in JavaScript provide a way to group related data and functionality into a single unit. Objects can be used to represent real-world entities or to encapsulate functionality that needs to be reused across different parts of your code.

3. Modules: JavaScript modules are a way of encapsulating functionality into self-contained units of code that can be easily imported and used in other parts of your application. Modules provide a way to manage dependencies and reduce the risk of naming conflicts and other issues that can arise in larger codebases.

4. Classes: JavaScript classes, introduced in ES6, provide a way to define blueprints for objects with shared behavior and properties. Classes can be seen as a way to encapsulate related functionality into reusable units and provide a more formalized way of using constructor functions.

5. Promises: Promises in JavaScript provide a way to handle asynchronous operations in a structured and organized way. Promises allow you to chain together multiple asynchronous operations, handle errors, and avoid callback hell.

Here is an example of using some of these techniques for structuring JavaScript code:

// Define a function for adding two numbers
function addNumbers(num1, num2) {
  return num1 + num2;
}

// Define an object for representing a person
let person = {
  name: "John Smith",
  age: 30,
  email: "john.smith@example.com",
  getAge: function() {
    return this.age;
  }
};

// Define a module for performing math operations
let mathUtils = (function() {
  function multiplyNumbers(num1, num2) {
    return num1 * num2;
  }

  function divideNumbers(num1, num2) {
    return num1 / num2;
  }

  return {
    multiplyNumbers: multiplyNumbers,
    divideNumbers: divideNumbers
  };
})();

// Define a class for representing a car
class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getInfo() {
    return this.year + " " + this.make + " " + this.model;
  }
}

// Use a promise to fetch data from an API
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

By using these techniques and others, you can structure your JavaScript code in a way that promotes readability, maintainability, and code reuse, and helps you avoid common pitfalls and issues that can arise in large and complex codebases.

Duck Typing

Duck typing is a concept in programming that refers to the practice of determining the type or behavior of an object based on its properties and methods, rather than its explicit type. In other words, if an object looks like a duck, swims like a duck, and quacks like a duck, then it's a duck. This approach is often used in dynamically typed languages like JavaScript.

In JavaScript, duck typing allows you to write flexible and reusable code that can work with a wide range of objects, as long as they have the required properties and methods. For example, you might write a function that expects an object with a "name" property and a "sayHello" method:

function greet(obj) {
  console.log(`Hello, ${obj.name}!`);
  obj.sayHello();
}

const person = {
  name: 'Alice',
  sayHello() {
    console.log('Hi there!');
  }
};

const animal = {
  name: 'Duck',
  sayHello() {
    console.log('Quack!');
  }
};

greet(person); // logs "Hello, Alice!" and "Hi there!"
greet(animal); // logs "Hello, Duck!" and "

In the above example, the greet function takes an object obj as its parameter, and assumes that the object has a name property and a sayHello method. The person and animal objects are created with those properties and methods, so they can be passed to the greet function.

When greet(person) is called, the output is "Hello, Alice!" and "Hi there!" because person has a name property with the value 'Alice' and a sayHello method that logs "Hi there!".

Similarly, when greet(animal) is called, the output is "Hello, Duck!" and "Quack!" because animal has a name property with the value 'Duck' and a sayHello method that logs "Quack!".

Note that neither person nor animal are explicitly declared as a certain type (e.g. class or interface) - the greet function just assumes that they have the required properties and methods based on their structure. This is an example of duck typing in JavaScript.

This was a lot to takein for the day and I hope you have now understood these different and important terminologies in javascript and how you use the daily.

Please leave a comment if you found this post helpful:

For Day 5 we will be dealing with == vs === vs typeof in javascript. See you then:

In JavaScript, a value type is also referred to as a primitive type. These are the most basic data types in the language and include:

• String

• Number

• Boolean

• Null

• Undefined

• Symbol (added in ES6)

When a primitive value is assigned to a variable or passed as a function argument, a copy of the value is created. This means that changes made to the variable or argument in one part of the code do not affect the value of the original variable or argument in another part of the code.

For example, consider the following code:

let x = 10;
let y = x;
y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20

In this code, x is assigned the value 10, and then y is assigned the value of x. When y is changed to 20, it does not affect the value of x. When x is logged to the console, it still has the value 10.

Primitive types are immutable, meaning their values cannot be changed. Any operation that appears to modify a primitive value actually creates a new value.

For example:

let str = "hello";
str.toUpperCase(); // Returns "HELLO"
console.log(str); // Output: "hello"

In this code, the toUpperCase() method does not actually modify the value of str. Instead, it returns a new string with all characters in uppercase. The original value of str remains unchanged.

Reference Types

In JavaScript, reference types are more complex data types than value types. Reference types include:

• Objects

• Arrays

• Functions.

When you assign a reference type to a variable or pass it as an argument to a function, a reference to the object is made, not a copy of the object itself. This means that any changes made to the object through one reference will be visible through all other references to the same object.

For example, if you have an array arr1 and you create a second reference arr2 that points to the same array:

let arr1 = [1, 2, 3];
let arr2 = arr1;

If you change the contents of the array through the arr2 reference:

arr2.push(4);

The contents of the array are changed for both the arr1 and arr2 references:

console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]

This is because arr1 and arr2 both references the same array in memory.

Note

Reference types work this way in Javascript because they are designed to be more efficient when working with large or complex data structures.

When you assign a value type to a variable, a copy of the value is made, which takes up memory space. This means that if you have a large array or object, making a copy of it every time you pass it to a function or assign it to a variable could be very inefficient and use up a lot of memory.

In contrast, when you assign a reference type to a variable, only a reference or pointer to the original data structure is stored in memory. This means that you can work with the data without duplicating it, which is much more efficient when dealing with large or complex data structures.

Additionally, reference types allow for more flexibility and dynamic behavior in your code, since you can modify the data structure and have those changes be reflected in all references to that structure. This is particularly useful when working with shared data structures in concurrent programming, as it ensures that all changes to the shared data are visible to all threads or processes accessing it.

Youtube Resources To Learn More:

Mosh Hamedani

Web Dev Simplified

Academind

A data type, in programming, is a classification or categorization of data that specifies the type of values that a variable or expression can take on in a computer program. It tells the computer how to interpret the data and how to operate it.

In JavaScript, data types can be categorized into two main categories: Primitive types and Non-Primitive(object types).

• Primitive Types: In programming refer to data types that are not objects and have no methods or properties of their own and refer to a single value. In JavaScript, there are six primitive types:

  • Number: used to represent numeric values, both integers and floating-point numbers. For example, 1, 2.5, -10, etc.

  • String: used to represent textual data as a sequence of characters. For example, "hello", "world", "123", etc.

  • Boolean: used to represent logical values of true or false. For example, true or false.

  • Undefined: used to represent a variable that has been declared but has not been assigned a value. For example, let a;

  • Null: used to represent a deliberate non-value or absence of an object. For example, let a = null;

  • Symbol: introduced in ECMAScript 6, used to create unique identifiers for object properties. For example, let a = Symbol('my symbol');

• Non-Primitive Types(Object Types): also referred to as object types, they are complex data types that can store multiple values and have methods and properties. Here are some examples of non-primitive types in JavaScript:

  • Object: a collection of key-value pairs, where each value can be of any data type.

  • Array: a special type of object used to store ordered collections of data.

  • Function: a type of object that can be invoked with arguments to perform a specific task.

  • Date: used to represent dates and times.

  • RegExp: used to represent regular expressions for pattern matching.

  • Error: used to represent errors that can occur during program execution.

Difference between Primitive Types and Non-primitive types:

Keep in mind that the exact behavior of these data types may vary depending on the programming language or environment being used.

Understanding data types is essential for effective programming. By mastering the characteristics and behaviors of different data types, you can write more efficient, robust, and maintainable code, and avoid common pitfalls and errors.

For example, let's say you're playing a game on your computer.

The computer needs to keep track of all the things happening in the game, like where your character is and what the enemies are doing. The computer does this by using a call-stack.
When you start the game, the computer puts the first instruction on the call-stack. This might be something like "Load the game". Then, the computer starts following that instruction. As it does, it adds more instructions to the call-stack.
For example, if you move your character, the computer might add an instruction to the call-stack that says "Move the character". If an enemy attacks, the computer might add an instruction that says "Handle the enemy attack".
The computer keeps following the instructions on the call-stack until it reaches the end of the program or until there's an error. When it's done with an instruction, it removes it from the call-stack and goes back to the previous instruction.
So, just like you can add or remove blocks from the top of a stack, the computer can add or remove instructions from the call-stack. This helps the computer keep track of what it's doing and makes sure everything happens in the right order.

Now! What is Call-stack?

The call stack is a data structure that keeps track of the order in which functions are called in a program. It's called a "stack" because it operates on the "last-in, first-out" (LIFO) principle, meaning that the last function called is the first one to be completed.

Every time a function is called, it's added to the top of the call stack. When the function returns, it's removed from the top of the stack. The next function on the stack then resumes execution. If a function calls another function, the new function is added to the top of the stack, and the previous function is paused until the new function returns.

The call stack is used to keep track of the execution context of a program, including the values of variables, the current line of code being executed, and the location to return to when the function finishes executing. The call stack is crucial for managing the flow of control in a program and makes sure that functions are executed in the correct order and that they return to the correct location when they're finished.

In the case of an error, the call stack can be useful for debugging. For example, if a program crashes with an error message, the call stack can show you the sequence of functions that were called leading up to the error, helping you to understand what caused the problem and how to fix it.

Example In Javascript

function greet(name) {
  console.log(`Hello, ${name}!`);
}

function introduce() {
  console.log("My name is Jane.");
}

function start() {
  greet("John");
  introduce();
}

start();

In this example, we have three functions: greet, introduce, and start. greet takes one argument (a name) and logs a greeting to the console, introduce logs a self-introduction to the console, and start calls greet with the argument "John" and then calls introduce.

When we call start(), it gets added to the call stack. Inside start, greet("John") is called and added to the top of the call stack. greet logs "Hello, John!" to the console and returns, so it is removed from the call stack. Next, introduce() is called and added to the top of the call stack. introduce logs "My name is Jane." to the console and returns, so it is removed from the stack. Finally, start() returns and is removed from the call stack, leaving an empty call stack.

So the call stack for this example would look something like this:

N/B: Remember Call-Stack uses the principle of Last In First Out(LIFO)

start()  - #First Function
greet("John") - #Second Function
introduce() - #Last Function

and then the last function(introduce()) added is removed from stack:

start()
greet("John")

and then the function(greet("John")) is called and removed from the stack;

start()

and finally, the call stack is empty when the last function(start()) is called.

A component is a piece of code that returns a JSX element, which can be rendered to the DOM. Components are the building blocks of a React application and can be reused throughout the app to create a modular and maintainable codebase.

Components can be either functional or class-based. A functional component is a plain JavaScript function that takes props as an argument and returns a JSX element. A class-based component is a class that extends the React.Component base class and has a render method that returns a JSX element.

Here's an example of a functional component:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello {props.name}!</h1>
    </div>
  );
}

export default MyComponent;

And here's an example of a class-based component:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}!</h1>
      </div>
    );
  }
}

export default MyComponent;

Props:

Props (short for "properties") are values that are passed to a component from its parent component. They can be used to pass data into a component and customize its behavior.

Props are passed to a component as an object, and the component can access the props using the props parameter. For example:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello {props.name}!</h1>
    </div>
  );
}

export default MyComponent;

State:

State is an object that stores data specific to a component. It can be used to track and manage the data that a component needs to function. Unlike props, state can be modified within a component.

When the state of a component changes, React will automatically re-render the component, updating the view to reflect the new state. This allows you to build interactive and dynamic user interfaces.

You can define the initial state of a component inside the constructor method of a class-based component or by using the useState hook in a functional component.

Here is an example of a class-based component that stores a count in its state:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

Here is an example of a functional component that stores a count in its state:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Lifecycle methods:

In React, lifecycle methods are methods that are called at different stages of a component's life cycle, such as when it is rendered to the DOM or when it is about to be removed from the DOM. They are a way for a component to perform certain actions at specific points in its life cycle, such as fetching data or updating the DOM.

1. Lifecycle methods are only available in class-based components, as they are methods of the React.Component base class. Some common lifecycle methods include:

   • constructor(props): This method is called before the component is mounted (added to the DOM). It is a good place to initialize the state and bind event handlers.

   • componentDidMount(): This method is called after the component is mounted (added to the DOM). It is a good place to perform API calls or other side effects that need to happen after the component is rendered.

   • shouldComponentUpdate(nextProps, nextState): This method is called before the component is updated (when the component's props or state change). It should return a boolean value indicating whether the component should be updated or not. If it returns true, the component will be updated; if it returns false, the update will be cancelled.

   • componentDidUpdate(prevProps, prevState): This method is called after the component is updated. It is a good place to perform side effects that need to happen after the component has been updated.

   • componentWillUnmount(): This method is called before the component is removed from the DOM. It is a good place to perform clean-up tasks, such as cancelling network requests or removing event listeners.

Here's an example of a class-based component that uses several lifecycle methods:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    // Perform API call or other side effect
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Only update the component if the data has changed
    return this.state.data !== nextState.data;
  }

  componentDidUpdate(prevProps, prevState) {
    // Perform side effect after the component has been updated
    console.log('Component updated');
  }

  componentWillUnmount() {
    // Perform clean-up tasks before the component is removed from the DOM
    console.log('Component unmounting');
  }

  render() {
    return (
      <div>
        {this.state.data ? <h1>{this.state.data.title}</h1> : <h1>Loading...</h1>}
      </div>
    );
  }
}

export default MyComponent;

In a functional component, you cannot use lifecycle methods because they are only available in class-based components. However, you can use the useEffect hook to perform side effects in a functional component.

The useEffect hook is a function that takes a callback function as an argument and is called after the component is rendered. It is a way to perform side effects, such as fetching data or adding event listeners, in a functional component.

Here's an example of how to use the useEffect hook in a functional component:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Perform API call or other side effect
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <h1>{data.title}</h1> : <h1>Loading...</h1>}
    </div>
  );
}

export default MyComponent;

In this example, the useEffect hook is called after the component is rendered, and it performs an API call to fetch data. The data is then stored in the component's state using the setData function. The component renders an h1 element with the data's title if the data is available, or a loading message if it is not.

The useEffect hook takes an optional second argument, which is an array of values that the hook should watch for changes. If any of the values in the array change, the hook will be called again. This is useful if you only want to perform the side effect when certain values change.

For example, you can use the useEffect hook to add an event listener only when the component is rendered for the first time by passing an empty array as the second argument:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Add event listener
    window.addEventListener('click', () => console.log('Clicked'));

    // Remove event listener on unmount
    return () => {
      window.removeEventListener('click', () => console.log('Clicked'));
    };
  },

Hooks:

A hook is a function that allows a functional component to use state and other React features. Hooks were introduced in React 16.8 and are a way to add state and other functionality to functional components, which are components that are written as a JavaScript function and cannot use state or lifecycle methods.

1. There are several built-in hooks in React, such as:

   • useState: This hook allows a functional component to use state. It returns an array with the current state value and a function to update it.

   • useEffect: This hook allows a functional component to perform side effects, such as making an API call or adding an event listener. It is called after the component is rendered.

   • useContext: This hook allows a functional component to consume a context value. It takes a context object as an argument and returns the current context value for that context.

Here's an example of a functional component that uses the `useState` and `useEffect` hooks:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Update the document title after the count changes
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

  return (
    <div>
      <h1>You clicked {count} times</h1>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default MyComponent;

In this example, the MyComponent component uses the useState hook to add a state value called count, which is initialized to 0. The component also uses the useEffect hook to update the document title every time the count value changes. The component renders an h1 element displaying the current count value and a button that, when clicked, calls the setCount function to update the count value.

Context:

In React, context is a way to pass data through the component tree without having to pass props down manually at every level. This is useful for data that is needed by many components within an application but does not fit the parent-child hierarchy of the component tree.

Here is an example of how you might use context in a React application:

// Create a context for the theme
const ThemeContext = React.createContext('light');

// Create a component that consumes the theme context
function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={`${theme}-theme`}>{theme}</button>
      )}
    </ThemeContext.Consumer>
  );
}

// Create a component that provides the theme context
class App extends React.Component {
  render() {
    // Provide the theme context value to the tree below
    return (
      <ThemeContext.Provider value="dark">
        <ThemedButton />
      </ThemeContext.Provider>
    );
  }
}

In this example, the App component provides the ThemeContext value to the component tree below it, and the ThemedButton component consumes this context value by using the ThemeContext.Consumer component.

Styling:

1. There are several ways to style components in React:

   1. Inline styling: You can use the style attribute to apply inline styles to a single component. This is useful for small, one-off styles, but can become cumbersome for larger projects.

       render() {
         return <div style={{ color: 'red', fontSize: '16px' }}>Hello, world!</div>;
       }
      

   2. CSS classes: You can define your styles in a separate CSS file and apply them to components using the className attribute. This is the traditional method of styling web applications, and is a good choice for larger projects with a more complex set of styles.

       render() {
         return <div className="red-text large-font">Hello, world!</div>;
       }
      

   3. CSS-in-JS: There are also several libraries that allow you to define your styles in JavaScript, and apply them directly to your components. This can be a good choice for projects that want to keep all their styling logic in a single place, but it can add additional complexity to your project.

       import styled from 'styled-components';
      
       const RedText = styled.div`
         color: red;
         font-size: 16px;
       `;
      
       render() {
         return <RedText>Hello, world!</RedText>;
       }
      

These are some of the important concepts you should understand in React.

#React #ReactNation #ReaFrica