Forem: Mgbeji Uche

Understanding JavaScript Scope: Global and Local

Mgbeji Uche — Mon, 22 Jan 2024 21:25:16 +0000

JavaScript, a versatile and widely-used programming language, employs a concept called "scope" to manage the accessibility of variables within a program. Scope determines where a variable can be accessed and modified. In JavaScript, there are two main types of scope: global scope and local scope. Let's delve into these scopes and explore how they function with relevant examples.

1. Global Scope:

Global scope refers to the outermost level of a JavaScript program. Variables declared outside any function or block have global scope and are accessible throughout the entire codebase. Global variables can be risky because any part of the program can modify them, potentially leading to unintended consequences.

Example:

// Global scope variable
var globalVar = "I am global";

function exampleFunction() {
  // Accessing global variable
  console.log(globalVar);
}

exampleFunction(); // Output: "I am global"

In this example, globalVar is declared outside any function, making it accessible globally. The exampleFunction can access and print the global variable.

2. Local Scope:

Local scope, on the other hand, is confined to a specific function or block. Variables declared within a function or block have local scope and are only accessible within that particular context. This helps in encapsulating variables, preventing unintended interference from other parts of the code.

Example:

function exampleFunction() {
  // Local scope variable
  var localVar = "I am local";

  // Accessing local variable
  console.log(localVar);
}

exampleFunction(); // Output: "I am local"

// Attempting to access localVar outside its scope would result in an error
console.log(localVar); // ReferenceError: localVar is not defined

In this example, localVar is declared within the exampleFunction, making it accessible only within that function. Attempting to access it outside the function results in a ReferenceError.

3. Lexical Scope (Closure):

Lexical scope, often associated with closures, involves the ability of a function to access variables from its outer (enclosing) scope, even after that scope has finished executing. This behavior is a fundamental aspect of JavaScript and is a powerful mechanism for managing state.

Example:

function outerFunction() {
  var outerVar = "I am outer";

  function innerFunction() {
    // Accessing variable from outer scope
    console.log(outerVar);
  }

  return innerFunction;
}

var closureExample = outerFunction();
closureExample(); // Output: "I am outer"

In this example, innerFunction is defined inside outerFunction, forming a closure. When outerFunction is invoked, it returns innerFunction, which can still access outerVar even though outerFunction has completed execution.

4. Block Scope (Introduced with ES6):

Before ECMAScript 6 (ES6), JavaScript only had function scope. With the introduction of the let and const keywords in ES6, block scope was introduced. Variables declared with let and const are limited to the block in which they are defined, such as loops or conditional statements.

Example:

if (true) {
  // Block scope variable
  let blockVar = "I am block-scoped";

  // Accessing block-scoped variable
  console.log(blockVar);
}

// Attempting to access blockVar outside its scope would result in an error
console.log(blockVar); // ReferenceError: blockVar is not defined

Here, blockVar is declared within the if block, making it accessible only within that block. Attempting to access it outside the block results in a ReferenceError.

Conclusion:

Understanding scope is crucial for writing maintainable and error-free JavaScript code. Global scope allows variables to be accessed throughout the entire program, while local scope confines variables to specific functions or blocks. Lexical scope, through closures, enables functions to access variables from their outer scopes. With the introduction of ES6, block scope provides more fine-grained control over variable visibility.

By leveraging these different types of scope, developers can write more modular and secure code, minimizing the risk of unintended variable modifications and improving overall code quality.

Array Methods in JavaScript

Mgbeji Uche — Sat, 13 Jan 2024 12:13:20 +0000

An array is a special kind of object which contains lists of elements that store multiple values in one place.
Array Methods are built in functions used for processing or manipulating different types of elements or data values stored in an array.

Example of an array method:

