Lux's Blog

Questions:

a. What kind of variable types can be checked by typeof?

b. When should use == and when should use ===?

c. What's the difference between value type and reference type?

d. Implement the deep clone manually.

Skills:

1. Assignment of value type and reference type:

let a = 100;
let b = a;
a = 200;
console.log(b) //100

let a = {age:20}
let b =a;
b.age = 21;
console.log(a.age)

value-type variables won't effect each other after assignment, but reference-type ones will.

The changes for value-type a and b in memory stack:

step 1let a = 100:

step 2 let b = 100:

step 3 a=200:

The changes for reference-type a and b in memory stack and heap:

step 1 let a = { age: 20}:

In stack:

In heap:

step 2 let b = a:

In stack:

In heap:

step 3: b.age = 21:

In stack:

In heap:

The computer will put value-type variables in the stack directly but use memory address to point to the value of reference-type variables, as the performance consideration and copy efficiency.

2. What's value types and reference types

let a // undefined
const s = 'abs' //string
const n = 100 // number
const b = true // boolean
const sb = Symbol('s') // symbol

const obj = { x: 100 }
const arr = ['a', 'b', 'c']

const n = null // special reference type, pointer points to empty address

// special reference type, typeof fn === 'function'
function fn() {}

3. typeof operator

// 1. typeof can check all value types
let a;   				typeof a // 'uundefined'
const str = 'abc'  		typeof str // 'string'
const n = 100;     		typeof n // 'number'
const b = true;			typeof b // 'boolean'
const sb = Symbol('s')	typeof sb // 'symbol'

// 2. typeof can check function
typeof console.log // 'function'
typeof function () {} // 'function'

// 3. tyypeof can check reference type but can't get details
typeof null // 'object'
typeof ['a', 'b'] // 'object'
typeof { x: 100 } // 'object'

4. Deep clone

const obj = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'Auckland'
    },
    arr: ['a', 'b', 'c']
}

function deepClone(obj = {}){
    if(typeof obj !== 'object' || obj == null) {
        // obj is null or not an object/array, return directly
        return obj
    }
    
    // init the returned result
    let result
    if(obj instanceof Array) {
        result = []
    }else {
        result = {}
    }
    
    for(let key in obj) {
        // insure key is not the prototype property
        if(obj.hasOwnProperty(key)) {
            // Recursive
            result[key] = deepClone(obj[key])
        }
    }
    
}

Note: don't use deep clone randomly, as for huge objects, the performance is poor. E.g. in React

5. Variables computing & type conversion

// 1. string concatenation
const a = 100 + 10 // 100
const b = 100 + '10' // '10010' you can use 100 + parseInt('10', 10)
const c = true + '10' // 'true10'

// 2. == operator, this will cause falsy and truthy conversion
100 == '100' // true
0 == '' // true
0 == false // true
false == '' // true
null == undefined // true

// 3. Please use === except (== null):

const obj = { x: 100 }
if (obj.a == null) {}
// above code can be written like this:
// if (obj.a === null || obj.a === undefined) {}