DEV Community: Nemo

How to Use Scratch to Make Games

Nemo — Tue, 22 Aug 2023 18:24:17 +0000

If you are an aspiring game developer or programmer looking to delve into the realm of programming, Scratch is a phenomenal platform to kickstart your journey. It serves as an excellent introduction, particularly for those with limited coding experience. Scratch boasts a high-level, block-based programming language coupled with an intuitive graphical interface, making it an ideal choice for beginners.
Developed by the MIT Media Labs, it has garnered immense popularity for individuals venturing into the realms of programming and logic building. And now, with the added advantage of Scratch's ability to export programs to Android, Web, or desktop applications, it presents itself as the best engaging game development avenue that you can code with Python.

The aim of this article is to show you the basic steps of getting started on Scratch and building a game using it. You’ll understand the fundamental concepts of the platform and will learn how to use it. You’ll be building a game similar to the Chrome Dino game but with minimal features.

Building a Game in Scratch

Now that the article's goal is clear and you also know the platform that will be used, let’s start working on the project. Though the game created here will be much simpler in this case. Building a complex game like the Dino game takes a lot of time and effort and will complicate this article. Instead, for this tutorial, the game will be about jumping over obstacles, and when you hit an obstacle, the game ends.

Scratch helps you build your logic and put the logic in a puzzle-like manner to create programs or games. There are two important terminologies that you need to understand before moving into building it. Let’s discuss them briefly one by one.

What are Sprites?

A sprite is an object or character that can move, interact, and perform various functions on the stage. It's one of the fundamental elements of Scratch projects. Each sprite can have scripts, costumes, and sounds associated with it. In Scratch, you can add new sprites to your project by drawing a new one by yourself, uploading an image, or choosing from Scratch's library of sprites. Once a sprite is added, you can click on it to view and edit its scripts, costumes, and sounds.

What are Code Blocks?

Code blocks or blocks in Scratch are puzzle pieces using which you can create a full-fledged program. Instead of writing code in a textual manner, you can assemble scripts by dragging together jigsaw-like blocks. Each block performs a specific function, and when combined in sequences or structures, they form scripts that define the behaviour of sprites and the overall project.

There are many types of blocks available, and they are divided into multiple categories:

Motion Blocks: These blocks control the movement of sprites. For example, you can move a sprite by ten steps, turn 15 degrees, etc.
Looks Blocks: These blocks deal with the appearance of sprites and the stage. For example, you can change the size of a sprite by ten or say 'Hello' for 2 seconds," etc.
Sound Blocks: As the name suggests, these blocks control the playback of sounds, like playing the sound or stopping all sounds.
Events Blocks: These blocks define how scripts start. Commonly used event blocks are "when flag clicked" (starts when the green flag is clicked) and "when sprite clicked" (starts when the sprite is clicked).
Control Blocks: These blocks manage the flow of scripts. For example, "wait 1 second," "repeat ten times," and "if... then... else.” etc.
Sensing Blocks: They allow sprites to gather information about their environment or user input. Examples like "touching color?" "distance to," and "keyspace pressed?”
Operators Blocks: These are used for mathematical and logical operations. Examples include "+," "-," "and," "or," and "<" (less than).
Variables Blocks: They allow users to create and manipulate variables that can store single values.
My Blocks: You can create your own blocks that encapsulate specific functionalities. This is particularly useful for complex projects or when a certain set of actions needs to be repeated in multiple places.
Extensions Blocks: Scratch allows for extensions that provide additional blocks for specific purposes, like interfacing with hardware or performing more advanced operations.

Now that you have an idea of the concepts used in Scratch, let’s move forward and build the game.

Creating an Endless Runner Game

The first step to creating the game would be creating a new project in Scratch. Visit the official site and click on the Start Creating button.

Clicking on this button will create a new project and walk you through Scratch's basic concepts. You can close the tutorials or go through them to learn more.

Once the project is initialized successfully, you are ready to build the game. This game will contain three sprites:

Runner: This sprite will be the runner in your game. It’ll run through the obstacles. Imagine the Dino in the Chrome Dino game.
Obstacles: These will be the obstacles that the runner needs to jump. Imagine the Cactuses in the Chrome Dino game.
Game Over Sprite: This one is optional. It’ll show when the runner hits an obstacle.