const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(value => value * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Now that you have an idea of what an array method is, lets dive deeper and explore the various kinds of array methods available in JavaScript. There are many kinds of array methods in JavaScript and we shall checkout the most commonly used of them all in this tutorial. Also, we shall group them together according to the type of functions they perform for ease of understanding.

Array method for evaluating length properties.

length property: this method is used for checking the number or length of elements in an array, when called the arr.length() method returns a number value equal to the number of elements/items in the array.

Example:


const oddNums = [2, 4, 5, 11, 12];
console.log(oddNums.length); // 5

Array Methods for adding or removing elements.

push(): this array method adds one or more elements to the end of an array and returns the new length of the array. The arr.push() method modifies the original array as can be seen below.

Example:

let verbs = ["come", "go", "laugh"];
let added = verbs.push("run"); 
console.log(added); // 4
console.log(verbs); // ["come", "go", "laugh", "run"]

pop(): this array method removes an element from the end of an array and returns the it, this method modifies the original array.

Example:

let nouns = ["house", "cars", "pen", "sun"];
console.log(nouns.pop()); // sun
console.log(nouns); // ["house", "cars", "pen"]

unshift(): this method adds one or more elements to the beginning of an array and returns its new length. The arr.shift() method modifies the original array.

Example:


let someColors = ["white", "yellow", "purple"];
console.log(someColors.unshift("pink")); // 4 
console.log(someColors); // ["pink", "white", "yellow", "purple"]

shift(): this array method removes the first element from an array and returns it. Also, this method changes the original array as can be seen below.

Example:

let colors = ["red", "blue", "green", "black"];
console.log(colors.shift()); // red
console.log(colors); // ["blue", "green", "black"]

splice(): this method is used for deleting, inserting, and replacing elements in an array. It accepts two or more arguments.
This syntax arr.splice(start, end) deletes one element starting from index 1 and returns it.

Example:

// Delete 1 item, starting from index 1
 Let items = ["pen", "book", "phone", "cup", "cap"];
 console.log(items.splice(1,1)); // ["book"]
 console.log(items); // ["pen", "phone", "cup", "cap"]

let removed = items.splice(0, 2); // removes the first two items starting from index 0 and returns them
 console.log(removed); // ["pen", "phone"]
 console.log(items); // ["cup", "cap"]
 console.log(items.length); //2

// insert items
let add = ["pen", "book", "phone", "phone", "peg"];
 console.log(add.splice(2, 0, "pot", "spoon")); 
 console.log(add); // ["pen", "book", "pot", "spoon", "phone", "phone", "peg"]
 console.log(add.length); // 7
 console.log(add.splice(2, 2, "ball", "glasses")); // ["pot", "spoon"]
 console.log(add); //  ["pen", "book", "ball", "glasses", "phone", "phone", "peg"]

The above examples show the different ways in which new elements can be deleted, inserted or replaced in an array using the splice() method.

slice(): The slice() method takes two arguments like this arr.slice([start], [end]) and returns a new array with a copy of all elements from the start index to the end, without including the end index itself.

Example:

let pureItems = ["pen", "book", "phone", "cup", "cap"];
console.log( pureItems.slice(1, 3)); // ["book", "phone"]

let itemNums = [1, 2, 3, 4, 5]
console.log(itemNums.slice(-3)); // [3, 4, 5]

As can be seen from the above example, passing a negative value as argument counts from the ending of the array(from right to left).

Array methods for finding elements.

indexOf(): this array method returns the first index of a specified value or -1 if the value is not found in the array.

Example:

let str = "Good Morning Uche";
let index = str.indexOf('Uche');
console.log(index); //13
console.log(str.indexOf('he'); //15

Please note that spaces are counted as well.

includes(): this array method checks if an element is included in an array and returns a Boolean value of true if found, otherwise it returns false.

Example:

const numArray = [1, 2, 3, 4, 5];
console.log(numArray.includes(5)); // true
console.log(numArray.includes(8)); // false

find(): this method searches for an element with a matching value in an array and returns the value if found, otherwise, it returns undefined.

Example:

const fewNums = [1, 2, 3, 4]
console.log(fewNums.find( num => num == 3 )); // 3

console.log(fewNums.find( num => num == 20 )); // undefined

findIndex(): this method looks for an element and returns the index where the element was found instead of the element itself. The value of -1 is returned if nothing is found.

Example:

const nums = [9, 5, 4, 6, 8, 9, 12];

let numsIndex = nums.findIndex( num => num === 4);
console.log(numsIndex); // 2

High-order methods

map(): this array method transforms array elements by performing an assigned function on each element of the array then returns a new modified array.

Example:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(value => value * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

filter(): this method returns an array of all matching elements in an array. In order words, it filters off all other elements which did not pass the test and returns a new array of the filtered elements.

Example:

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
console.log(array.filter(num => num > 3 && num <= 8)); // [4, 5, 6, 7, 8]

reduce(): this array method reduces elements of an array to a single value and returns the value. It accepts the accumulator and current value as arguments.

Example:

const gameLevels = [1, 2, 3, 4];
console.log(gameLevels.reduce((acc, curr) => acc + curr)); // 10

some(): this array method checks if at least one element in an array meets a requirement. This method returns a Boolean value of true when found and false when not found.

Example:

const prices = [30, 210, 180, 20];
console.log(prices.some(price => price > 500)); // false
console.log(prices.some(price => price > 100)); // true

sort(): this method sorts elements of an array and returns a modified array of sorted elements in an ascending or descending order. In order to return a correctly sorted array, an arrow function like this should be passed to it: (a,b) => a – b;// for sorting in ascending order, or this: (a,b) => b – a; for sorting in descending order. This way it returns a correctly sorted array.
The reason for this twist is because the elements of an array is first converted to strings for comparison and then sorted out using lexicographic ordering, this makes a number like 3, 4, 5 etc, greater than 12, 22, 10, because the first numbers of each digit are compared and returned. As a result of this, the output differs from the expected output hence, we employ the services of the above arrow function to correct this.

Example:

let evenNums = [2, 8, 16, 4, 24, 6];
console.log(evenNums.sort()); // [16, 2, 24, 4, 6, 8]
console.log(evenNums.sort((a,b) => a - b)); // [2, 4, 6, 8, 16, 24]
console.log(evenNums.sort((a,b) => b - a)); // [24, 16, 8, 6, 4, 2]

every(): method checks if every element in an array passes a test or satisfies a given requirement.

Example:

const ages = [3, 10, 14, 16];
console.log(ages.every(age => age > 2)); // true
console.log(ages.every(age => age > 40)); // false

forEach(): this method loops through array elements and performs any assigned functions on each item or element in the array.

Example:

const primeNums = [1, 2, 3, 5];
primeNums.forEach((item) => console.log(item)); // prints each array items to the console

Concat Method

concat(): this method takes any number of arrays as arguments and returns a new array with all the elements in the previous arrays, then merges them all together. The syntax is like this:
arr.concat(arg1, arg2, arg3...)

Example:

const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];
const alphaNumeric = alpha.concat(numeric);
console.log(alphaNumeric); // ['a', 'b', 'c', 1, 2, 3]

Reverse Method

reverse(): This method reverses the order of elements in an array.

Example:

add = ["pen", "book", "phone", "phone", "peg"];
 console.log(add.reverse()); // ["peg", "phone", "phone", "book", "pen"]

Methods for flattening arrays

flat(): this array method flattens an array recursively up to a specified depth.

Example:

const freshNums = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
console.log(freshNums.flat(1)); // [1, 2, 3, 4, [5, 6, [7, 8, [9, 10]]]]
console.log(freshNums.flat(2)); // [1, 2, 3, 4, 5, 6, [7, 8, [9, 10]]]
console.log(freshNums.flat(4)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flatMap(): this method executes a mapping function on every element in an array and creates a new flat array without changing the original array.

Example:

const arrays = [[1], [2], [3], [4], [5]];
const a = arrays.flatMap(arr => arr * 5);
const b = arrays.flat().map(arr => arr * 10);
console.log(a); // [5, 10, 15, 20, 25]
console.log(b); // [10, 20, 30, 40, 50]

Array to String Method

join(): this method concatenate all elements of an array into a string separated by a separator and returns an array as a string. This method does not change the original array.

Examples:

let letters = ["a", "b", "c"];
console.log(letters.join(',')); // a,b,c
console.log(letters.join('-')); // a-b-c
console.log(letters.join('')); // abc

toString(): this method converts each element of the array into a string and concatenates them together, separated by a comma.

Examples:

let favNums = [1, 2, 3, 4, 5, 8, 13, 22 ];
let convertedNums = favNums.toString();
console.log(convertedNums); // 1,2,3,4,5,8,13,22
console.log(typeof(convertedNums)); // string

concatenation(+): this method converts an array to a string through a method called implicit coercion. In order words, JavaScript implicitly coerces the array to a string using the concatenation operator +.

Examples:

let got = "" + favNums
console.log(got); // 1,2,3,4,5,8,13,22
console.log(typeof(got)); // string

string(): an array can also be explicitly coerced to string using a String constructor.

Examples:

let bigNums = [58, 96, 68, 87];
let convertedBigNums = String(bigNums);
console.log(convertedBigNums); // 58,96,68,87
console.log(typeof(convertedBigNums)); // string

In Conclusion:

Now that you have learnt about the various methods of accessing, modifying and manipulating elements stored in arrays, you now understand why array methods are so important in JavaScript. It is equally important to understand and consider best practices when choosing an appropriate method for solving a particular problem while working with arrays.
Hope you enjoyed reading this far, thanks for reading.

Unlocking the World of JavaScript Basics: Embracing Variables and Data Types

Mgbeji Uche — Mon, 04 Dec 2023 09:06:13 +0000

If you're venturing into the captivating realm of web development, understanding the fundamentals of JavaScript is your gateway to success. In this journey, two essential building blocks demand your attention: variables and data types.

Let's explore further to see what they really are.

Variables:

Imagine variables as containers holding valuable information. These dynamic entities allow you to store and manipulate data within your scripts. Think of them as labeled boxes – you assign a name (or label) to a box, drop something inside, and later retrieve or modify its contents. This way, it makes for easy retrieval and use in future references.

Example:

let message = "Hello, World!";

Here, 'message' is our box, and it contains the greeting. The 'let' keyword declares the variable, while '=' assigns the value.

Variables can be declared using any of this syntax; let, var or const.
If a variable is declared using 'const', it simply means that it cannot be changed or redeclared later. However, if a variable is declared using either the 'let' or 'var' keyword, it can be reassigned later if one wants to.

Variables bring flexibility to your code, enabling dynamic interactions and adaptability. Whether it's a number, a string of text, or a complex object, variables empower your script with the ability to evolve and respond to changing conditions.

Data Types: The DNA of Your Code

JavaScript embraces various data types, each serving a unique purpose. Let's explore some fundamental ones:

Strings:

Strings represent text and are enclosed in single or double quotes.

let greeting = "Hello, World!";

Here, 'Hello, World!' is a string, encapsulated within the variable 'greeting'.

Numbers:

Numeric values, both integers and decimals, fall under the number data type.

let quantity = 42;
let price = 3.14;

In this snippet, 'quantity' holds an integer, while 'price' embraces a decimal number.

Booleans:

Booleans express truth or falsehood. They are the binary backbone of decision-making in programming.

let isProgrammingFun = true;
let isJavaScriptHard = false;

In this instance, 'isProgrammingFun' holds a true value, while 'isJavaScriptHard' is false.

Arrays:

Arrays group multiple values into a single, ordered structure.

let fruits = ["apple", "banana", "orange"];

'fruits' here is an array containing strings of different fruits.

Understanding these data types equips you with the power to manipulate information effectively, making your scripts robust and versatile.

Why It Matters:

Embracing variables and data types is not just a technical necessity; it's the art of crafting dynamic, responsive code. By mastering these basics, you lay the foundation for intricate projects, setting the stage for a seamless coding experience.

So, whether you're a coding novice or a seasoned developer, remember: Variables and data types are not mere lines of code; they are the essence that breathes life into your JavaScript creations. Dive in, experiment, and let your code tell stories of innovation and creativity.

In Conclusion:

All great things start with small steps and JavaScript is no exception. Every little piece of information gained while learning this unique language will go a long way in helping you become better at programming. Never give up!
Happy coding!