home
aboutsubscribe

Favourite JS Syntax

March 28, 20201 min read

Photo by Irvan Smith on Unsplash

JavaScript both fascinates and frustrates me as a beginner.

Here are some JS syntax that I find elegant and syntactically lucid for a newbie.

Note: some of the examples will be shown in React’s JSX, but the syntactic concept applies to plain JavaScript as well.


1) Ternary operator

A more elegant and simple way of writing “if else” statement.

Syntax -
(condition X)
? (expression if X is truthy)
: (expression if X is falsy)

Note that the operator can only execute expressions, not statements (e.g. return x) .

Sample use cases:

  • display different components or UI elements based on state
{ !isLoading
?
<Layout>your content</Layout>
//if isLoading is false
:
<Spinner text="Loading your cart.." />
//if isLoading is true
}
  • toggle different class names based on state
<img
className={
activeThumbnail
? 'active-thumbnail' : 'not-active-thumbnail'}
onClick={() => setActiveThumbnail(true)}
>
  • logic for updating cart item quantity
(count === 0)
? removeFromCart(cartItems, product)
: cartItems.forEach(cp => {
if (cp.id === product.id) {
cp.count = count;
}
})

Bonus: ternary operators can be chained as well similar to for if/else if/else if/else chain.


2) Short-circuit evaluation / conditional

AND &&

A && B // if A is truthy, B will be evaluated and expressed

example: we show this UI only if there is item in our cart

{ cartItems.length > 0 &&
<div>some UI</div>
}

which is essentially the conventional IF statement.

OR ||

A || B // B will only be evaluated and expressed if A is falsy

example: this will display news if there is news. else, it will display a message

<div>
{this.state.news} || "you have no news"
</div>

3) spread operator (…)

There are many different uses for object/array spread operator.

A use case I like is a clear and easy way to create or copy an object, instead of using Object.assign().

example 1: in a Redux reducer function to create new state

case SEARCH_PRODUCTS:
return {
...state,
filteredProducts: action.payload
}
case SORT_PRODUCTS:
return {
...state,
price: action.payload.price,
filteredProducts: action.payload.filteredProducts
}

example 2: creating a new array from different arrays instead of using concat()

newArray = [...array1, ...array2, ...array3];

example 3: adding items into an array in any order you need, instead of limiting to adding at the start or end of array using push() or unshift():

let pokemon = ['a','b','d'];
pokemon = [...pokemon, 'e','f','g'] ;
//quick way to push items to array
// technically creating new array
pokemon = ['e', ...pokemon, 'f', 'g'];
//insert items any where

example 4: assigning variables to elements in an array via Array Destructuring (similar can be done with Object Destructuring)

const rgb = [255, 200, 0];
const [red, green, blue] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);
// R: 255, G: 200, B: 0

4) array.map()

Array.map() - not to be confused with Map object - can be used to iterate over each array’s items and apply a function over them:
e.g. let newArray = oldArray.map( a => a+1 )

example: from a "products" array, map out UI for each product in a product listing page

const productItems = products.map(product => (
<div className='card' key='product.id'>
<Link to={`/shop/product/${product.id}`}>
...

5) honorary mentions

Array.reduce()

Array.some()

Array.every()

Top modern JavaScript books:

  1. JavaScript Mental Model by Dan Abramov
  2. You Don't Know JS
  3. Eloquent JavaScript
  4. Javascript.info
  5. JavaScript the Core


Thank you for reading

If you'd like a monthly email on new posts, please pop your email here.

If you like this article, please click on the meaningless heart icon below.

0 loves




© 2020 yinhow

built with

Gatsby Logo