Destructuring
Destructuring lets you unpack values from arrays or properties from objects into distinct variables. The Airbnb style guide encourages using it to reduce repetitive property access and improve readability.
5.1 Use object destructuring
Use object destructuring when accessing and using multiple properties of an object.
eslint: prefer-destructuring
Destructuring saves you from creating temporary references for those properties, and from repetitive access of the object. Repeating object access creates more repetitive code, requires more reading, and creates more opportunities for mistakes. Destructuring also provides a single site of definition of the object structure that is used in the block.
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
const { firstName, lastName } = user;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
Destructuring directly in the function parameter list (the “best” form above) is the most concise — it documents the expected shape of the argument right at the function signature.
5.2 Use array destructuring
Use array destructuring.
eslint: prefer-destructuring
const arr = [1, 2, 3, 4];
const [first, second] = arr;
const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];
5.3 Use object destructuring for multiple return values
Use object destructuring for multiple return values, not array destructuring.
You can add new properties over time or change the order of things without breaking call sites. Array destructuring forces callers to know the exact order of returned values.
function processInput(input) {
// then a miracle occurs
return { left, right, top, bottom };
}
// the caller selects only the data they need
const { left, top } = processInput(input);
function processInput(input) {
// then a miracle occurs
return [left, right, top, bottom];
}
// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);
Strings
6.1 Use single quotes
Use single quotes '' for strings.
eslint: quotes
Template literals should only be used when the string contains interpolation or newlines. Don’t use backticks for plain strings.
// bad
const name = "Capt. Janeway";
// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';
6.2 Don’t break long strings across multiple lines
Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation.
Broken strings are painful to work with and make code less searchable.
// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// bad
const errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';
// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
6.3 Use template strings for string building
When programmatically building up strings, use template strings instead of concatenation.
eslint: prefer-template, template-curly-spacing
Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
Do not add spaces inside template literal curly braces: use ${name}, not ${ name }.
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
6.4 Never use eval() on a string
Never use eval() on a string; it opens too many vulnerabilities.
eslint: no-eval
eval() allows arbitrary code execution and is a major security risk. There is no safe use of eval() on untrusted input.
6.5 Do not unnecessarily escape characters
Do not unnecessarily escape characters in strings.
eslint: no-useless-escape
Backslashes harm readability, so they should only be present when necessary.
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;
const foo = '\'this\' \i\s \"quoted\"';
