DEV Community: Teacher Bogita

An Open letter to a beginner Programmer

Teacher Bogita — Fri, 17 Feb 2023 10:54:57 +0000

As a beginner Programmer, one is usually stuck on which programming language to begin with. There exist several programming languages worldwide, and some are tailored for specific purposes like Kotlin used for mobile app development. However, the question of which language a coding enthusiast should begin with should be more or less of a concern. It all depends on which field one wishes to get to. Computer science is an ocean of its own, you have to choose one war and be patient with it.
But you can't fight a war without a strategy. For instance, the web development field has two fields, the front-end and back-end fields.

The front end primarily focuses on building a graphic user interface of a website using HTML, CSS, and JavaScript. Learning both fields makes one a full-stack developer. It is not a walk in the park to become a full stack, all you need is commitment, passion, and willingness to learn new concepts now and then. By the way, talk of a code that is not showing errors yet not running!! This is not a field for the egg-hearted fellows. Forget about motivation on how you can become a programmer in 5 days. But you can become a programmer at in anytime you wish. It all depends on a willingness to progress in midst of the chaos that rise when for instance, a YouTube coding tutorial becomes “hard” after twenty minutes of viewing it, yet the full tutorial lasts for seven hours.

For a beginner programmer, knowing what you want to achieve is key. Every language is suited for specific uses, and some languages require knowledge of the other since they are related. For instance, you cannot learn CSS before having HTML basics. It is impossible to learn React JS, which is a JavaScript library without grasping JavaScript concepts. Before chewing a bone, you have to know how to chew steak. You need a plan and stick to it. If you are stuck, seek guidance from those who have already established themselves in the field. This way, you will learn a lot and save time by concentrating on the major skills you want to acquire. I hope you find this article useful.

Arrow Functions in JavaScript: From Complexity to Simplicity

Teacher Bogita — Thu, 16 Feb 2023 10:27:03 +0000

As a beginner JavaScript Programmer, I had a difficult time trying to understand the JavaScript arrow Functions. However, I believe that the best way to grasp such concepts is by explaining them to other junior developers. In fact, my name dictates that I should teach! In this article, you will learn about arrow functions, the syntax, parameters, and when to omit the arrow functions.

Introduction

The arrow functions were the most popular features added to JavaScript, and they were added with ES6 specification. They are the most discussed features, because of their look of simplicity but proof of complexity when writing a JavaScript code using them. Let us dive in deep and dissect Arrow functions.

Syntax for arrow functions

The most notable feature of the arrow function is the (=>). It is nicknamed the “fat arrow”, which is the source of their name. This “fat arrow” is placed between parentheses for parameters, which start the arrow function, and the function body where the code to be executed is placed. The arrow function ends at the body function.

// Arrow function syntax
let myArrowFunction = () => // concise function body with piece of code
// Or
let myArrowFunction = () => {/* block function body with piece of code */}

// Call myArrowFunction
myArrowFunction()

Take note that the syntax of arrow functions and that of functions is similar. This is the reason as to why arrow functions are used as an alternative to the regular function expressions.

// Arrow function
const myArrowFunction = () => {/* function body with some code */}

// Function expression
const myArrowFunction = function() {}

But wait! The similarity should not dupe you. Despite the similarity, there exist notable differences. Don’t worry, my next tutorial will cover this.

Parameters and (optional) parentheses

Normally, arrow functions begin with parentheses. Nevertheless, this is not mandatory. The parentheses are optional and can be omitted. The major concern for you as a programmer is whether an arrow function accepts any parameter. If it does not accept any, then you have to use empty parentheses (()).
The same case applies to arrow functions which accept more than one parameter. Here, you have to enclose these parameters with parentheses (()). Remember to separate each parameter with a coma. This leaves you with one instance where parentheses (()) are optional.
If an arrow function accepts only one parameter, you can choose to use or omit parentheses (()). You are not obliged to use them. Parentheses may be used anytime regardless of how many parameters exist, the arrow functions will still work correctly. Here is an illustration;

