DEV Community

Cover image for Javascript Tricks
Edison Sanchez
Edison Sanchez

Posted on • Edited on

3 1

Javascript Tricks

How to check null value and undefined to get a nested object's property?

nullish and chain operators

 const product = {
    name: 'Coke',
    price: 10,
    provider: {
      name: 'Wailkk',
      address: 'Fake Street',
      state: {
        id: 1,
        name: 'Florida',
        country: {
          code: 'US',
          name: 'United States',
        },
      },
      orders: null,
      fPrice: (x) => 100,
    },
  };

  //Old way
  const providerCountry = product.provider
    ? product.provider.name
      ? product.provider.name
      : null
    : null;

  //Nullish Coalsencing Operator Way
  //If the value is null then this option it will not works.
  const _providerCountry = product.provider.name ?? undefined;

  //Not work if the value is null
  const providerOrders = product.provider.orders ?? 1;
  // Should be null.  [Error]

  // Nullish not defined.
  const providerNotDefined = product.provider.notDefined ?? null;

  //Trick: chaining Operator
  const providerAddress = product?.provider?.address;

  //It works with Dynamic properties.
  const propertyName = 'price';
  const productPrice = product?.[propertyName]?.explore;
Enter fullscreen mode Exit fullscreen mode

Chain Operator Way

If a property doesn't exist or value is undefined then will returns undefined, keeping your code clean. If a property doesn't exist undefined will be returned. Let's see how this operator looks with the same example object:

  //Trick: chaining Operator
  const providerAddress = product?.provider?.address;

  //It works with Dynamic properties.
  const propertyName = 'price';
  const productPrice = product?.[propertyName]?.explore;

  //Works with Functions too.
  const productProviderPrice = product?.provider?.fPrice?.('x');
  //Result: 100;

  const _productProviderPrice = product?.provider?.fPricex?.('x');
  //Result: undefined
Enter fullscreen mode Exit fullscreen mode

NOT Compatible with: Internet Explorer, Firefox for Android, Opera for Android, and Samsung Internet Browser.


IIFE: Immediately-Invoked Function Expression

It's a function invoked immediately after it is defined (as the name says).

let hi = (() => {
  return 'Hello Dear World';
})();
//Define function and parenthesis before the semicolon.

console.log(hi); 
// Result = 'Hello Dear World'
Enter fullscreen mode Exit fullscreen mode

Function Closures

Combination of functions stacked or bundled together with access over outer layers or outer function's scope.

const functionLevelOne = () => {
  let day = 23;

  const functionLevelTwo = () => {
    day += 1;
    return day;
  }

  return functionLevelTwo;
}

console.log(functionLevelOne());
// Result: 24;
// It's calling the return function on level one.
Enter fullscreen mode Exit fullscreen mode

When to use spread operators?

Merge two arrays using spreads could impact on performance if it's a repetitive call. And if we call a function passing arguments like spread and that call is frequently. Use ...spread only when it's not a repetitive call or for a function's call but not as argument spread definition.

I will keep adding and updating tricks to this article frequently.

Find and Filtering

  • Find a record for key value:
let colors = [
  { id: 0, color: 'Red' },
  { id: 1, color: 'Green' },
  { id: 2, color: 'Blue' }
];
let greenColor = colors.find(color => color.color === 'Green');
Enter fullscreen mode Exit fullscreen mode

Filter Records by id value

let users = [
  { id: 0, name: 'John Smith' },
  { id: 1, name: 'Mary Smith' },
  { id: 2, name: 'Jane Foster' }
];

let filteredData = data.filter(path => path.includes('Smith'));
Enter fullscreen mode Exit fullscreen mode

Returns the name of users with the last name 'Smith'.

Iterations

Iterate between key,values for an object.

let myObject = { one: 1, two: 2, three: 3 };
Object.keys(myObject).forEach((key, value) => {
  //...do something
  console.log(key, value);
});
Enter fullscreen mode Exit fullscreen mode

Event Loop Essentials.

A Task queue is used by Javascript. Javascript tasks have the highest priority. Micro Tasks like promises have the second priority position; third place for Macro Tasks executed before (requestAnimationFrame) or after (setTimeout) to render.

console.log(1);
Promise.resolve().then(() => console.log(2));
setTimeout(() => console.log(3), 100);
console.log(4);
// 1 -> 4 -> 2 -> 3
Enter fullscreen mode Exit fullscreen mode

There are three ways to add your callback function(s) to the DOM element as the event callback.

  • InLine (Higher Priority)

    <div onclick="console.log('div')">Hello</div>
    
  • Bind Callback (Medium Priority)

    div.onclick = () => console.log('div');
    
  • Add/Remove Event Listener: Supports Multiple Callbacks associated with the same event. Supports Event bubbling and capturing.

    div.addEventListener('click', callbackOne);
    div.removeEventListener(callbackOne);
    

Bubbling

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    <span onclick="console.log('span')">
    </span>
  </p>
</div>
//span → p → div
Enter fullscreen mode Exit fullscreen mode

Bubbling: The innermost element → the second innermost element → … → the outermost element
Capturing: The outermost element → the second outermost element → … → the innermost element

Capturing is triggered earlier than bubbling

div.addEventListener('click', () => console.log('div'));
p.addEventListener('click', () => console.log('p'), { capture: true });
span.addEventListener('click', () => console.log('span'));
//Result: p → span → div
Enter fullscreen mode Exit fullscreen mode

div and span use bubbling, and p uses capturing.

Event Delegation

If you have a loop function with multiple callbacks that will affects the performance:

const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
  const li = document.createElement('li');
  li.textContent = `li-${i}`;
  li.id = `li-${i}`;
  li.addEventListener('click', e => console.log(e.target.id));
  ul.appendChild(li);
}
Enter fullscreen mode Exit fullscreen mode

Delegate one callback for all.

const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
  const li = document.createElement('li');
  li.textContent = `li-${i}`;
  li.id = `li-${i}`;
  ul.appendChild(li);
}
ul.addEventListener('click', e => console.log(e.target.id));
Enter fullscreen mode Exit fullscreen mode

Event Propagation

Stop propagation makes a halt to the propagation used by bubbling or capturing.

div.addEventListener('click', () => console.log('div'), true);
p.addEventListener('click', e => {
  e.stopPropagation();
  console.log('p');
});
span.addEventListener('click', () => console.log('span'), true);
Enter fullscreen mode Exit fullscreen mode

When user clicks

only will be logged 'p'.

XMLHttpRequest

Oldest fetch data in an asynchronous way

const oReq = new XMLHttpRequest();
oReq.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
oReq.send();
oReq.addEventListener('load', function () {
  console.log(this.responeText);
});
Enter fullscreen mode Exit fullscreen mode

Fetch

New way with more options than XMLHttpRequest, returns a promise

// Promise
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));
// async & await
const res = await fetch(url);
const data = await res.json();
console.log(data);
Enter fullscreen mode Exit fullscreen mode

Axios

It takes the best of XMLHttpRequest and fetch.

// Promise 
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
// async & await
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Your "Function Closures" example returns the functionLevelTwo function, not 24

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay