Select Page
Javascript Concepts To Converse, Show Off And Exploit

Javascript Concepts To Converse, Show Off And Exploit

JavaScript is “this that bla bla” prevented me from exploring it for long. But the recent need to implement Apps in React Native forced me to explore it deeper. And I cannot agree with so many blasphemous claims demeaning the scripting language. Of course, there are new concepts. But they are there only to ease a lot of pain. It’s  mess but it’s a hot mess.

I won’t go into a performance comparison of whether js is good for the backend or not. But I am simply captured by the beauty and application scope of the JS in Web and App development using React Native.

Here are the main concepts that I have learnt so far:

 

1. Value and Reference Variable assignment:

JavaScript always assigns variables by value. But this part is very important: when the assigned value is one of JavaScript’s five primitive type (i.e., Boolean, null, undefined, String, and Number) the actual value is assigned. However, when the assigned value is an Array, Function, or Object a reference to the object in memory is assigned.

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

See how changing the value of var2 in case of primitive variable doesn’t affect var1. But messing with the reference var2.name in case of object changes the value assigned to the object in var1 , i.e var1.name, as well

In case of object:

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

2. Closures, first-class functions and higher-order functions

First-class functions are simply treated in JS like any other variables. It is possible to use them as parameters in other functions, functions can return functions, and functions can be saved in variables.

// Saving a function in a variable
const myFirstFunc = () => 10

// Passing a function as an argument
const mySecondFunc = (funcParam) => {
return console.log(funcParam())
}

// Returning a function from a function
const myThirdFunc = () => {
return () => console.log('Hello from returned function')
}

A higher-order function is a function that takes a function as an argument, returns a function or both.

const myFirstHigherOrderFunc = () => {
return () => {
const output = 'Returned from a higher order function'
console.log(output)
}

}const mySecondHigherOrderFunc = (funcParam) => {
funcParam()
}

Now the beautiful miracle called closures.

In JavaScript, when a function finishes executing, any variables declared within its body is “garbage collected”. In other words, it is deleted from memory. This is why local variables are possible in JavaScript. This is why variables inside functions cannot be accessed outside.

Special exceptions occur when something inside the function depends on the variable being deleted.

 

 

// Parent function
function parent() {
// Local variable of the parent function
const prefix = 'I am a ';

// Child function
return function(noun) {
// The child function depends on the variables of the parent function.
return prefix + noun;
};
}

The example above takes advantage of a concept in functional programming called currying.

 

// Parent function
function parent() {
// Local variable of the parent function
const prefix = 'I am a ';

// Child function
return function(noun) {
// The child function depends on the variables of the parent function.
return prefix + noun;
};
}

In this case, prefix is still usable by the child function even after it has been garbage collected because the child function created its own closure. A closure is like a “snapshot” of the environment a function is in when it is executed. Its closure is its own internal copy of the environment.

A closure is the combination of a function and the lexical environment within which that function was declared.
— MDN

What’s unique about Closures? Creating private variables is a recognised feature of OOP. But Closures bring that advantage in functional programming too! Only JS can allow such strange concoction of programming paradims. Read this to see how!

3. Destructuring

Destructuring is a common way to cleanly extract properties from objects.

const obj = {
name: 'Joe',
food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'

If you want to extract properties under a different name, you can specify them using the following format.

const obj = {
name: 'Joe',
food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'

In the following example, destructuring is used to cleanly pass the person object to the introduce function. In other words, destructuring can be (and often is) used directly for extracting parameters passed to a function.

const person = {
name: 'Eddie',
age: 24
}
function introduce({ name, age }) {
console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

4. Spread Syntax

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

In the following case, Math.max can’t be applied to the arr array because it doesn’t take an array as an argument, it takes the individual elements as arguments. The spread operator ... is used to pull the individual elements out the array.

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

5. Rest Syntax

You can use it to put any number of arguments passed to a function into an array!

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
myFunc(1, 2, 3, 4);
// 3

5. Array Methods

To delve into the comprehensive possibilities of Array methods explore MDN. I will refer to some of the most commmon ones.

RSS
LinkedIn
Share