$30 off During Our Annual Pro Sale. View Details »

インフラエンジニアが教えるJSの型

tanishi
February 17, 2018

 インフラエンジニアが教えるJSの型

#kosen12s の資料

tanishi

February 17, 2018
Tweet

More Decks by tanishi

Other Decks in Programming

Transcript

  1. ΠϯϑϥΤϯδχΞ͕
    ڭ͑ΔJSͷܕ
    ͨʹ͠@tanishi345

    View Slide

  2. ॳΊ·ͯ͠
    • ͨʹ͠(@tanishi345)
    • (ʹΘ͔)ΠϯϑϥΤϯδχΞ

    View Slide

  3. ͳΜͰΠϯϑϥ΍ͬͯΔͷʁ

    View Slide

  4. ࠓ೔͸JSͷ࿩Λ͠·͢

    View Slide

  5. ͔Θ͍͍Ͱ͢ΑͶ

    View Slide

  6. View Slide

  7. Ͱ͸ͳͯ͘

    View Slide

  8. View Slide

  9. ͜ͷ୹ظؒͰ
    ͜͜·ͰϑϨʔϜϫʔΫ͕
    ཚཱ͢Δݴޠ
    ·ͬͨ͘খֶੜ(JS)͸
    ࠷ߴͩͥ

    View Slide

  10. ͱ͍͏Θ͚Ͱ

    View Slide

  11. JSͷܕͷ࿩Λ͠·͢

    View Slide

  12. ໰୊Ͱ͢

    View Slide

  13. console.log(‘1’ + 0)

    View Slide

  14. ࣮ࡍʹ΍ͬͯΈͨ

    View Slide

  15. View Slide

  16. ਺ࣈͱจࣈྻΛ଍͢ͱ
    จࣈྻʹͳΔʁ

    View Slide

  17. Reference number
    ECMA-123:2009
    © Ecma International 2009
    ECMA-262
    8th Edition / June 2017
    ECMAScript® 2017
    Language Specification
    IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTTUBOEBSET&DNBIUN

    View Slide

  18. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation

    View Slide

  19. ͳΜ͔೉ͦ͠͏…

    View Slide

  20. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation

    View Slide

  21. ग़ͯ͘Δؔ਺͸5ͭ
    • GetValue
    • ToPrimitive
    • Type
    • ToString
    • ToNumber

    View Slide

  22. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation

    View Slide

  23. false.
    The following abstract operations are used in this speci ication to operate on references:
    1. ReturnIfAbrupt(V).
    2. If Type(V) is not Reference, return V.
    3. Let base be GetBase(V).
    4. If IsUnresolvableReference(V) is true, throw a ReferenceError exception.
    5. If IsPropertyReference(V) is true, then
    a. If HasPrimitiveBase(V) is true, then
    i. Assert: In this case, base will never be unde ined or null.
    ii. Set base to ! ToObject(base).
    b. Return ? base.[[Get]](GetReferencedName(V), GetThisValue(V)).
    6. Else base must be an Environment Record,
    a. Return ? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V)) (see 8.1.1).
    NOTE The object that may be created in step 5.a.ii is not accessible outside of the above abstract
    operation and the ordinary object [[Get]] internal method. An implementation might
    6.2.4.1 GetValue ( V )

    View Slide

  24. ઌʹType͕ग़͖ͯ·ͨ͠

    View Slide

  25. ECMAScriptͷܕ
    • The Undeined Type
    • The Null Type
    • The Boolean Type
    • The String Type
    • The Symbol Type
    • The Number Type
    • The Object Type

    View Slide

  26. false.
    The following abstract operations are used in this speci ication to operate on references:
    1. ReturnIfAbrupt(V).
    2. If Type(V) is not Reference, return V.
    3. Let base be GetBase(V).
    4. If IsUnresolvableReference(V) is true, throw a ReferenceError exception.
    5. If IsPropertyReference(V) is true, then
    a. If HasPrimitiveBase(V) is true, then
    i. Assert: In this case, base will never be unde ined or null.
    ii. Set base to ! ToObject(base).
    b. Return ? base.[[Get]](GetReferencedName(V), GetThisValue(V)).
    6. Else base must be an Environment Record,
    a. Return ? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V)) (see 8.1.1).
    NOTE The object that may be created in step 5.a.ii is not accessible outside of the above abstract
    operation and the ordinary object [[Get]] internal method. An implementation might
    6.2.4.1 GetValue ( V )

    View Slide

  27. ཁ͸஋Λฦؔ͢਺Ͱ͢

    View Slide

  28. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation

    View Slide

  29. other speci ication types are used with these operations.
    The abstract operation ToPrimitive takes an input argument and an optional argument PreferredType. The
    abstract operation ToPrimitive converts its input argument to a non-Object type. If an object is capable of
    converting to more than one primitive type, it may use the optional hint PreferredType to favour that type.
    Conversion occurs according to the following algorithm:
    1. Assert: input is an ECMAScript language value.
    2. If Type(input) is Object, then
    a. If PreferredType was not passed, let hint be "default".
    b. Else if PreferredType is hint String, let hint be "string".
    c. Else PreferredType is hint Number, let hint be "number".
    7.1.1 ToPrimitive ( input [ , PreferredType ] )
    d. Let exoticToPrim be ? GetMethod(input, @@toPrimitive).
    e. If exoticToPrim is not unde ined, then
    i. Let result be ? Call(exoticToPrim, input, « hint »).
    ii. If Type(result) is not Object, return result.
    iii. Throw a TypeError exception.
    f. If hint is "default", set hint to "number".
    g. Return ? OrdinaryToPrimitive(input, hint).
    3. Return input.
    NOTE When ToPrimitive is called with no hint, then it generally behaves as if the hint were

    View Slide

  30. Object͡Όͳ͍ͷͰ

    View Slide

  31. NOTE The addition operator either performs string concatenation or numeric addition.
    AdditiveExpression : AdditiveExpression + MultiplicativeExpression
    1. Let lref be the result of evaluating AdditiveExpression.
    2. Let lval be ? GetValue(lref).
    3. Let rref be the result of evaluating MultiplicativeExpression.
    4. Let rval be ? GetValue(rref).
    5. Let lprim be ? ToPrimitive(lval).
    6. Let rprim be ? ToPrimitive(rval).
    7. If Type(lprim) is String or Type(rprim) is String, then
    a. Let lstr be ? ToString(lprim).
    b. Let rstr be ? ToString(rprim).
    c. Return the String that is the result of concatenating lstr and rstr.
    8. Let lnum be ? ToNumber(lprim).
    9. Let rnum be ? ToNumber(rprim).
    10. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.8.5.
    NOTE 1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All standard objects except
    12.8.3 The Addition Operator ( + )
    12.8.3.1 Runtime Semantics: Evaluation

    View Slide

  32. ͲͪΒ͔͕StringܕͳΒ

    View Slide

  33. console.log(‘1’ + 0)

    View Slide

  34. console.log(‘1’ + 0)

    View Slide

  35. ToString

    View Slide

  36. ͭ·Γ
    console.log(‘1’ + 0)
    =>
    console.log(‘1’ + ‘0’)
    =>
    ’10’

    View Slide

  37. console.log(+‘1’)

    View Slide

  38. ࣮ࡍʹ΍ͬͯΈͨ

    View Slide

  39. NOTE The unary + operator converts its operand to Number type.
    UnaryExpression : + UnaryExpression
    1. Let expr be the result of evaluating UnaryExpression.
    2. Return ? ToNumber(? GetValue(expr)).
    NOTE The unary - operator converts its operand to Number type and then negates it. Negating
    +0 produces -0, and negating -0 produces +0.
    12.5.6 Unary + Operator
    12.5.6.1 Runtime Semantics: Evaluation
    12.5.7 Unary - Operator
    12.5.7.1 Runtime Semantics: Evaluation

    View Slide

  40. NOTE The unary + operator converts its operand to Number type.
    UnaryExpression : + UnaryExpression
    1. Let expr be the result of evaluating UnaryExpression.
    2. Return ? ToNumber(? GetValue(expr)).
    NOTE The unary - operator converts its operand to Number type and then negates it. Negating
    +0 produces -0, and negating -0 produces +0.
    12.5.6 Unary + Operator
    12.5.6.1 Runtime Semantics: Evaluation
    12.5.7 Unary - Operator
    12.5.7.1 Runtime Semantics: Evaluation

    View Slide

  41. ਺஋ܕʹม׵͠·͢…

    View Slide

  42. The abstract operation ToNumber converts argument to a value of type Number according to Table 10:
    Table 10: ToNumber Conversions
    Argument Type Result
    Unde ined Return NaN.
    Null Return +0.
    Boolean If argument is true, return 1. If argument is false, return +0.
    Number Return argument (no conversion).
    String See grammar and conversion algorithm below.
    Symbol Throw a TypeError exception.
    Object Apply the following steps:
    1. Let primValue be ? ToPrimitive(argument, hint Number).
    2. Return ? ToNumber(primValue).
    7.1.3 ToNumber ( argument )

    View Slide

  43. ͭ·Γ
    console.log(+‘1’)
    =>
    console.log(1)
    =>
    1

    View Slide

  44. Ԡ༻

    View Slide

  45. Ԡ༻
    const n = 12
    console.log(n + ‘’)
    =>
    ’12’
    const s = ’12’
    console.log(+s)
    =>
    12

    View Slide

  46. ECMAScriptΛཧղ͢Δͱ

    View Slide

  47. JavaScriptͷίʔυͰ͢
    [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([!
    []]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]
    +([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+
    [])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+
    []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+
    []+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+
    []+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!!
    []+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+
    []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+
    []+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+
    ([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]
    +[!+[]+!+[]]]+(+(!+[]+!+[]+[+[]]))[(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+
    (!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+
    []]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+
    [])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+
    []+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])
    [+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(+![]+[![]]+
    ([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]
    +!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+
    []]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(!
    []+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[]
    [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+
    []]]](!+[]+!+[]+[+!+[]])+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])
    [+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+([][[]]+[])[+!+[]]+[+!+[]]+[!+[]+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+([]+[])
    [(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])
    [+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+
    []+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+
    []+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])
    [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]
    +[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

    View Slide

  48. ·ͱΊ

    View Slide

  49. ·ͱΊ
    • JavaScriptͷܕ͸ECMAScriptͷ࢓༷ॻΛಡΉ
    • ࢓༷ॻ͸ಠಛ͕ͩঁࢠখֶੜͰ΋ಡΊΔ
    • Ԡ༻͢ΔͱJSFuckͱݴΘΕΔίʔυ͕ॻ͚Δ

    View Slide