---
# System prepended metadata

title: Interview question
tags: [The Coding God is on the way]

---

###### tags: `The Coding God is on the way`

# Interview question

- **localstorage cookie sessionstorage 差別**
```
    1. localstorage 暫存且須主動刪除
    2. cookie 暫存且須主動刪除同時附有k數限制
    3. sessionstorage 暫存關閉伺服器同時會關閉
```
- **[1, 2, 3, 4, 5] 用 reduce 寫總和**
```
const result = [1, 2, 3, 4, 5].reduce((acc, curr) => acc + curr)
```
- **[1, 2, 3, 4, 1, 2, 3, 4] 請去除重複的**
```
const arr = [1, 2, 3, 4, 1, 2, 3, 4];
[...new Set(arr)]
const result = arr.filter((item, index) => arr.indexOf(item) === index)
```
- **修改成正確的碼**
```
// before
const count = (value, fun) => {
  fun(value);
  return value < 0 ? count (value, fn): value
}
count (10, (value) => console.log(value))

// after
const count = (value, fun) => {
  fun(value);
  return value > 0 ? count (value - 1, fun): value
}
count (10, (value) => console.log(value))
```
- **解釋redux**
```
redux 為一個 state 的集合容器，修改部分透過 reducer 管理及 dispatch 修改狀態
```

- **react lifecycle**
```
// Mounting
constructor -> getDerivedStateFromProps -> render -> componentDidMount

// Updating
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate -> componentWillUnmount
```
- **const trs = {
    result: '...',
    print: function() {
        setTimeout(function() {
              console.log(this.result)
        }, 1000)
    }
}
trs.print() 求結果**
```
// undefined 因為 this 指向不對
// resolve
const trs = {
    result: '…',
    print: function() {
        (function(self){
            setTimeout(function() {
                console.log(self.result)
            }, 1000)
        })(this)
    }
}
```

- **null undefined undeclared between diff**
```
null 有定義但賦予空值
undefined 有定義但沒有賦值，跟null相等
undeclared 未定義也沒有賦值

如何 check
var a=null;
var b;
        
alert(typeof a);    //object
alert(typeof b);    //undefined
alert(typeof c);    //undefined
```
- **explain pure component**
```
實作了 shouldComponentUpdate 方法
透過 shallow compare 方式比較 state 和 props 判斷要不要 render
當然也可以透過 shouldComponentUpdate 自定義 render 時機點
```
- **Explain the difference between synchronous and asynchronous functions.**
```
// sync
console.log(1)
console.log(2)
// 1, 2

// async
setTimeout(() => console.log(1), 1000)
console.log(2)
// 2, 1
```
- **描述 event delegation。**
```
減少事件的監聽次數
<div class="parent">
    <div class="child" data-name="a"></div>
    <div class="child" data-name="b"></div>
    <div class="child" data-name="c"></div>
    <div class="subitem" data-name="d"></div>
</div>

$('.parent').on('click', '.child', function(){
    console.log($(this).data('name'));   
});
```
- **描述 this 如何在 JavaScript 中運作。**
```
this 的參考位置，是決定於你呼叫的function的時機點
```
- **測試 javscript 程式碼**
```
QUnit寫單元測試
```
- **什麼是 closure, 如何/為什麼使用?**
```
closure為一個特殊函示，可儲存當下環境的變數，封裝功能使用
const counter = (function () {
    let count = 0;
    return {
        increa: function() {
            count++
        },
        value: function() {
            return count
        }
    }
})()

counter.increa()
```
- **anonymous functions 典型的使用時機？**
```
1. var counter = (function() {})()
2. function result(callback) {
       callback()
   }
   result(() => console.log(1))
```
- **What’s the difference between host objects and native objects?**
```
host object 指 window document ...
native object 指 Math Date
```
- **function Person(){}
var person = Person() 和 var person = new Person()
之間有何不同？**
```
var person = Person() return 的結果回傳並給person
var person = new Person() 直接給一個實體
```
- **.call 和 .apply有何不同？**
```
差別在於兩個第二參數傳遞差別一個apply傳陣列call傳一個一個參數
都是把一個環境丟到一個方法中
```
- **你是用過 JavaScript templating (樣板) ？
如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等)**
```
EJS
```
- **描述 Function.prototype.bind?**
```
跟call和apply一樣把一個環境丟到方法中
```
- **描述 Ajax**
```
簡單來說 Ajax 是瀏覽器與伺服器溝通的橋樑，等待資料回來做畫面上的炫渲染
```
- **Describe event bubbling.**
```
由外到內再由內到外觸發重疊事件
e.stopPropagation
```
- **“attribute” 和 “property” 的不同？**
```
attribute 是定義在 html 上
property 是定義在 dom 上
```
- **document load event 和 document ready event 有什麼不同？**
```
load 的話會在全部載完才會執行
ready 不會等
```
- **== 和 === 有什麼不同？**
```
==會幫你做型別轉變 ===不會
```

- **Explain the same-origin policy with regards to JavaScript.** 
```
限制不同網域資料互動
```
- **Ternary expression 怎麼來的, “Ternary” 的意思是什麼？**
```
三元判斷
```
- **duplicate([1,2,3,4,5]);** // [1,2,3,4,5,1,2,3,4,5]
```
function duplicate(arr) {
    return arr.concat(arr)
}
```
- **什麼是 "use strict";? 使用他的優點和缺點是什麼？**
```
強制規範模式 example: 宣告
```
- **Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5**
```
for(let i = 0; i <= 100; i++) {
  if(i%3 === 0 && i%5 === 0)  { 
    console.log(i, 'fizzbuzz'); 
  } else {
    if(i%3 === 0)  console.log(i, 'fizz');
    if(i%5 === 0)  console.log(i, 'buzz');
  }
}
```
- **Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?**
```
因為全域變數容易呼叫及修改，容易造成後續無法預知的錯誤
```
- **single page app**
```
單頁應用網站除了可使使用者體驗變佳之外，也可以減少換頁及等待頁面的不安定感，缺點就是必須犧牲 SEO，但現在前端框架有不錯的解決方法，server-side-render
```
- **Promises 之於 callbacks 的優劣？**
```
有條理地寫出function的執行順序
```
- **What language constructions do you use for iterating over object properties and array items?**
```
forEach map reduce
```
- **Explain how prototypal inheritance works**
```
利用prototype繼承
```