// Arrow function with 0 parameters
// Parentheses are required here
const myArrowFunction = () => // some code

// Arrow function with 1 parameter
// Parentheses are optional here
const myArrowFunction = paramOne => // some code

// This will also work
const myArrowFunction = (param1) => // some code

const myArrowFunction = (param1) => console.log(param1)

// Call myArrowFunction
myArrowFunction('doSomething')

// Arrow function with 2+ parameters
// Parentheses are required here
const myArrowFunction = (param1, param2) => // some code

const myArrowFunction = (param1, param2) => param1 + param2

// Call myArrowFunc
myArrowFunction(20, 60)

Optional curly brackets

Curly brackets are another optional cases of arrow functions. Here, it’s easier than the instance of parentheses. What matters here is if the arrow function has one line of code or more. You can omit the curly brackets if it is a one-liner code function and it will work correctly. However, if code spans more than one line, curly brackets should be used. An arrow function is said to have a “concise body” if it has no curly brackets, while the one with curly brackets is said to have a “block body”.

Just like parentheses we discussed earlier, you have latitude to use curly brackets anytime and the code will be fine. But remember, you can only omit them in an instance of one-line arrow functions.

// One-line arrow function
// Arrow function with concise body
// Curly brackets are optional here
const myArrowFunc = () => // some code
const myArrowFunc = () => console.log('Welcome to this place!')

// This will also work
() => {/* some code */}

const myArrowFunction = () => {/* some code */}
const myArrowFunction = () => { console.log('Hello!') }

// Call myArrowFunction
myArrowFunction()
// Hello!

// Multi-line arrow function
// Arrow function with block body
// Curly brackets are required here
const myArrowFunction = () => {
  // some code
}

const myArrowFunction = () => {
  console.log('This is a useful tutorial')
}

// Call myArrowFunction
myArrowFunction()
// 'This is a multi-line arrow function.'

Looking at it keenly, you realize it makes sense. For a one-liner function, JavaScript easily determines where arrow function bodies begin and where they end. This is different from a block function which spans over many lines. Here, JavaScript cannot guess the exact boundaries of function body.

Implicit and explicit return

An interesting feature about arrow functions is that they implicitly return values. Simply put, they return values automatically. You don’t need to use the return keyword. This works in two specific instances. The first one is when arrow function has only one line of code.
When it is a one-liner arrow function, it will automatically return any code in function body. If arrow function is not a one-liner, you must use return statement.

// One-line arrow function
// Explicit return statement is not needed
() => // some code
const myArrowFunction = () => // some code

// Call myArrowFunction
myArrowFunction()

// Multi-line arrow function
// Explicit return statement is necessary
() => {
  return /* some code */
}
const myArrowFunction = () => {
  return /* some code */
}

// Call myArrowFunc
myArrowFunction()

The second situation where you have to use return statement is when arrow function uses block body, i.e. function body with curly brackets. This is another thing you have to consider when deciding what syntax you want to use. Whether you want to use “block body” and curly bracket or “concise body” without curly bracket.
If it is the later, concise body, you don’t have to use explicit return statement. If the former, block body, make sure to use return statement.

// One-line arrow function
// Explicit return statement is not needed
() => // some code
const myArrowFunction = () => // some code

// Call myArrowFunction
myArrowFunction()

// Multi-line arrow function
// Explicit return statement is necessary
() => {
  return /* some code */
}
const myArrowFunction = () => {
  return /* some code */
}

// Call myArrowFunction
myArrowFunction()

Immediately invoked arrow functions

JavaScript allows you to declare and invoke functions co-currently. We call these functions immediately invoked functions. Here are two ways to create these types of functions;

Wrapping the function with parentheses and adding additional pair of parentheses after the wrapping parentheses
Wrapping the function with parentheses and adding additional pair of parentheses after the curly brackets, still inside the wrapping parentheses.
Omitting the wrapping parentheses and putting NOT operator (!) at the beginning of the line, in front of the function keyword.
Fourth way is similar to the previous, except that you replace the NOT operator with unary operator +.

// Immediately invoked function no.1:
// invoking parentheses outside wrapping parentheses
(function() {
  // some code
})()

// Immediately invoked function no.2:
// invoking parentheses inside wrapping parentheses
(function() {
  // some code
}())

// Immediately invoked function no.3:
// using ! (NOT operator)
!function() {
  // some code
}()

// Immediately invoked function no.4:
// Using + (unary operator)
+function() {
  // some code
}()

A Guide for "this" keyword in JavaScript

Teacher Bogita — Wed, 15 Feb 2023 17:12:11 +0000

The this Keyword is a difficult JavaScript concept to grasp. However, becoming a great developer necessitates understanding concepts like the keyword. It is a common concept in any JavaScript code hence a must comprehend term. Simply put, this keyword refers to the object where it belongs. It is also defined as a property of an execution content, which is usually a reference to an object when not in strict mode. The keyword is majorly used in the Object Oriented programming context. Here is an example to understand it better;

let studentDetails = {
    firstName: "James",
    lastName: "Kyle",
    gender: "Male",
    age: 22,
    salute: function () {
      return (
        "Hello, I am " +
        this.firstName +
        " " +
        this.lastName +
        ", a student with passion in programming"
      )
    },
  }
  console.log(studentDetails.salute())

In the example, a StudentDetails object exists which has four properties and a salute method. When the salute method of the StudentDetails is called, the console.log will output;

Hello, I am James Kyle, a student with passion in programming

How did 'this.firstName' and 'this.lastName' convert to James and Kyle correspondingly?

To get the answer, we reference the definition of this keyword. Earlier, it was said that it refers to an object where it belongs. So from the above example, this refers to the studentDetails object, which owns the salute() method. The dot (.) operator is used to access members of an object as defined by this keyword. The dot (.) operator is being used in the console.log () to access/call the salute method. Note that you may use the dot(.) operator to access the properties method of the salute object like age and gender.

Situations in which the 'this' keyword can be used

Depending on how this keyword is called during execution, it can refer to many things. This makes the definition of this as the property of an execution context precise. Let’s dig further.

.this in the method of an object

To begin with, a method is used to denote a function that is a member of an object. All methods act as functions, but not every function can be a method. So, when this keyword is used inside a method, it refers to the holder of the method where it is used. Here is an example;

salute : function() {
return “Hello, I am " + this.firstName +" " + this.lastName +", a student with passion in programming"
  }

In the example above, this used inside the salute() method refers to the StudentDetail object, which owns the salute() method.

.this in the Global Context)

When used alone, not inside any function, and hence defined as being in the global context, this keyword refers to the global object. The global object refers to one which owns this keyword in this context.

.this in a function

Take note that we refer to this keyword when it is being used in a function, and not affiliated with any object. Here, the function is standalone. In such a JavaScript object, the default value of this is the holder of the function. If the code is not set to strict mode and has not been set to a member of an object, then "this: defaults to the global object.

function myFunction() {
return this;
}
myFunction() === window

From the illustration, this keyword value as used inside myFunction refers to the window object. This is the reason why the result of the string comparison between myFunction and the window object will output true since they hold the same value.

.this in a function (Strict Mode)

When used in strict mode, JavaScript does not allow default binding and this makes it undefined. The strict mode blocks sloppy code in programming. There is no concrete reason to want access to the value of this in a function because it will output the window object. Programmers majorly access this keyword since they wish to get some properties from the owner. Therefore strict mode enforces this, which makes this keyword undefined.

"use strict"
function  myFunction1() {
return this
}
myFunction1 () === window

As can be seen in the above example, in the strict mode, the value of this inside a function is undefined.

From the example above, in strict mode, the value of this inside a function is undefined.