Short intro about Arrow Function and String Function in JavaScript

Introduction:

About JavaScript

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic programming language that supports object-oriented and declarative style.

JavaScript can run on the browser as well as servers. Basically, any device containing a special program known as JavaScript engine (e.g V8 in Chrome) can execute JavaScript.

What can Javascript do?

Modify HTML DOM and Styles
Handle Events
Handle Requests
Interact with third-party APIs
Work with Local Storage

String Functions:

1. toUpperCase() --> returns the new string in uppercase format of source string

var str = "anik";
var str2 = str.toUpperCase();
console.log(str);//anik
console.log(str2);//ANIK

2.toLowerCase() --> returns the new string in lowercase format of source string

var str = "ANIK";
var str2 = str.toLowerCase();
console.log(str);//ANIK
console.log(str2);//anik

3.trim() --> returns a new string with removed white space from start and end of the string.

var str = "   Jagathish  ";
var trimmedStr = str.trim(); 
console.log(trimmedStr); //"Jagathish"var str1 = "J  aga";
var trimmedStr1 = str1.trim();
console.log(trimmedStr1); //"J  aga"var str2 = "J   .";
var trimmedStr2 = str2.trim();
console.log(trimmedStr2); //"J   ."

4.trimStart() --> returns a new string with removed white space from start of the string. trimLeft() is an alias of this method.

var str = "   Anik  ";
var trimmedStr = str.trimStart();
console.log(trimmedStr); //"Anik  "

5.trimEnd() --> returns a new string with removed white space at end of the string. trimRight() is an alias of this method.

var str = "   Anik  ";
var trimmedStr = str.trimEnd(); 
console.log(trimmedStr); //"   Anik"

5.charAt() --> returns the character at the given index.

var str = "Jagathish";
console.log( str.charAt() ); //the default index is 0 so "J"str.charAt(1); //astr.charAt(8); //hstr.charAt(100); //"" if max than str length returns empty stringstr.charAt(-1); // for all negative values returns empty string//no type conversion takes pace so the result is empty string
str.charAt("1");  //""

6.charCodeAt() --> returns the UTF-16 character code of the character at the given index. All rules of index in chatAt method is similar to charCodeAt.

// char code for a - 97, b =98 ,... z -122// char code for A - 65 ... Z - 90var str = "Jagathish";str.charCodeAt(0); // 74str.charCodeAt(1); // 97

7.concat(arguments) concate the arguments passed with the source string. It doesn’t change on source string.

var str = "JavaScript";
str.concat(' ', "Jeep", "."); // JavaScript Jeep.

Note: This method is not recommended , instead you can use normal concatenation using assignment operator.
Example

var str = "JavaScript".var name = str + " " + "Jeep" +".";

8.includes(searchingString) returns whether searching String may be found in source string.

var str = "JavaScript Jeep";
str.includes("Jeep"); // true
str.includes("jeep"); // false --> case sensitive// we can also specify the index to start searchvar str = "Jeep";
str.includes("Jeep", 0);  // true
str.includes("Jeep", 1);  // false

9.endsWith(searchString) returns whether the source string ends with the searching string.

var str = "JavaScript Jeep";
str.endsWith("Jeep"); // truestr.endsWith("jeep"); // falsestr.endsWith("Kepp"); // false// we can also specify the endPosition(index+1) to which the test should runvar str = "Jeep";str.endsWith("J");  //falsestr.endsWith("J", 1) // true

10.startsWith(searchString) returns whether the source string starts with the searching string.

var str = "JavaScript Jeep";
str.startsWith("Java"); // truestr.startsWith("java"); // falsestr.startsWith("Ava"); // false// we can also specify the 
startPosition(index) to which the test should runvar str = "JAVASCRIPT"str.startsWith("VA");  //falsestr.startsWith("VA", 2) // truestr.startsWith("J", 1); // false --> because we are saying to start search from index 1 .

Arrow functions:

Let’s revisit arrow functions.

Arrow functions are not just a “shorthand” for writing small stuff. They have some very specific and useful features.

JavaScript is full of situations where we need to write a small function that’s executed somewhere else.

Get Anik Sarker’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For instance:

• arr.forEach(func) – func is executed by forEach for every array item.
• setTimeout(func) – func is executed by the built-in scheduler.

It’s in the very spirit of JavaScript to create a function and pass it somewhere.

And in such functions, we usually don’t want to leave the current context. That’s where arrow functions come in handy.

Arrow functions have no “this”

As we remember from the chapter Object methods, “this”, arrow functions do not have this. If this is accessed, it is taken from the outside.

For instance, we can use it to iterate inside an object method:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],
  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};
group.showList();

Here in forEach, the arrow function is used, so this.title init is exactly the same as in the outer method showList. That is: group.title.

If we used a “regular” function, there would be an error:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],
  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};
group.showList();

The error occurs because forEach runs functions with this=undefined by default, so the attempt to access undefined.title is made.

That doesn’t affect arrow functions, because they just don’t have this.

Arrow functions can’t run with new

Not having this naturally means another limitation: arrow functions can’t be used as constructors. They can’t be called with new.

Arrow functions VS bind

There’s a subtle difference between an arrow function => and a regular function called with .bind(this):

• .bind(this) creates a “bound version” of the function.
• The arrow => doesn’t create any binding. The function simply doesn’t have this. The lookup of this is made exactly the same way as a regular variable search: in the outer lexical environment.

Arrows have no “arguments”

Arrow functions also have no arguments variable.

That’s great for decorators when we need to forward a call with the current this and arguments.

For instance, defer(f, ms) gets a function and returns a wrapper around it that delays the call by ms milliseconds:

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}
function sayHi(who) {
  alert('Hello, ' + who);
}
let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hello, John after 2 seconds

The same without an arrow function would look like:

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

Here we had to create additional variables args and ctx so that the function inside setTimeout could take them.

Summary

Arrow functions:

• Do not have this
• Do not have arguments
• Can’t be called with new
• They also don’t have super, but we didn’t study it yet. We will on the chapter Class inheritance.