JavaScript魑魅魍魎 (Chi mi mou ryou)

※社内でやったLTですが、基本そのまま公開しました.

I'll ask some questions about JavaScript.

If you're answers are all correct, a PRIZE is given by Nanri-san. hooray!

---

Q1. == operator

---

Q1. == operator

Which returns false? Choose 1 answer.

'1' == true      // a)
0 == false       // b)
null == 0        // c)
null + 1 == true // d)
0 == []          // e)
0 == [0]         // f)

---

A1. == operator

The answer is c.

'1' == true      // a) true
0 == false       // b) true
null == 0        // c) false
null + 1 == true // d) true
0 == []          // e) true
0 == [0]         // f) true

---

Protip.

Don't use == operator.

---

Q2. typeof operator

---

Q2. typeof operator

Which one returns 'object' ?

typeof undefined; // a)
typeof null;      // b)
typeof true;      // c)
typeof 1;         // d)
typeof 'a';       // e)

---

A2. typeof operator

The answer is b.

typeof undefined; // a) 'undefined'
typeof null;      // b) 'object'
typeof true;      // c) 'boolean'
typeof 1;         // d) 'number'
typeof 'a';       // e) 'string'

---

Protip.

null is an object. OK?

---

Actually it's a bug.

The creator of JavaScript said so.

Changed 3 weeks ago by brendan

You know, this all came about because of rushing in early May 1995, which led to a leak of type tag representation shared by null and object types. But null means "no object", so it didn't raise hackles until it was too late to fix in Netscape 2, and after that we were loath to "fix" it and "break the web".
That argument only applies more in degree of web population now.
We have other fish to fry. This one was has been swallowed already. Let's not change typeof null for ES4 and work on more vital issues.

# 250 ((Resolved) "typeof null") – ECMAScript Bugs – Trac

---

Q3. idiom

which can determines if x is in array?

const array = [1, 2, 3];

if (array.indexOf(x)) // a)
if (!array.indexOf(x)) // b)
if (+array.indexOf(x)) // c)
if (~array.indexOf(x)) // d)

---

A3. idiom

The answer is d.

const array = [1, 2, 3];

array.indexOf(1); // 0
array.indexOf(100); // -1

~0 // -1
~(-1) // 0

---

Bitwise Operators

• The binary expression of -1 is 11111111111111111111111111111111.
• ~ is a bitwise NOT operator.
• ~(-1) is 00000000000000000000000000000000 in binary, so it's 0.
• 0 is falsy value in JS.

---

Better way

• I think array.indexOf(x) >= 0 makes better sense...
• array.includes(x) is available for new JavaScript.

---

Q4. this

Select all choices that returns 1.

const obj = {
  prop: 1,
  func: function() {
    return this.prop;
  },
  func2: () => {
    return this.prop;
  }
};

const obj2 = {
  prop: 2,
  func: obj.func
};

obj.func();                // a)
obj.func2();               // b)
obj2.func();               // c)
const fn = obj.func; fn(); // d)

---

A4. this

The correct choices are... [ a ].

const obj = {
  prop: 1,
  func: function() {
    return this.prop;
  },
  func2: () => { // statically bound
    return this.prop;
  }
};

const obj2 = {
  prop: 2,
  func: obj.func
};

obj.func();                // a) 1
obj.func2();               // b) undefined
obj2.func();               // c) 2
const fn = obj.func; fn(); // d) undefined

---

use case

<a onClick= obj.func />          // ng
<a onClick= () => obj.func() />  // ok
<a onClick=obj.func.bind(obj) /> // ok

---

use case

const obj = {
  addition: 5,
  array: [1, 2, 3],
  func: function() {
    return this.array.map(function(n) {
      return n + this.addition; // n + undefined ...
    });
  },
  func2: function() {
    return this.array.map((n) => {
      return n + this.addition; // n + 5 !!!
    });
  }
};

---

Protip.

this is the last boss of JavaScript.

---

Results

Who could answer all the questions correctly?

---

We are hiring!!!