++[[]][+[]]+[+[]] = "10"

บันทึกความเข้าใจ Why does ++[[]][+[]]+[+[]] return the string “10”?

แยกมันออกก่อน

++[[]][+[]]
+
[+[]]

In JavaScript, เป็น true +[] === 0

+ จะแปลงบางอย่างเป็น number (เช่น 1+"2")

ในกรณี +[] จะเป็น +"" or 0
ได้เป็น

++[[]][0]
+
[0]

[[]][0] หมายถึง first element จาก [[]]

[[]][0] return ภายใน array ([])

ลอง console.log([[]][0]); ดู

ได้เป็น

(+[] + 1) // +A + 1  +A = number
+
[0]

ก่อนที่ +[] จะบังคับ array ให้เป็นเลข 0 ได้จำเป็นต้องบังคับให้ array เป็น string ก่อน ก็คือ ""

• (+[] + 1) === (+"" + 1)
• (+"" + 1) === (0 + 1)
• (0 + 1) === 1

1
+
[0]

JavaScript: [0] == "0"

0 == "0" is true

"1" + "0" === "10" // Yay!

อธิบายเพิ่มเติม Why +[] or +“” equal to 0

เครื่องหมาย + (Unary + Operator) นั้นทำให้เราสามารถแปลงข้อมูลจากชนิดข้อมูลอื่นให้เป็นตัวเลขได้ เช่นเดียวกับที่ Number() ทำ

console.log(+[]);  // -> 0
console.log(typeof +[]); // -> number

เพราะว่าการใช้ + นำหน้าเป็นการเรียก .valueOf().toString() ดังนั้น

+[] is equal to +[].valueOf().toString()

มาดูอีกตัวอย่างที่น่าสนใจ

(![] + [])[+[]] +
  (![] + [])[+!+[]] +
  ([![]] + [][[]])[+!+[] + [+[]]] +
  (![] + [])[!+[] + !+[]];
// -> 'fail'

แก้บรรทัดแรกก่อน

(![] + [])[0] // +[] = +"" = 0
(false)[0] // -> ![]=false
"f"

บรรทัดที่สอง

(![] + [])[+!+[]] 
(false+"")[+true] //->  !+[]=true
(false+"")[1] // -> +true=1
"a"

บรรทัดที่สาม

([![]] + [][[]])[+!+[] + [+[]]] 
([false]+[][[]])[1+[0]]
"falseundefined"[10]
i

บรรทัดที่สี่

(![] + [])[!+[] + !+[]];
(false+"")[2]
"false"[2]
l

ผลลัพท์สุดท้ายคือ fail

expression simplifies

+[] 
+[].valueOf().toString()
+"" // ->  empty string is  Falsy Values
0  // -> 0 is false  (1 is true)

![]  ->  [] is Truthy 
!true
false

+!+[]
+true
1

🦠Reference🦠:

• Why +[] or +“” equal to 0 in javascript [duplicate]
• unary-plus-operator