Javascript Cheat Sheet ES6

Cheat sheet collection of ES6 helpers and other usefull javascript stuff

1. Regular Array Helpers : returns array or array element

The 'forEach' Helper
The 'map' Helper
The 'filter' Helper
The 'find' Helper

2. Condensing Array Helpers : returns boolean or value

The 'every' Helper
The 'some' Helper
The 'reduce' Helper

3. Ternary Operator

1. Regular Array Helpers

1.1. The 'forEach' Helper 🔗

The forEach() method executes a provided function once for each array element.

const posts = [
    { id: 23, title: 'Daily JS News' },
    { id: 52, title: 'Code Refactor City' },
    { id: 105, title: 'The Brightest Ruby' }
];

posts.forEach((post) => {
    console.log(post.title);
});

// expected output:
//      Daily JS News
//      Code Refactor City
//      The Brightest Ruby

1.2. The 'map' Helper 🔗

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

const images = [
    { height: '34px', width: '39px' },
    { height: '54px', width: '19px' },
    { height: '83px', width: '75px' },
];

const heights = images.map( (image) => {
    return image.height; // "return' is mandatory !!
});

console.log(heights);
// expected output: heights = ['34px','54px','83px']

1.3. The 'filter' Helper 🔗

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [15, 25, 35, 45, 55, 65, 75, 85, 95];

const filteredNumbers = numbers.filter((number) => {
    return number > 50; // "return' is mandatory !!
});

console.log(filteredNumbers);
// expected output: [55,65,75,85,95]

1.4. the 'find' Helper 🔗

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

const users = [
    { id: 1, admin: false },
    { id: 2, admin: false },
    { id: 3, admin: true},
    { id: 4, admin: true},
];

const admin = users.find(user => user.admin);

console.log(admin);
// expected output: { id: 3, admin: true}

2. Condensing Array Helpers

2.1. The 'every' Helper 🔗

The every() method tests whether all elements in the array pass the test implemented by the provided function.

const users = [
    { id: 21, hasSubmitted: true },
    { id: 62, hasSubmitted: false },
    { id: 4, hasSubmitted: true },
];

const hasSubmitted = users.every(user => user.hasSubmitted);

console.log(hasSubmitted);
// expected output: 'false'

2.2. The 'some' Helper 🔗

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

const requests = [
    { url: '/photos', status: 'complete' },
    { url: '/albums', status: 'pending' },
    { url: '/users', status: 'failed' },
];
const inProgress= requests.some(request => request.status === 'pending');

console.log(inProgress);
// expected output: 'true'

2.3. The 'reduce' Helper 🔗

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

const desks = [
    { type: 'sitting' },
    { type: 'standing' },
    { type: 'sitting' },
    { type: 'sitting' },
    { type: 'standing' }
];

const deskTypes = desks.reduce(function(previous, desk) {
    if (desk.type === 'sitting') {previous.sitting++}
    if (desk.type === 'standing') {previous.standing++}
    return previous;
}, { sitting: 0, standing: 0 });

console.log(deskTypes);
// expected output: {"sitting":3,"standing":2}

3. Ternary Operator 🔗

The ternary operator, also known as the conditional operator, is used as shorthand for an if...else statement. A ternary operator is written with the syntax of a question mark ? followed by a colon :.

condition ? expr1 : expr2 If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.

let age = 20;

const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

console.log(oldEnough);
// expected output: 'You may not enter.'

Multiple ternary evaluations are possible:

const firstCheck = false,
    secondCheck = false,
    access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
  
console.log(access);
// expected output: 'Access granted'

Multiple conditions like in a multiple-conditions IF statement are also possible:

const condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? 'true true': 'true false') : (condition2 ? 'false true' : 'false false');

console.log(access); // logs "true false"
// expected output: 'true false'

achoisy/javascript