Upgrade to Pro — share decks privately, control downloads, hide ads and more …

var, let, const and immutable of JavaScript

012765e2e29cd000be9e0f32236c46d2?s=47 Araya
August 20, 2018
Programming
0
160

var, let, const and immutable of JavaScript

JavaScriptのvar, let, constによる変数宣言、immutableについて、社内LTで話しました。

012765e2e29cd000be9e0f32236c46d2?s=128

Araya

August 20, 2018
Tweet

More Decks by Araya

See All by Araya
Performance and cache strategy at NIKKEI
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
0
1.1k
JavaScript Promise API in 2019
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
1
620
gotandajs-11-nodejs-recursive-readdir
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
2
260
What about Temporal in JavaScript
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
5
1k
2018-07-31-angular-tips
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
1
89

Other Decks in Programming

See All in Programming
パターンマッチングを学んで新しいJavaの世界へ！Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
Fb025419ed38f98df595eb2eafc859f4?s=48 ihcomega56
3
410
git on intellij
1a51f443c6d75a0576428792b0da05f2?s=48 hiroto_kitamura
0
170
リアルタイムボイスチェンジャーMMVCとVITSの紹介
A5f618dd37c9f9866423579247cb3fb0?s=48 stealthinu
0
130
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
120
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
2f42f32689c8244280dd01d864f92079?s=48 dwchiang
0
150
"What's new in Swift"の要約 / swift_5_7_summary
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
1
340
Node.jsデザインパターンを読んで
3d06fa4b3230d37a8d940405cc4abcc6?s=48 mmmommm
0
2.8k
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
Fc03caed2b0f2a29992487fcf50dfd81?s=48 datarian
0
240
Swift Regex
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
190
[DevTrends - Jun/2022] Arquitetura baseada em eventos
36489105af6ebd101e8f250e537e70d3?s=48 camilacampos
0
150
What's new in Android development tools まとめ
46b3bc302e3a40f8df60cfb60d59c313?s=48 mkeeda
0
380
engineer
E6706306bf41c5a5675e7296ecdb4103?s=48 spacemarket
0
3.3k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.5k
A Modern Web Designer's Workflow
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
689
180k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k

