DEV Community: Edward Luu

Understanding to Hoisting

Edward Luu — Tue, 17 Nov 2020 04:11:46 +0000

What is Hoisting?

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

Variable

Example of hoisting

console.log(A); // Returns undefined, as the only declaration was hoisted, no initialization has happened at this stage 

var A = 'edward';

Explain for this one, the declare of A will push to the top of the current scope. But the value of A does not assign for now. See the code below.

var A; // Declaration
console.log(A); //Returns undefined, as only declaration was hoisted, no initialization has happened at this stage 
A = 'edward'; // Initialization

The let and const Keywords

Variables defined with let and const are hoisted to the top of the block, but not initialized.
Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.
Using a let or const variable before it is declared will result in a ReferenceError.

console.log(A); // Uncaught ReferenceError: Cannot access 'A' before initialization

let A = 'edward';

//const similar to let.

Function

One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. For example:

displayName('Edward'); // My name is Edward 

function displayName(name) {
  console.log(`My name is ${name}`);
}

let displayName1 = displayName('Edward');
let displayName2 = new displayName('Edward');

console.log(displayName1) //underfined
console.log(displayName2) // {}

Even though we call the function in our code first, before the function is written, the code still works. This is because of how context execution works in JavaScript.

Reference :
https://www.w3schools.com/js/js_hoisting.asp
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Understanding to Closures

Edward Luu — Tue, 10 Nov 2020 04:20:08 +0000

What is this?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Example:

function sum(x){
  // outer functions scope
  return function(y){
  // inner functions scope
    return x + y
  }
 }
 const addSum = sum(3);
 console.log(addSum(6)) // print 9

In this example, we have defined a function sum(x), that takes a single argument y and returns the sum of x and y.
The sum is a function factory. It creates functions that can add a specific value to their argument.
In the example above, the function factory creates two new functions, one that adds three to its argument.

addSum is closure. They share the same function body definition but store different lexical environments. In addSum 's lexical environment, x is 3.

And then we call addSum(6) the function return sum is 9, because addSum already have x is 3 (share function body definition) and lexical environment received the argument y is 6 and it's a return sum of 3 and 6.

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

What is a javascript engine?

Edward Luu — Tue, 04 Aug 2020 16:25:12 +0000

Javascript Engine

A JavaScript engine is a computer program that executes JavaScript (JS) code. A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form.

In a browser, the JavaScript engine runs in concert with the rendering engine via the Document Object Model.

List of popular projects that are implementing a JavaScript engine:

V8: open source, developed by Google, written in C++. Google Chrome and the many other Chromium-based browsers use it.
SpiderMonkey: developed by Mozilla for use in Firefox and its forks.
JavaScriptCore is Apple's engine for its Safari browser.
Chakra (JScript9): Internet Explorer.
Chakra (JavaScript): Microsoft Edge.

<< Next blog i will explain about to v8 engine. >>

Referances:
https://en.wikipedia.org/wiki/JavaScript_engine

Understanding Deep Copy and Shallow Copy in Javascript

Edward Luu — Fri, 24 Jul 2020 09:19:57 +0000

Shallow copy

Shallow copies duplicate as little as possible. A shallow copy of a collection is a copy of the collection structure, not the elements. With a shallow copy, two collections now share the individual elements.

Deep copy

Deep copies duplicate everything. A deep copy of a collection is two collections with all of the elements in the original collection duplicated.

Primitive data types

When you create these values, they are tightly coupled with the variable they are assigned to. They only exist once. That means you do not really have to worry about copying primitive data types in JavaScript. When you make a copy, it will be a real copy.
Let’s see an example:

let a = 5;
let b = a;
b = 6;

console.log(a); // 5
console.log(b); // 6

Reference data types

Technically, arrays are also objects, so they behave in the same way. I will go through both of them in detail later.

Here it gets more interesting. These values are actually stored just once when instantiated, and assigning a variable just creates a pointer (reference) to that value.

With Object

Create an object a with property test with value test1 and then copy b = a and then change value test in object b.Let see example:

Shallow copy

const a = 5;

const b = a;

b.test = 'test2'; //Shallow copy

console.log(a); // test 2
console.log(b); // test 2

Deep copy

const a = { test: 'test1' }

//you can use spread or Object.assign() method for clone an object

const b = {...a}; // or const b = Object.assign({},a);

b.test = 'test2'; // Deep copy

console.log(a); // test 1
console.log(b); // test 2

Making deep copies without thinking

const a = { test: 'test1' }
const b = JSON.parse(JSON.stringify(a));
b.test = 'test2';

console.log(a); // test 1
console.log(b); // test 2

With Arrays

Copying arrays is just as common as copying objects.You can use some ways for deep copy are Spread Operator,Array Functions, Nested Array.
Let see an example below:

const a = [1,2,3]
let b = [...a] // Spread Operator
let b = a.map(item => item) // Array Functions
let b = a.slice(0) // Array Functions

let b = JSON.parse(JSON.stringify(a)) // Nested Array

Conclusion

In the end, you know should use the copy with reference data types for some case you want to copy an object or array split with original and some ways how to make a deep copy.

Thanks for reading.Please share your experiences,questions and feedback below!

Reference

https://www.freecodecamp.org/news/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd/
https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy