Level Up Your JavaScript Skills: 12 basic notions

by Janeth Kent Date: 23-05-2020 javascript guide tips

If you are a developer at any level, understanding its basic concepts is crucial.

This article highlights 12 basic concepts that are critical to understanding by any JS developer, but do not represent the full range of what a JS developer should know.

1. Value vs. Reference Variable Assignment

To coding bug-free JavaScript, is essential to understand how JavaScript assigns variables. If you don't understand it, you can easily write code that changes values inadvertently.

JavaScript always assigns variables by value: when the assigned value is one of JavaScript’s five primitive type (i.e., Boolean, null, undefined, String, and Number) the actual value is assigned. However, when the assigned value is an Array, Function, or Object a reference to the object in memory is assigned.

Let's make an example.

In the following code, var2 is set as equal to var1. Since var1 is a primitive type (String), var2 is set as equal to var1's String value and can be thought of as completely distinct from var1 at this point. Accordingly, reassigning var2 has not effect on var1.

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
// 'My string'
// 'My new string'

Now, let’s compare this with object assignment.

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
// { name: 'John' }
// { name: 'John' }

If you expected behavior like primitive assignment, you could see how this could cause problems! This can be particularly hideous if you create a function that mutates an object unintentionally.

2. Closures

"Closure" is an important JavaScript pattern for accessing a variable privately. In this example, createGreeter returns an anonymous function with access to the greeting provided, "Hello." SayHello will have access to this greeting for all future uses!

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
const sayHello = createGreeter('Hello');
// Hello, Joe

In another scenario, you can imagine an initial apiConnect (apiKey) function that returns some methods that use the API key. The apiKey should only be provided once and never again in this case.

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
  return { get, post }
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

3. Destructuring

Don't be discarded by destructing the JavaScript parameter! It is a common way of extracting properties from objects cleanly.

