Javascript Cheatsheet | FX DEV

Sempre mantenha Strict Mode configurado

Ter o Strict Mode declarado irá limitar você de escrever código inseguro. Além disso, é bem fácil de ativá-lo. Basta adicionar o código abaixo como primeira linha em seus arquivos Javascript.

use strict

Quando o strict mode está declarado:

Lança alguns erros que foram previamente mantidos em silêncio;
Corrige erros que tornam difícil para o motor do Javascript performar otimizações;
Proibi o uso de palavras reservadas prováveis de serem definidas em futuras versões do ECMAScript;
Lança erros quando ações “inseguras” são realizadas (como obter acesso ao objeto global)

Fonte:

Always Keep Strict Mode On

Como evitar conversões indesejadas em Javascript

Siga este link para um post dedicado ao assunto no blog 🙂

Checar se a aba do navegador está ativa/focada

const isBrowserTabInView = () => document.hidden;

Fonte:

Check if the current tab is in view / focus

Checar se um objeto está vazio em Javascript

function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}

// ou

function isEmptyObject(obj) {
    return Object.getOwnPropertyNames(obj).length === 0;
}

// ou

function isEmptyObject(obj){
    return JSON.stringify(obj) === '{}';
}

// ou

function isEmptyObject(obj) {
    return Object.entries(obj).length === 0;
}

Fonte:

How to Check if an Object Is Empty in JavaScript

Checar se uma propriedade existe dentro de um objeto

const obj = { name: 'João', lastname: 'Silva' }

'idade' in obj // false
'name' in obj // true

if ('name' in obj) doSomething();

Fonte:

in operator - MDN Web Docs

Como adicionar novo valor (par chave/valor) em um objeto

const obj = { key1: value1, key2: value2 };

obj.key3 = "value3"; // primeira maneira, notação com ponto
obj["key3"] = "value3"; // segunda, notação com colchetes
Object.assign(obj, {key3: "value3"}); // terceira, Object.assign

// quarta maneira, com spread operator
const pair = { key3: "value3" };
obj = { ...obj, ...pair };

Fonte:

Como copiar/duplicar um objeto em Javascript

Antes de trazer o trecho de código, você já ouviu falar de Shallow Copy e Deep Copy?
Esses termos apesar de respectivamente significarem “Superficial” e “Profundo” não estão relacionados a quantidade de níveis que um objeto possui ou limite de níveis que podem ser copiados, e sim ao fato da cópia ser um objeto totalmente independente do original.

Veja o código abaixo primeiro e vamos discutir isso melhor:

const user = {
  personalData: {
    firstName: 'Fulano',
    lastName: 'Silva',
    age: 40
  }
}

const newUser = user; // essa é uma maneira de se copiar o objeto user
const newUser = { ...user } // essa é outra abordagem e utiliza o spread operator
const newUser = Object.assign({}, food); // e esse modo utiliza Object.assign

Todos os modos acima terão o mesmo resultado e o que você precisa saber é o seguinte: São cópias superficiais (shallow copy) e portanto se você alterar o objeto user, seu objeto newUser também será alterado. Estranho, né?

Isso acontece porque você está apontando para uma referência. Em outras palavras, quando você declara o objeto user, acaba colocando ele num local da memória da sua máquina, depois quando você declara que newUser = user você está apontando para o mesmo local, sacou?

E como você faz pra copiar o conteúdo de user para uma variável diferente e que seja independente dessa posição na memória? Ou seja, se você alterar user não altere newUser?

Deep Copy! Para copiar um objeto desse modo você precisa transformá-lo em string e depois num objeto de novo. Vejamos:

const newUser = JSON.parse(JSON.stringify(user)); // é só essa linha mesmo

Se você quer comprovar se eles são iguais, veja o próximo tópico: Comparar dois objetos em Javascript.

Fonte:

Como comparar dois objetos em Javascript

A comparação de objetos em Javascript não pode ser realizada utilizando simplesmente o operador de igualdade (strict operador ==) ou o operador de igualdade rigorosa (strict equality operador ===), por exemplo:

const a = {name: ''}
const b = {name: ''}

a == b   // false
a === b  // false

A maneira mais usual de checar a igualdade de dois objetos, ou seja, se eles tem as mesmas chaves e valores é utilizando JSON.stringify:

JSON.stringify(a) === JSON.stringify(b); // true

Qual é a pegadinha? Você deve se atentar a ordem das chaves, se elas forem diferentes o retorno será falso:

const obj = { name: 'João', lastname: 'Silva' }
const obj2 = { lastname: 'Silva', name: 'João' }

JSON.stringify(obj) === JSON.stringify(obj2); // false

Isso nos leva para o próximo tópico…

Fonte:

Como ordenar chaves de um objeto recursivamente em Javascript

function sort(object){
    if (typeof object != "object" || object instanceof Array) // Not to sort the array
        return object;
    var keys = Object.keys(object);
    keys.sort();
    var newObject = {};
    for (var i = 0; i < keys.length; i++){
        newObject[keys[i]] = sort(object[keys[i]])
    }
    return newObject;
}

const obj = {
    "Memo": {
        "itemAmount1": "5",
        "taxName1": "TAX",
        "productPrice1": "10",
        "accountName1": "Account Receivable (Debtors)"
    },
    "Footer": {
        "productDescription2": "Maggie",
        "itemQuantity2": "49.5",
        "accountName2": "Account Receivable (Debtors)",
        "taxName2": "TAX"
    },
    "Header": {
        "itemDiscount3": "10",
        "accountName3": "Account Receivable (Debtors)",
        "productPrice3": "10",
        "taxName3": "TAX"
    }
}

const orderedObj = sort(obj);

Fonte: Sorting JavaScript Object by key value Recursively

Como concatenar variáveis em Javascript

Você pode seguir o caminho mais moderno utilizando template literals (ECMAScript 2015, não suportado pelo IE):

const name = "Felipe";
const age = "30";

const result = `My name is ${name} and I'm ${age} years old`

Ou seguir o modo clássico:

const name = 'Felipe';
const age = '30';

const result = "My name is " + name + " and I'm " + age + " years old";

Como verificar undefined no Javascript

if (typeof suaVariavel === 'undefined') {
    // faça alguma coisa
}

Como colocar argumentos default (padrão) em uma função

// Solução em ES6/ES2015, ou seja, só não funciona no IE
function multiplicar(a = 1, b = 2) {
    return a * b;
}

// Fallback: A opção alternativa é confirmar se cada argumento existe
// O exemplo utiliza um ternário mas você pode usar um 'if'
function multiplicar(a, b) {
    const valor1 = (typeof a !== 'undefined') ?  a : 1
    const valor2 = (typeof b !== 'undefined') ?  b : 2
    return valor1 * valor2
}

Fonte:

Default parameters