Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Javascript Best Practices
Search
Jonathan Alvarez
March 19, 2015
Technology
3
360
Javascript Best Practices
Talk about some Javascript features that should be used with caution.
Jonathan Alvarez
March 19, 2015
Tweet
Share
Other Decks in Technology
See All in Technology
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
120
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
160
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
8.1k
OPENLOGI Company Profile
hr01
0
67k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
200
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
160
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
290
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.3k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
260
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
3.9k
本が全く読めなかった過去の自分へ
genshun9
0
730
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
390
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Adaptive Systems
keathley
43
2.6k
Fireside Chat
paigeccino
37
3.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Ace a Technical Interview
jacobian
277
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Unsuck your backbone
ammeep
671
58k
Transcript
BUENAS PRÁCTICAS! EN JAVASCRIPT @jonalvarezz
'5' - 3
'5' - 3 2
'5' + + '5'
'5' + + '5' '55'
'foo' + + 'foo'
'foo' + + 'foo' 'fooNaN'
'5' + - + - - + - - +
+ - + - + - - - '3'
'5' + - + - - + - - +
+ - + - + - - - '3' '53'
QUE GONORREA OME
BMBOHVBHF XJUIFOPSNPVT expresiveQPXFS Douglas Crockford
Semicolon Except: for, function, if, switch, try and while
return! {! status: true! };
return {! status: true! };
None
Floating Points
0.1 + 0.2
0.1 + 0.2 0.30000000000000004 IEEE Standard for Binary Floating-Point Arithmetic
0.1 + 0.2 0.30000000000000004 IEEE Standard for Binary Floating-Point Arithmetic
Use integer arithmetic in floating
(0.1 + 0.2)*100 30/100 0.3
parseInt()
parseInt("43");! // 43! ! parseInt("43 km");! // 43!
parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
parseInt("09");! // 0! ! parseInt("09", 10);! // 9!
parseInt("09");! // 0! ! parseInt("09", 10);! // 9! "-8":464&5)&3"%*9 1"3".&5&3
Equality Operators == and !=
'' == '0'! // false! ! 0 == '0'! //
true! !
false == 'false'! // false! ! false == '0'! //
true! !
'\t\r\n ' == 0! // true! !
'\t\r\n ' == 0! // true! !
None
None
Use! === and !==
NaN Not a Number
+ "0";! // 0! ! ! + "foo";! // NaN
NaN === NaN! // false! ! ! NaN !== NaN!
// true
isNaN("I'm a NaN")! // true
*DPVMECFBCFUUFS QSPHSBNNFSCZVTJOH POMZUIFgood partsBOE BWPJEJOHUIFbad parts Douglas Crockford
Global variables The worst JavaScript's feature
var foo = "value";! ! var moo = function() {!
! foo = "Change global";! } // Place a var statement! // outside of any function
window.foo = "value"; // Defining direct to global object
foo = "value"; // Implied global
"-8":464& VARIABLE STATEMENT var foo = "value";
var moo = function() {! ! ! var foo =
"yay!";! ! // ....! ! } // The right way
var MYAPP = {};! ! var MYAPP.author = {! "first-name"
: "Jonathan",! "username" : "@jonalvarezz"! };! ! var MYAPP.speakAt = {! "name" : "PereiraJS",! "location" : "Pereira"! };! // Need globals?
#&55&3
Functions
function moo() {! ! } // function statement var moo
= function() {! ! } // function expression
moo(); // Prints "foo"! ! function moo() {! ! console.log("foo");!
} // function statement! // defined at run-time
moo(); // Error! ! var moo = function() {! !
console.log("foo");! } // function expression! // defined at parse-time
if (true) { ! ! function foo() {! ! !
return 1;! }! }! else { ! ! function foo() {! ! ! return 2;! }! }! ! foo(); ! // function statement
if (true) { ! ! function foo() {! ! !
return 1;! }! }! else { ! ! function foo() {! ! ! return 2;! }! }! ! foo(); // 2 ! // function statement
var foo;! ! if (true) { ! ! foo =
function() {! ! ! return 1;! }! }! else { ! ! foo = function() {! ! ! return 2;! }! }! ! foo(); // 1 ! // function expression
var myMath = {! ! add: function( a, b )
{! ! ! return a + b;! ! }! };! ! myMath.add( 2, 4 ); // 6 ! // function expression
'*345$-"44'6/$5*0/4 A function is an "Object"
'*345$-"44'6/$5*0/4 A function is an "Object"
var moo = function() {! ! // yay!! } //
function expression
(function() {! ! ! ! 'use strict';! ! ! var
a, b, c;! ! ! // ...! ! })(); // function statement! // Anonymous function! // Self invoked function
Scope
! var foo = function() {! ! var a =
3, b = 5;! ! ! var bar = function() {! ! ! var b = 7, c = 11;! ! ! ! a += b + c;! ! };! ! ! bar();! ! ! return a;! }
! var foo = function() {! ! var a =
3, b = 5;! ! ! var bar = function() {! ! ! var b = 7, c = 11;! ! ! ! a += b + c;! ! };! ! ! bar();! ! ! return a;! } // 21
! var foo = function() {! ! var a =
3, b = 5;! ! ! var bar = function() {! ! ! var b = 7, c = 11;! ! ! ! a += b + c;! ! };! ! ! bar();! ! ! return a;! } // 21 Function Scope!
Closures
* CODES *
Modules
"NPEVMFJTBGVODUJPO PSPCKFDUUIBUQSFTFOUT BOEJOUFSGBDFCVUUIBU hides its state and implementation
var seria_maker = function() {! ! var prefix = '';!
! var seq = 0;! ! return {! ! ! set_prefix: function(p) {! ! ! ! prefix = String(p);! ! ! },! ! ! set_seq: function(s) {! ! ! ! seq = s;! ! ! },! ! ! gensym: function() {! ! ! ! var result = prefix + seq;! ! ! ! seq += 1;! ! ! ! return result;! ! ! }! ! };! }; // Object that generates uniques strings
var sm = seria_maker();! ! sm.set_prefix('Q');! ! sm.set_seq(1000);! ! var
unique = sm.gensym();! ! // Q1000 // Object that generates uniques strings
jQuery
jQuery
None
%PZPV3&"--: OFFEK2VFSZ
:PVNJHIUOPU OFFEK2VFSZ
None
None
5IBOLZPV @jonalvarezz