To add a sprite to your project, click on the cat icon that says Choose a Sprite from the bottom right of your screen. You can choose a sprite, draw one, or upload it from your computer. Choose the walking cat sprite from the menu to keep this article simple. Once this sprite is added, choose another one for the obstacle. A banana sprite will be used as an obstacle. And for the optional sprite, choose a crab. Though, you are open to exploration and choose whatever you like.

The three sprites should look like this. You can rename each sprite from the Sprite textbox. Clicking on each sprite will give you the code blocks for adding functionalities.

Let’s start by adding functionalities to the runner. The first step is to make the runner move. Here is the code block:

The code can be described as follows:

Initialization:
1. When the green flag is clicked, set the runner to the center of the screen (Coordinates: x = 0 and y = 0).
Jumping Mechanism:
1. Whenever a mouse down event is detected:
  1. First, move the runner upwards by changing its 'y' position to +5.
  2. Then, move the runner downwards by changing its 'y' position to -5.
2. This jumping action should repeat for 20 frames.
3. Pause and wait for another mouse-down event to trigger the jump again.
Continuous Running:
1. Ensure the above script runs endlessly to maintain the runner's movement.

💡 Remember, the described mechanism ensures that the runner jumps (goes up and then comes down) when the mouse button is pressed. You can adjust the values as needed to get the desired height and speed of the jump.

The next step for the runner is to code the game over logic. This logic is pretty straightforward. Let’s look at the code first, then understand it:

Initialization:
1. When the green flag is clicked, ensure the runner sprite is visible on the screen.
Game Over Logic:
1. If the runner comes into contact with an obstacle, broadcast a message titled Game Over!!!.
Continuous Running:
1. The script should always be active to constantly check for any collision between the runner and the obstacle. This will make sure the game responds instantly if the runner touches an obstacle.

The following code block is to hide the runner on game over. The code block image below is enough for it:

The final code block for the runner is to count the scores. But first, it is essential to create a variable for the score. Follow these steps to create and display the score variable:

Creating the Score Variable:
1. Go to the "Variables" menu.
2. Click on the "Make a Variable" button.
3. When prompted, name the new variable "Score" and click "OK."
Displaying the Score on Screen:
1. In the "Variables" menu, ensure that the checkbox next to the "Score" variable is checked. This will display the score on the game screen.

The logic for this one is also very simple. For every 1 second elapsed, increase the score by one.

The steps for the code block are as follows:

Initialization:
1. When the green flag is clicked, set the Score variable to zero
Increment the score:
1. Wait for one second, and change the score by one.
Continous Running:
1. Run this script continuously to increment the score.

The code for the runner is now ready. The complete code blocks for it should look like the following image:

It’s time to code the obstacle now. The obstacle has three code blocks. One for cloning it, another one for moving it, and a final one when the obstacle touches the edge of the screen. Let’s discuss them one by one.

To add logic to the obstacle sprite, click on the sprite from the sprites menu, and you will see a blank canvas again where you can put all your code blocks. The above image represents the first code block that is used to create clones of the obstacle.

Here’s the pseudo-code for it:

Initialization:
1. When the green flag is clicked, wait for two seconds.
2. After the delay, create a clone of the sprite.
Continous Running:
1. Ensure that clones of the sprite are continuously created throughout the game's runtime.

The first block is ready. The next one is for the movement of the obstacle. The logic should be like this:

Initialization:
1. As soon as a clone is created, set its x and y coordinates to the specified pixels.
2. Make the clone visible on the screen.
3. Shift the clone's x position by -5 pixels to start its movement.
Continuous Movement:
1. For the duration of the game, ensure the clone's position continuously changes, keeping it in motion.

The final code block is responsible for deleting the clone when it touches the edge of the game screen:

Here is the pseudo-code for it:

Initialization:
1. Upon the start of a clone, pause for 1 second before any further action.
Destroying Clones:
1. When the clone touches the edge, delete the clone
Continuous Monitoring and Deletion:
1. Run this script continuously to keep deleting the clones that touch the edges.

The complete code block for the obstacle should look like this image:

The final code blocks will be for the last sprite, which will be shown when the game is over.

Here are the two code blocks for the game over Sprite:

The first code block hides the sprite when the green flag is clicked, and the second one shows the sprite when it receives the Game Over!!! broadcast message. After showing the sprite, it stops all logic in the game.

Your game is now ready. Click on the green flag to play it now. If you want more, you can add more features like a backdrop, audio for jumps, etc.

The GIF below shows the endless runner game you just made:

You can also play the game from here.

Conclusion

You made your own endless runner game using the MIT scratch. You explored how Sprites are added to a Scratch project and add functionalities to them. Scratch has endless opportunities for you to explore. And if you are someone who is into the gaming space very much, visit Sparkian and stay updated with the latest trends in the field.

Introduction to Recursion in JavaScript

Nemo — Thu, 24 Sep 2020 14:58:58 +0000

Recursion is an essential topic in the area of functional programming. Newbie programmers often find it challenging to understand what it is and how it works. So, I'll try to make recursion easy for you. At least, will try to clear your basic understanding about the topic. So, let's get started 😁.
Gif from Giphy

What is Recursion?

If you search "recursion" in Google, every time you'll get a message "Did you mean: recursion". And every time you click on the Did you mean link, it'll again show you the same. And this is after all what recursion actually means, Calling something again and again.

In terms of computer programming, a recursive function is a function that calls itself until it satisfies some exit condition. Otherwise, we'll be stuck into an infinite loop or in case of JavaScript, the call stack will be overflowed. Let's see an example to understand it better.
We all know what a factorial is. We get factorial of a number if we continue multiplying the number itself with a value smaller than it until we reach 1.
For example, the factorial for number 3 will be, 3 * 2 * 1 = 6.
Here's a function that returns the factorial of a number.

function factorial(r) {
    if(r <= 0) return 1;
    else return r*factorial(r-1);
}
console.log(factorial(3)); //6

We are passing the number with the parameter r. How is this a recursive function? If you look at the else condition, you'll find that it is calling the function itself until it matches the exit condition which is r <= 0.
You can imagine that the same can be achieved using a loop. And you are right. Here is the same function using a loop.

function factorial(r) {
    let factor = 1;
    for(let i = r; i > 1; i--) {
        factor *= i;
    }
    return factor;
}
console.log(factorial(3)); //6

Rather, using a loop will be a better choice in case of such small functions. In JavaScript running a loop is generally cheaper than calling a function multiple times. The time complexity will be higher with a recursive function. But there are multiple instances where loops are not worth. They make the function more complex. And, any recursive function can be implemented using loops.
Now that we know what a recursive function is let's move on to building a recursive function by ourselves.

Creating a Recursive Function

One most important thing to keep in mind while working with recursive function is to Declare a termination condition. Otherwise, our function will overflow the call stack.

How do we declare a termination condition? Most simply, we can put it inside an if statement.

Here in this example, suppose we want to write a recursive function that returns the sum of a given range. So, if we pass 3, it will output the sum of the range from 1 to 3, i.e., 1 + 2 + 3 = 6.

Step 1: Declare a function name. It'll take a single parameter which will specify the range. Feel free to use arrow functions if you want.

function sumRange(r){

}

Step 2: Declare a termination statement. When do we want this function to exit? When our range is 0, right?

function sumRange(r) {
    if(r <= 0) return 0;
}

Step 3: Your logic where the magic happens.

What do we want to achieve here? We want to do (current range + (range-1)) in a loop until our range becomes 0. We are getting the current range from r. How do we get the (range-1)? We call the function again and again by passing the parameter as (r-1).

function sumRange(r) {
    if(r <= 0) return 0;
    return r+sumRange(r-1);
}

The function flow:

First, we call our function by passing the value 3.

   sumRange(3);

The above call runs the function. First, it checks the if statement. Finding it false, it'll continue to work with the else. At else, we return 3 + the value of sumRange(3-1).

   return 3 + sumRange(2);

The above logic also works here. Except that, this time, our range was 2. So, it'll return 2 + sumRange(2-1)

   return 2 + sumRange(1);

Same happens again. Now the range is 1. So the returning sumRange will be (1-1).

   return 1 + sumRange(0);

When the range becomes 0, our if condition will run and it will return 0.

Now that all our function calls has returned a value, everything will start to unwind. The innermost function will return first.

So, sumRange(0) will return 0.

sumRange(1) will return 1 + sumRange(0) or, 1 + 0 = 1

sumRange(2) will return 2 + sumRange(1) or, 2 + 1 + 0 = 3

sumRange(3) will return 3 + sumRange(2) or, 3 + 2 + 1 + 0 = 6 and we get the answer 6 and we are done.

If you read the article to this point, a big thank you 😊. I hope you get some basic understanding of how recursion works and how to write a recursive function.

Comparing Values of Objects in JavaScript 🧭

Nemo — Sun, 16 Aug 2020 13:21:45 +0000

JavaScript has only two data types. One is Primitive, and the other one is the non-primitive data type. Primitive data types consist of

undefined
Boolean
Number
String
Symbol
null

And Non-Primitive data types have only one member, i.e.,

Object

More about JavaScript data types here.

Comparing primitive data types is easy. We can quickly compare two primitive data types using the equality operator. But it doesn't work for non-primitive types. Because primitive data types are compared by their values, while objects in JavaScript are compared by their reference, so, the simple equality operator will only check if the location of the two objects is the same or not. We'll understand it with a code example here.

Checking two Objects using Equality Operator

Suppose we have two objects, i.e.,

let obj1 = {key1: "a", key2: "b", key3: "c"}
let obj2 = {key1: "a", key2: "b", key3: "c"}

We can see both the objects has the same key and values. Now if we try to write a function using the equality operator.

let isSame = (object1, object2) => {
  return object1 === object2;
}

If we run this function and provide obj and obj2 as parameters, the function will return false.

But if we define another variable that refers to an already defined object, it'll return true.

Here, obj1 and obj3 refer to the same memory location, and hence the function returns true.

Now I think we are much clear why we shouldn't use the simple equality operator while comparing two objects.

Multiple ways can be used to compare two objects. Let's see with examples.

Code Example 1

let areEqual = (object1, object2) => {
    return 
    object1.key1 === object2.key1 && 
    object1.key2 === object2.key2 && 
    object1.key3 === object2.key3 //and so on
}

This function will return true if two objects are equal. This code works, but it is way too static. We have to manually change each value for every different object having different key-value pairs.

To ease our work, we'll use the JSON.stringify method.

What is JSON.stringify

The JSON.stringify is a JavaScript method that converts a JavaScript object to a JSON string.

Syntax

JSON.stringify(value[, replacer[, space]])

The value specifies the value that has to be converted. The replacer and the space are optional arguments. You can check this article to know more about this method.

Code Example 2

let areEqual = (object1, object2) => {
  return JSON.stringify(object1) === JSON.stringify(object2) 
}

As we can see, that code is just a single line, and we can use this function with any two objects. We don't have to manually set up the parameters that are to be checked.

I hope you liked the article.

The JavaScript "delete" Operator 🎒

Nemo — Thu, 06 Aug 2020 18:20:48 +0000

Introduction 🎇

In this article, we are going to discuss the delete operator in JavaScript. Delete is comparatively a lesser-known operator in JavaScript. We use this operator mainly to delete JavaScript object properties.

JavaScript has pop(), shift() or splice() methods to delete an element from an array. But because of the key-value pair in an object, the deleting is more complicated in case of objects. It is important to note that, the delete operator only works on objects and not on variables or functions.

Syntax

delete object
// Or
delete object.property
// Or
delete object['property']

The operator returns true if it removes a property. While deleting an object property that doesn't exist will return a true but it will not affect the object in any way. Though while trying to delete a variable or a function will return a false.

Example 🎞

Let's assume we have an object called person which has three key-value pairs (i.e., firstName, lastName and phone). Now, we'll use the delete operator to delete the phone property from the object.

Code

let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

console.log(delete person.phone); //true
console.log(person); //{ firstName: 'John', lastName: 'Doe'}

Output

As the above output shows, delete person.phone returns true and if we log the person object we can clearly see that the phone property doesn't exist anymore.

Let's try applying the delete operator for deleting a variable and a function.

Code

let num = 5;
let sum = (a, b) => {
  return a + b;
}

console.log(delete num); //false
console.log(delete sum); //false

Output

Because the delete operator doesn't work for variables or function, it returns false and the actual variables remain untouched.

Another thing to keep in mind is that this operator doesn't delete the value of the property rather it deletes the property itself.

Example 🎫

Code

let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

let phone = person.phone;

console.log(delete person.phone); //true
console.log(phone); //12345

Because objects are reference types, so both the person.phone and phone variable will refer to the same memory address.

Output

It is clearly visible that the delete operator has deleted the property but the value is still in the memory which shows that, delete doesn't delete the value.

Exception ❕

Global variables can be removed using the delete operator. Because the global variables are properties of the window object. And as delete works on objects, it'll delete the variable.

Code

toDelete = 5;

console.log(delete toDelete); //true

console.log(toDelete); //toDelete is not defined

Without using the var, let or const keyword sets the variable as a global variable. And it'll work as an object property.

Output

The delete toDelete returns true and if we try to access the variable after deleting it we'll get a reference error as the variable is not defined.

Deleting Array Values Using `delete` 🎩

As we know JavaScript arrays are after-all objects. So, the delete operator can be used to delete an array item. But it'll cause a problem because after deleting the element from the array, this operator will show the position as empty and it'll not update the array length also.

Example

Code

let arr = [1, 2, 3]

console.log(delete arr[0]); //true
console.log(arr); //[empty, 2, 3]

Output

So, using pop(), shift() or splice() methods are clearly a better approach to delete array elements.

Conclusion ✍

Developers uses many workarounds to delete an object property, such as setting the value of an object property to null or undefined. But the property will still exist on the object and some operators like for in loop will still show the presence of the null property which can cause problems in many cases.

Using the delete property in loops also slows down a program significantly. So, this method should only be used when it is absolutely necessary to delete an object property without leaving any traces.

Object Destructuring in JavaScript for Beginners 🛴

Nemo — Sun, 02 Aug 2020 05:36:39 +0000

Introduction 👩‍🏫

The ES6 introduced the concept of object destructuring along with other things like let, const, arrow functions. Object destructuring is a very useful feature in JavaScript. It extensively used in frontend framework like React as well as backend services like Node.js also. This article is focused to give you some knowledge about the object destructuring.

What is Destructuring? 🏏

Destructuring means extracting data from arrays or objects. With destructuring, we can break a complex object or array into smaller parts. Destructuring also gives us the ability to extract multiple data at once from an object or array. It also provides the ability to set a default value of the property if it's already not set.

Destructuring with Example 🎳

To understand the concept of object destructuring, we need to take an example in the count.

Suppose we have an object with the following key-value properties,

let person = {
 firstName: "Captain",
 lastName: "Nemo"
}

Before ES6, to use the values we needed to write code like this,

const firstName = person.firstName;
const lastName = person.lastName;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);

It's a small object, but imagine we have a large object having a lot of key-value pairs, then to access the properties, our code will be very much repetitive and we don't want to disobey the God of DRY! 😅

To solve this issue, ES6 provides us with the power of destructuring. Using destructuring, we can easily extract the properties using the following code,

const { firstName, lastName } = person;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);

This might seem confusing if you're seeing this for the first time. The first question that popped in my mind when I first saw the syntax for the first time was, why the curly braces are on the left? Is it a block? Or is it an Object?

Actually it's none of the both. It's just how destructuring syntax looks like.

Basically, it's just saying

Give me a variable called firstName and a variable called lastName from the object called person.

Destructuring a Nested Object

Object destructuring comes handier when we are working with a nested object.

Imagine an object like the below one,

const person = {
 firstName: "Captain",
 lastName: "Nemo",
 address: {
  street: "1234 Ave",
  city: "Antilaw State",
  zip: 1234
 }
}

To access the elements using the old approach, the code will be too much repetitive and will look very dirty.

console.log(person.firstName);
console.log(person.lastName);
console.log(person.address.street);
console.log(person.address.city);
console.log(person.address.zip);

Output

And now, let's take a look using the ES6 object destructuring,

const { firstName, lastName, address: { street, zip, city } } =  person;
console.log(firstName);
console.log(lastName);
console.log(street);
console.log(city);
console.log(zip);

This is clearly a better approach to access the elements. And moreover, we have to write fewer lines.

There's a beautiful quotation I read in the Eloquent JavaScript Book about writing less code. Here it follows,

Tzu-li and Tzu-ssu were boasting about the size of their latest programs. ‘Two-hundred thousand lines,’ said Tzu-li, ‘not counting comments!’ Tzu-ssu responded, ‘Pssh, mine is almost a million lines already.’ Master Yuan-Ma said, ‘My best program has five hundred lines.’ Hearing this, Tzu-li and Tzu-ssu were enlightened.

Master Yuan-Ma, The Book of Programming

Storing Object Values to Custom Variables

Now, let's say we need to store the extracted properties to custom variables. We can also do this with the object destructuring. Suppose we want to store the firstName element of the person object to a variable called first and thelastName to a variable called last. This can be achieved using the following code,

