JavaScript 101

A dialy used javascript code repository

Define functions (3 styles)

Style 1

// regular style.
function helloWorld() {
  console.log("hello world")
}

// call the function
helloWorld()

Style 2

// assigned to a constant
const helloWorld = function () {
  console.log("hello world")
}

// call the function
helloWorld()

Style 3

This type of function declaration often use in react application.

// arrow function.

const helloworld3 = () => {
  console.log("hello world")
}

// call the function
helloWorld()

Array map

Example 1

const myArray = ["JS", "CSS", "HTML5", "PHP", "JAVA"]

myArray.map((value, index) => {
  console.log(value)
  console.log(index)
})

Example 2

const myNumbers = [1, 2, 3, 4, 5, 6]

const newMyArray = myNumbers.map((val) => {
  return val * 4
})

Output: [4,8,12,16,20,24]

Template literals

Example: 1

If isBlobUrl(url) returns true then output class name will be my-class-img is-loading. Else, it outputs my-class-img

<div className={`my-class-img ${ isBlobUrl(url) ? "is-loading" : "" }`} >

Conditional

Example: 1

If isBlobUrl(url) returns true then the <Spinner /> component will be excuted.

{
  isBlob(url) && <Spinner />
}

Example: 2

If the URL is true, then application will print Do something here.

{
  url && <div>Do something here</div>
}

Acknowledgement:

https://bluewindlab.net