DEV Community


Posted on


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

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;
Enter fullscreen mode Exit fullscreen mode
function sayHi() {
    console.log(name); //undefined
    // console.log(age);  //ReferenceError
    var name = 'UU';
    let age = 25;
Enter fullscreen mode Exit fullscreen mode

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";
            "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 

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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); //{}
Enter fullscreen mode Exit fullscreen mode

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' });
Enter fullscreen mode Exit fullscreen mode

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}`;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 = {
        '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]
Enter fullscreen mode Exit fullscreen mode

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


Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!