const { firstName: first, lastName: last } =  person;
console.log(first);
console.log(last);

And yes, we can also extract only the elements we want. In the above code, we extracted only the firstName and the lastName from the object.

Destructuring Arrays

At the beginning of this article, I told you that we can use destructuring for arrays also. How?

Here's an example,

Suppose an array contains scores of a student in 3 subjects.

const scores = [85, 90, 74];

We can destructure the scores easily using the following code,

const [maths, geography, biology] = scores;
console.log(maths);
console.log(geography);
console.log(biology);

So, using the simple array literal to the left, we can destructure the array. The array elements are getting stored in local variables we defined. Each of the local variables will map with the corresponding array element.

Output:

Conclusion 👨‍🌾

I think this article has given you a quite understanding using the destructuring used in ES6. If this article helped you or you've feedback, please comment below. I'd love to hear from you. 😊

This article was originally published on my Hashnode blog

A Brief Introduction to JavaScript Map, Filter and Reduce Methods

Nemo — Sun, 26 Jul 2020 15:40:51 +0000

Introduction

Arrays are important Data Structures in programming. All the methods which we are going to discuss in this article will iterate over an array and return a new array based on the result function we define. The results we'll get here can also be achieved using loops, but it'll make the code more lengthy.

The methods we are discussing here are some higher-order functions available in JavaScript. Higher-order functions are those functions which take a function as an argument or returns a function as an output. On the other hand, we typically use first-order functions. First-order functions neither takes a function as an argument nor returns a function as an output.

Map

We use the map() function to create a new array from an existing one by applying a function to each of the elements in the array.

Syntax

array.map(function(currentValue, index, arr), thisValue)

In the arguments, we can execute the function by passing only the currentValue also. Let's see an example

Example

const array = [3, 6, 9, 12];
const square = array.map((item) => item * item);
console.log(square);

In the above example, we created a new array named square by passing only the currentValue. Now, if we wanted to write the same square function with imperative style, the code will look something like this,

const numbers = [3, 6, 9, 12];
const square = (numbers) => {
  let newArray = [];
  for (let i = 0; i < numbers.length; i++) {
    newArray.push(numbers[i] * numbers[i]);
  }
  return newArray;
};
console.log(square(numbers)); //[ 9, 36, 81, 144 ]

We can see how much longer is this method. We can shorten the code by using forEach but still, it'll be larger than using the map function.

The map method takes an array and returns a new array of same size.

To learn more about the map() method, you can check the article here.

Filter

As the name suggests, the filter() function is used to filter items of an array based on a certain condition.

Syntax

array.filter(callback(element, index, arr), thisValue)

The filter() function takes each element of the array and applies the specific condition we define. If the element satisfies the condition then the item is pushed to a new array.

Example

We'll try to return an array which filters odd numbers from an given array. In declarative approach we would write something like,

const arr = [2, 3, 4, 5, 6];
const odds = arr.filter((i) => i % 2 !== 0);
console.log(odds); //[3, 5]

Now, if we try to get the same result using the imperative way, we have to write something like this,

const odds = (arr) => {
  let oddArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      oddArray.push(arr[i]);
    }
  }
  return oddArray;
};
console.log(odds(arr)); //[3, 5]

Which shows how much more code we need to achieve the same result.

So, the filter function always returns an array smaller than the original array.

To know more about the method, you can check this article.

Reduce

The reduce function is the least used among the three functions we are discussing here. This method reduces a whole array into a single value and returns it.

Syntax

arr.reduce(callback[, initialValue])

Let's see the reduce function in action

Example

Suppose we want to add the items of an array. We are taking this example because the function will return only a single value. To implement this using the reduce() method, we can write the code like this,

const arr = [2, 3, 4, 5, 6];
const sum = arr.reduce((result, item) => result + item);
console.log(sum); //20

It's literally a single line of code. Now, the same code using a for loop will look like this,

const sum = (arr) => {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i];
  }
  return result;
};
console.log(sum(arr)); //20

So, as we've seen the reduce will return a single value.

To know more about the reduce() method, you can check this article here.

The reduce function is a hugely powerful function and most of us do not use it at its full potential. I'd recommend checking the article I shared above.

Conclusion

