Image for post
Image for post

In JavaScript, functions are one of the fundamental building blocks. A function is a block of organised, reusable code to perform a single task or calculate a value. Functions can be passed one or more arguments and can return a value at the end of their execution.

The example below contains a function that takes in 2 values and returns the sum of those numbers:

In everyday life, we make our decisions based on circumstances. For example, if we are tired, we go to bed, otherwise, we stay awake. Similarly, in any programming language, the program performs actions accordingly depending on different inputs. Conditional statements enable us to represent such decision making in JavaScript. In this blog post, we are going to focus on how programs make decisions by evaluating conditions and introduce logic into our code.

A conditional statement checks a specific condition(s) and performs a task based on the condition(s).

if…else statement

The if…else statement makes binary decisions and executes different code blocks based on a provided condition. …

Iterators are methods called on arrays to operate on every array element and return values. In this blog post, I will focus on explaining the three most popular iteration methods: .forEach(), .map() and .filter(). I will explain the syntax for these methods, their return values and how to choose the right iterator method for a given task.

The .forEach() Method

The .forEach() method executes the same code for each element of an array. Let’s look at the code below:

Image for post
Image for post

fruits.forEach() calls the forEach method on the fruits array. It iterates through the array and executes the callback function by taking current element as an argument. The return value for .forEach() method is alway undefined. …

Image for post
Image for post

In CSS, selectors are used to select or find the HTML elements of a web page that we wish to style. There are 5 different types of CSS selectors available: CSS Element Selector, CSS Id Selector, CSS Class Selector, CSS Universal Selector, CSS Group Selector. In this short blog post we’ll go through the different types in great detail and see how they work.

CSS Element Selector

The CSS Element Selector, selects all HTML elements based on the element name. Below, all <h1> elements will be left-aligned with a green text colour:

Image for post
Image for post

What are Props?

Props, short for properties, are arguments passed into React components via HTML attributes.

You can think of props as a way of passing data from component to component. Props can be any value including: strings, objects, arrays, functions, etc. They enable us to make our components more dynamic, and more reusable.

For example, let’s say we have a <BlogCard /> component which has a title, an image and content as attributes or properties. If we hardcoded our <BlogCard /> component it will look like the below:

REST stands for REpresentational State Transfer, and it is an architectural style that defines how Web standards, such as HTTP and URIs, are supposed to be used.

Rails has RESTful principles built into its core, so, whether you are utilizing the built-in view rendering system or using the application purely as an API, you will have the tools necessary to follow standardized routing procedures.

Let’s take a look at a practical example of how this works. If we want to build out a blog feature, we would need the system to have four key actions — Create, Read, Update, and Destroy — commonly known as ‘CRUD’ actions. In addition to the CRUD actions, we will also need an index page that lists out all of our blogs — that’s our fifth route. Since our users will need to have a visual interface for creating and updating records (a form for creating and another form for updating), we will need two more routes. Putting all of that together, you will see that we end up needing seven different routes. The GET routes are all routes that usually render some erb content to a web browser. These are the routes that our users will work with everyday. …

Image for post
Image for post

React was designed to allow developers to create complex and highly interactive UIs. React components can quickly adapt to changes from user interactions or updates on the site. In order to enable this, all React’s components have a lifecycle which you can monitor and manipulate during its three main stages: creation, updating, and deletion.

You can think of lifecycle methods as opportunities for you to manipulate how the components of your application reacts to different changes in your app. …

Image for post
Image for post

JSX allows us to add HTML elements in React, thus making it easier to write React components in an efficient and expressive manner. In this blog I will briefly explain what JSX is, then I will focus on explaining some of the unique syntax of JSX.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that was written to be used in React applications. JSX code looks a lot like HTML but it comes with the full power of JavaScript. With JSX we can write HTML elements in JavaScript without using methods like createElement() or appendChild(). …

Image for post
Image for post

ES6 came with a lot of great new features including two new ways to define variables in JavaScript. There are now three different keywords or identifiers to declare a variable in JavaScript. In this article, I will explain the main differences between var, let, and const and when should you use them.

In order to fully understand the differences between each of the identifiers we first need to understand the concept of scope.

What is Scope?

Scope determines the accessibility or visibility of variables to JavaScript. There are three types of scope in JavaScript:

1. Global scope

2. Function (local) scope

3. Block scope (new with…

Arrow functions were introduced in ES6 and they allow us to write a more concise code. While both regular and arrow functions work in a very similar way, there are a few differences between the two.

There are 3 main differences between regular functions and arrow functions in JavaScript.

  1. ‘This’ keyword

It is impossible to use “this” keyword in arrow functions while in regular functions ‘this’ keyword can be used without any problems.

2. ‘New’ keyword

A constructable function, can be called with ‘new’, i.e. new User(). A collable function can be called without new.

Unlike the regular functions, the arrow functions are not “constructible” but “callable” so the keyword “new” won’t work. Regular functions are both “callable” and “constructible” therefore we can use the “new” keyword with regular functions. …

Mariola P

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store