Noah's Web Dev Notes

Reference and value

Wed, 16 Dec 2020 22:32:11 GMT

In javascript, when you assign value to a variable, it has two different ways to achieve that: assign value or assign reference.

The main difference between the two is that passing by value happens when assigning primitives while passing by reference when assigning objects.

value

let a=10
let b=a
a=11
console.log(a,b) //11, 10

When assign primitives such as string, number, boolean or symbol to a variable. In memory it works like below:

a=10, it generate a key value pair and save them into stack

key	value
a	10

b=a

key	value
a	10
b	10

a=11

key	value
a	11
b	10

reference

let a = {age:10}
let b = a
b.age = 11
console.log(a.age) // 11

But if you assign object to a variable, in memory it works like below:

let a = {age:10}, it save the reference address of the object instead of the value of the object in the stack

key	address
a	address1

and in the heap it save the object value:

address	value
address1	{age:10}

Therefore, when assign b=a, they will share the same reference address in the stack

key	address
a	address1
b	address1

and this is why when you change the value of b, it will also effect a

b.age = 11

address	value
address1	{age:11}

Why make reference instead of value?

It is because normally object could be huge, and if we all save them as key-value pairs in the stack, it will lead to a heavy memory cost.

Javascript keyword:'this'

Mon, 14 Dec 2020 14:17:11 GMT

‘this’ is a javascript keyword. It is an object automatically generated inside the function body when the function is running, and can only be used inside the function body.

this has different values depending on where it is used:

In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
Methods like call(), and apply() can refer this to any object.

this in a method

In the example this refers to the person object. The person object is the owner of the fullName method.

// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName; // this refers to person
  }
};

// Display data from the object:
console.log(person.fullName());

this alone:

let x = this;
console.log(x) // Window

this in a Function (default)

In a JavaScript function, the owner of the function is the default binding for this. Because function could be considered as a method of the object Window. So, in a function, this refers to the Global object [object Window].

function myFunction() {
  return this; //Window
}

this in a Function (strict)

JavaScript strict mode does not allow default binding. So, when used in a function, in strict mode, this is undefined.

this in a constructor

When using this inside a constructor, this refers to the object that been created by the constructor

var x = 2;
function Obj() {
  this.x = 1;
}

var obj = new Obj();
console.log(obj.x) // 1
console.log(x)  // 2

this in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event

For example, this refers to the button element below:

<!DOCTYPE html>
<html>
    <body>
        <button onclick="this.style.display='none'">Click to Remove Me!</button> 
    </body>
</html>

Object Method Binding

In these examples, this is the person object (The person object is the “owner” of the function):

// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction(); // [object Object]

Explicit Function Binding

The call() and apply() methods are predefined JavaScript methods. They can both be used to call an object method with another object as argument.

In the example below, when calling person1.fullName with person2 as argument, this will refer to person2, even if it is a method of person1:

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; // John Doe

Difference between var, const and let?

Sat, 12 Dec 2020 20:23:32 GMT

In the process of learning JavaScript, I found it difficult to distinguish between var, let and const. So let’s discuss the difference between them.

First, let and const are additional feature that came with ES6, both of them are used for variable declaration. Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge.

var

var declarations are globally scoped or function/locally scoped.

The scope is global when a var variable is declared outside a function. which means any variable that is declared by var outside a function block is available for the whole window.

var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

var global = "global";

function newFunction() {
    var local = "local";
    console.log(global)
}
newFunction(); // global
console.log(local); // error: local is not defined

Hoisting of var

Hoisting is JavaScript’s default behavior of moving declarations to the top, which means a variable can be declared after it has been used.

For example:

var num = 123;
function foo(){
    console.log(num);  // undefined
    var num = 456;
    console.log(num) // 456
}
foo()

Why the first console.log is undefined? It is because this code is interpreted as following:

var num = 123;
function foo(){
    var num;
console.log(num);  // undefined
num = 456;
console.log(num) // 456
}
foo()

The problem of var

var a = "initial value";

if (truethings) {
    var a = "value changed"; 
}

console.log(a) // "value changed"

