/**
* Here comes the function description
*
* @param {string} name - This name is a string
* @returns {string} It returns a string
* @example
* getName('Son-Goku')
*/
function getName(name) {
return name
}November 10th, 2019
A good code documentation is mandatory for successful development. One way is to use JSDoc. It is a markup language used to annotate Javascript code. This can give you a brief overview of the codes functionality.
To describe a functions parameters, we use types. The basic syntax of a type is @type {typeName}, for instance @param {string}. The following table contains possible ways to write the type:
| Syntax | Description |
|---|---|
@param {number} [num] |
Optional parameter |
@param {number} [num=1] |
Optional parameter with default value |
@param {...number} num |
Variable number of that type |
{?number} |
Nullable type |
{!number} |
Non-Nullable type |
@param {(number|string)} |
Multiple types |
@param {*} n |
Any type |
@param {...number} num |
Variable number of that type |
@param {string[]} n |
Array of strings |
JSDoc provides the following default typeNames:
// boolean: in form of a question
const isVisible = true
const hasChildren = false
// constant: a true constant value
const EULER_NUMBER = Math.E
const PI = Math.PI
// string: singular
const simpleString = 'Hello World'
const anotherString = 'Lorem ipsum'
// object: mostly singular
const someData = {...}
// array: always plural
const arrayItems = [...].map(item => item)
// function: combination of verb and noun
function getData() {...}
function findUser() {...}
// class: first letter is always capital
class ClassName {...}October 4th, 2019
It's always good to have a naming convetion so you can immediately see if you're working with a class, function or a boolean.
const getBottomVisiblity = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight)
// output: true
getBottomVisiblity()October 1st, 2019
Returns true if the document height plus the currently scrolled pixel number is larger/equal to the document's content height or rather document height.
Apply that function to a scroll event listener and you can always check if the page bottom is visible.
const arrayToHtmlList = (array, listClass) =>
(el => (
(el = document.querySelector('.' + listClass)),
(el.innerHTML += array.map(item => `<li>${item}</li>`).join(''))
))()
arrayToHtmlList(['hello', 'world', '42'], 'classOfTheList')September 29th, 2019
This snippet converts all elements of an array to a list of <li> tags and appends them to the list of the given class.
const allEqual = array => array.every(value => value === array[0])
// output: false
allEqual([42, 1, 'hello'])
//output: true
allEqual([42, 42, 42])September 27th, 2019
The function checks if every element of the array is strictly equal to the first element.