Mastering JavaScript(2018) in 10 Minutes

Daniel Sepulveda
Sep 5, 2018 · 5 min read

Let’s Go…

  1. Let const var

with let you can declare a variable inside a block of code without affect the value declared of the same variable outside the code in this case the block code if

You can use const to declare a variable inside the code that you know will not change

use var to declare global variables in your code

2. Template Literals

without template literals

with template literals

to write this string you need to use `` (Grave accent write AltGr + } on ubuntu) and use ${} to pass the variable that you want to print.

now you understand template literals!

3. Arrow Functions

without arrow functions:

with arrow functions:

you declare the function with =>

the arrow functions don’t need a return statement only on simple arrow functions here one example of a complex arrow function:

4. Ternary IF

in these case we use a single line to implement an if statement, the ? evaluates the condition condition ? yes : no

5. for…in

Without for…in:

With for…in:

the for in iterates all the indexes off an array and return all the elements of the array in this case like for loop in python.

6. console.error | console.log

probably you use console.log() to print errors in the console however we have console.error() to show errors in the console

let’s make some mistakes

7. Arrays Functions(map, forEach, filter, reduce, sort)

to explain this functions first we are going to create an array of numbers

map: this function return a new array of elements

forEach: run thought the array and return a result

filter: compares a value and return the true values, you can use this to search a determinate value inside an array

reduce: probably the most complex function but the basic principle is go thought the array and return the summation of the array.

sort: the basic function of the sort functions is order an array

8. Spread operator

without spread operator:

with spread operator

9. Destructuring

you can unpack elements from an array or object

without Destructuring:

with Destructuring:

10. Promises

in Javascript promises has three states

for example if you can eat a Banana

pending: You wait for eat the banana tomorrow.

resolved: You eat a fresh Banana.

rejected: Your Banana is here but is rotten

in this example we use then and catch to return a promise resolved or rejected

11. Async/await

if you understand promises now we can dive into this new concept introduced recently on javascript Async/await

async are use to run an asynchronous function without interrupt the task manager of Javascript to process the function, an await returns the promise or the result

12. Pro tip: use insertAdjacentHTML()

if want to inject html using javascript in your web page into a <div> tag for example normally the syntax used is:

without insertAdjacentHTML():

With insertAdjacentHTML():

the ‘beforeend’ is used to put the p tag in a position inside the div but you can put the tag in differents positions using:

  • 'beforebegin': Before the element itself.
  • 'afterbegin': Just inside the element, before its first child.
  • 'beforeend': Just inside the element, after its last child.
  • 'afterend': After the element itself.

CONGRATULATIONS NOW YOU ARE A JAVASCRIPT MASTER!!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade