JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript (and webdev in general) is surprisingly broad, there's ALWAYS something to learn. There are so many handy tips & tricks in the language and learning even a couple of those will make you a better JS developer.



In this lesson we are going to learn how to set default values to variables destructured from a JavaScript object, which may come in handy if we'd like to avoid setting those variables to `undefined` because a certain field is not specified in the object we are destructuring from.

Add default values to variables destructured from a JavaScript object

In this lesson we'll learn how to refactor es5 functions into es6 arrow functions to decrease visual noise in our program. We'll take a step by step approach, increasing clarity with each rewrite.

Refactor es5 functions to es6 arrow functions

In this lesson we are going to learn how to remove unwanted properties from a JavaScript object following an example of an object containing sensitive data (such as password and bankBalance) and removing this kind of data from it.

To achieve that we are going to use two ES6 features: destructuring an object and the spread operator.

Remove unwanted properties from a JavaScript with ES6 spread operator

ES2019 introduces the Array.prototype.flat method. In this lesson, we'll flatten a multidimensional array using Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flat method. We'll then use the depth parameter to flatten a 3 dimensional array.

Use ES2019 Array.prototype.flat to Flatten Multidimensional Arrays

In JavaScript, we often end up composing one object out of several other objects. Luckily there's a convenient [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) which allows us to spread entries from one object to another.

Sometimes we only want to include something in the newly created object if a certain condition is met. In this lesson we are going to learn how to conditionally add entries to a JavaScript object using the spread operator.

Conditionally spread entries to a JavaScript object

Using Sets in ES6 to produce lists of unique objects is faster than using arrays, and less error prone than using objects. In this lesson, we explore the pitfalls of the object approach and the speed implications of the array approach. We will then instrument the array approach and the set approach to measure the number of operations each approach performs, and it's implications on program speed.

Use ES6 Sets to Improve Javascript Performance

Even though JavaScript is a very dynamic language, sometimes we want to be _extra_ sure that it's not possible to modify an object once it was declared. Luckily, there's a method called `Object.freeze` which allows us to freeze an object so it's not possible to modify it in any way whatsoever once it was initialized.

In this lesson we are going to learn how to use `Object.freeze` to ensure that it's not possible to modify an object containing user-specific data

Freeze a JavaScript object with an Object.freeze method

Sometimes it's necessary to have a fixed set of properties on a JavaScript object, while also maintaining the option of changing those properties.

In this lesson we are going to learn how to use `Object.seal()` method to prevent new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed.

Prevent adding/deleting properties in a JavaScript object with Object.seal() method

Sometimes we'd like to ensure that some `console.log` are *really* visible one someone opens dev tools window. For instance, we could want to warn our less tech-savvy users that they shouldn't paste anything someone else send them to console, because their account might get stolen.

In this lesson we are going to learn how to style `console.log` messages with CSS properties so we can make our messages stand out from the crowd.

chrome-devtools

Style console.log messages with CSS

Chrome DevTools provide many handy utility functions that we can use to make debugging faster and easier so we can fix the bug and move on.

In this lesson we are going to learn how to use `$`, `$$` utilities built-in in Chrome DevTools to get references to single and many DOM elements and how to use `$0 - $4` variables to reference object selected using Inspect Element tool.

Use Chrome DevTools console utilities to make debugging easier

ES2019 introduces the Array.prototype.flatMap method. In this lesson, we'll map and flatten a multidimensional array using Array.prototype.map, Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flatMap method. Then, we'll see how we can use empty arrays in our map function to act as a filter before mapping. 

JavaScript Handy Tips & Tricks

Tomasz Łakomy

Course Content