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
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
580
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
280
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
520
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.8k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
960
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
210
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.2k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Automating Front-end Workflow
addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Adopting Sorbet at Scale
ufuk
77
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Writing Fast Ruby
sferik
628
62k
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