Skip to main content

Command Palette

Search for a command to run...

Day 4 of #30daysOfJs

Updated
β€’6 min read
M

I am a front end web developer, learning React. I am right now focusing on JavaScript and completing #30daysOfJs challenge by writing a blog daily where I'm sharing my learnings.

Hey friend πŸ€—, welcome back to the series of #30daysOfJs.

Hope you're doing great πŸ™‚.

I am starting with String methods, they're around 20, hope you won't get exhausted after learning them.

Let's dive into the blog now...πŸš€

String methods

Everything in JS is an object, and it is one of the primitive data types.

A string cannot be modified once it is created.

  1. length : It returns the length of the string including empty space

    As you can see, the empty spaces are also included.

  2. Accessing characters of a string: We can do it by inserting the index into [], but mind that index should be decreased by one.

  3. toUpperCase -> A whole string can be converted into upper case using this method

  4. toLowerCase -> similarly the string can be converted to lowercase

  5. substr() -> This is used to get a sub string of the string. This takes two arguments, one is starting index, another is the number of characters to be sliced.

  6. substring() -> Again, this also is used to get a substring,

    And this also takes two arguments, one is the starting index, but another is the ending index.

    That's the small difference between these two.

  7. split() -> This method splits the string at a specific place.

    Let's say you have a repeating char in your string and on basis of that you can apply split on it.

    It will return you an array of substrings that resulted due to split.

  8. trim() -> A method to remove whitespaces from a string.

    Note that trim() does not change the original string.

  9. includes() -> a method to check if a given character or substring exists in a string or not

    Hence it returns boolean -> either true or false

  10. replace() -> Now that you know how to check if a sub string is included in a string or not, then this is a method to replace a sub string with another one.

    Two parameters -> old substring, new substring

  11. charAt -> it returns the character when index is given as an argument.

  12. charCodeAt -> similar one but it returns the ascii code of the char at a certain index.

  13. indexOf -> This method returns the index of first occurrence of the given substring if it exists, if it doesn't exist it returns -1.

  14. lastIndexOf -> A similar one to the above but this returns the index of last occurrence of the given substring.

    As you can see, indexOf returned the index of first occurrence, while lastIndexOf returned the index of second or last occurrence.

  15. concat() -> It takes many strings and joins them

  16. startsWith() -> this method takes a substring and returns true or false, it says whether the string starts with that particular given substring

  17. endsWith() -> similarly, it checks if the string ends with the argument's substring.

  18. search() -> This method searches for a given substring and returns the index of its first occurrence.

    So, it has found the sub string at 0th index.

  19. repeat() -> It simply repeats the string upto given number.

That's it in strings that I've learned for today.

Conditionals

Conditional statements are used to make decisions based on different conditions.

The flow of JS code is from top to bottom, now it can be altered using only two ways.

  1. Conditionals -> A block of code will be executed if certain condition is true.

  2. Looping -> A repetitive execution of a set of lines of code until a certain condition gets satisfied.

So, Now we're learning Conditionals.

If condition

Simply an if condition -> If the condition is true, the code inside the if block is executed, otherwise the block is ignored or skipped.

Since the condition is true, the code inside got executed.

But what if you want to do something else if the condition fails.

We have Else for that.

If else

The else needs no condition, it executes only when if's condition is false.

Also, remember any one of these two is executed at a time.

But what if I have multiple conditions and then one if statement won't be enough.

Therefore, we will be using If-else if- else ladder is used.

If-else-if-else ladder

Since the marks are less than 90, the result is B grade.

Switch case

An alternative to if else if else ladder is switch case, the code looks a bit organized using this.

Let's see the same above example using Switch case.

The switch will take the input upon which the cases are designed, if case result is true then we'll pass true into switch.

Also, after every case we need a break statement to stop the further execution of code.

Here, the default acts as the final else condition.

Operators

Assignment Operators :

Operators are used to assign values to the variables.

The basic one is: =

x = y -> This means that y's value is assigned to x

Now whatever was in y is now also in x variable.

Similarly +=

x += y -> A shortcut to -> x = x + y

And the rest are implemented in a similar manner, you can see them in the image below.

Arithmetic operators

These are nothing but mathematical operators.

% -> modulus operator gives the remainder when a and b are divided.

** -> gives you the value of a when raised to power of b.

remaining operators are simple maths.

Comparison Operator

Here, compared to other programming languages, in JS we've two kinds of operators to check equalities.

\== and ===

a == b -> compares a's value with that of b

whereas, a === b -> compares a's value as well as the data type with that of b.

Let's experiment...

As you can see, in the first case, the result was true, because the value was the same.

But in the second case, although the value is similar but the data type is different, hence the result is false.

The remaining operators are self-explanatory and can be seen in the image below.

Logical operators

These are mostly used in conditionals when multiple comparisons are needed to be satisfied.

We have an ampersand, pipe and negation operator in this.

I have also mentioned one golden rule in the second image, have a look at that.

Increment and Decrement operators

Again both of these have two types, pre and post.

In case of pre-increment/decrement -> the value first increases/decreases and then it gets assigned back to the variable

And in case of post -> the value gets assigned to the variable first and then it increases itself.

Ternary operator

It's an alternative to if else when the conditions are of one line.

That's it folks for today πŸ™ƒ.

This day was a bit exhaustive for me, hope you haven't gone through the same thing πŸ˜….

Hope to see you in the next blog, till then take care πŸ€—.

Goodbye.