Javascript advanced technics Flashcards
Tecnicas avançadas de javascript
Explique esta tecnica avançada em Javascript:
Destructuring with Aliasing
Destructuring allows you to unpack values from arrays or properties from objects into distinct variables. Aliasing enables you to rename the variables during this process, which is particularly useful when dealing with data from external sources like APIs.
Explique esta tecnica avançada em Javascript:
Currying
Permite criar funções que podem ser chamadas com pocos argumentos, retornando uma nova função que aceita os argumentos restantes. É especialmente util na programação funcional.
function curry(func) {
return function curried(…args) {
if (args.length >= func.length) {
return func.apply(this, args);
}
return function (…nextArgs) {
return curried.apply(this, args.concat(nextArgs));
};
};
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
Explique esta tecnica avançada em Javascript:
Debouncing and Throttling
Debouncing:
Debouncing ensures that a function is not called again until a certain amount of time has passed since the last call. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
Throttling:
Throttling ensures that a function is called at most once in a specified time period. This is useful for scenarios like scroll events where you want to limit the frequency of function calls.
Explique esta tecnica avançada em Javascript:
Memoization
Memoization is an optimization technique that involves caching the results of expensive function calls and returning the cached result when the same inputs occur again. This can significantly improve performance for functions with heavy computation, particularly those that are called frequently with the same arguments.
Explique esta tecnica avançada em Javascript:
Proxy
The Proxy object allows you to create a proxy for another object, enabling you to intercept and redefine fundamental operations such as property lookup, assignment, enumeration, function invocation, etc. This provides a powerful way to add custom behavior to objects.
const user = {
name: 'John',
age: 30
};
const handler = {
get: (target, prop) => {
console.log(`Getting ${prop}`);
return target[prop];
},
set: (target, prop, value) => {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
console.log(`Setting ${prop} to ${value}`);
target[prop] = value;
return true;
}
};
const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name); // Getting name, John
proxyUser.age = 35; // Setting age to 35
// proxyUser.age = '35'; // Throws TypeError
Explique esta tecnica avançada em Javascript:
Generators
Inclua alguns use cases
Generators são funções simples que podem ser pausadas e retomadas a qualquer momento, sem perder seu contexto e definições das variáveis a cada re-execução.
A função Generator retorna um Iterador. Os valores da função Generator são retornados sob demanda, executando o metodo .next() do iterador. A instrução yield definida dentro da função Generator retornará o valor da função. Quando não tiver mais instruções yield o iterador mudará seu estado done para true, concluindo a iteração.
function* myGenerator() {
yield 'Hello';
yield 'World';
}
const iterator = myGenerator();
console.log(iterator.next()); // {value: 'Hello', done: false}
console.log(iterator.next()); // {value: 'World', done: false}
console.log(iterator.next()); // {value: undefined, done: true}
async function* streamVideo({ id }) {
let endOfVideo = false;
const downloadChunk = async (sizeInBytes) => {
const response = await fetch(
`api.example.com/videos/${id}`
);
const { chunk, done } = await response.json();
if (done) endOfVideo = true;
return chunk;
};
while (!endOfVideo) {
const bufferSize = 500 * 1024 * 1024;
yield await downloadChunk(bufferSize);
}
}
Master JavaScript generators: 5 inspiring practical use cases
https://www.codingbeautydev.com/blog/javascript-generators
10 Advanced JavaScript Tricks You Don’t Know
https://medium.com/@bjprajapati381/10-advanced-javascript-tricks-you-dont-know-f1929e40703d
Explique esta tecnica avançada em Javascript:
Self-Invoking Functions
Immediately Invoked Function Expressions (IIFE)
Permite executar uma função imediatamente após sua criação. São uteis para criar escopos isolados e evitar poluir o escopo global, o que é essencial para manter código limpo e modular.
(function () {
console.log('This runs immediately!');
})();
Explique esta tecnica avançada em Javascript
Short-Circuit Evaluation
Permite a avaliação otimizada e simplificada de expressões condicionais. É usada com operadores lógicos && (AND) e || (OR).
Como funciona:
No caso do &&, se o primeiro valor for falso, a segunda parte da expressão não será avaliada, pois o resultado já será falso. Já no ||, se o primeiro valor for verdadeiro, a segunda parte também não é avaliada, já que o resultado final será verdadeiro. Isso é útil para definir valores padrão ou evitar a execução de funções desnecessárias, melhorando a eficiência do código.
Explique esta tecnica avançada em Javascript
Optional Chaining
Permite acessar com segurança propriedades aninhadas dos objetos sem ter que explicitamente checar cada nivel em busca de null or undefined.
Em outras palavras, se tentar acessar alguma propriedade não definida ou com valor null num objeto, não será disparado um erro de sintaxe, mas será exibido um valor undefined.
const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"
const user = { profile: { lastName: 'Doe' } };
const userName = user?.profile?.name;
console.log(userName); // SintaxError: 'name' is undefined
Explique esta tecnica avançada em Javascript
Nullish Coalescing
Permite definir um valor padrão (à direita da expressão) a uma variável somente quando o lado esquerdo da expressão (left-hand side) for null ou undefined.
Usar || pode resultar em valores inesperados quando a expressão avaliada à esquerda for 0 or ""
const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0
Explique esta tecnica avançada em Javascript
Promisify Callbacks
Permite converter uma função baseada em callback (require(‘fs’).readFile) numa Promise, fazendo mais fácil trabalhar com a sintaxe async/await.
function promisify(fn) {
return function (…args) {
return new Promise((resolve, reject) => {
fn(…args, (err, result) => {
if (err) reject(err);
else resolve(result);
});
});
};
}
const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
.then(data => console.log(data))
.catch(err => console.error(err));
Explique esta tecnica avançada em Javascript
Function Composition
Permite criar uma nova função por combinar multiplas funções, fazendo o código mais modular e resusavel.
const compose = (…funcs) => (arg) => funcs.reduceRight((prev, fn) => fn(prev), arg); const add = (x) => x + 1; const multiply = (x) => x * 2; const addThenMultiply = compose(multiply, add); console.log(addThenMultiply(5)); // 12
Explique esta tecnica avançada em Javascript
Function Pipelining
Permite aplicar uma série de funções a um valor em sequencia, melhorando a legibilidade e manutenção.
const pipe = (…funcs) => (arg) => funcs.reduce((prev, fn) => fn(prev), arg); const add = (x) => x + 1; const multiply = (x) => x * 2; const addThenMultiply = pipe(add, multiply); console.log(addThenMultiply(5)); // 12
