SlideShare a Scribd company logo
1 of 16
Style guide
javascript and best
practices Part 1
How i am ?
Belgacem Ben Ltaif
Full stack developer & Front End Technical Lead
Founder & Cto Powerful Consulting
twitter @gasston_egass
github @gasston
Email : belgacem.benltaif@gmail.com
Objects
1.
“ Use the literal
syntax for object
creation.
// bad
const item = new
Object();
// good
const item = {};
“ Use computed
property names
when creating
objects with
dynamic property
names.
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};
“ Use property value
shorthand.
const foo = 'Luke';
// bad
const obj = {foo: foo,};
// good
const obj = {foo};
“ Only quote
properties that are
invalid identifiers
// bad
const bad = {'foo': 3, 'bar':
4,'data-blah': 5,};
// good
const good = {
foo: 3,
bar: 4,
'data-blah': 5,
};
“Do not call Object.prototype methods directly,
such as hasOwnProperty, proumerable, and
isPrototyppertyIsEneOf.
“// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has';
// ...
console.log(has.call(object, key));
Functions
2.
“Use named function
expressions instead
of function
declarations.
// bad
function foo() {
}
const foo = function () {
// ...
};
// good
const foo = function bar() {
// ...
};
“ Wrap immediately
invoked function
expressions in
parentheses
// immediately-invoked
function expression (IIFE)
(function () {
console.log('Welcome to
the Internet. Please follow
me.');
}());
“ Never name a
parameter arguments.
This will take
precedence over the
arguments object that
is given to every
function scope.
// bad
function foo(name, options,
arguments) {
// ...
}
// good
function foo(name, options,
args) {
// ...
}
“Use default parameter syntax rather than
mutating function arguments.
// really bad
function handleThings(opts) { opts = opts || {};
// ...
}
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// good
function handleThings(opts = {}) {
// ...
}
Worning !!
Never declare a function in a non-function block (if, while, etc). Assign
the function to a variable instead. Browsers will allow you to do it, but
they all interpret it differently, which is bad news bears.
thanks!
Any questions?
twitter @gasston_egass
github @gasston
Email : belgacem.benltaif@gmail.com

More Related Content

Viewers also liked

World Trade Center Quad
World Trade Center QuadWorld Trade Center Quad
World Trade Center Quad360 Realtors
 
Portfolio pvc
Portfolio pvcPortfolio pvc
Portfolio pvctrufachan
 
SharePoint meetup Speaking Deck - Knowing the formula
SharePoint meetup Speaking Deck -  Knowing the formulaSharePoint meetup Speaking Deck -  Knowing the formula
SharePoint meetup Speaking Deck - Knowing the formulaKenneth Cooper
 
Blogging, tweeting, sharing your work to reach policy makers
Blogging, tweeting, sharing your work to reach policy makersBlogging, tweeting, sharing your work to reach policy makers
Blogging, tweeting, sharing your work to reach policy makersTrish Groves
 
تمضي قوافل الشهداء و يبقى الخائن يعيش في
تمضي قوافل الشهداء و يبقى الخائن يعيش فيتمضي قوافل الشهداء و يبقى الخائن يعيش في
تمضي قوافل الشهداء و يبقى الخائن يعيش فيBOUNOUA ROUISSAT
 
Befargo ru
Befargo ruBefargo ru
Befargo ruWexcoin
 
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...Esperluette & Associés
 
مجلة إشراقات، العدد 57
مجلة إشراقات، العدد 57مجلة إشراقات، العدد 57
مجلة إشراقات، العدد 57إشراقات
 

Viewers also liked (13)

Ponencia Seguridad de Datos
Ponencia Seguridad de DatosPonencia Seguridad de Datos
Ponencia Seguridad de Datos
 
World Trade Center Quad
World Trade Center QuadWorld Trade Center Quad
World Trade Center Quad
 
Portfolio pvc
Portfolio pvcPortfolio pvc
Portfolio pvc
 
College to Confidence
College to ConfidenceCollege to Confidence
College to Confidence
 
Austin Journal of Clinical Immunology
Austin Journal of Clinical ImmunologyAustin Journal of Clinical Immunology
Austin Journal of Clinical Immunology
 
SharePoint meetup Speaking Deck - Knowing the formula
SharePoint meetup Speaking Deck -  Knowing the formulaSharePoint meetup Speaking Deck -  Knowing the formula
SharePoint meetup Speaking Deck - Knowing the formula
 
Blogging, tweeting, sharing your work to reach policy makers
Blogging, tweeting, sharing your work to reach policy makersBlogging, tweeting, sharing your work to reach policy makers
Blogging, tweeting, sharing your work to reach policy makers
 
تمضي قوافل الشهداء و يبقى الخائن يعيش في
تمضي قوافل الشهداء و يبقى الخائن يعيش فيتمضي قوافل الشهداء و يبقى الخائن يعيش في
تمضي قوافل الشهداء و يبقى الخائن يعيش في
 
Befargo ru
Befargo ruBefargo ru
Befargo ru
 
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...
Cardinal Édifice remporte le chantier de l’Institut Mines-Télécom du Campus P...
 
Fpl gtr-117 secagem
Fpl gtr-117 secagemFpl gtr-117 secagem
Fpl gtr-117 secagem
 
مجلة إشراقات، العدد 57
مجلة إشراقات، العدد 57مجلة إشراقات، العدد 57
مجلة إشراقات، العدد 57
 
Project Irrigation
Project IrrigationProject Irrigation
Project Irrigation
 

Similar to JavaScript style guide Part 1

Javascript the New Parts v2
Javascript the New Parts v2Javascript the New Parts v2
Javascript the New Parts v2Federico Galassi
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptStoyan Stefanov
 
JavaScript In Object Oriented Way
JavaScript In Object Oriented WayJavaScript In Object Oriented Way
JavaScript In Object Oriented WayBorey Lim
 
Metaprogramming in JavaScript
Metaprogramming in JavaScriptMetaprogramming in JavaScript
Metaprogramming in JavaScriptMehdi Valikhani
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep DiveManish Jangir
 
New c sharp3_features_(linq)_part_i
New c sharp3_features_(linq)_part_iNew c sharp3_features_(linq)_part_i
New c sharp3_features_(linq)_part_iNico Ludwig
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript WorkshopPamela Fox
 
Cucumber From the Ground Up - Joseph Beale
Cucumber From the Ground Up - Joseph BealeCucumber From the Ground Up - Joseph Beale
Cucumber From the Ground Up - Joseph BealeQA or the Highway
 
properties-how-do-i - Transcript.pdf
properties-how-do-i - Transcript.pdfproperties-how-do-i - Transcript.pdf
properties-how-do-i - Transcript.pdfShaiAlmog1
 
Building .NET-based Applications with C#
Building .NET-based Applications with C#Building .NET-based Applications with C#
Building .NET-based Applications with C#Umar Farooq
 
Javascript closures
Javascript closures Javascript closures
Javascript closures VNG
 
Web technology javascript
Web technology   javascriptWeb technology   javascript
Web technology javascriptUma mohan
 
Video WebChat Conference Tool
Video WebChat Conference ToolVideo WebChat Conference Tool
Video WebChat Conference ToolSergiu Gordienco
 
C++ interview questions
C++ interview questionsC++ interview questions
C++ interview questionsarjavi
 

Similar to JavaScript style guide Part 1 (20)

Javascript the New Parts v2
Javascript the New Parts v2Javascript the New Parts v2
Javascript the New Parts v2
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
 
JavaScript Inheritance
JavaScript InheritanceJavaScript Inheritance
JavaScript Inheritance
 
JavaScript In Object Oriented Way
JavaScript In Object Oriented WayJavaScript In Object Oriented Way
JavaScript In Object Oriented Way
 
Metaprogramming in JavaScript
Metaprogramming in JavaScriptMetaprogramming in JavaScript
Metaprogramming in JavaScript
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep Dive
 
New c sharp3_features_(linq)_part_i
New c sharp3_features_(linq)_part_iNew c sharp3_features_(linq)_part_i
New c sharp3_features_(linq)_part_i
 
Presentation
PresentationPresentation
Presentation
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript Workshop
 
Cucumber From the Ground Up - Joseph Beale
Cucumber From the Ground Up - Joseph BealeCucumber From the Ground Up - Joseph Beale
Cucumber From the Ground Up - Joseph Beale
 
properties-how-do-i - Transcript.pdf
properties-how-do-i - Transcript.pdfproperties-how-do-i - Transcript.pdf
properties-how-do-i - Transcript.pdf
 
Building .NET-based Applications with C#
Building .NET-based Applications with C#Building .NET-based Applications with C#
Building .NET-based Applications with C#
 
Week 9 IUB c#
Week 9 IUB c#Week 9 IUB c#
Week 9 IUB c#
 
Javascript closures
Javascript closures Javascript closures
Javascript closures
 
Web technology javascript
Web technology   javascriptWeb technology   javascript
Web technology javascript
 
syn
synsyn
syn
 
Object
ObjectObject
Object
 
Video WebChat Conference Tool
Video WebChat Conference ToolVideo WebChat Conference Tool
Video WebChat Conference Tool
 
C++ interview questions
C++ interview questionsC++ interview questions
C++ interview questions
 

Recently uploaded

Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 

Recently uploaded (20)

Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 

JavaScript style guide Part 1

  • 1. Style guide javascript and best practices Part 1
  • 2. How i am ? Belgacem Ben Ltaif Full stack developer & Front End Technical Lead Founder & Cto Powerful Consulting twitter @gasston_egass github @gasston Email : belgacem.benltaif@gmail.com
  • 4. “ Use the literal syntax for object creation. // bad const item = new Object(); // good const item = {};
  • 5. “ Use computed property names when creating objects with dynamic property names. // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, };
  • 6. “ Use property value shorthand. const foo = 'Luke'; // bad const obj = {foo: foo,}; // good const obj = {foo};
  • 7. “ Only quote properties that are invalid identifiers // bad const bad = {'foo': 3, 'bar': 4,'data-blah': 5,}; // good const good = { foo: 3, bar: 4, 'data-blah': 5, };
  • 8. “Do not call Object.prototype methods directly, such as hasOwnProperty, proumerable, and isPrototyppertyIsEneOf.
  • 9. “// bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. /* or */ import has from 'has'; // ... console.log(has.call(object, key));
  • 11. “Use named function expressions instead of function declarations. // bad function foo() { } const foo = function () { // ... }; // good const foo = function bar() { // ... };
  • 12. “ Wrap immediately invoked function expressions in parentheses // immediately-invoked function expression (IIFE) (function () { console.log('Welcome to the Internet. Please follow me.'); }());
  • 13. “ Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope. // bad function foo(name, options, arguments) { // ... } // good function foo(name, options, args) { // ... }
  • 14. “Use default parameter syntax rather than mutating function arguments. // really bad function handleThings(opts) { opts = opts || {}; // ... } function handleThings(opts) { if (opts === void 0) { opts = {}; } // good function handleThings(opts = {}) { // ... }
  • 15. Worning !! Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.
  • 16. thanks! Any questions? twitter @gasston_egass github @gasston Email : belgacem.benltaif@gmail.com