I hope this article gave you an idea about the JavaScript map(), filter(), and reduce() method. The links of the articles provided below each of the methods will give you a more in-depth knowledge of each method.

Let's Talk 'Scopes' in JavaScript

Nemo — Thu, 23 Jul 2020 13:18:29 +0000

This article is going to be about scopes concept in JavaScript. Without knowing about scopes correctly, our code may work unexpectedly. So, to clear things up and to strengthen our concepts we'll be discussing these two here. I'll try my best to explain it in a beginner-friendly language. 🙌

Scopes

Let's look at the highlighted portion. It says,

the extent of the area or subject matter that something deals with or to which it is relevant.

So basically scope in JavaScript should be something like the area where something deals. Now, who deals is the first question that should pop up in our head after reading the description I gave. 🤔

Who?!! the answer is the variables in JavaScript.

So, in easy words

The Scope is the area in code from where a variable can be accessed.

Types of Scopes in JavaScript

In JavaScript, there are two types of scope.

Global Scope
Local Scope

A local scope can be further divided into two types,

Local Scope
- Function Scope
- Block Scope

The above image show the different types of scopes. The rectangles shows the area where the variables are accessible. Now, let's discuss the scopes one by one.

Global Scope 🌏

In Global Scope, the variables can be accessed from anywhere in the program. A variable declared outside all the programs or curly braces is referred to as a Global Scope variable. A variable declared in the global scope can be accessed from any function or nested function in the program.

As we can see from the example, the globally declared number is first called from the global scope, then from a function and after that, it is called from a block scope. I hope this clears the concept of global scope.

Before ES6, the var keyword was used to declare a variable in JavaScript. And var declares all the variables in the global scope, even if the variable is declared inside a function or in block level. This means, any variable declared using thevar keyword or without a keyword is accessible from anywhere in a program. But this causes a problem if the program has the same variable at multiple places. So, usually, it is a good practice not to declare a variable in the global scope. This was another reason behind introducing let and const in ES6.

Another problem with var is that, if a variable is already defined with var and if we declare another variable with the same name using var, it'll overwrite the old variable and assign the new value to it whereas let and const will give an error. This can be a huge headache while debugging code.

var number = 5;
var number = 10;
console.log(number); //10

let number = 5;
const number = 10; //SyntaxError: Identifier 'number' has already been declared

Local Scope 🏢

Variables that can be accessed from only a specific part of the code are local variables. If you check the above diagram again, all the variables declared inside the function sum are local variable, including the variable inside the loop. In other words, all variables other than global variables are local variables in JavaScript. Local variables cannot be called from outside of their function or block.

var number = 5;

function sum() {
  const arr = [1, 2, 3];
  let sum = 0;
}
console.log(arr); //arr is not defined

Because a local variable can be declared either in a function or in a block(like a for loop) or inside an if-else / while loops, JavaScript has two types of local scope, function scope, block scope.

Function Scope 🏗

A variable declared inside a function resides in the function scope. The variable can be accessed from functions or blocks inside the function(i.e., nested functions) but not from the outside. In the above code sample, the arr variable is declared inside a function, and when we are trying to call it from outside of the function, we are getting the error arr is not defined. Though the variable can be accessed from a nested function.

Block Scope 🤠

Variables declared inside blocks like for loops or inside curly braces { } with let or const are block-scoped variables.

if(number % 2 === 0) {
  let  even = number;
  console.log("Even", even);
} else {
  let odd = number;
  console.log("Odd", odd);
}
console.log("Even", even); //even is not defined
console.log("Odd", odd); //odd is not defined

I couldn't come up with a better example, so just used this code. 😅

The variables even and odd are declared inside { } braces, they are in block scope. In the first diagram, the variable i declared inside the for loop is also a block-scoped.

function sum() {
  const arr = [1, 2, 3];
  let sum = 0; //sum and arr are function scope
  for(let i = 0; i < arr.length; i++) { //i is block scope
    sum = sum + arr[i];
  }
}

I hope this article somehow helped you understand the concept of scope in JavaScript. If you liked the article, please give a 👍 and comment your thoughts below. 🔥

An Introduction to JavaScript Getters and Setters 👓

Nemo — Sat, 18 Jul 2020 05:39:34 +0000

Suppose we have a JavaScript Object, as we know a JavaScript object consists key-value pair. Now, there can be multiple instances where we need to pass values to the object from the outside and need to change the object value accordingly or there can also be cases where we don't want to change the key value from outside of an object. This is where the JavaScript Getter and Setter comes in.

