JS Operators

1. Arithmetic Operators (算數運算子)

1.1. Overview

1.2. Numeric Strings 的運算

• 如果對字串型態進行運算，JavaScript 會嘗試轉型成數字去做算術運算
• 但如果是加號 (+)，會被當作是 concat 運算子

Example:

//Numeric Strings
//JavaScript will try to convert strings to numbers in all numeric operations:
console.log( "100" * "10" ); //1000
console.log( "100" / "10" ); //10
console.log( "100" - "10" ); //90
console.log( "100" + "10" ); //"10010" (here "+" is used to concatenate strings, instead of add numbers)

console.log( "Hello" - "Dolly" );   // NaN

1.3. Confused case for ++/--

cnt++: 執行該行後才進行++

++cnt: 執行該行前先進行++

Example:

var cnt = 0;
function inc(){
    return cnt++;
}

for(i=0 ; i< 5 ; i++){
    console.log(inc());
}

result:

0
1
2
3
4

2. Assignment Operators (賦值運算子)

Assign values to JavaScript variables. (和一般語言用法一樣)

The **= operator is an experimental part of the ECMAScript 2016 proposal (ES7). It is not stable across browsers. Do not use it.

3. Comparison Operators (布林運算子)

3.1. Oerview

• 不同型態的資料進行比較，可能產生不可預期的結果
• 為了確保比較的結果如預期，比較前最好先轉型成適當的型態

Best Practice: Use === Comparison

• The == comparison operator always converts (to matching types) before comparison.
• The === operator forces comparison of values and type.

3.2. Comparing Different Types

當比較字串和數字：

• JavaScript 會將 string 轉型成數字
• 空字串會轉成 0
• 非數字的字串會轉成 NaN (which is always false, even NaN===NaN)
• E.g.,
  • "12" --> 12
  • "" --> 0
  • "John" --> NaN

console.log( 2 < 12 );      // true
console.log( 2 < "12" );    // true  (2 < 12)
console.log( 2 < "" );      // false (2 < 0)
console.log( 2 < "John" );  // false (2 < NaN)
console.log( 2 > "John" );  // false (2 > NaN)
console.log( 2 == "John" ); // false (2 == NaN)

console.log( Boolean( false == 0 ) );   // true
console.log( Boolean( false === 0 ) );  // false
console.log( Boolean( true == 1 ) );    // true
console.log( Boolean( true === 1 ) );   // false
console.log( Boolean( true == 2) );     // false

console.log( Boolean( null == 0) );            // false
console.log( Boolean( undefined == 0 ) );      // false
console.log( Boolean( null == undefined ) );   // true
console.log( Boolean( null === undefined ) );  // false

console.log( Boolean( 'John' > null ) );       // false
console.log( Boolean( 1 > null ) );            // true
console.log( Boolean( 0 > null ) );            // false
console.log( Boolean( 1 > NaN ) );             // false

3.3. Comparing Strings

When comparing two strings, "2" will be greater than "12", because (alphabetically) 1 is less than 2.

console.log( "2" < "12" );    // false ("2" < "1")
console.log( "2" > "12" );    // true  ("2" > "1")
console.log( "2" == "12" );    // false ("2" == "12")

4. Ternary Operator (三元運算子)

Example:

var x = ( 10 > 9 ) ? 'Good' : 'WTF';
console.log(x);        // 'Good'

5. Logical Operators (邏輯運算子)

5.1. Overview

5.2. Comparison Operators VS. Logical Operators

• Comparison Operators 和 Logical Operators 常搭配使用，但其實有別

• 如果 condition 都是比較性的邏輯判斷(==/~=/>/<)，就和一般認知相同，得到的結果是 true 或 false

• 如果 condition 是邏輯運算子，得到的結果是 Value，原則如下：(原則和 Lua 一樣)

• 全 and: 如果全部都是 true 的 condition，則回傳 最後一個 condition 的 Value
• 全 and: 如果其中摻有 false 的 condition，則回傳 第一個 false 的 condition 的 Value
• 全 or: 如果全部都是 false 的 condition，則回傳 最後一個 condition 的 Value
• 全 or: 如果其中摻有 true 的 condition，則回傳 第一個 true 的 condition 的 Value
• 混 and + or: and 執行權重大於 or，先把 and 的部分都優先處理完，剩下的就是全 or

• condition 的 Value 該被歸類為 true 或 false，依據 Booelan() 的結果

  • In JS, 0, false, NaN, undefined, null, '' 都是 false

• Example:

false && 1 && 'hello'        // false
1 && false && 2 && 'hello'   // false
1 && 2 && 'hello'            // "hello"
1 && 2 && 'hello' && 0       // 0

false || NaN || '' || undefined || null || 0  // 0
false || 1 || 2 || 'hello'                    // 1

false || 1 || 'hello' && undefined || 2 && 0  // 1
// Evaluation Process:
// step 1: false || 1 || 'hello' && undefined || 2 && 0
// step 2: false || 1 || undefined || 0
// step 3: 1

6. Concatenation Operators (串接運算子)

6.1. Overview

• Adding Strings using + and +=

