Forem: uu

[JavaScript] Knowledge you need to know before interview (keep updating)

uu — Tue, 09 Jun 2020 05:06:30 +0000

Aloha Everyone. This post will helps me keep track my learning progress and mark down some key concepts. Hope everyone enjoy life and have promising job~~~

Question1: undefine ReferenceError

var y = 1;
if (function f() { }) {
    y += typeof f;
}
console.log(y); //1undefined

var k = 1;
if (1) {
    eval(function foo() { });
    k += typeof foo;
}
console.log(k); //1undefined because eval(function f(){}) returns function f(){} (which is true). 

var k = 1;
if (1) {
    function foo() { }; //function must declare first not in if statement
    k += typeof foo;
}
console.log(k);//1function

function sayHi() {
    console.log(name); //undefined
    // console.log(age);  //ReferenceError
    var name = 'UU';
    let age = 25;
}
sayHi();

Explain: var gets hoisted (memory space is set up during the creation phase) with the default value of undefined, until we actually get to the line where we declare the variable.
let or const are hoisted, but dont get intialized. They are not accessible before declare them.

Question2: Closure

var globalVar = "abc";
// Parent self invoking function 
function outerFunction(outerArg) { // begin of scope outerFunction
    // Variable declared in outerFunction function scope 
    var outerFuncVar = 'x';
    // Closure self-invoking function 
    function innerFunction(innerArg) { // begin of scope innerFunction
        // variable declared in innerFunction function scope
        var innerFuncVar = "y";
        console.log(
            "outerArg = " + outerArg + "\n" +
            "outerFuncVar = " + outerFuncVar + "\n" +
            "innerArg = " + innerArg + "\n" +
            "innerFuncVar = " + innerFuncVar + "\n" +
            "globalVar = " + globalVar);
    }// end of scope innerFunction)(5); // Pass 5 as parameter 
    innerFunction(5)  //call inner function
}// end of scope outerFunction )(7); // Pass 7 as parameter 


outerFunction(7)

Explain:A closure is a function defined inside another function (called the parent function),
and has access to variables that are declared and defined in the parent function scope.
The closure has access to variables in three scopes:
Variables declared in their own scope
Variables declared in a parent function scope
Variables declared in the global namespace

Question3: var, let scope

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1); //3 3 3 
}

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1); //0 1 2
}

Explain: setTimeOut callback function is called after the loop has been executed. var is global, let is block-scoped

let great;
gret = {};
console.log("test typo ", gret); //{}

Explain: gret acts as global.gret={} (or window.gret={} in browser). Can use 'use strict' avoid this. If change gret into great in console, will get undefined

Question4: Class static Prototype

class BedSheet {
    static colorChange(newColor) {
        this.newColor = newColor;
        return this.newColor;
    }

    constructor({ newColor = 'green' } = {}) {
        this.newColor = newColor;
    }
}

const silkSheet = new BedSheet({ newColor: 'purple' });
console.log(silkSheet.colorChange('orange'));

Explain:The colorChange function is static. Static methods are designed to live only on the constructor in which they are created,
and cannot be passed down to any children.
Since freddie is a child, the function is not passed down,
and not available on the silkSheet instance: a TypeError is thrown.
If remove static, works!

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
const member = new Person('UU', 'HH');
// TypeError: Person.getFullName = function () {
//     return `${this.firstName} ${this.lastName}`;
// };
Person.prototype.getFullName = function () {
    return `${this.firstName} ${this.lastName}`;
};

console.log(member.getFullName());

Explain:If you want to add a feature to all objects at once, you have to use the prototype instead.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

const uu = new Person('UU', 'HH');
const sam = Person('Sam', 'Smith');

console.log(uu); //[works!]
console.log(sam); //undefined

Explain:For sam, no use 'new'. when using 'new', it refers to new empty object that we create.
If you don't add 'new', it refers to the global object.

We said that this.firstName equals "Sam" and this.lastName equals "Smith".
What we actually did, is defining global.firstName = 'Sam' and global.lastName = 'Smith'.
sam itself is left undefined, since we don't return a value from the Person function.

function People(first, last, age, gender, interests) {
    // property and method definitions
    this.name = {
        'first': first,
        'last': last
    };
    this.age = age;
    this.gender = gender;
}
//create object instance
let person1 = new People('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
console.log(person1.valueOf()); //nothing to return
console.log(People.valueOf()); //return [Function: People]

Explain: Javascript is Prototype-based language. It has prototype chain. The instance's current variable will 'override' its prototype object's variable(called property shadowing).
Properties and methods which are defined on the prototype are on the Objects' constructor functions,
not the object instances themselves.
person1(instance) -> People -> Object

Reference:

https://github.com/lydiahallie/javascript-questions

Event Propagation: Capturing, Bubbling

uu — Tue, 09 Jun 2020 00:34:29 +0000

DOM event flow has three phases: Capture, Target, Bubbling phase.

<html>

<head>
    <title>Event Propagation</title>
    <style>
        #parent {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 3;
            background: green;
        }

        #child {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background: orange;
        }
    </style>
</head>

<body>
    <div id="parent">
        Parent element
        <div id="child">
            Children element
        </div>
    </div>
    <script type="text/javascript">
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");

        document.body.addEventListener("click", function (e) {
            console.log("click-body");
        }, false);

        parent.addEventListener("click", function (e) {
            console.log("click-parent");
        }, true);

        child.addEventListener("click", function (e) {
            console.log("click-child");
        }, false);
    </script>
