A Beginner's guide to JavaScript

Okosun Mary's photo
Okosun Mary
·

5 min read

A Beginner's guide to JavaScript

Post learning the rudiments of HTML and CSS, I was faced with the challenge of trying to grasp the concept of JavaScript. Knowing fully well that I am not alone in this boat, I would be making a beginner friendly article on the concept of JavaScript. The focus of this article would be

  • What is JavaScript and its use cases

  • Basic JavaScript Syntax

  • Basic JavaScript operations

  • Resources

What is JavaScript and its use cases

JavaScript is a Programming language that adds interactivity to your website. It was invented by Brendan Eich. It is a very volatile and beginners friendly too. Some of its use cases include creating games, animated 2D and 3D graph, comprehensive database-driven apps and so much more.

Basic JavaScript Syntax

In order to give a better understanding of how JavaScript works, let’s explain some of the basic syntax. The good news here is that most of these syntax are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!🙂

  • VARIABLES: These are containers that store values. Variables are declared with the ‘var’, ‘let’ and ‘const’ keywords. The var declaration is globally scoped or locally scoped. It can be re-declared and updated. The let declaration is block scoped. It can be updated but not re-declared. The const declaration is block scoped. It cannot be updated or re-declared. This article explicitly explains variables.
  • DATA TYPES : These provides a set of values from which an expression (i.e variables, function, e.t.c) may take its values.

String- This is a sequence of text. It is enclosed in a single or double quote mark.

  let myVariable = ‘Mary’;

Number- This is a sequence of numbers. It is not enclosed in a quote marks.

let myVariable = 256;

Boolean- This is a ‘true’ or ‘false’ value. These are special keywords that do not require quote marks

let myVariable = true;

Array- This is a structure that allows to store multiple values in a single reference

let myVariable = [1, ‘Jane’, 256, ‘Kingsley’];
  • COMMENTS: These are added along with code to give more information. They are ignored by the browser. Comments in JavaScript are written as such
 // This is a single line comment

     /* 
    This is a multi-line comment
    */

Basic JavaScript Operations

Operations in JavaScript is as numerous as it is. However, for the sake of this article, we would look at some operations with the array data type. The vanilla JS array.slice() and array.splice() methods are used to manipulate items in an array. Because of their similar names, quite a lot of confusion regards their usage arises.

images.png For our example, We would make use of an array of football club.

  var footballClub=['Chelsea','Liverpool','Barcelona','Man united'];
  console.log(footballClub.slice(2)); //["Barcelona", "Man united"]
  console.log(footballClub); //["Chelsea", "Liverpool", "Barcelona", "Man united"]

Array.slice() method does not affect the original array but creates a copy of the array while manipulating.

   var footballClub=['Chelsea','Liverpool','Barcelona','Man united'];
   console.log(footballClub.splice(2)); //["Barcelona", "Man united"]
   console.log(footballClub); //["Chelsea", "Liverpool"]

Array.splice() method affects the original array while manipulating.

Resources

If you struggling with a piece of code, take a break and come back later refreshed.

The only way to become a clever programmer is to Practice.Practice. Practice. Code! Code! Code!

I really hope this guide was helpful. Please do well to drop any questions or comments you have.

Keep being awesome ✨✨✨

JavaScriptSheCodeAfrica