var name = "John" + " " + "Smith";
var text = "How are you?";
text += "Fine, thanks.";

6.2. Concating Numbers and Strings

• 當數字和 string 混在一起進行運算時，從左到右依序運算，只要遇到一個字串，後續的數字都會被當字串處理

EX:

var x = 5 + 2 + 3; //10 (numeric)
var y = 5 + 2 + "3"; //"73"(string data type)
var z = "5" + 2 + 3; //"523"
var x = 16 + "Volvo"; //(equal to) var x = "16" + "Volvo";
var x = 16 + 4 + "Volvo"; // "20Volvo"
var x = "Volvo" + 16 + 4; // Volvo164
var x = "Volvo" + (16 + 4); // Volvo20

7. Type Operators (型別運算子)

7.1. Overview

7.2. Example for typeof:

typeof "John"                 // "string"
typeof 3.14                   // "number"
typeof false                  // "boolean"
typeof {name:'John', age:34}  // "object"
typeof [1,2,3,4]              // "object" (not "array", The typeof operator returns "object" for arrays because in JavaScript arrays are objects.)
typeof NaN                    // "number"
typeof new Date()             // "object"
typeof new String()           // "object"
typeof new Number()           // "object"
typeof new Boolean()          // "object"
typeof function () {}         // "function"
typeof myCar                  // "undefined" *
typeof null                   // "object"

7.3. Example for instanceof:

NOTE: 原生型別(Primitive)的 string, number 不適合用instanceof來判斷

var s = 'abc';
console.log( typeof s );              // "string"
console.log( s instanceof String );   // false

var s2 = new String('abc');
console.log( typeof s2 );             // "object"
console.log( s2 instanceof String );  // true

var x = 1;
console.log( typeof x );              // "number"
console.log( x instanceof Number );      // false
console.log( x instanceof Array );    // false

var ary = ['Apple', 'Banana', 'Cake'];
console.log( ary instanceof Array );  // true

8. Bitwise Operators (位元運算子)

• 位元運算時，數字會被轉成 32 bit 數字，位元運算完再轉回普通的 JavaScript Number

9. Other Operators

9.1. new

Create objects

9.2. delete

Ref: delete operator - JavaScript | MDN

1. delete operator 可以用來移除變數，有回傳值，回傳是否移除成功
2. delete 根據移除變數對象的型別不同，有不同結果：
   • number: N
   • string: Y (會移除掉整個宣告，變成一個為定義的變數)
   • array: N
   • an element from an array: Y (移除的元素 index 不會被填補，會變成 empty，也就是 undefined)
   • object: N
   • a property from an object: Y (無論該 property 是否存在，都會回傳 true)
   • function: N (無論是 declaration 或 expression)

// number (false)
var x = 10;
console.log( x ); //10
var ret = delete x;
console.log( x ); //10
console.log(ret); //false

// string
var name = 'John';
console.log(name);    //"John"
var ret = delete name;
//console.log(name);  //X(Uncaught ReferenceError: name is not defined)
console.log(ret);     //true

// array (false)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);  // ["Banana", "Orange", "Apple", "Mango"]
var ret = delete fruits;
console.log(fruits);  //  ["Banana", "Orange", "Apple", "Mango"]
console.log(ret);       //false

// array element
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);  // ["Banana", "Orange", "Apple", "Mango"]
var ret = delete fruits[2];
console.log(fruits);  // ["Banana", "Orange", empty, "Mango"]
console.log(fruits[2]); // undefined
console.log(ret);       //true

// object (false)
var person = {name: 'John', age:18};
console.log(person);                      // {name: "John", age: 18}
var ret = delete person;
console.log(person);                      // {name: "John", age: 18}
console.log(ret);                         // false

// object existent property
var person = {name: 'John', age:18};
console.log(person);                      // {name: "John", age: 18}
var ret = delete person.name;
console.log(person);                      // {age: 18}
console.log(ret);                         // true

// object un-existent property
var person = {name: 'John', age:18};
console.log(person);                      // {name: "John", age: 18}
var ret = delete person.xxx;
console.log(person);                      // {name: "John", age: 18}
console.log(ret);                         // true

// function with declaration
function myFuncx(p1, p2) {};
console.log(myFuncx);                      // ƒ myFuncx(p1, p2) {}
var ret = delete myFuncx;
console.log(myFuncx);                      // ƒ myFuncx(p1, p2) {}
console.log(ret);                         //  false

// function with expression
var myFuncx = function(p1, p2) {};
console.log(myFuncx);                      // ƒ (p1, p2) {}
var ret = delete myFuncx;
console.log(myFuncx);                      // ƒ (p1, p2) {}
console.log(ret);                         //  false

10. Operator Precedence (運算子的優先次序)

• E.g. 按照數學慣例，先乘除後加減

var x = 100 + 50 * 3;    // 250
var x = (100 + 50) * 3;  // 450

• JavaScript Operator Precedence Values (JavaScript 裡所有運算子的優先值高低和舉例)
  • E.g., 最高為 ( )，優先值為 19; * / 是 14，+ - 是 13
  • 完整表參考