# FUNPODIUM 奕兆有限公司 2022/03/07

###### tags: `面試經驗`、`前端`

## 上機考

[Link](https://vscode.dev/liveshare/FDDC6C26D4F3513656973BEB55FB215CDA02)

- 考 JS 語言特性
- Format 資料能力
- React 觀念

1. What will the code below output to the console?

console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1

console.log(foo); // foo is not defined
let foo = 1;
console.log(foo); // Error 所以跳出

console.log(foo); // foo is not defined
const foo = 1;
console.log(foo); // Error 所以跳出

foo = 1
console.log(foo) // 1
var foo = 2
console.log(foo) // 2

foo = 1
console.log(foo) //  Cannot access 'foo' before initialization
let foo = 2
console.log(foo)

foo = 1
console.log(foo) // Cannot access 'foo' before initialization
const foo = 2
console.log(foo)

> Hosting with var、let、const

2. What will the code below output to the console?

**Basic**

var val = 1;
const obj = {
    val: 2,
    foo() {
        return this.val;
    },
    bar: () => {
      return this.val;
    },
};
console.log('foo: ', obj.foo()); // 2
console.log('bar: ', obj.bar()); // 1

> obj 呼叫 foo()，所以 this 是 obj
> arrow function 是呼叫自己 function scope 外的 scope 的 this

**Advanture**

var val = 1;
const obj = {
    val: 2,
    foo() {
        return this.val;
    },
    bar: () => {
        const zoo = () => {
            // this 因為 zoo arrow func 指向 bar 的 func scope 的 this
            return this.val;
        }
        console.log(zoo()) // obj.foo() => 1
        return zoo();
    },
};
console.log('foo: ', obj.foo()); // 2
console.log('bar: ', obj.bar()); // 1

3. remove duplicates

const arr = [1, 2, 2, 3, 4, 5];

const result = arr.reduce((prev, cur) => {
    if(!prev.includes(cur)) {
        prev.push(cur)
    }
    return prev
}, [])

console.log(result) // [1, 2, 3, 4, 5];

4. Assuming we have an array that

// From
const arr = [
    { name: 'John', age: 18 },
    { name: 'Peter', age: 20 },
];

// format to
output: {
    names: ['John', 'Peter'],
    ageSummary : 38
}

const result = arr.reduce((prev, cur) => {
    prev.names.push(cur.name)
    prev.ageSummary += cur.age
    return prev
}, {names: [], ageSummary: 0})

> 這題關鍵是知道 reduce 的 inital 可以初始的很詳細

5. What will the code below output to the console?

import React, { useState, useEffect } from 'react';

const Component = () => {
    const [foo, setFoo] = useState('a');

    useEffect(() => {
        setFoo('b');
    }, []);

    useEffect(() => {
        console.log('effect', foo);
    }, [foo]);

    console.log('render', foo);
    return <div></div>;
};

export default Component;

render: a 
effect: a
render: b
effect: b

> 這題是知道 render 與 useEffect 執行順序

第一次程式 render 由上往下, foo 是 'a', 繼續往下 遇到第一個 useEffect 要做 setState, 此行為先暫存，再往下遇到到二個 useEffext, 此行為要 console.log, 先往後暫存，之後往下執行 console.log('render'), 印出 `render a`

接下來繼續把之前的第一個useEffect暫存的動作做完，所以把foo做setState成b，之後把第二個useEffect暫存的動作執行 console.log 印出 `effect a`, 因為被setState，所以Component re-render,程式下面的console.log `render b` 一次, useEffect 的 foo因為改變，所以再 console.log 一次 `effect 'b'`