</body>

</html>

Event Capturing

When clicking mouse or triggering dom event(here click child's div), browser will propagate event from outside to target,starting from root(document).

See the code above, parent's listener were registered using a value of true in addEventListener

parent.addEventListener('click', listener, true)

If third parameter is omitted, its default value is false and the listener is not a capturer. Then it is not event capturing, event bubbling instead.

Event Bubbling

Event Bubbling is other way around. Its event order is from target to outside(can be parent), going up back to root.

child.addEventListener("click", function (e) {
            console.log("click-child");
        }, false);

Summary

1.Event Propagation order : Capturing -> Target -> Bubbling
2.When event reaches target itself, all the listeners registered on the event target will be invoked, regardless of event capturing(true) or event bubbling(default or false).

[JavaScript] Pass-by-value vs. Pass-by-reference

uu — Fri, 05 Jun 2020 07:28:14 +0000

Before going forward with this article, I suggest you may read Immutable vs. Mutable

1.Passing by value of primitive value

pass-by-value means passing value/argument to function. The change to argument inside of function won't affect outside of function. But if you return function result, then that is another meaning.

let a = 10;
function change(x) {
    x = 20;
}
change(a);
console.log(a); //10 not change

let a = 10;
function change(x) {
    x = 20;
    return x;
}
console.log(change(a));//20

2.Passing by reference of object

pass-by-reference means passing address instead of argument to call a function. Changing the value inside the function affect its value ouside of function. Array and object pass-by-reference.

const person = {
    isStudent: true
};
function graduate(kid) {
    kid.isStudent = false;
}

graduate(person);
console.log(person.isStudent); // false; changed

So you will see person is declared outside the function 'graduate'. When function is called, person 's value got mutated.

When you pass a reference to function, then function cannot change the reference to point to another object. An example as below:

const person = {
    isStudent: true
};
function graduate(kid) {
    kid = {
        isStudent: false
    };
}
graduate(person);
console.log(person.isStudent); // true; no change

'kid' is another object, which is different from 'person' object.

[JavaScript] Mutable vs. Immutable

uu — Fri, 05 Jun 2020 02:42:01 +0000

1.Summary

In this article, I will talk about

What is immutable & mutable variable in JavaScript?
Difference between having two references to the same object and having two different objects that contain the same properties.
Not to be confused with identifiers such as const, let, var. Those are signals that determine variable will be reassigned or not.
How to combine isMutable with identifier?
Use one easy way to tell difference between immutable & mutable.

2.Immutable

Primitive datatypes such as numbers, strings, and Booleans are immutable - it is impossible to change values of those types. You can combine them and derive new values from then, but when you take a specific string value, that value will always remain the same.

let str1 = 'Hello';
//combine string
str1 = str1.concat(" Code!");
console.log(str1); //print Hello Code!

You see code above, maybe a little confused. But remember the text inside it cannot be changed. If you have a string that contains "cat", it is impossible for other code to change a character in your string to make it spell "rat".

3.Mutable

Object datatypes work differently. You can change their properties, causing a single object value to have different content at different times.

With objects, there is a difference between having two references to the same object and having two different objects that contain the same properties.

let object1 = { fruit: "apple", color: "yellow" };
let object2 = object1;
let object3 = { fruit: "apple", color: "yellow" };
console.log("check object1 === object2", object1 === object2); //true
console.log("check object1 == object3", object1 == object3); //false
object1.color = "red";
console.log(object1); //{ fruit: 'apple', color: 'red' }
console.log(object2);//{ fruit: 'apple', color: 'red' }
console.log(object3);//{ fruit: 'apple', color: 'yellow' }

The object1 and object2 bindings refer to same object, which is why changing object1 also changes the value of object2. They are the same identity. The binding object3 points to a difference object.

4.Not in same life with const, let, var

Bindings can be changeable or constant, but this is separate from the way values behave. Even though number values dont' change, you can use a let binding to keep track of a changing number by changing the value the binding points at. A const binding to an object itself cannot be changed.

const object1 = { fruit: "apple", color: "yellow" };
object1.color = "red"; //allowed
object1 = { fruit: "apple", color: "yello" }; //not allowed

5.One easy way to tell difference between immutable & mutable

When new variable copies or refers to other primitive variable(later called old), no matter how new variable makes updates, that won't change the value of old variable.

If new variable copies or refers to other object variable(later called old), old variable's value will be changed if new variable make updates.

let num1 = 66;
let str1 = 'Hello';
let boolean1 = true;
let arr1 = [1, 2, 3];
let obj1 = { name: 'yuki', age: '25' };

// Primitive: Copy items
let num2 = num1;
let str2 = str1;
let boolean2 = boolean1;

// Update the copies
num2 = num2 - 10;
str2 += ' world';
boolean2 = false;

// print 65
console.log(num1);
// print "Hello"
console.log(str1);
// print "true"
console.log(boolean1);

// Object: Copy items
let arr2 = arr1;
let obj2 = obj1;

// Update the copies
arr2.push(4, 5, 6);
obj2.name = 'UU';

// print [1, 2, 3, 4, 5, 6]
console.log(arr1);
// print { name: 'UU', age: '25' }
console.log(obj1);

6.Conclusion

Primitive datatypes -> immutable
Object variable -> mutable
The difference between immutable and mutable is that when changing value of reference variable will affect value of original referenced variable.