The problem occurs if you accidently redefine the value of the variable and do not realize that it has already been defined before.

let

let is block scoped, a block is a chunk of code bounded by {}.

So a variable declared in a block with let is only available for use within that block. Let me explain this with an example:

let a = "initial value";
let truethings = true;

if (truethings) {
    let a = "value changed";
    console.log(a);// "value changed"
}
console.log(a) // "initial value"

let can be updated but not re-declared.

We can do this:

let greeting = "say Hi";
greeting = "say Hello instead";

But this will leads to an error:

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Hoisting of let

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you’ll get a Reference Error.

const

Variables declared with the const maintain constant values. const declarations are block scoped

const num = 456
if(true){
    const num = 789;
    console.log(num); // 789
}
console.log(num) // 456

const cannot be updated or re-declared

The value of a variable declared with const remains the same within its scope.

So this is wrong:

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable.

And this is wrong, either:

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated.

Therefore, if we declare a const object as this:

const greeting = {
    message: "say Hi",
}

while we cannot do this:

greeting = {
    newMessage: "say Hello instead";
} // error:  Assignment to constant variable.

we can do this:

greeting.message = "say Hello instead";
console.log(greeting.message); // "say Hello instead"

getElementById vs querySelector

Thu, 03 Dec 2020 23:46:37 GMT

The JavaScript querySelector() method lets you retrieve an element from the DOM, or the web page, using a CSS selector. This method comes with a sister function called querySelectorAll() which selects all the elements that match a particular selector from the DOM.

The getElementById() method, on the other hand, retrieves an element based on its ID attribute, hence the name. This method is more restrictive than querySelector because you can only retrieve elements based on their particular ID.

getElementById

Syntax:

element = document.getElementById(id);

Returns a reference to the element by its ID. If the element with the specified ID is not in the document, it will returns null.

querySelector

Syntax:

element = document.querySelector(selectors);

Returns the first element within the document that matches the specified group of selectors, or null if no matches are found.

Difference between them

Both of these functions are very similar in what they can do in term of DOM manipulation, but getXXXByXX function returns element dynamically, while querySelector returns element statistically.

See example below :

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

If we use querySelector to manipulation it :

var ul=document.querySelector('ul');
        var list=ul.querySelectorAll('li');
        for(var i=0;i<list.length;i++){
            ul.appendChild(document.createElement('li'));
        }//now it create 3 new li and append them into ul
        console.log(list.length) //however, the result is still 3, not 6

On the other hand, if we use selectorElementById :

var ul=document.getElementsByTagName('ul')[0];
        var list=ul.getElementsByTagName('li');
        for(var i=0;i<list.lenth;i++){
            ul.appendChild(document.createElement('li'));
        }   
        console.log(list.length)// The result will be 6, not 3

Performance

Lone story short, getElementById is faster than querySelector.

Why using redux in react?

Tue, 24 Nov 2020 17:42:31 GMT

Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.

To use redux inside a react app, you should use an official “UI binding library” called react-redux

You can start new apps with React Redux is by using the official Redux+JS template for Create React App:

npx create-react-app my-app --template redux

Or add it as a dependency for an existing react app:

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

Why using redux?

Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming; but that depends upon the architecture decisions.

State management

State management is essentially a way to facilitate communication and sharing of data across components. It creates a tangible data structure to represent the state of your app that you can read from and write to. That way, you can see otherwise invisible states while you’re working with them.

Most libraries, such as React, Angular, etc. are built with a way for components to internally manage their state without any need for an external library or tool. It does well for applications with few components, but as the application grows bigger, managing states shared across components becomes a chore.

In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult.

For instance, in React, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components.

Start with React.js

Mon, 23 Nov 2020 22:12:03 GMT

Let’s start with how to setup a react application~ setup a react application~.

There are several ways to get started with react.

create-react-app

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 10.16 and npm >= 5.6 on your machine. To create a project, run:

npx create-react-app my-app
cd my-app
npm start

Online code playground

You can play aroud with react on these online code playgrounds: CodeSandbox, CodePen and Stackblitz