JavaScript Introduction

Hi guys I'm Favor, a 13 year old self-taught front-end web developer passionate about programming. I decided to write again to share some of my knowledge on JavaScript to celebrate 100+ view on my first blog post. This post is used for educational purposes and for newbie coders. 😸👩‍💻

What is JavaScript??

JavaScript is a high-level compiled programming language, that conforms with the ECMAScript which is a general-purpose programming language, standardised by ECMA International according to the document ECMA-262. The newest release of JavaScript is the ES6 syntax which consists of the following features 👇.

• New ways of declaring variables - let and const to replace the var keyword. more info

• Default function parameters - allows you to set default function parameters in JavaScript. more info

• The rest parameter

  function myFunction(...){} // ... is the rest parameter
  

  more info

• The spread operator

let first = [1, 2, 3, 4];
let second = [5, 6, 7, 8];
const combined = [... first, ... second]; // ... ... spread operator used to join two arrays
console.log(combined); // output = [1, 2, 3, 4, 5, 6, 7, 8];

more info

• The Object literal syntax operations - which provides a new way to define object literals. more info

• The for...of loop - learn how to use the for...of loop to iterate over elements of an iterable object. more info

• Template literals - the new way to substitute variables in a string easily and neatly!

// With Template Literal

let firstName = "Divine";
let lastName = "Favor"
const greeting = `Hi ${firstName} ${lastName}, good day to you!`;
console.log (greeting); // output = Hi Divine Favor, good day to you!

// Without Template Literal

let firstName = "Divine";
let lastName = "Favor"
const greeting = "Hi " + firstName + lastName + ", good day to you!"; // output = Hi Divine Favor, good day to you!

So you can see from the above code that the template literal style wastes less time and make your code neat right? these are some of the new syntaxes that we have in the new ES6. You can check for the full list of new syntaxes in JavaScript ES6 here.

What are JavaScript Data Types?

A data type is defined as a type of data. The different data type we have in JavaScript are:

1. Variables // names
2. Strings // in quotations "stringName"
3. Arrays // in brackets [ ]
4. Objects // in curly braces { }
5. Numerical // Integers 12345 or floats 1.2, 4.7, 2.3
6. Boolean // true or false
7. null
8. unidentified // empty
9. NaN // not a number

Now we will look at these data types and their functions

Variables

A variable is like a box or container where we store stuffs 📥. You can store different types of data in a variable. Variables can be declared in two ways: with the let keyword - which allows you to change the value of the variable later in your code, with the const keyword - which does not change in your code. Variables help you store your data for future reference. For example, you are making a school website and a student whose class is in the 8th grade which has been used in so many instances and when that student goes to the 9th grade, you don't want to start changing every single place where you see 8th grade to 9th grade. That would be very stressful if you are dealing with many students who just went to the next class. 😪

// Without variable

console.log("Kola, who is in the 8th grade is writing his final 8th grade exams and is about to finish his 8th grade exams and is about to enter his next class.");

// output = Kola, who is in the 8th grade is writing his final 8th grade exams is about to finish his 8th grade exams and is about to enter his next class.

So solution? You store the value 8th grade in a variable called schoolGrade. Now, this variable schoolGrade is used to replace where 8th grade is mentioned. When the student moves on to the 9th grade, you only have to change the value of schoolGrade from 8th grade to 9th grade and it reflects on every other place 😸, Code 👇

/////    with variables

let schoolGrade = "8th grade";
console.log("Kola, who is in the "+ schoolGrade +" is writing his final " + schoolGrade + " exams is about to finish his " schoolGrade + " and is about to enter his next class.");

/////    output = Kola, who is in the 8th grade is writing his final 8th grade exams is about to finish his 8th grade exams and is about to enter his next class.

But then this code is messy right? it would take some time for a normal human being to see your code 'cause it's noisy. Now this code can be even shorter with template literals! 😸💃

/////    with template literals

let schoolGrade = "8th grade";
let student = `Kola, who is in the ${schoolGrade} is writing his final ${schoolGrade} exams is about to finish his ${schoolGrade} exams and is about to enter his next class. `;
console.log(student);

/////    output = Kola, who is in the 8th grade is writing his final 8th grade exams is about to finish his 8th grade exams and is about to enter his next class.

You see how this code is nice and clean? Now that is what I can understand! So it's time for me to wrap up! Thank you for taking out your time to read this blog post, was it helpful? feel free to like and comment. And oh, Would you mind giving me a follow on Instagram and Twitter ? You can check my LinkedIn and Github profiles too.