const person = {
  firstName: "John",
  lastName: "Doe"
}

Here, we're assuming that we have an object that has two key-value pairs, firstName, and lastName. Now, if we want to show the full name of the person we can use either one of the way shown below,

We can console.log the full name outside the object using concatenation or using template literals, i.e,

console.log(person.firstName + " " + person.lastName); //John Doe

console.log(`${person.firstName} ${person.lastName}`); //John Doe

If we want to console.log the full name at multiple places of our code, then we have to paste the same code multiple times. Which is against our DRY(Don't Repeat Yourself) rule. Another way can be creating a method for the object and calling the method whenever we want to get the full name.

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName () {
      return `${person.firstName} ${person.lastName}` //John Doe
  }
}

We can now call the method with

console.log(person.fullName()); //John Doe

If we want to get the value by calling the method like a property of the object, not like a regular function call, we need to use the getter method here. So, the code will be,

get fullName () {
      return `${person.firstName} ${person.lastName}` //John Doe
  }

The get keyword in front of the method name is important. Now, we can call fullName using person.fullName only. We don't have to add the extra braces at the end. Moreover, now we can't change the value of fullName from the outside.

If we try to set the fullName from outside of the object, we will not get an error, rather it'll show the value set inside the object.

Suppose we want pass the fullName value from outside of the object and want to set the firstName and lastName value according to the fullName value passed. If we try to initialize it using person.fullName = "Jane Doe"; it'll not work. Here comes the setter method. Let's check an example,

set fullName (val) {
    const split = val.split(" ");
    this.firstName = split[0];
    this.lastName = split[1]
  }

So, we're getting a value from the val argument and then splitting it into parts at places where the value has spaces using the JavaScript split() method. The split() method returns an array. We're assigning the first element of the array to the firstName key and the second element of the array to the lastName key.

Now we can pass a value to the fullName method and set firstName and lastName values accordingly. Both this get and set method can be achieved with multiple functions which will be more simple, but that won't be a robust solution.

The Full Code 🚀

const person = {
  firstName: "John",
  lastName: "Doe",
  get fullName () {
      return `${person.firstName} ${person.lastName}`
  },
  set fullName (val) {
    const split = val.split(" ");
    this.firstName = split[0];
    this.lastName = split[1]
  }
}

Why use Getter and Setter? 🐲

In object-oriented languages, an important concept is data hiding. Usually, classes have access modifiers like public/private which restricts the exposure of the members. One of the most important uses of Getter and Setter is to expose the functions more safely. For example, if we set only the get method, the value of the member can never be changed from the outside of the class.

To learn about it in more depth, check this beautiful article here.

Originally Posted at hashnode

DEV Community: Nemo

How to Use Scratch to Make Games

Building a Game in Scratch

What are Sprites?

What are Code Blocks?

Creating an Endless Runner Game

Conclusion

Introduction to Recursion in JavaScript

What is Recursion?

Creating a Recursive Function

The function flow:

Comparing Values of Objects in JavaScript 🧭

Checking two Objects using Equality Operator

Code Example 1

What is JSON.stringify

Syntax

Code Example 2

The JavaScript "delete" Operator 🎒

Introduction 🎇

Syntax

Example 🎞

Code

Output

Code

Output

Example 🎫

Code

Output

Exception ❕

Code

Output

Deleting Array Values Using delete 🎩

Example

Code

Output

Conclusion ✍

Object Destructuring in JavaScript for Beginners 🛴

Introduction 👩‍🏫

What is Destructuring? 🏏

Destructuring with Example 🎳

Destructuring a Nested Object

Output

Storing Object Values to Custom Variables

Destructuring Arrays

Output:

Conclusion 👨‍🌾

A Brief Introduction to JavaScript Map, Filter and Reduce Methods

Introduction

Map

Syntax

Example

Filter

Syntax

Example

Reduce

Syntax

Example

Conclusion

Let's Talk 'Scopes' in JavaScript

Scopes

Types of Scopes in JavaScript

Global Scope 🌏

Local Scope 🏢

Function Scope 🏗

Block Scope 🤠

An Introduction to JavaScript Getters and Setters 👓

The Full Code 🚀

Why use Getter and Setter? 🐲

Deleting Array Values Using `delete` 🎩