const obj = {
  name: 'Joe',
  food: 'cake'
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'

If you want to extract properties under a different name, you can specify them using the following format.

const obj = {
  name: 'Joe',
  food: 'cake'
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'

Destructuring is used in the following example to pass the person object cleanly to the introduction function. In other words, destructuring can (and is often) used directly to extract function parameters. If you know React, you've probably seen this before!

const person = {
  name: 'Eddie',
  age: 24
function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
// "I'm Eddie and I'm 24 years old!"

4. Spread Syntax

The spread operator is a JavaScript concept that can throw people away but is relatively simple! Math.max can not be applied to the array in the following case because it does not take an array as an argument, it takes the individual elements as arguments. The spread operator ... is used to remove the array from the individual elements.

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
// 10

5. Rest Syntax

Let's talk about the rest syntax of JavaScript. You can use it to place in an array any number of arguments passed to a function!

function myFunc(...args) {
  console.log(args[0] + args[1]);
myFunc(1, 2, 3, 4);
// 3

6. Array Methods

Array methods of JavaScript can often provide you with incredible, elegant ways to transform the data you need. We often see questions on how a variety of objects can be manipulated in one way or another on the web. This is usually the perfect case for array methods.

We are going to cover a number of different array methods, organized by similar methods that are sometimes conflated. This list is not comprehensive in any way: We encourage you to review and practice all of them on MDN.

map, filter, reduce

There is some confusion around the JavaScript array methods map, filter, reduce. These are helpful methods for transforming an array or returning an aggregate value.

map: return array where each element is transformed as specified by the function

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
// [21, 22, 23, 24, 25, 26]

filter: return array of elements where the function returns true

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
// [2, 4]

reduce: accumulate values as specified in function

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
// 21

find, findIndex, indexOf

The array methods find, findIndex, and indexOf can often be conflated. Use them as follows.

find: return the first instance that matches the specified criteria. Does not progress to find any other matching instances.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
// 6

Note once again that while everything meets the criteria after 5, only the first matching element is returned. In situations where you normally break a for loop when you find a match, this is really super helpful!

findIndex: This works almost identically to find, but rather than returning the first matching element it returns the index of the first matching element. Take the following example, which uses names instead of numbers for clarity.

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
// 1

indexOf: Works almost identically to findIndex, but instead of taking a function as an argument it takes a simple value. You can use this when you have simpler logic and don’t need to use a function to check whether there is a match.

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
// 1

push, pop, shift, unshift

There are a lot of great array method to help add or remove elements from arrays in a targeted fashion.

push: This is a relatively simple method that adds an item to the end of an array. It modifies the array in-place and the function itself returns the item added to the array.

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
// [1, 2, 3, 4, 5]
// 5

pop: This removes the last item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.

let arr = [1, 2, 3, 4];
const popped = arr.pop();
// [1, 2, 3]
// 4

shift: This removes the first item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
// [2, 3, 4]
// 1

unshift: This adds one or more elements to the beginning of an array. Again, it modifies the array in place. Unlike a lot of the other methods, the function itself returns the new length of the array.

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
// [5, 6, 7, 1, 2, 3, 4]
// 7

splice, slice

These methods either modify or return subsets of arrays.

splice: Change the contents of an array by removing or replacing existing elements and/or adding new elements. This method modifies the array in place.

The following code sample can be read as: at position 1 of the array, remove 0 elements and insert b.

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')

slice: returns a shallow copy of an array from a specified start position and before a specified end position. If no end position is specified, the rest of the array is returned. Importantly, this method does not modify the array in place but rather returns the desired subset.

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
// ['c', 'd']
// ['a', 'b', 'c', 'd', 'e']


Sorts an array based on the provided function which takes a first element and second element argument. Modifies the array in place. If the function returns negative or 0, the order remains unchanged. If positive, the element order is switched.

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
// [-1, 1, 2, 3, 5, 7, 7]

7. Generators

Don’t worry about the *. The generator function specifies what value is yielded next time next() is called. Can either have a finite number of yields, after which next() returns an undefined value, or an infinite number of values using a loop.

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
const greet = greeter();
// 'Hi'
// 'How are you?'
// 'Bye'
// undefined

And using a generator for infinite values:

function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
const ids = idCreator();
// 0
// 1
// 2
// etc...

8. Identity Operator (===) vs. Equality Operator (==)

Make sure you know the difference the in JavaScript between the identify operator (= = =) and the equality operator (= =). Before comparing values, the = = operator will perform type conversion, while the = = = operator will not perform any type conversion before comparing.

console.log(0 == '0');
// true
console.log(0 === '0');
// false

9. Object Comparison

An error I see is that newcomers to JavaScript compare objects directly. Variables refer to to to the memory objects, not the objects themselves! One way to compare them actually is to convert objects to JSON strings.

But this has a disadvantage: object property order is not guaranteed! A safer way to compare objects is to pull a library specializing in the comparison of deep objects (e.g. isEqual for lodash).

The following objects appear equal but they are in fact pointing to different references.

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false

In contrast, the following is true because one object is equal to the other object and therefore points to the same reference (only one object is in memory).

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true

To fully understand the ramifications of setting a variable equal to another variable that points to a reference to an object in memory, be sure to review the value vs. reference section above!

10. Callback Functions

Far too many people are intimidated by JavaScript callback functions! They are simple, take this example. The console.log function is being passed as a callback to myFunc. It gets executed when setTimeout completes. That’s all there is to it!

function myFunc(text, callback) {
  setTimeout(function() {
  }, 2000);
myFunc('Hello world!', console.log);
// 'Hello world

11. Promises

Once you understand the JavaScript callbacks , you'll soon find yourself in a nested "callback hell."

Wrap your async logic in a Promise and resolve on success or reject on fail. Use “then” to handle success and catch to handle failure.

const myPromise = new Promise(function(res, rej) {
    if (Math.random() < 0.9) {
      return res('Hooray!');
    return rej('Oh no!');
  }, 1000);
  .then(function(data) {
    console.log('Success: ' + data);
   .catch(function(err) {
    console.log('Error: ' + err);
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"

12. Async Await

Once you get the hang of JavaScript promises, you might like async await, which is just “syntactic sugar” on top of promises. In the following example we create an async function and within that we await the greeter promise.

const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
async function myFunc() {
  const greeting = await greeter;
// 'Hello world!'

If you didn't know about any of these 12 concepts, you've probably grown in JavaScript at least a little! And if you knew them all, I hope it was an opportunity to practice and develop your knowledge. What other concepts are critical to you? In the comments, let me know.

Original Source

Business vector created by freepik - www.freepik.com

by Janeth Kent Date: 23-05-2020 javascript guide tips hits : 9173  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Node.js and npm: introductory tutorial

In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition, we will also create a small sample application. If you…

How to connect to MySQL with Node.js

Let's see how you can connect to a MySQL database using Node.js, the popular JavaScript runtime environment. Before we start, it is important to note that you must have Node.js installed…

JavaScript Programming Styles: Best Practices

When programming with JavaScript there are certain conventions that you should apply, especially when working in a team environment. In fact, it is common to have meetings to discuss standards…

Difference between arrow and normal functions in JavaScript

In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see when you should use one and when you should use…

JavaScript Arrow functions: What they are and how to use them

In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new feature introduced with the ES6 standard (ECMAScript 6). What are Arrow…

How to insert an element into an array with JavaScript

In this brief tutorial you will learn how to insert one or more elements into an array with JavaScript. For this we will use the splice function. The splice function will not…

What is the difference between primitives types and objects in JavaScript?

In this short tutorial we are going to look at the differences between primitive types and objects in JavaScript. To start with, we're going to look at what primitive types…

How to get DOM elements with JavaScript

When you access any element of the DOM, it is usual to save it in a variable. This is something that at first might seem very simple, but if you…

How to reverse an array in JavaScript

In this tutorial we are going to see how you can change the order of the elements of an array so that they are inverted. You could use a loop…

How synchronize the scroll of two divs with JavaScript

In case you have two divs of different sizes you may sometimes want to scroll both at the same time but at different speeds depending on their size. For example,…

How to use the codePointAt method in JavaScript

The JavaScript codePointAt method has more or less the same function as the charCodeAt method, used to get the 16-bit Unicode representation of the character at a certain position in…

How to check if a value is a number in JavaScript

In this short tutorial we are going to look at the various methods that exist to find out if a value is a number in JavaScript.   1. Using the isNaN() function   One…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration