Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
var, let, const and immutable of JavaScript
Araya
August 20, 2018
Programming
0
180
var, let, const and immutable of JavaScript
JavaScriptのvar, let, constによる変数宣言、immutableについて、社内LTで話しました。
Araya
August 20, 2018
Tweet
Share
More Decks by Araya
See All by Araya
Performance and cache strategy at NIKKEI
arayaryoma
0
1.5k
JavaScript Promise API in 2019
arayaryoma
1
660
gotandajs-11-nodejs-recursive-readdir
arayaryoma
2
310
What about Temporal in JavaScript
arayaryoma
5
1.2k
2018-07-31-angular-tips
arayaryoma
1
92
Other Decks in Programming
See All in Programming
AWSとCPUのムフフな関係
cmdemura
0
480
tidy_rpart
bk_18
0
610
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
320
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
Why Money Forward contributes to Ruby and RubyKaigi?
luccafort
0
140
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
640
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
640
Qiita Night PHP 2023
fuwasegu
0
11k
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
360
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
An Advanced Introduction to R
nicetak
0
1.9k
Featured
See All Featured
Unsuck your backbone
ammeep
659
56k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
It's Worth the Effort
3n
177
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
How STYLIGHT went responsive
nonsquared
89
4.2k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
The Mythical Team-Month
searls
210
40k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Why Our Code Smells
bkeepers
PRO
326
55k
Design by the Numbers
sachag
271
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
850
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Transcript
ઌͣconstΑΓ࢝ΊΑ @arayaryoma 2018/08/20 - ϔϚλΠτࣾLT
ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ มએݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let͑Δʁ varมͩ͠letఆͬΆ͍…ʁ Μɺconst͋Δʁ ͔ͯ͠͠ࢲͷJavaScriptɺ3ΕͯΔʁ
ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ มએݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let͑Δʁ varมͩ͠letఆͬΆ͍…ʁ Μɺconst͋Δʁ ͔ͯ͠͠ࢲͷJavaScriptɺ3ΕͯΔʁ ࠓͦΜͳ͋ͳͨͷͨΊʹ varͱletͱconstͷҧ͍Λ ղઆ͠·͢
ٱʑʹJavaScriptॻ͚͘ͲES2015ͱ͔ ͍͏ͭͰ͍Ζ͍ΖมΘͬͯΔͬΆ͍ʁ มએݴ࣌ɺvar ͚ͩ͡Όͳͯ͘let͑Δʁ varมͩ͠letఆͬΆ͍…ʁ Μɺconst͋Δʁ ͔ͯ͠͠ࢲͷJavaScriptɺ3ΕͯΔʁ ͜ͷεϥΠυΛݟऴΘΔࠒ ͋ͳͨvarΛॻ͔ͳ͍ମʹ ͳ͍ͬͯΔͰ͠ΐ͏
͢͜ͱͱ݁ JSͷvar, let, constͷҧ͍ͱ͍ॴ ϞμϯͳJSͷॻ͖ํ(ྲྀߦ)ʹ͍ͭͯগ͚ͩ͠ varશʹෆཁ ·ͣconstͰॻ͘
redeclaration(࠶એݴ)
var let const
ಈ͘ʁ
ಈ͘(variable shadowing)
constಉ͡ ಈ͕͘Մಡੑ͕Լ͕ΔͷͰආ͚Δ͖
scope(มείʔϓ)
varͰએݴͨ͠มͷείʔϓfunction (τοϓϨϕϧʹએݴͨ͠߹άϩʔόϧ)
if(){}ͳͲͷϒϩοΫͰએݴͨ͠มΛ ϒϩοΫͷ֎͔ΒࢀরͰ͖Δ
letͰએݴͨ͠มείʔϓ͕ϒϩοΫ
constಉ͘͡ϒϩοΫείʔϓ
switch-caseͷ᠘
blockʹͯ͠ղܾ
reassign(࠶ೖ)
var࠶ೖՄೳ
let࠶ೖՄೳ
const࠶ೖෆՄೳ
ͨͩ͠constͰએݴͯ͠immutableͰͳ͍ͷͰҙɻ ObjectͷpropertyArrayͷཁૉ͍͘ΒͰॻ͖ΘΔɻ
var let const ࠶એݴ είʔϓ function block block ࠶ೖ immutable?
(primitiveͳσʔλܕҎ֎) NO NO NO
࣮ફྫͰݟΔ ݱ෩JavaScript
࣮ફྫ1 Array [1,2,3,4,5]ͷ֤ཁૉΛ10ഒͯ͠ग़ྗ
Bad. i͕for blockͷ֎ʹӨڹΛٴ΅͢
iͷείʔϓ͕for blockʹͳͬͨɻ Ͱ͏ͪΐͬͱ؆ܿʹॻ͖͍ͨɻ arrͷཁૉΛॻ͖͑ͯΔͷා͍ɻ
࣮1ߦ arrΛมߋ͠ͳ͍ɻGood
࣮ફྫ2 Array [1,2,3,4,5]ͷ֤ཁૉͷ߹ܭΛग़ྗ
letͱfor loop
for-ofΛ͏
Array.prototype.reduceΛ͏ɻ sumΛ࠶ೖෆՄʹͰ͖ͯ҆શɻ
ݱ෩JS มείʔϓͰ͖Δ͚ͩখ͘͞ɺͰ͖Δ͚ͩ࠶ೖෆՄʹ͢Δ Ұ࡞ͬͨobjectมԽͤ͞ͳ͍ͷ͕ਖ਼ٛ ෭࡞༻ͷൃੜΛආ͚Δ Immutable.jsΛͬͯcollectionͯ͢immutableͰ͋Δ͜ͱΛલఏʹ͢Δ ྲྀ ArrayͳͲʹศརͳmethod༷ͰՃ͞Ε͍ͯΔ(https://github.com/tc39/ proposals)
࣮ફྫ3 ඇಉظ+varͷා͞Λମݧ(ϥΠϒίʔσΟϯά)
ArrayObjectimmutableʹ͍ͨ͠ਓ
Object.freeze()ͰखܰʹObjectArrayΛimmutableʹ
Immutable.jsͷclassΛ͏
Immutable.jsͬͯʁ https://facebook.github.io/immutable-js/ WebϑϩϯτΤϯυͰ͓ೃછΈͷFacebook JavaScriptͰimmutableͳܕΛѻ͑ΔΑ͏ʹ͢ΔͨΊͷϥΠϒϥϦ ObjectArrayͳͲɺJavaScriptͷbuilt-inͳσʔλܕΛimmutableʹ ͢ΔΞϓϩʔνͰͳ͘ɺؔܕݴޠ͔Β༌ೖͨ͠ಠࣗͷσʔλܕ Λѻ͏ List, Stack, Map,
OrderedMap, Set, OrderedSet,
·ͱΊ var͏͍Βͳ͍ ·ͣconstͰॻ͍ͯɺͲ͏ͯ͠ඞཁͳΒletΛ͏ ෭࡞༻Λආ͚Δ͜ͱ͕ਖ਼ٛͩͱ͍͏࣌ ؔܕݴޠͷύϥμΠϜ͕JSͷੈքʹ༌ೖ͞ΕͯΔ TypeScript + Rx.js + Immutable.jsͱ͔Γ͡ΊΔͱશʹผݴޠ