front-end web interview basic questions

·

3 min read

ref. 感謝前輩們分享:

〔JS基礎觀念〕

  1. 變數有效範圍與var/let/const差異

    • JavaScript 在 ES6 中新增了“let”宣告方式來取代”var”。在ES6之前, JavaScript 的世界中並沒有區塊域(block)的概念,因此經常使用”var”宣告所有的變數,
    • var、let 一個是函數變數,另一個是區塊變數
    • 無宣告: global. var: function. let, const: block.
  2. Scope 作用域

    • Where and how to look for things. JS have two lexical scopes global and function
    • 變數在程式中可以被存取的範圍,可分為區域變數,全域變數。
  3. 函式與函式的作用域
  4. Hoisting提升是什麼?

    • JavaScript’s default behavior of moving declarations to the top.
    • shubo.io/javascript-hoisting quote:"關於 var 可以「重複宣告」以及「先使用後宣告」,你可能會很好奇,這樣為什麼會對?畢竟這違反我們對一般程式語言的認知。其實這是因為:在 JavaScript 中,不管你在函數中的哪一行用 var 宣告變數,一律視為在函數的第一行宣告。也就是說,不論你宣告 var 變數的位置在哪,宣告的動作一律都會被「抬升」到函式的最頂端,這個特性就叫做 hoisting (提升)。要注意的是,只有「宣告」這個動作有 hoisting (提升) 的特性,賦值 (把值指定給變數) 的動作不會 hoisting。"
      • function hoisting: "這個特性可以解決一個問題,也就是兩個函數需要互相呼叫彼此的狀態,也就是 A() 裡面會呼叫到 B(),而 B() 裡面會呼叫的 A() 的遞迴狀況。"
  5. Closure閉包是什麼?

  6. Callback 回呼是什麼、Callback Hell是什麼以及為何會產生?

  1. JS 事件傳遞機制:捕獲跟冒泡
  2. this 指向、如何強制綁定this (call/apply/bind差異)
  3. Event Loop
  4. 同步與非同步、promise是什麼?

〔其他網路基礎觀念〕

  1. http協定是什麼?
  2. cookie/local Storage 如何運作?
  3. MVC是什麼? MVVM又是什麼?
  4. Restful API是什麼?
  5. SPA是什麼?
  6. Client端跟Server端資料如何傳遞、輸入網址後頁面是怎麼render出來的?

in English

  • g2i.co/blog/2021-front-end-developer-interv..
  • What is the difference between == and ===?

    • Doubles equals checks for value only. Before checking, it does any necessary type coercion. For example, the string "1" will be == to the integer 1, but it will not be ===. Many projects these days prefer to always use ===. Although, some folks advocate writing code that works well with the == type coercion.
  • What is the this keyword in JavaScript?

    • this is a little tricky in JavaScript. Its value is determined by what the function you are inside of is called. In the global state, this is set to the window object. The value of this also depends on whether or not you are in strict mode. Inside a top-level function, a strict mode this will be undefined, whereas a non-strict mode this will be the window object. It's also worth knowing that the value of this can be overwritten with the bind method.
  • What is the difference between let, const, and var?

    • Originally, var was the only option JavaScript had for defining variables. In ES6, we got const and let as additional options. The important takeaways are:
      1. Variables defined with const cannot be reassigned.
      2. Const and let variables are block-scoped.
      3. Var variables are function scoped.
      4. Variables defined with var are hoisted.
        • Demo: jsfiddle.net/sunpochin/3ezog6uq/6
        • shubo.io/javascript-hoisting quote:"關於 var 可以「重複宣告」以及「先使用後宣告」,你可能會很好奇,這樣為什麼會對?畢竟這違反我們對一般程式語言的認知。其實這是因為:在 JavaScript 中,不管你在函數中的哪一行用 var 宣告變數,一律視為在函數的第一行宣告。也就是說,不論你宣告 var 變數的位置在哪,宣告的動作一律都會被「抬升」到函式的最頂端,這個特性就叫做 hoisting (提升)。要注意的是,只有「宣告」這個動作有 hoisting (提升) 的特性,賦值 (把值指定給變數) 的動作不會 hoisting。"
      5. function hoisting: "這個特性可以解決一個問題,也就是兩個函數需要互相呼叫彼此的狀態,也就是 A() 裡面會呼叫到 B(),而 B() 裡面會呼叫的 A() 的遞迴狀況。"
  • What is the difference between == and ===?

  • How can you access HTML elements with JavaScript?

    • Familiarize yourself with getElementById, querySelector, and querySelectorAll.
  • What options do we have to store data?

    • You can store user data in localStorage, cookies, or sessionStorage.
  • What is functional programming in JavaScript?
    • Functional programming refers to using pure functions. In the context of JavaScript, this means familiarizing yourself with map, filter, and reduce. It's also worth understanding the concept of immutability.

questions from ithelp.ithome.com.tw/articles/10256018

  • "廢話不多說,先整理我自己必問的問題,再詳細說明為什麼要問這些問題:"
    • 專案的開發流程大致為何?
    • 團隊成員有多少人、每個人的資歷?
    • 團隊/公司目前使用的技術? (語言、框架、工具)
    • 通常專案會有給多少開發時間?
    • 團隊成員每人普遍會卡多少案子/任務?
    • 團隊的分工大致為何? (是否有PM/設計/前端/後端/QA團隊)
    • 加入團隊後的直屬主管是誰、他是前端/後端/全端?
    • 新人是否有培訓期? 培訓時會分派什麼樣的任務?
    • 專案完成後是否有Code review? 由誰進行?
    • 加入後主要會負責的工作內容?
    • 試用期間會碰到的主要任務或是最大困難為何?
    • 試用期間希望能完成怎麼樣的案子或具備的能力? "