DEV Community: Ghloriey

Understanding Functions in JavaScript

Ghloriey — Wed, 24 May 2023 17:02:31 +0000

Introduction

Are you a beginner in JavaScript seeking to understand the use of JavaScript functions and the various things you can accomplish using functions? Seek no more because you have found the answer.

Learn how to create functions in JavaScript using various methods, manipulate functions, use the return keyword, invoke or call a function, and the best practices for writing a function.

By the end of this article, you will get in-depth knowledge on how to use JavaScript functions to build dynamic websites with your codes looking more readable and organized. Let's begin!

Prerequisites

Fundamentals of JavaScript, including declaring a variable and assigning a value to it.
A code editor such as Visual Studio Code or Sublime Text

Creating Functions

JavaScript Function can be created using the built-in function keyword followed by the function's name, a parathesis to contain the parameter(s), and a curly brace that holds the functions to be defined. There are two ways to define or create a function this includes;

Function Declaration:

Syntax

function functionName(parameter){
Block of statement to be executed
}

Example

function getAge(currentYear, birthYear){
let age = currentYear-birthYear
console.log(age)
}

The example above aims to calculate a person's age using function declaration in JavaScript. The function's name is getAge which accepts two parameters: currentYear and birthYear. In this case, parameters are simply what the function requires from the user. The Javascript statement is written between the opening and the closing curly brace. In this case, the statement calculates a person's age by subtracting the birthYear from the currentYear and assigned to a variable age.

Function Expression:

Syntax

let functionName = function(parameters){
Block of statement to be executed
}

Example

let getAge = function(currentYear, birthYear){
    return currentYear - birthYear
}

The difference between the function declaration and expression is that the function declaration is defined using the function keyword. In contrast, the function expression involves assigning the function to a variable or constant.

Function Execution

If you executed the first two codes above, you'd notice that neither logged any output to your console, which brings about what we call function execution.

It invokes or calls a function to perform a specific task or computation. This can be achieved using the function's name, followed by parenthesis(), and should be written after the closing curly brace.

Looking back at the previous example, let's now call the function

//Defining the function

