SlideShare a Scribd company logo
1 of 35
Effective JavaScript
          Justin Tulloss
     Sr. Software Engineer
         April 24, 2010
Overview

• JavaScript language properties
• Effective closures
• Effective objects
• Interacting with the DOM
• ECMAScript 5
• v8 optimizations
Prototypes
Assigning to a Prototype
Altering a Prototype
Altering a Prototype Faster
Deriving an Object from Another
Object
Deriving an Object with
Object.create
Scope Resolution
What Is in the Resolution Chain?
Functions dictate scope (with a few exceptions)



• Local variables
• Arguments
• Enclosing function scopes
• With Statement
• Global
Each Step Is Like a Property Access




locals.arguments.scope1Locals.scope1Args.globals
Example
Don’t Use with
Effective Closures
The Power of Closures
With great power comes great responsibility



• Reduce typing
• Make code cleaner
• Provide some privacy
• Sometimes they make things fast
• Magic (AKA functional)
Building Objects with Closures
Same Thing Works for Constructors
Avoiding bind in Asynchronous
Operations
Avoiding Unnecessary Methods
Memoization
Effective Objects
Using Objects Effectively

• First, do what makes sense—don’t over-optimize
• Every property access is slow
• Breadth not depth
• Use object literals
• Make shortcuts
• Inspectable
Use Object Literals


 Bad




 Good
Interacting with
    the DOM
Don’t
DOM Tips

• Watch out for closures referencing nodes
  • These can leak
• Reference nodes anyway
  • Using a reference is much faster than looking up a node
• innerHTML is generally faster than the DOM API
ECMAScript 5
Exciting New Features

• Function.prototype.bind
• Object.create
• Getters/setters
• String.prototype.trim
Getters and Setters
v8 Optimizations
v8 Optimizations

• Don’t use delete
• Use object literals
• Avoid altering objects after creating them
• Don’t use eval
If it’s hard in C,
    it’s slow in
Q &A
Effective JavaScript

More Related Content

What's hot

Truly madly deeply parallel ruby applications
Truly madly deeply parallel ruby applicationsTruly madly deeply parallel ruby applications
Truly madly deeply parallel ruby applications
Hari Krishnan‎
 
MySQL-Mixer-Livenation
MySQL-Mixer-LivenationMySQL-Mixer-Livenation
MySQL-Mixer-Livenation
Hari Tatrakal
 

What's hot (10)

Intro to TypeScript, HTML5DevConf Oct 2013
Intro to TypeScript, HTML5DevConf Oct 2013Intro to TypeScript, HTML5DevConf Oct 2013
Intro to TypeScript, HTML5DevConf Oct 2013
 
Php : Why and When!
Php : Why and When!Php : Why and When!
Php : Why and When!
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with Kotlin
 
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
 
Truly madly deeply parallel ruby applications
Truly madly deeply parallel ruby applicationsTruly madly deeply parallel ruby applications
Truly madly deeply parallel ruby applications
 
Beyond The Rails Way
Beyond The Rails WayBeyond The Rails Way
Beyond The Rails Way
 
The Holy Grail of continuous delivery in distributed teams environment
The Holy Grail of continuous delivery in distributed teams environmentThe Holy Grail of continuous delivery in distributed teams environment
The Holy Grail of continuous delivery in distributed teams environment
 
.Net Core 3.0. What’s inside? Павло Голубович
.Net Core 3.0. What’s inside? Павло Голубович.Net Core 3.0. What’s inside? Павло Голубович
.Net Core 3.0. What’s inside? Павло Голубович
 
From Rails legacy to DDD - Pivorak, Lviv
From Rails legacy to DDD - Pivorak, LvivFrom Rails legacy to DDD - Pivorak, Lviv
From Rails legacy to DDD - Pivorak, Lviv
 
MySQL-Mixer-Livenation
MySQL-Mixer-LivenationMySQL-Mixer-Livenation
MySQL-Mixer-Livenation
 

Viewers also liked

Html5 overview
Html5 overviewHtml5 overview
Html5 overview
appbackr
 
Expert selenium with core java
Expert selenium with core javaExpert selenium with core java
Expert selenium with core java
Ishita Arora
 
Core java over view basics introduction by quontra solutions
Core java over view basics introduction by quontra solutionsCore java over view basics introduction by quontra solutions
Core java over view basics introduction by quontra solutions
QUONTRASOLUTIONS
 
Verizon Overview Broadband during DigiWorld Summit 2011
Verizon Overview Broadband during DigiWorld Summit 2011Verizon Overview Broadband during DigiWorld Summit 2011
Verizon Overview Broadband during DigiWorld Summit 2011
IDATE DigiWorld
 

Viewers also liked (20)

BlueVia SDK for .NET Overview
BlueVia SDK for .NET OverviewBlueVia SDK for .NET Overview
BlueVia SDK for .NET Overview
 
Sql Overview
Sql OverviewSql Overview
Sql Overview
 
Head First Java Chapter 3
Head First Java Chapter 3Head First Java Chapter 3
Head First Java Chapter 3
 
C# programming language
C# programming languageC# programming language
C# programming language
 
Html5 overview
Html5 overviewHtml5 overview
Html5 overview
 
.Net overview
.Net overview.Net overview
.Net overview
 
Modern JavaScript Programming
Modern JavaScript Programming Modern JavaScript Programming
Modern JavaScript Programming
 
Basic knowledge of cyber security
Basic knowledge of cyber securityBasic knowledge of cyber security
Basic knowledge of cyber security
 
cpuk10745
cpuk10745cpuk10745
cpuk10745
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Expert selenium with core java
Expert selenium with core javaExpert selenium with core java
Expert selenium with core java
 
Core java over view basics introduction by quontra solutions
Core java over view basics introduction by quontra solutionsCore java over view basics introduction by quontra solutions
Core java over view basics introduction by quontra solutions
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
 
ASP.NET MVC - Javascript Overview
ASP.NET MVC - Javascript OverviewASP.NET MVC - Javascript Overview
ASP.NET MVC - Javascript Overview
 
An overview of JavaScript
An overview of JavaScriptAn overview of JavaScript
An overview of JavaScript
 
High Level Broadband Overview
High Level Broadband OverviewHigh Level Broadband Overview
High Level Broadband Overview
 
Verizon Overview Broadband during DigiWorld Summit 2011
Verizon Overview Broadband during DigiWorld Summit 2011Verizon Overview Broadband during DigiWorld Summit 2011
Verizon Overview Broadband during DigiWorld Summit 2011
 
Ado.net
Ado.netAdo.net
Ado.net
 

Similar to Effective JavaScript

Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
Garrison Locke
 
Code reviews
Code reviewsCode reviews
Code reviews
Roger Xia
 

Similar to Effective JavaScript (20)

Основы функционального JS
Основы функционального JSОсновы функционального JS
Основы функционального JS
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
 
Introduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScriptIntroduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScript
 
Working With Concurrency In Java 8
Working With Concurrency In Java 8Working With Concurrency In Java 8
Working With Concurrency In Java 8
 
Kevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScriptKevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScript
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
 
Erlang factory SF 2011 "Erlang and the big switch in social games"
Erlang factory SF 2011 "Erlang and the big switch in social games"Erlang factory SF 2011 "Erlang and the big switch in social games"
Erlang factory SF 2011 "Erlang and the big switch in social games"
 
Erlang, the big switch in social games
Erlang, the big switch in social gamesErlang, the big switch in social games
Erlang, the big switch in social games
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
GoLang - Why It Matters
GoLang -  Why It MattersGoLang -  Why It Matters
GoLang - Why It Matters
 
Clean code presentation
Clean code presentationClean code presentation
Clean code presentation
 
AngularJS
AngularJSAngularJS
AngularJS
 
DSL's with Groovy
DSL's with GroovyDSL's with Groovy
DSL's with Groovy
 
Summit 16: Stop Writing Legacy Code!
Summit 16: Stop Writing Legacy Code!Summit 16: Stop Writing Legacy Code!
Summit 16: Stop Writing Legacy Code!
 
The Architect Way
The Architect WayThe Architect Way
The Architect Way
 
A Deep Dive into Javascript
A Deep Dive into JavascriptA Deep Dive into Javascript
A Deep Dive into Javascript
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
 
Bccon use notes objects in memory and other useful
Bccon   use notes objects in memory and other usefulBccon   use notes objects in memory and other useful
Bccon use notes objects in memory and other useful
 
Code reviews
Code reviewsCode reviews
Code reviews
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Effective JavaScript

Editor's Notes

  1. No block scope. In general you reference enclosing functions and their arguments until you reach the global scope. With is an exception.
  2. This isn’t as true in v8.
  3. Referencing a is 4 steps away!
  4. If something isn’t defined in the object in your with statement, you create a global. If it is, you overwrite that property. It’s difficult to tell from reading the code how an assignment might affect the program.
  5. And you can combine the two!
  6. This avoids a step on the scope chain.
  7. Minimize your code, don’t keep functions around that are one-offs. On the other hand, this function is recreated every time.
  8. As always with closures, watch for memory leaks.
  9. Be careful though, unlike other languages with getters and setters, Javascript won’t warn you if you access an undefined property. It’ll just return undefined.