SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Javascript Common Mistakes Dongsu Jang <iolothebard at gmail.com> http://blog.iolo.pe.kr
Unaware of:Async! Async! Async! var result1, result2, result3; $.ajax(..., success: function(data) { result1 = data; }); $.ajax(..., success: function(data) { result2 = data; }); result3 = result1 + result2; But, don’t do that: “async: false”
Unaware of:this “this” is not the “this” function test(name, button) { this.name = name; button.onclick= function(event) {     alert('hello, ' + this.name);   }; }
Unaware of:“not of not” is not the not of “not” function test(foo) {   alert(typeof(foo));   alert(foo);   if (foo) { alert('foo'); }   if (!foo) { alert(‘!foo'); }   if (!!foo) { alert('!!foo'); } }
Misunderstaning0, null, false, undefined, NaN and “” function test(foo) {   alert(typeof(foo));   alert(foo);   if (foo) { alert('foo'); }   if (foo == null) { alert('foo == null'); }   if (foo === null) { alert('foo === null'); } }
Trying todeclaring block scope “var”s function test() { var foo = -1;   for (varfoo = 0; foo < 10; foo++) { … }   alert(foo); }
Trying tooverload a function function test(foo) {   alert('one arg'); } function test(foo, bar) {   alert('two args'); } function test() {   for (var i = 0; i < arguments.length; i++) {     alert(arguments[i]);   } }
Using escape() instead of encodeURIComponent(), encodeURI() Checkout http://xkr.us/articles/javascript/encode-compare/ Rule of thumb! use encodeURIComponent() use encodeURI() only if you know what it is forget escape()
Unaware ofstring is not array-of-characters var str = “hello”; alert(str.charAt(2)); alert(str[2]); Similarly, NodeList is not array-of-Nodestoo!
Missing“radix” for parseInt() var sum = parseInt(num1.value) + parseInt(num2.value); alert(sum); parseInt('1234'); parseInt('01234'); parseInt('1234', 8); parseInt('01234', 10);
Sorry…it’s a comma… just a trailing comma… var test = { 1, 2, 3, }; out.print(“{“); for (int val: values) { out.print(i); out.print(“,”); } out.print(“}”);
Using Vanilla JavaScript Checkout http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks http://jquery.com/ http://prototypejs.org/ http://dojotoolkit.org/ and so on…
Testing in one browserand expecting it to work in another Checkout http://www.quirksmode.org/
Not using jslint Checkout http://jslint.com/
The most common mistake is“using JavaScript” Thanks you… ;)

Weitere ähnliche Inhalte

Was ist angesagt?

Throttle and Debounce Patterns in Web Apps
Throttle and Debounce Patterns in Web AppsThrottle and Debounce Patterns in Web Apps
Throttle and Debounce Patterns in Web AppsAlmir Filho
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nlWilfred Nas
 
[KOSSA] C++ Programming - 17th Study - STL #3
[KOSSA] C++ Programming - 17th Study - STL #3[KOSSA] C++ Programming - 17th Study - STL #3
[KOSSA] C++ Programming - 17th Study - STL #3Seok-joon Yun
 
Advanced modulinos trial
Advanced modulinos trialAdvanced modulinos trial
Advanced modulinos trialbrian d foy
 
PHP in 2018 - Q4 - AFUP Limoges
PHP in 2018 - Q4 - AFUP LimogesPHP in 2018 - Q4 - AFUP Limoges
PHP in 2018 - Q4 - AFUP Limoges✅ William Pinaud
 
Advanced modulinos
Advanced modulinosAdvanced modulinos
Advanced modulinosbrian d foy
 
Comunicação Android Arduino - JASI 2015
Comunicação Android Arduino - JASI 2015Comunicação Android Arduino - JASI 2015
Comunicação Android Arduino - JASI 2015Rodrigo Reis Alves
 
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートIIopenFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートIIAtsushi Tadokoro
 
Os Practical Assignment 1
Os Practical Assignment 1Os Practical Assignment 1
Os Practical Assignment 1Emmanuel Garcia
 
Tarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian VasquezTarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian VasquezSebastian Vasquez
 
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...Haris Mahmood
 
An Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersAn Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersFITC
 
Decent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivarsDecent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivarsLeonardo Soto
 

Was ist angesagt? (19)

Throttle and Debounce Patterns in Web Apps
Throttle and Debounce Patterns in Web AppsThrottle and Debounce Patterns in Web Apps
Throttle and Debounce Patterns in Web Apps
 
Unit test
Unit testUnit test
Unit test
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nl
 
[KOSSA] C++ Programming - 17th Study - STL #3
[KOSSA] C++ Programming - 17th Study - STL #3[KOSSA] C++ Programming - 17th Study - STL #3
[KOSSA] C++ Programming - 17th Study - STL #3
 
Advanced modulinos trial
Advanced modulinos trialAdvanced modulinos trial
Advanced modulinos trial
 
Javascript: The Important Bits
Javascript: The Important BitsJavascript: The Important Bits
Javascript: The Important Bits
 
PHP in 2018 - Q4 - AFUP Limoges
PHP in 2018 - Q4 - AFUP LimogesPHP in 2018 - Q4 - AFUP Limoges
PHP in 2018 - Q4 - AFUP Limoges
 
Advanced modulinos
Advanced modulinosAdvanced modulinos
Advanced modulinos
 
Of class3
Of class3Of class3
Of class3
 
Android taipei 20160225 淺談closure
Android taipei 20160225   淺談closureAndroid taipei 20160225   淺談closure
Android taipei 20160225 淺談closure
 
Comunicação Android Arduino - JASI 2015
Comunicação Android Arduino - JASI 2015Comunicação Android Arduino - JASI 2015
Comunicação Android Arduino - JASI 2015
 
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートIIopenFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
 
Os Practical Assignment 1
Os Practical Assignment 1Os Practical Assignment 1
Os Practical Assignment 1
 
Fila de caracteres
Fila de caracteresFila de caracteres
Fila de caracteres
 
Functuon
FunctuonFunctuon
Functuon
 
Tarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian VasquezTarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian Vasquez
 
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
 
An Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersAn Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End Developers
 
Decent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivarsDecent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivars
 

Ähnlich wie Javascript Common Mistakes

Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptHong Liu
 
Stuff you didn't know about action script
Stuff you didn't know about action scriptStuff you didn't know about action script
Stuff you didn't know about action scriptChristophe Herreman
 
JSUG - Scala Lightning Talk by Michael Greifeneder
JSUG - Scala Lightning Talk by Michael GreifenederJSUG - Scala Lightning Talk by Michael Greifeneder
JSUG - Scala Lightning Talk by Michael GreifenederChristoph Pickl
 
Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefa...
Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefa...Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefa...
Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefa...OPITZ CONSULTING Deutschland
 
Javascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the UglyJavascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the UglyThorsten Suckow-Homberg
 
04 Advanced Javascript
04 Advanced Javascript04 Advanced Javascript
04 Advanced Javascriptcrgwbr
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testingVisual Engineering
 
AngularJS Testing
AngularJS TestingAngularJS Testing
AngularJS TestingEyal Vardi
 
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesJavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesChicago ALT.NET
 
Falcon初印象
Falcon初印象Falcon初印象
Falcon初印象勇浩 赖
 
Tilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTatsuhiko Miyagawa
 
Security Challenges in Node.js
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.jsWebsecurify
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript FunctionsBrian Moschel
 
JavaScript Survival Guide
JavaScript Survival GuideJavaScript Survival Guide
JavaScript Survival GuideGiordano Scalzo
 
JavaScript Sprachraum
JavaScript SprachraumJavaScript Sprachraum
JavaScript Sprachraumpatricklee
 
Fat Arrow (ES6)
Fat Arrow (ES6)Fat Arrow (ES6)
Fat Arrow (ES6)Ryan Ewing
 

Ähnlich wie Javascript Common Mistakes (20)

Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Stuff you didn't know about action script
Stuff you didn't know about action scriptStuff you didn't know about action script
Stuff you didn't know about action script
 
Short intro to ECMAScript
Short intro to ECMAScriptShort intro to ECMAScript
Short intro to ECMAScript
 
JSUG - Scala Lightning Talk by Michael Greifeneder
JSUG - Scala Lightning Talk by Michael GreifenederJSUG - Scala Lightning Talk by Michael Greifeneder
JSUG - Scala Lightning Talk by Michael Greifeneder
 
JavaScript @ CTK
JavaScript @ CTKJavaScript @ CTK
JavaScript @ CTK
 
Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefa...
Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefa...Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefa...
Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefa...
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
Javascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the UglyJavascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the Ugly
 
04 Advanced Javascript
04 Advanced Javascript04 Advanced Javascript
04 Advanced Javascript
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
AngularJS Testing
AngularJS TestingAngularJS Testing
AngularJS Testing
 
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesJavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
 
Falcon初印象
Falcon初印象Falcon初印象
Falcon初印象
 
Tilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncher
 
Security Challenges in Node.js
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.js
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript Functions
 
JavaScript Survival Guide
JavaScript Survival GuideJavaScript Survival Guide
JavaScript Survival Guide
 
JavaScript Sprachraum
JavaScript SprachraumJavaScript Sprachraum
JavaScript Sprachraum
 
Fat Arrow (ES6)
Fat Arrow (ES6)Fat Arrow (ES6)
Fat Arrow (ES6)
 
Scala 2 + 2 > 4
Scala 2 + 2 > 4Scala 2 + 2 > 4
Scala 2 + 2 > 4
 

Mehr von 동수 장

(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf동수 장
 
Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2동수 장
 
백세코딩
백세코딩백세코딩
백세코딩동수 장
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존동수 장
 
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS동수 장
 
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다동수 장
 
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서동수 장
 
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서동수 장
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈동수 장
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례동수 장
 
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발동수 장
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework동수 장
 
Gnome Architecture
Gnome ArchitectureGnome Architecture
Gnome Architecture동수 장
 

Mehr von 동수 장 (13)

(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
 
Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2
 
백세코딩
백세코딩백세코딩
백세코딩
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존
 
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
 
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
 
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
 
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례
 
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework
 
Gnome Architecture
Gnome ArchitectureGnome Architecture
Gnome Architecture
 

Kürzlich hochgeladen

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 challengesrafiqahmad00786416
 
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 connectorsNanddeep Nachan
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
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...DianaGray10
 
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...Jeffrey Haguewood
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
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 AmsterdamUiPathCommunity
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
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 businesspanagenda
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
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 FMESafe Software
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
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 educationjfdjdjcjdnsjd
 
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 WoodJuan lago vázquez
 

Kürzlich hochgeladen (20)

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
 
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
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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...
 
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...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
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
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
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
 
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
 

Javascript Common Mistakes

  • 1. Javascript Common Mistakes Dongsu Jang <iolothebard at gmail.com> http://blog.iolo.pe.kr
  • 2. Unaware of:Async! Async! Async! var result1, result2, result3; $.ajax(..., success: function(data) { result1 = data; }); $.ajax(..., success: function(data) { result2 = data; }); result3 = result1 + result2; But, don’t do that: “async: false”
  • 3. Unaware of:this “this” is not the “this” function test(name, button) { this.name = name; button.onclick= function(event) { alert('hello, ' + this.name); }; }
  • 4. Unaware of:“not of not” is not the not of “not” function test(foo) { alert(typeof(foo)); alert(foo); if (foo) { alert('foo'); } if (!foo) { alert(‘!foo'); } if (!!foo) { alert('!!foo'); } }
  • 5. Misunderstaning0, null, false, undefined, NaN and “” function test(foo) { alert(typeof(foo)); alert(foo); if (foo) { alert('foo'); } if (foo == null) { alert('foo == null'); } if (foo === null) { alert('foo === null'); } }
  • 6. Trying todeclaring block scope “var”s function test() { var foo = -1; for (varfoo = 0; foo < 10; foo++) { … } alert(foo); }
  • 7. Trying tooverload a function function test(foo) { alert('one arg'); } function test(foo, bar) { alert('two args'); } function test() { for (var i = 0; i < arguments.length; i++) { alert(arguments[i]); } }
  • 8. Using escape() instead of encodeURIComponent(), encodeURI() Checkout http://xkr.us/articles/javascript/encode-compare/ Rule of thumb! use encodeURIComponent() use encodeURI() only if you know what it is forget escape()
  • 9. Unaware ofstring is not array-of-characters var str = “hello”; alert(str.charAt(2)); alert(str[2]); Similarly, NodeList is not array-of-Nodestoo!
  • 10. Missing“radix” for parseInt() var sum = parseInt(num1.value) + parseInt(num2.value); alert(sum); parseInt('1234'); parseInt('01234'); parseInt('1234', 8); parseInt('01234', 10);
  • 11. Sorry…it’s a comma… just a trailing comma… var test = { 1, 2, 3, }; out.print(“{“); for (int val: values) { out.print(i); out.print(“,”); } out.print(“}”);
  • 12. Using Vanilla JavaScript Checkout http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks http://jquery.com/ http://prototypejs.org/ http://dojotoolkit.org/ and so on…
  • 13. Testing in one browserand expecting it to work in another Checkout http://www.quirksmode.org/
  • 14. Not using jslint Checkout http://jslint.com/
  • 15. The most common mistake is“using JavaScript” Thanks you… ;)