function getAge(currentYear, birthYear){
let age = currentYear-birthYear
console.log(age)

//Calling the function
getAge(2023,1995)// output 28

you can also decide to use the return keyword while writing the JavaScript statement and then logging the answer to the console while calling the function as seen below;

// Defining the function

let getAge = function(currentYear, birthYear){
    return currentYear - birthYear
}
// calling the function
console.log(getAge(2023,1995))// output 28

Note that return isn't the same as console.log: return stops the execution and returns a value, while console.log displays the output on the console. If you use the return keyword without the console.log, your code will run, but no result will be displayed.

Functions Calling other Functions

Functions can be reused or called anywhere within your code at any time, and the most exciting thing is that even new functions can call or reuse a pre-existing function. Assuming we want to create a new function that checks if a person is eligible to vote by using his or her age. We can achieve that by creating a new function, checkEligibleVoters, and calling the last function age within the function expression. Let's see how it works!

// pre-existing function
function getAge(currentYear, birthYear){
let age = currentYear-birthYear
return age
}

// new function
function checkEligibleVoters(age){
 let currentAge = getAge(2023, 2015)// calling the previous function

if (currentAge >= 18){
    console.log(`you're eligible to vote`)
}
else{
    console.log(`sorry! you're too young to vote`)
}
}
checkEligibleVoters(getAge)// output: you're too young to vote

Arrow Function

The arrow function is a shorter way of declaring a function expression and is especially useful when writing short and concise functions.

Syntax

let getAge = (parameter1,parameter2)=>{function expression}

let's now write the previous example using the arrow function

let getAge = (currentYear,birthYear)=>{
return currentYear-birthYear;
}
console.log(getAge(2023,2005))// output: 18

// can still be further simplified
let getAge = (currentYear,birthYear)=>currentyear-birthyear
console.log(getAge(2023,2005))// output: 18

Built-in Functions and Methods in JavaScript

Numerous built-in functions for JavaScript are provided as part of the language. Because they are pre-installed in the JavaScript runtime environment and can be utilized immediately, they are frequently referred to as "global functions" or "built-in functions." The following are examples of commonly used JavaScript built-in functions:

Array(): This function creates a new array object.
string(): This function converts values to strings.
Boolean(): This function converts values to Boolean.
Number(): This function converts a value to a number.
Math.floor(): This function rounds numbers down.
Math.round(): This function rounds numbers to the nearest integer.
SetTimeout(): This function is used for scheduling the execution of code after a certain delay or at regular intervals
Math.ceil(): This function rounds numbers up
console.log(): This function shows the result of execution on the console.

Best practices

Use descriptive names: To make your code easier to read and maintain, give the names of your function that are relevant and descriptive. The name of a function should appropriately describe what it performs or does.
Properly Document Your Functions: Use comments or documentation to describe the function's intent, expected input, return values, and possible side effects. This helps other developers understand and use your function correctly.
Limit Function Complexity: Ideal functions should carry out a particular task or have a distinct and narrowly defined role. Create short, concise functions rather than long, complicated ones. A complex process can be broken down into more manageable, reusable functions to help with code organization and readability.
Use Function Parameters: Instead of relying on global variables, pass data and values to functions through parameters. This improves the reusability of functions and makes the code more modular.

Conclusion

In summary, learning JavaScript functions is essential to mastering JavaScript development. Functions are a crucial language component, enabling you to encapsulate reusable code, solve problems, and create complex applications.

This tutorial covered the basics of JavaScript functions, including creating and calling a function using function declaration and expression, returning functions from other functions, using arrow functions, and some JavaScript in-built functions.

Remember to stick to best practices while writing your code and keep practicing and exploring the world of Javascript functions.

If you learned something from this article, please like and comment.

Credits

Mozilla Developer Network.

W3 schools

Working with Dates and Times in JavaScript

Ghloriey — Sat, 13 May 2023 08:59:47 +0000

Introduction

Are you a beginner in JavaScript looking to work with dates and times? Look no further! This article will guide you through creating and manipulating dates using the built-in Date object in JavaScript.

Discover how to establish a new date object, filter individual components like the year and month, and format dates for your website or app. In addition, we'll discuss some common pitfalls to avoid while working with dates and times.

By the end of this article, you'll have an excellent foundation on using dates and times in JavaScript, and you'll be able to use that understanding to build dynamic, time-based web app. So let's get started!

Prerequisites

Basic knowledge of Javascript, including declaring variables and JavaScript objects.
A code editor such as; Visual Studio Code or Sublime.

The `Date` object

Dates and times are represented in JavaScript using the built-in Date object. A new date object is created by calling the Date() constructor with no arguments, like this:

let currentDate = new Date();

It provides several methods for managing, manipulating, and formatting dates and times. There are two main methods of the Date object;

get Methods

It retrieves or gets date and time information such as the month, year, hour or minutes. The commonly used get methods in Date objects include:

getfullYear(): Returns the year (4 digits for 4-digit years) of the specified date according to local time.

getMonth(): Returns the month (0–11) on the specified date according to local time.

getDate(): Returns the day of the month (1–31) for the specified date according to local time.

getHours(): Returns the hour (0–23) of the specified date according to local time.

getMinutes(): Returns the minutes (0–59) on the specified date according to local time.

getSeconds(): Returns the seconds (0–59) in the specified date according to local time.

getMilliseconds(): Returns the milliseconds (0–999) in the specified date according to local time.

getTime(): Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC. (Negative values are returned for prior times.)

geTimeZoneoffSet(): Returns the time-zone offset in minutes for the current locale.

set Methods

As the name implies, the set method changes or set an object's value. The commonly used set methods include;

setfullYear(): Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.

setMonth(): Sets the month for a specified date according to local time.

setDate(): Sets the day of the month for a specified date according to local time.

setHours(): Sets the hours for a specified date according to local time.

setMinutes(): Sets the minutes for a specified date according to local time.

setSeconds(): Sets the seconds for a specified date according to local time.

setMilliseconds(): Sets the milliseconds for a specified date according to local time.

setTime(): Sets the Date object to the time represented by several milliseconds since January 1, 1970, 00:00:00 UTC. Use negative numbers for times prior.

How to Format Date and Time in JavaScript

Two methods are used to format dates and times in JavaScript. This includes:

1. The toLocaleDateString()/toLocaleTimeString() format:

The arguments that can be passed in this format include the locale and the options.

The syntax for toLocaleDateString() in this format is:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

An example of the above syntaxes include;

let currentDate = new Date()
alert(currentDate.toLocaleDateString())//output 07/05/2023

When this format is used without an argument, the output is based on the implementation, the default locale, and the default time zone.

let currentDate = new Date()
alert(currentDate.toLocaleDateString("en-CA"))// output 2023-05-07

When a particular locale is passed in the argument, the output format is based on that locale.

let currentDate = new Date()
alert(currentDate.toLocaleDateString("en-CA",{dateStyle: "long"}))
// output May 7, 2023

When a particular locale is passed in the argument, and various options are specified, the output is based on both the locale and the specified options.

The syntax for toLocaleTimeString() format is:

toLocaleTimeString()
toLocaleTimeString(locales)
toLocaleTimeString(locales, options)

An example of the above syntaxes include:

//Without an argument
let currentDate = new Date()
alert(currentDate.toLocaleTimeString());//output 13:28:05

// with locale as the only argument
let currentDate = new Date()
alert(currentDate.toLocaleTimeString('en-US'));//output 1:29:40 PM

// with locale as the only argument
let currentDate = new Date()
alert(currentDate.toLocaleTimeString('en-US'));//output 1:29:40 PM

2. The Intl.DateTimeFormat format:

This format is similar to the first because it can be with or without an argument, and the arguments that it accepts are also the locale and the options.

The syntax for this format is:

new Intl.DateTimeFormat()

An example of this syntax:

let currentDate = new Date()
alert(new Intl.DateTimeFormat('en-US', {dateStyle: "full"}).format(currentDate));// output Sunday, May 7, 2023

let currentDate = new Date()
alert (new Intl.DateTimeFormat('en-US', {timeStyle: "full"}).format(currentDate));// output 1:46:48 PM West Africa Standard Time

Note that you must specify a time style when using this format to output time. Otherwise, the method returns a date.

Best Practices for Working with Dates and Time

Remember performance: Creating new Date objects can be expensive when repeatedly manipulating dates, so you can use existing date objects whenever you can to improve speed.
JavaScript uses the local timezone of the computer to handle timezones. If you have to work with various time zones, consider using a package like Luxon or Moment.js, which offer more powerful timezone management.
Use the JavaScript date object: The built-in Date object in JavaScript is available to manage dates and timings. It is advised because it provides numerous ways to format and manipulate dates.
Always check that user input for times and dates is accurate and within the desired range. Doing so helps avoid bugs brought on by improper data inputs.

Conclusion

If you've followed this article from the beginning, then congratulations! You have learned the basics of working with dates and times in JavaScript. Using the built-in Date object, you can create and manipulate dates to display in your web app.

Working with dates and timing should follow best practices to ensure the accuracy of your data. A library like Moment.js makes manipulating dates and times easier if you searching for more sophisticated capabilities and functionality.

Credits

Mozilla Developer Network.

W3 schools

A Comprehensive Guide on the use of If-Else Statement in JavaScript

Ghloriey — Fri, 21 Apr 2023 10:34:36 +0000

Introduction

If-else statement is a block of code that is executed when a particular condition is met. It is used to perform different actions based on different conditions, such that if a particular condition is true, a certain code should be executed else if the condition is false, another block of code should be executed or returned. The if-else statement can be used in many programming languages, such as JavaScript, MATLAB, C++, and Python, to name a few, but this article will walk you through the use of the if-else statement in JavaScript.

Basic Syntax of an `if-else` Statement

The if-else statement can be categorized into four parts, each with its own unique syntax. This includes;

The basic IF statement:

The if statement specifies the block of code to be executed if the condition is met.

Syntax

if(condition){
// block of code to be executed if the condition is true
}

The `if-else` statement:

The if-else statement is simply the combination of the basic if statement and the else statement. The else in this case specifies the block of code to be executed if the condition is false or not met.

Syntax


if(condition){
// block of code to be executed if the condition is true
}
else{
// block of code to be executed if the condition is false
}

Else if statement:

The else-if statement specifies a second condition if the first condition is false.

Syntax

if(condition 1){
// block of code to be executed if the condition is true
}
else if(condition 2){
// block of code to be executed if the first condition is false and the second condition is true
}
else{
// block of code to be executed if both condition 1 and condition 2 are false
}

Nested if else statement:

The nested if-else statement is simply having one if statement embedded in another if statement.

Syntax

if(condition 1){
// block of code to be executed if condition 1 is true
}
if(condition 2){
//block of code to be executed if condition 1 is false and condition 2 is true
}
else{
// block of code to be executed if both condition 1 and condition 2 are false
}

Examples of an if else Statement in Action

let SchoolProgress = prompt("have you finished primary school? yes/no", "")
if (SchoolProgress === "yes"){
    alert('congratulations, you can now proceed to secondary school')
    }
    else{
    alert("Pls go back to primary school")
    }

let score = prompt ("enter your score", "");
if (score >= 70 && score <= 100){
    alert("your grade is A");
}
if(score >=60 && score <= 69){
    alert("your garde is B");
}
if(score >= 50 && score <= 59){
    alert("your grade is C");
}
if(score >= 45 && score <= 49){
    alert("your grade is D");
}
else {
    alert("i'm sorry but u failed");
}

if (age == 18){
'you are eligible to vote'
}
else{
'you are too young to vote'
}
// output : 8 you are to young to vote
// output: 21 you are eligible to vote

Conditional/Ternary Operators

It is an operator that works as an alternative to the if-else statement. It takes in three operands, one of which is a condition, followed by a question mark ? then a code to execute if the condition is true followed by a colon: then another code to execute if the condition is false.

The syntax can be written as:

condition ? exprIfTrue : exprIfFalse

Example of a Ternary Operator

const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Ber"

Comparison Operators

A comparison operator is used to compare or check the difference between two values and returns the answer as a Boolean, that is, True or False.Examples of the comparison operators are;== Equal to=== Strict equal to!= Not equal to!== Strict not equal to>Greater than<Less than>= Greater than or equal to<= Less than or equal toNote: The difference between the == and === is that: the == converts the variable to the same type before performing a comparison, while the === does not do any type of conversion. It simply returns true if the variable types are the same.

Example:

2 == '2' // output: true
2 === '2' // output: false

Logical Operators

They perform logical operations between variables or values. Logical operators in JavaScript include;

Logical AND which is denoted by &&The AND operator returns true if both values or operands are true else it returns false.
LogicalOR which is denoted by ||The OR operator returns true if one of the values or operands is true else it returns false.
Logical Not which is denoted by ! The NOT operator returns true if the operand is false and returns false if the operand is true. Example:

let a = 2, b = true and c = false
b || c // output True
b && c // output False
!b // output False

Differences between `If-else` Statements & Conditional Operators

The difference between the if-else statement and conditional operator is that the conditional operator is a single programming language that takes in three operands which is generally faster and shorter than the if-else statement which is a programming block in which statements come under the parenthesis.

When to Use the `If-else` statement and Conditional Operators

If-else statements should be used instead of the ternary operators when you would like to have more than two outcomes, such as when writing an else if within your if-else statement. Generally, if you need to check more than one condition, the if-else statement is a better approach. On the other hand, the ternary operator should be used instead of the if-else statement whenever you would otherwise use a simple if-else statement. Generally, anything that can fit in a single line of code is a great time to use the ternary operator because it’s much more compact and easy to read. Ternary operators are also great when you want to set a value to a given variable.

Best Practices for Using `if-else` Statement

Avoid using nested statements: The use of nested statements should be avoided while using the if else statement because this could make your code too clumsy as there will be too many braces and if any mistake is made in the process it could be difficult to debug.
W*riting clear and concise code:* It is important to keep your code as brief as possible, this is to improve readability and Clarity.
Properly indenting code: Indenting your if else statements is one of the best practices to consider and this can be achieved by installing the prettier extension in your Visual Studio code.
Avoid redundancy: Do not repeat different blocks of codes with the same meaning. It creates room for redundancy.

Conclusion

The if-else statement in Javascript is used to check if a particular condition is met and it has proven to be one of the easiest methods used by programmers to check for certain conditions. The good part is that it doesn’t only apply to the JavaScript programming language but to many other programming languages. I’ll like you to give it a try and also remember to apply best practices while writing your code.

DEV Community: Ghloriey

Understanding Functions in JavaScript

Introduction

Prerequisites

Creating Functions

Function Declaration:

Function Expression:

Function Execution

Functions Calling other Functions

Arrow Function

Built-in Functions and Methods in JavaScript

Best practices

Conclusion

Credits

Working with Dates and Times in JavaScript

Introduction

Prerequisites

The Date object

How to Format Date and Time in JavaScript

Best Practices for Working with Dates and Time

Conclusion

Credits

A Comprehensive Guide on the use of If-Else Statement in JavaScript

Introduction

Basic Syntax of an if-else Statement

The if-else statement:

Examples of an if else Statement in Action

Conditional/Ternary Operators

Comparison Operators

Logical Operators

Differences between If-else Statements & Conditional Operators

When to Use the If-else statement and Conditional Operators

Best Practices for Using if-else Statement

Conclusion

The `Date` object

Basic Syntax of an `if-else` Statement

The `if-else` statement:

Differences between `If-else` Statements & Conditional Operators

When to Use the `If-else` statement and Conditional Operators

Best Practices for Using `if-else` Statement