DEV Community: StormyTalent

JavaScript Interview Coding Test Problem 8

StormyTalent — Mon, 18 Jul 2022 03:09:21 +0000

Learn how to create a queue when the only data structure you have access to is a stack.
Instructions
Write a function that creates a queue using two stacks. Besides these twD stacks, you may not use any additional data structures in your implementation. It should have the methods enqueue , dequeue , and s ize .

Feel free to change the code provided below when you start. It’s meant to be a guide.
Solution

1   class Queue {
2     constructor() {
3       this._enqueueStorage[];
4       this._dequeueStorage[];
5     }
6
7     enqueue(1tem) (
8       this. enqueuestorage.push(item); 9  }
10
11    dequeue( ) (
12      if(this. dequeueStorage.length) (
13        return this. dequeueStorage.pop();
14  }
15
16  1f(th1s ._enqueue5torage . 1ength) (
17    while(this. enqueue5torage.length) {
18    this. dequeuestorage.push(this. enqueue5torage.pop()); 19
20
21      return this. dequeueStorage.pop(); 
22
23
24     console.warn('Attempting to dequeue from an empty queue');
25  return undefined; 26

How it Works
We have two storage stacks, this ._enqueueStorage and
this . dequeuestorage . To see how they interact, let’s go thrDugh an example.
Enqueuing
We want to put 5 elements onto the queue: 1, 2, 3, 4, and s . We enqueue
all of these, and they all go into enqueuestorage .

enqueuestorage: [1, 2, 3, 4, 5] dequeuestorage: []

We now want to dequeue an item. Let’s dive into our dequeue function.
Dequeuing
We skip the if-statement on line 12 since dequeuestorage is empty. We move
on to line 16.

Inside that if-statement (line 16), we pop every item off of enqueuestorage and put them into dequeuestorage . When the while-loop (lines 17 - 19) is finished, enqueuestorage is empty and dequeuestorage has the five items, but in reverse.
enqueuestorage: [) dequeuestorage: [5, 4, 3, 2, 1]
On line 21, we pop dequeuestorage and return the item, i.
enqueuestorage: [] dequeuestorage: [5, 4, 3, 2]
If we want to dequeue again, we can enter the dequeue method once more. This time we go into the first if-statement and pop an item off of dequeuestorage and return it.
enqueuestorage: [] dequeuestorage: [5, 4, 3]
We can keep dequeuing if we like. As long as dequeuestorage has items in it, the last item will be popped off and returned to us.
Summary
These steps together make it so our queue functions properly. Enqueuing pushes items onto one stack. Dequeuing pops them from the second stack. When the second stack is empty and we want to dequeue, we empty the first stack onto the second, reversing the order of items.
Enqueue Time
Every enqueue event is a simple push onto a stack. This means that each enqueue has a time complexity of:
0(1)
Dequeue Time
So, for most cases, we have o(1) , and for a few rare cases, we have o(n) We can merge these into a single time complexity.
Queue Lifecycle
Let’s track the life of three items in our queue. Starting with an empty queue, let’s enqueue i , 2, and 3 . This puts them on our first stack.
enqueuestorage: [1, 2, 3] dequeuestorage: []
So far, we’ve performed 3 operations: inserting each of those items onto the stack.
Let’s dequeue all three items. First, all items from enqueuestorage get
transferred to dequeuestorage .
enqueuestorage: [] dequeuestorage: [1, 2, 3]
We’ll say that a transference is 1 Dperation. This is another 3 operatiDns total, bringing us up to 6.

JavaScript Interview Coding Test Problem 7

StormyTalent — Mon, 18 Jul 2022 02:50:30 +0000

Learn how to determine if brackets are balanced or not. This is an actual problem that software developers must occasionally solve and many dev tools have their own implementation of it. We’ll learn how a code editor can pick up our mistakes and highlight exactly which brackets don't match.
Instructions
Given a string, return true if it contains all balanced parentheses ( ) curly- brackets () , and square-brackets [].
Input: String
Output: Boolean
Examples
is8alanced("(x + y) - (4)”); // -> true is8alanced("(((10 ) (}) ((?)(:)))”); // -› true isBalanced("[{()}]”); // -› true is8alanced("(50)(”); // -> false
isBalanced("[{]}”); // -› false
Solution

2   const openstack = [];
3   const open = '([{';
4   const close = ')]}';
5   const matches - {
6   ')': '(',
7   ']': '[',
8   '}': '{'
9   };
10
11  for (let i - 0; i ‹ str.length; i++) (
12  const char  str[i]; 13
14  // If it's an open bracket, push it into our array
15      if(open.includes(char)) (   
16      openstack.push(char);   
17          
18      // If it's a close bracket  
19      } else if(close.includes(char)) (   
20      // pop an item from the open brackets array.    
21      const lastopenBracket   openStack.pop();    
22          
23      // If the open and close bracket don't match,   return false
24      if(matches[char] !== lastopenBracket) { 
25      return false;   
26          
27      

28      

29          
30      // Ensures there are no characters left on the stack    
31      return !openStack.length;   
32  }

How it Works
In our for-loop, we process every character. If the current character is an open bracket, we push it onto our openstack array.
If it’s not a bracket, we do nothing.
Once we’re done processing the string, we have to check to make sure there
are no open brackets left on our stack. If there are, our string is unbalanced.
Time
This is a solutiDn with a time complexity Df:
0(n).
Every character is prDcessed in a loop. Inside the lDop, we perform only count-time actions.
Space
The space complexity is:
0(n).
Characters are stored in an array, generally proportional to the size of the input.
Conclusion
There are many ways to skin this cat. Another solution wDuld have been to have two pointers, one at the beginning and one at the end, moving towards the middle. They would be checking to make sure that brackets matched until they met. This would also be an o(n) solution.

JavaScript Interview Coding Test Problem 6

StormyTalent — Mon, 18 Jul 2022 01:54:00 +0000

Learn two different ways to complete the search of a sorted array. We'll go over the brute force method and a more elegant method.
Sorted Search
Instructions
Write a function that accepts a sorted array of integers and a number. Return the index of that number if present. The function should return -1 for target values not in the array.
Input: **Array of Integers, Integer
**Output: **An integer from -1 onwards.
**Solution 1

1   function search(numbers, target) {
2     for(let i = 0; i < numbers.length; i++) {
3       if(numbers[i] === target) {
4         return i;
5       }
6     }
7
8     return -1;
9   }

This solution is very simple. We go through the array and try to find our target.
Time
Since we're going through the whole array, the time complexity is: O(n).
Space
Since we store a set number of variables, space complexity is: 0(1).
Binary Search
We can come up with a better solution. Since the array is sorted, we can essentially jump around the array until we find the index we're looking for.
Finding a Word
Imagine looking for a word in a dictionary. Would it be efficient to go through every single word until we find the one we want? No, that would be horribly inefficient.
A better approach would be to open the dictionary halfway. If our word is alphabetically before the words in the middle page, we know our word is in the first half of the book.
We can then flip to ~1/4 of the way through the dictionary. Again, repeating the above process, we can eliminate another half of the remaining pages.
We can repeat the above steps again and again until we find our word. This ensures that even if the dictionary is huge, we can find our word much faster than if we were to go through each word individually.
Scaling
In fact, if we double the size of the dictionary by adding in more words, we would only have to repeat this process one more time. That's not much more work even though the dictionary is much thicker.
Let's turn this approach into code.
Solution 2

1   function binarySearch(numbers, target) {
2     let startindex = 0;
3     let endindex = numbers.length - 1;
4
5     if(target < numbers[startindex] || target > numbers[endindex]) {
6       return -1;
7     }
8
9       while(true) {
10    if(numbers[startindex] === target) {
11      return startindex:
12      }
13
14      if(numbers[endindex] === target) {
15        return endindex; }
17
18  if(endindex - startindex <= l) {
19  //indicates the number isn't present
20  return -1;
22
23  const middleindex = Math.floor((startindex + endindex)/2);
24
25      if(target > numbers[middlelndex]) {
26        Startindex = middlelndex + 1;
27      } else if(target < numbers[middlelndex]) {
28        endindex = middleindex - 1;
29      } else {
30        return middlelndex;
31      }

How it Works
We start by ensuring that the target is within range of the array, returning
false otherwise.

In the loop, we first check if the target is equal to the values at the beginning and end of our array. Then we check if the target is larger or smaller than the value at the center.
If it's smaller than the value at the center, we know that it's going to be somewhere in the 1st half of the array. We can focus on that.
If it's larger, we know that it can't possibly be in the first half, so we can focus on searching the 2nd half.
Over and over, we cut the amount we have to search by half until we close in on its location. If we find it along the way, we can stop and return its index.

JavaScript Interview Coding Test Problem 5

StormyTalent — Sat, 09 Jul 2022 13:39:08 +0000

Creating a Queue with Limited Data Structures
Learn how to create a queue when the only data structure you have access to is a stack.
Instructions

JavaScript Interview Coding Test Problem 4

StormyTalent — Sat, 09 Jul 2022 12:04:07 +0000

Balanced Brackets
Learn how to determine if brackets are balanced or not. This is an actual problem that software developers must occasionally solve and many dev tools have their own implementation of it. We’ll learn how a code editor can pick up our mistakes and highlight exactly which brackets don't match.
Balanced Brackets
Instructions
Given a string, return true if it contains all balanced parentheses() curly-brackets(), and square-brackets []
Input: String
Output: Boolean
Examples
is8alanced("(x + y) - (4)”); // -> true is8alanced("(((10 ) (}) ((?)(:)))”); // -› true isBalanced("[{()}]”); // -› true is8alanced("(50)(”); // -> false
isBalanced("[{]}”); // -› false

1   funct1on 1sBa1anced(str) {
2   //  Your code here
        }

Solution

2   const openstack = [];
3   const open = '([{';
4   const close = ')]}';
5   const matches - {
6   ')': '(',
7   ']': '[',
8   '}': '{'
9   };
10
11  for (let i - 0; i ‹ str.length; i++) (
12  const char str[i]; 13
14  // If it's an open bracket, push it into our array
15  if(open.includes(char)) (   
16    openstack.push(char); 
17          
18    // If it's a close bracket    
19    } else if(close.includes(char)) ( 
20      // pop an item from the open brackets array.    
21      const lastopenBracket   openStack.pop();    
22          
23      // If the open and close bracket don't match,    
            return false
24      if(matches[char] !== lastopenBracket) { 
25        return false; 
26      }   
27      
28
30  // Ensures there are no characters left on the stack    
31  return !openStack.length;

How it Works
In our for-loop, we process every character. If the current character is an open bracket, we push it onto our openstack array.
If it’s not a bracket, we do nothing.
Once we’re done processing the string, we have to check to make sure there
are no open brackets left on our stack. If there are, our string is unbalanced.
Time
This is a solutiDn with a time complexity Df:
0(n)
Space
The space complexity is:
0(n)
Characters are stored in an array, generally proportional to the size of the input.
Conclusion
There are many ways to skin this cat. Another solution wDuld have been to have two pointers, one at the beginning and one at the end, moving towards the middle. They would be checking to make sure that brackets matched until they met. This would also be an o(n) solution.

JavaScript Interview Coding Test Problem 3

StormyTalent — Sat, 09 Jul 2022 10:57:55 +0000

Sorted Search
Learn two different ways to complete the search of a sorted array. We'll go over the brute force method and a more elegant method.

Sorted Search
Instructions
Write a function that accepts a sorted array of integers and a numher. Return the index of that number if present. The functiDn should return -i for target values not in the array.
Input: Array of Integers, Integer

Output: An integer from -i onwards.
Examples
search([1, 3, 6, 13, 17], 13); // -> 3
search([l, 3, 6, 13, 17], 12); // -> -1

1   function search(numbers, target) {
2   // Your code here 3 }

Solution 1

1   function search(numbers, target) {
2   for(let i = 0; i < numbers.length; i++) {
3       if(numbers[i] === target) {
4         return i; 
5       }
6   }   
7           
8   return -1;

This solution is very simple. We go through the array and try to find Dur target.
Time
Since we’re going through the whole array, the time complexity is:
O(n)
Space
Since we store a set number of variables, space complexity is:
O(1)
Binary Search
We can cDme up with a better solution. Since the array is sDrted, we can essentially jump around the array until we find the index we’re looking for.
Finding a Word
Imagine looking for a word in a dictionary. Would it be efficient to go through every single word until we find the one we want? No, that would be horribly inefficient.
A better approach would be to Dpen the dictiDnary halfway. If our word is alphabetically before the words in the middle page, we know our word is in the first half of the hoDk.
We can then flip to -1/4 of the way through the dictionary. Again, repeating the above process, we can eliminate another half of the remaining pages.
We can repeat the above steps again and again until we find our word. This ensures that even if the dictionary is huge, we can find Dur word much faster than if we were to go through each word individually.
Scaling
In fact, if we double the size of the dictionary by adding in more words, we would only have to repeat this process one more time. That’s not much more work even thDugh the dictionary is much thicker.
Let’s turn this approach into code.
Solution 2

function binarySearch(numbers, target) (
let startIndex = 0;
let endIndex = numbers.length - 1;
if(target ‹ numbers[startlndex] || target > numbers[endIndex]){
  return--1;
}
while(true) {
  if(numbers[startlndex] === target) {
    return tartIndex;
  }
14  if(numbers[endIndex].===-target).{
15  return.endlndex;
16  ........}
17
18  .- ......if(endIndex. -.startIndex. ‹=-1).{
19  //-indicates-the-number-isn't-present
20  return.-1;
21  ........}
22
23   
      const middleIndex = Math.floor((startIndex + endIndex) / 2);
24
25  if(target › numbers[middleIndex]) (
26   startIndex = middleIndex + 1;
27  } else if(target ‹ numbers[middlelndex]) { 
          endIndex = middleIndex - 1;
    } else {
    return middleIndex;
  }

}

How it Works
We start by ensuring that the target is within range of the array, returning
false Otherwise.

In the loop, we first check if the target is equal to the values at the beginning and end of Dur array. Then we check if the target is larger Dr smaller than the value at the center.
If it’s smaller than the value at the center, we know that it’s going to be somewhere in the 1st half of the array. We can focus on that.
If it’s larger, we know that it can’t possibly be in the first half, so we can focus on searching the 2nd half.
Over and over, we cut the amount we have to search by half until we close in on its locatiDn. If we find it alDng the way, we can stDp and return its index.
Time
We’re eliminating half of the array in every iteration of our loop, so time
complexity is O(log2(n)), which simplifies to:
O(log(n))
Space
The space complexity is again:
O(1)
Conclusion
Dealing with sDrted data allows us to make many optimizations. We knDw the relationship of an item to the items before it and after it, allowing us to jump around the data and hone in on the value we’re looking for.
If data comes in unsorted, sometimes it would be wise to sort it ourselves. If we have a sDlution with o(n^2) time cDmplexity, it’s worth it to see if we can sortthedaTa.
Sorting it would be an o(n * log(n) ) process, which is better than o(n•2) . Once it’s sorted, the next steps are often linear or logarithmic, meaning they are insignificant compared to the sorting itself.

JavaScript Interview Coding Test Problem 2

StormyTalent — Sat, 02 Jul 2022 14:30:56 +0000

Maximum Profits
We'll discuss how to write a function that can reap the maximum profits from a day's stock data. We'll discuss both the simple brute-force solution and an elegant solution to this problem.

Instructions
Suppose we could access yesterday’s prices for a certain stock as a chronological list. Write a function that takes the list and returns the highest profit possible from one purchase and one sale of the stock yesterday.
For example, a stock price list of [18, 7, 5, 8, 11, 9] Shows that the stock started at i8 and ended at , going through the numbers chronologically. There is at least a 1-minute difference between the stock prices.
Taking that array as input, our function should return 6, the maximum possible profit from buying when the price was s and selling when the price was ii.
If no profit can be made, return 8.

No “shorting” — you must buy befDre you sell. You may not buy and sell in the same time step.
Input: Array of Numbers
Output: Number

Hints
• We’ll have to convert this array of stock prices into possible profits
• Think about the fact that this is a chronologically ordered list.

function getMaxProfit(prices) {
    // Your code here 3
  }

Solution
let count = 0; 2
function getMaxProfit(prices) {
const possibleProfits = [];

for(let i = 0; i < prices.length; i++) (
for(let j = i; j < prices.length; j++) {
possibleProfits.push(prices[j] - prices[i]);
count++;
return Math.max(...possibleProfits);
}

getMaxProfit([1, 2, 3]);
console.log(count);
}

The Loop
The second line in the loop updates our minimum price if necessary.
The third line updates the maximum profit if the profit from buying at our current minimum price and selling at the current number is greater than the current max profit.
At the end, we return that maximum profit.

Time
This time, we go through the array only once, giving us an efficiency of:
0(n)
Much better than o(n^2)

Space
We don’t create any arrays or store values across lDop iteratiDns. All we track is the two variables declared at the beginning. We maintain the same amount of information regardless of array size, so we have a space complexity of
0(1)
It’s the best we can get.
Conclusion
This is the solution that would win the interviewer over. It’s difficult and it shows the ability to logically deal with hoth numbers and time. It’s elegant, short and sweet. It has the best time and space complexities imaginable for this type of problem.
Take away the idea that there are times when you can turn an o(n^2) solution into an O(n) solution with some critical thinking. Occasionally, keeping track of important values and updating them in the loop will vastly speed up a function.

JavaScript Interview Coding Test Problem 1

StormyTalent — Sat, 02 Jul 2022 09:32:22 +0000

Instructions
Write a function that accepts two parameters, both arrays. The arrays can have both strings and numbers. Return true if the second array is a subset of the first.
In other words, determine if every item in the 2nd array is also present somewhere in the 1st array.
Input: Array of Numbers & Strings, Array of Numbers & Strings
Output: Boolean
Examples#

arraySubset([2, 1, 3], [1, 2, 3]); // -> true
arraySubset([2, 1, 1, 3], [1, 2, 3]); // -> true
arraySubset([1, 2], [1, 2, 3]); // -> false
arraySubset([1, 2, 3], [1, 2, 2, 3]); // -> false

Hints#

This problem has multiple solutions with different time complexities.
We'll need to consider how to deal with repeats, such as wehn an item is present twice.

function arraySubset(arr, sub) {
  // Your code here
}

Solution 1#

function arraySubset(arr, sub) {
  if (sub.length > arr.length) {
    return false;
  }
  for(let i = 0; i < sub.length; i++) {
    const arrIndex = arr.indexOf(sub[i]);
    if (arrIndex === -1) {
      return false;
    }
    delete arr[arrIndex];
  }
  return true;
}

How it Works#
This function starts with a simple check. The subset can't be larger than the superset, by definition.
We continue by looping through every item in the second array. Our function then finds the index of this item in the first array. If that index is -1, indicating that it is not present, we can return false immediately.
Otherwise, we delete it from the first array, This ensures that if it is encountered again in the second array, it can't use the same value in the first array.
Once we get through the entire second array we can return true.

Time#
We have two inputs, so we'll refer to their lengths as m and n.
We loop over n, indicating O(n) already. Inside the loop, there is a call to indexOf(). This itself is a loop, as the engine has to go through the array to find the index.
So we're at: O(m * n),#
which is our final time complexity.

Space#
We use the same amount of space no matter how large the inputs, so it's: O(1).#

Caveats#

Our function is not a pure function. We delete items out of the first array. To get around this, we could first make a copy of the first array and work with that instead. It would not change time complexity but would increase space complexity to O(m).Solution 2 works around this problem.

function arraySubset(arr, sub) {
  if(sub.length > arr.length) {
    return false;
  }

  const arrCount = {};

  for(let i = 0; i < arr.length; i++) {
    const item= arr[i];
    if(arrCount[item] !== undefined) {
      arrCount[item]++;
    } else {
      arrCount[item] = 1;
    }
  }

  for(let i = 0; i < sub.length; i++) {
    canst currentitem = sub[i];
    if(arrCount[currentitem] === undefined) {
      return false;
    }

    arrCount[currentitem]--;
    if(arrCount[currentitem] === 0) {
      delete arrCount[currentitem];
    }
  }

  return true;
}

How it Works# **
**Time#
Every object manipulation performed here has O(l) efficiency so they won't factor into our calculations.
Looping over the second array gives us O(n). Since it's not inside the first loop, we add the two variables, giving us:
O(m + n).#
This is much better than o(m * n).

Space#
In this solution, we end up malting a copy of the items inm , so our space complexity is O(m).

Extending the Problem#
Our solution works for arrays that contain only numbers and strings. What if we wanted to make this function work for arrays that contain any type of data?

Objects#
Using an object wouldn't work. Object keys can only be strings. Any key we insert into the object would automatically be coerced to a string.

50+ hints JS(ES6+) developer must know (10th part)

StormyTalent — Sun, 12 Jun 2022 01:46:28 +0000

My thanks to everybody who follows to this tenth, the last blog of JS hint.
Today we are going to see some useful cases of Accessors, Events, and JQuery.
1. Accessors

Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal('hello').

// bad
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// good
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}

If the property/method is a boolean, use isVal() or hasVal().

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}

It’s okay to create get() and set() functions, but be consistent.

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}

2. Events
When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass an object literal (also known as a "hash") instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:

// bad
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // do something with listingID
});

// good
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingID
});

3. jQuery

// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

// good
const $sidebarBtn = $('.sidebar-btn');

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// good
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

For DOM queries use Cascading $('.sidebar ul') or parent > child $('.sidebar > ul'). jsPerf

Use find with scoped jQuery object queries.

// bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();

Thanks for your time.
Best regards.

50+ hints JS(ES6+) developer must know (9th part)

StormyTalent — Wed, 08 Jun 2022 13:49:05 +0000

Hi, everybody. Here is StormyTalent again!
And today we are going to see some more hints what JS developer must know.

1. Naming Conventions
Avoid single letter names. Be descriptive with your naming.

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

Use camelCase when naming objects, functions, and instances.

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

Use PascalCase only when naming constructors or classes.

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

Do not use trailing or leading underscores.

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

// good, in environments where WeakMaps are available
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

Don’t save references to this. Use arrow functions or Function#bind.

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

A base filename should exactly match the name of its default export.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

Use camelCase when you export-default a function. Your filename should be identical to your function’s name.

function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;

Use PascalCase when you export a constructor / class / singleton / function library / bare object.

const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;

Acronyms and initialisms should always be all uppercased, or all lowercased.

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const requests = [
  // ...
];

You may optionally uppercase a constant only if it (1) is exported, (2) is a const (it can not be reassigned), and (3) the programmer can trust it (and its nested properties) to never change.

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

I would be happy if you read this material and gain a little bit inspirations.

50+ hints JS(ES6+) developer must know (8th part)

StormyTalent — Wed, 08 Jun 2022 13:42:16 +0000

Almost end of this tips for JS developer must know.
Today is 8th part and I will explain about Commas, Semicolons, Type Casting & Coercion.

1. Commas
Leading commas: Nope.

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};

Additional trailing comma: Yup

// bad - git diff without trailing comma
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - git diff with trailing comma
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

// bad
function createHero(
  firstName,
  lastName,
  inventorOf
) {
  // does nothing
}

// good
function createHero(
  firstName,
  lastName,
  inventorOf,
) {
  // does nothing
}

// good (note that a comma must not appear after a "rest" element)
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // does nothing
}

// bad
createHero(
  firstName,
  lastName,
  inventorOf
);

// good
createHero(
  firstName,
  lastName,
  inventorOf,
);

// good (note that a comma must not appear after a "rest" element)
createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
);

2. Semicolons
Yup. eslint: semi

// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// bad - raises exception
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
function foo() {
  return
    'search your feelings, you know it to be foo'
}

// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

// good
const reaction = "No! That’s impossible!";
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// good
function foo() {
  return 'search your feelings, you know it to be foo';
}

3. Type Casting & Coercion
Perform type coercion at the beginning of the statement.

Strings: eslint: no-new-wrappers

// => this.reviewScore = 9;

// bad
const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()

// bad
const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string

// good
const totalScore = String(this.reviewScore);

Numbers: Use Number for type casting and parseInt always with a radix for parsing strings.

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

If for whatever reason you are doing something wild and parseInt is your bottleneck and need to use Bitshift for performance reasons, leave a comment explaining why and what you’re doing.

// good
/**
 * parseInt was the reason my code was slow.
 * Bitshifting the String to coerce it to a
 * Number made it a lot faster.
 */
const val = inputValue >> 0;

Note: Be careful when using bitshift operations. Numbers are represented as 64-bit values, but bitshift operations always return a 32-bit integer (source). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. Discussion. Largest signed 32-bit Int is 2,147,483,647:

2147483647 >> 0; // => 2147483647
2147483648 >> 0; // => -2147483648
2147483649 >> 0; // => -2147483647

Booleans

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

Thanks for your time.

50+ hints JS(ES6+) developer must know (7th part)

StormyTalent — Wed, 08 Jun 2022 13:34:48 +0000

Hi, StormyTalent again. And today we are going through best usages of "Control statements, comments, whitespace"

1. Control statements
In case your control statement (if, while etc.) gets too long or exceeds the maximum line length, each (grouped) condition could be put into a new line. The logical operator should begin the line.

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

// good
if (foo === 123 && bar === 'abc') {
  thing1();
}

Don't use selection operators in place of control statements.

// bad
!isRunning && startRunning();

// good
if (!isRunning) {
  startRunning();
}

2. Comments
Use /** ... */ for multiline comments.

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

Use // for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it’s on the first line of a block.

// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

Start all comments with a space to make it easier to read.

// bad
//is current tab
const active = true;

// good
// is current tab
const active = true;

// bad
/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

Use // FIXME: to annotate problems.

class Calculator extends Abacus {
  constructor() {
    super();

    // FIXME: shouldn’t use a global here
    total = 0;
  }
}

Use // TODO: to annotate solutions to problems.

class Calculator extends Abacus {
  constructor() {
    super();

    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}

3. Whitespace

Use soft tabs (space character) set to 2 spaces.

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

Place 1 space before the leading brace.

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

Place 1 space before the opening parenthesis in control statements (if, while etc.). Place no space between the argument list and the function name in function calls and declarations.

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

Set off operators with spaces.

// bad
const x=y+5;

// good
const x = y + 5;

End files with a single newline character.

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;
// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵

// good
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵

Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which emphasizes that the line is a method call, not a new statement.

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);
const svg = leds.enter().append('svg:svg');
svg.classed('led', true).attr('width', (radius + margin) * 2);
const g = svg.append('svg:g');
g.attr('transform', `translate(${radius + margin},${radius + margin})`).call(tron.led);

Leave a blank line after blocks and before the next statement.

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

Do not pad your blocks with blank lines.

// bad
function bar() {

  console.log(foo);

}

// bad
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

// bad
class Foo {

  constructor(bar) {
    this.bar = bar;
  }
}

// good
function bar() {
  console.log(foo);
}

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

Do not use multiple blank lines to pad your code.

// bad
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;


    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }


  getAge(today, birthday) {
    // ..
  }
}

// good
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }

  getAge(today, birthday) {
    // ..
  }
}

Do not add spaces inside parentheses.

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad
if ( foo ) {
  console.log(foo);
}

// good
if (foo) {
  console.log(foo);
}

Do not add spaces inside brackets.

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good
const foo = [1, 2, 3];
console.log(foo[0]);

Add spaces inside curly braces.

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per above, long strings are exempt from this rule, and should not be broken up.

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// good
$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));

Require consistent spacing inside an open block token and the next token on the same line. This rule also enforces consistent spacing inside a close block token and previous token on the same line.

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];

// good
var foo = 1, bar = 2;
var arr = [1, 2];