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?

Advanced modulinos
Advanced modulinosAdvanced modulinos
Advanced modulinos
brian d foy
 
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートIIopenFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
openFrameworks – パーティクルを動かす、静的配列と動的配列 - 多摩美メディアアートII
Atsushi Tadokoro
 
Os Practical Assignment 1
Os Practical Assignment 1Os Practical Assignment 1
Os Practical Assignment 1
Emmanuel Garcia
 
Tarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian VasquezTarea De Scilab By Sebastian Vasquez
Tarea De Scilab By Sebastian Vasquez
Sebastian Vasquez
 
Decent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivarsDecent exposure: Controladores sin @ivars
Decent exposure: Controladores sin @ivars
Leonardo 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

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
Christophe Herreman
 
Falcon初印象
Falcon初印象Falcon初印象
Falcon初印象
勇浩 赖
 
JavaScript Sprachraum
JavaScript SprachraumJavaScript Sprachraum
JavaScript Sprachraum
patricklee
 

Ä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 동수 장

웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
동수 장
 
개발자와 협업하기 위한 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

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
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
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

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… ;)