Transcript

  1. ઌͣconstΑΓ࢝ΊΑ @arayaryoma 2018/08/20 - ϔϚλΠτࣾ಺LT

  2. ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏΍ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ ม਺એݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let΋࢖͑Δʁ var͸ม਺ͩ͠let͸ఆ਺ͬΆ͍…ʁ Μɺconst΋͋Δʁ ΋͔ͯ͠͠ࢲͷJavaScriptɺ3೥஗ΕͯΔʁ

  3. ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏΍ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ ม਺એݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let΋࢖͑Δʁ var͸ม਺ͩ͠let͸ఆ਺ͬΆ͍…ʁ Μɺconst΋͋Δʁ ΋͔ͯ͠͠ࢲͷJavaScriptɺ3೥஗ΕͯΔʁ ࠓ೔͸ͦΜͳ͋ͳͨͷͨΊʹ
 varͱletͱconstͷҧ͍Λ ղઆ͠·͢

  4. ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏΍ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ ม਺એݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let΋࢖͑Δʁ var͸ม਺ͩ͠let͸ఆ਺ͬΆ͍…ʁ Μɺconst΋͋Δʁ ΋͔ͯ͠͠ࢲͷJavaScriptɺ3೥஗ΕͯΔʁ ͜ͷεϥΠυΛݟऴΘΔࠒ ͋ͳͨ͸varΛॻ͔ͳ͍਎ମʹ ͳ͍ͬͯΔͰ͠ΐ͏

  5. ࿩͢͜ͱͱ݁࿦ JSͷvar, let, constͷҧ͍ͱ࢖͍ॴ ϞμϯͳJSͷॻ͖ํ(ྲྀߦ)ʹ͍ͭͯগ͚ͩ͠ var͸׬શʹෆཁ ·ͣ͸constͰॻ͘

  6. redeclaration(࠶એݴ)

  7. var let const

  8. ಈ͘ʁ

  9. ಈ͘(variable shadowing)

  10. const΋ಉ͡ ಈ͕͘Մಡੑ͕Լ͕ΔͷͰආ͚Δ΂͖

  11. scope(ม਺είʔϓ)

  12. varͰએݴͨ͠ม਺ͷείʔϓ͸function಺ (τοϓϨϕϧʹએݴͨ͠৔߹͸άϩʔόϧ)

  13. if(){}ͳͲͷϒϩοΫ಺Ͱએݴͨ͠ม਺Λ ϒϩοΫͷ֎͔ΒࢀরͰ͖Δ

  14. letͰએݴͨ͠ม਺͸είʔϓ͕ϒϩοΫ಺

  15. const΋ಉ͘͡ϒϩοΫείʔϓ

  16. switch-caseͷ᠘

  17. blockʹͯ͠ղܾ

  18. reassign(࠶୅ೖ)

  19. var͸࠶୅ೖՄೳ

  20. let΋࠶୅ೖՄೳ

  21. const͸࠶୅ೖෆՄೳ

  22. ͨͩ͠constͰએݴͯ͠΋immutableͰ͸ͳ͍ͷͰ஫ҙɻ Objectͷproperty΍Arrayͷཁૉ͸͍͘ΒͰ΋ॻ͖׵ΘΔɻ

  23. var let const ࠶એݴ είʔϓ function block block ࠶୅ೖ immutable?


    (primitiveͳσʔλܕҎ֎) NO NO NO

  24. ࣮ફྫͰݟΔ
 ݱ୅෩JavaScript

  25. ࣮ફྫ1 Array [1,2,3,4,5]ͷ֤ཁૉΛ10ഒͯ͠ग़ྗ

  26. Bad. i͕for blockͷ֎ʹ΋ӨڹΛٴ΅͢

  27. iͷείʔϓ͕for block಺ʹͳͬͨɻ
 Ͱ΋΋͏ͪΐͬͱ؆ܿʹॻ͖͍ͨɻ
 arrͷཁૉΛॻ͖׵͑ͯΔͷ΋ා͍ɻ

  28. ࣮૷͸1ߦ
 arrΛมߋ͠ͳ͍ɻGood

  29. ࣮ફྫ2 Array [1,2,3,4,5]ͷ֤ཁૉͷ߹ܭ஋Λग़ྗ

  30. letͱfor loop

  31. for-ofΛ࢖͏

  32. Array.prototype.reduceΛ࢖͏ɻ
 sumΛ࠶୅ೖෆՄʹͰ͖ͯ҆શɻ

  33. ݱ୅෩JS ม਺είʔϓ͸Ͱ͖Δ͚ͩখ͘͞ɺͰ͖Δ͚ͩ࠶୅ೖෆՄʹ͢Δ Ұ౓࡞ͬͨobject͸มԽͤ͞ͳ͍ͷ͕ਖ਼ٛ ෭࡞༻ͷൃੜΛආ͚Δ Immutable.jsΛ࢖ͬͯcollection͸͢΂ͯimmutableͰ͋Δ͜ͱΛલఏʹ͢Δ ྲྀ೿ ArrayͳͲʹศརͳmethod΋࢓༷Ͱ௥Ճ͞Ε͍ͯΔ(https://github.com/tc39/ proposals)

  34. ࣮ફྫ3
 ඇಉظ+varͷා͞Λମݧ(ϥΠϒίʔσΟϯά)

  35. Array΋Object΋immutableʹ͍ͨ͠ਓ΁

  36. Object.freeze()ͰखܰʹObject΍ArrayΛimmutableʹ

  37. Immutable.jsͷclassΛ࢖͏

  38. Immutable.jsͬͯʁ https://facebook.github.io/immutable-js/ WebϑϩϯτΤϯυͰ͸͓ೃછΈͷFacebook੡ JavaScriptͰimmutableͳܕΛѻ͑ΔΑ͏ʹ͢ΔͨΊͷϥΠϒϥϦ Object΍ArrayͳͲɺJavaScriptͷbuilt-inͳσʔλܕΛimmutableʹ ͢ΔΞϓϩʔνͰ͸ͳ͘ɺؔ਺ܕݴޠ͔Β༌ೖͨ͠ಠࣗͷσʔλܕ Λѻ͏ List, Stack, Map,

    OrderedMap, Set, OrderedSet,

  39. ·ͱΊ var͸΋͏͍Βͳ͍ ·ͣconstͰॻ͍ͯɺͲ͏ͯ͠΋ඞཁͳΒletΛ࢖͏ ෭࡞༻Λආ͚Δ͜ͱ͕ਖ਼ٛͩͱ͍͏࣌୅ ؔ਺ܕݴޠͷύϥμΠϜ͕JSͷੈքʹ༌ೖ͞ΕͯΔ TypeScript + Rx.js + Immutable.jsͱ͔΍Γ͸͡ΊΔͱ׬શʹผݴޠ