Simple concepts of Modern JavaScript for Beginners

Simple concepts of Modern JavaScript for Beginners

Simple concepts of Modern JavaScript for Beginners - There is much more to these concepts, but my notes will be summarized as very basic explanations...

Before I start, please note that this post is me trying to explain these concepts to myself so make sure I fully understood them and have these notes when I needed. There is much more to these concepts, but my notes will be summarized as very basic explanations.

The concepts are:

*Arrow functions,

*Template literals,

*Var, Let and Cons,

*Ternary (conditional) operator,

*Shorthand object assignment and

*Spread operator.


You may also like: 7 best JavaScript Design Patterns You Should Know


Arrow Functions

Simply put, Arrow Functions are function wrote in a shorter form. They have this name because they use an arrow sign => instead of the word function.

//regular function
function hello() {

//arrow function const = () => {console.log('Hello')}

Template Literals

I have been using those for a while and had no idea what they are named. It is a new way of creating a string. I honestly am not quite sure how to explain it, so I will show:

const name = 'Ana';
const age = 32;
//regular string
console.log(name + " is " + age + " years "+ "old");

//template literal console.log(${name} is ${age} years old);

The result is the same, but writing as template literal is easier, I don't have to worry about spaces and the code looks neat.

Var, Let and Const

Always use const unless you are certain you will want to reassign a value, them use let. Basically, var is dead x.x

Ternary (or conditional) Operators

Those are pretty cool, as most of the other concepts here. It is the only operator that uses 3 operands and it is often used to replace if/them.

Here is how

//Using if
var todayIsFriday = false;
  console.log('It is Fri-yay')
} else{
  console.log('Not quite there yet')

// using Ternary Operator var todayIsMonday = true; console.log(todayIsMonday ? 'Yey, another week' : 'Yey, it is not Monday')

Shorthand Object Assignment

If you want to define an object whose keys have the same name as the variables passed as properties, you can use the shorthand and simply pass the key name:

const abc = {

//shorthand const efg = { e, f, g};

Spread Operator

Last but not least, the Spread operator... Another one that is a bit tricky to explain. Basically, it takes an array or object and expands it. Tne Spread Operator syntax is ...

const obj1 = {a: 'a', b: 'b'};
const obj2 = {c: 'c', ...obj1};

//The console will log: Object { a: "a", b: "b", c: "c"}

That is all I have for today.

Maybe my little notes can help someone navigating JavaScript like myself.

I have all those pieces of code on my codepen if you would like to try practicing yourself

Happy Monday folks!

Further Reading

Top 10 JavaScript array methods you should know

7 best JavaScript Design Patterns You Should Know

New ES2019 Features Every JavaScript Developer Should Know

Originally published by P. at on Sep 16 


Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.