DEV Community: Saviour Essien

JavaScript Variables and Data Types

Saviour Essien — Thu, 05 Mar 2020 23:47:40 +0000

What are Variables

Variables are like containers or bucket that holds values. To break it into an even simpler relatable form, I will give an illustration. In your kitchen that are different jars or containers holding different items like seasoning cubes, salt, oil etc. These containers are variables which you can easily identify. So if your mom asks for salt you already know which container to bring. That is how variables in Javascript works.

Javascript is a loosely typed language which means you don't have to explicitly define the data type a variable should hold, unlike other programming languages.

In this tutorial, I will be using the ECMAScript 2015 (ES6) syntax as this is part of the newer standard.

Take a look.

let person = "Saviour Essien";
let age = 16;

Let me breakdown this code into tiny chunks starting from the left-hand side of the code.

The let keyword is what tells Javascript we are about to declare a variable
Then the identifier person is the name of the variable(container).
The assignment operator = like the name implies assigns the variable identifier person to the value.
The value Saviour Essien is what is inside the variable(container).

Let me spoon feed your more by making my previous illustration more watery.

Your mother returns from the market with groceries, she calls out your name Ngozi, come and take this groceries to the kitchen. Automatically, you already know where to put each of the items she bought for easy access to you and others.

So it is safe to say your mother is the programmer then Ngozi is Javascript, the groceries are values then the container which each groceries item goes into is the variable. Lastly, the name on each container is the identifier. I don try ✌️ 😂

Javascript variable identifiers must follow these rules.

Name must start with letters (a-z)(A-Z), underscore(_) or dollar sign($).
Number can be included but it must be after the first letter. e.g item3
Javascript variables are case sensitive.x is different from X.

let x = 25;
let X = 12;
console.log(x); // 25
console.log(X); // 12

There are two ways of declaring a variable in Javascript.

Let
Const also is known as Constant

For the most part, both let and const are the same the only difference they have is you can reassign a value to let while you cannot reassign a value to const because it will throw an error.
Note: Use let to declare variables which value can change in the future but use const for values can won't change ever.

Javascript variables can take in any data type like string, number, object etc.

const location = "Yenagoa"; // String
let phone = 01234567;
const cart = {orange: 6, type: "American Citrius"};

We will look at data types shortly in the next section. Each statement ends with a semicolon ;. This ; semicolon is telling Javascript that is the end of the statement. Although it is not compulsory to end your statement with a ; semicolon. It is advisable for the sake of clean code.

Single Line Variable Declaration

Variable can be declared in one line. It is shorter.

let color = 'Red', shade = 'Dark, family = 'Tomatoe';

The declaration only takes one keyword which can be either let or const each new variable is declared after a comma ,.

Scoping

In Javascript, there are two types of scopes. The Local and Global scope. The let and const are both block scope. This means they can only be accessed within the block statement it was been created in. Although they can also possess the local and global scope.

Below is a simple example of a block statement.

 for(){
  // This is a block statement
}

Going further let take a quick look at how the scoping works.

Global Scope

The global scope can be accessed from any function.

const color = 'Yellow';

function addColor() {
    return color;
}

console.log(addColor()); // Yellow

The above example returns 'Yellow' which was declared outside the function. This is what Global scoping does.

Local Scope

A local scope variable is only accessible within the block or function it was created in.

const color = 'Yellow';

function addColor() {
    //let color = 'Red';
    return color;
}

console.log(addColor()); // Red

In this example, the variable color declared inside the function takes precedence against the variable color declared outside the function. The local variable will always take effect against a Global variable.

Data Types in Javascript

Our Javascript variable can hold any type of value. Helping the computer determine what type of value is, is why we have data types. Data types help the computer to operate on variables. Without data types, the computer will certainly be confused about what operation it should perform. Because Javascript is dynamically typed, it can automatically determine and assign a data type to a variable value. For example:

let add = 16 + "16";

console.log(add); //1616

Javascript can automatically identify that the first 16 is a number and the second 16 is a string. Normally, in Javascript numbers are identified because they don't have an opening and closing quotes "" while strings have an opening and closing quotes "".

There are eight(8) data types available in Javascript.
Number
String
Boolean
Null
Undefined
Objects
Array

NUMBER

Numbers are integers. They are the regular numbers we write every day.

Although numbers can be written with or without decimal like so;

let number1 = 12345;
let number2 = 23.009;

Also notice that numbers are written without quotes.

STRING

Strings are letters or text. Strings must be written with opening and closing quotes, the quotes can either be double "" or single ''like so.

let subject = "Javascript";
let level = 'Beginner';

BOOLEAN

Boolean only has two values which are true or false. It is more like saying yes or no. Boolean can be used to determine a condition in Javascript.

let bigNumber = 6 < 2;
console.log(bigNumber); // false

NULL

Null means nothing. The value is doesn't exist.

let amount = null;
console.log(amount); // null

Undefined

Undefined in Javascript means the value has not been assigned to a variable.

let message;
console.log(message); // undefined.

Noticed I didn't use the = to assign a value to the message variable. The undefined is useful when you wish to use a variable in the future but you are not sure of the value yet to be assigned to it. An example can be user input.

OBJECTS

Object can store more than one data collections. Objects process more complexity.

 const items = {
  food: "Bole and Fish",
  price: 500,
  portion: 2,
  addSauce: true
}

Objects hold key: value pair. The example above declares a variable called Items. Inside the curly braces {} are different pairs. Starting from the left-hand side we have the key food and the value Bole and Fish. Also, notice that objects can hold different data types like string number boolean as stated in the above example.

Object is a bit broad. We will engage more on Object in the future.

ARRAYS

Arrays fall under objects. An array can hold more than one data value, these values can be string, number, boolean. Arrays are written with an opening and closing square brackets [].

const phones = ["Samsung", "Iphone", "Nokia", "Tecno"];

console.log(phones); //(5) ["Samsung", "Iphone", "Nokia", "Tecno"]

The Typeof Operator

Typeof() operator can help us determine the type of Javascript value.

const movie = "The Hustle";

const  year = 2019;

let interesting = true;

let category = undefined;

console.log(typeof(movie)) // string

console.log(typeof(year)) // number

console.log(typeof(interesting)) // boolean

console.log(typeof(category)) // undefined

Primitives

They are values that can only contain one data. They do not hold extra methods or properties just like Object does. Primitives are immutable, this means their value cannot be changed. The following are primitives.

String
Number
Boolean
Null
Undefined

Thank you for reading through, I believe I have been able to break down some concepts that were confusing to you. Our next topic will be on Javascript Syntax.

Recommended Resources

Mozilla Developer Network - MDN

Javascript Info

Codeburst

I still remain your Celebrity Developer 🔥. You can reach out to me on Twitter.

Introduction to JavaScript for Those With Impostor Syndrome

Saviour Essien — Mon, 02 Mar 2020 19:19:36 +0000

Before you begin, I want to assure you that JavaScript is a really simple language you will ever learn. With the basics I will be covering in the course of your learning, you will become an expert JavaScript programmer if you stick to these basics.

JavaSript is a high-level, client-side scripting language that runs on the browser (client). It has been standardized by the ECMAScript language specifications. It turns out is one language you have to learn if you wish to be great at web development.

Setting up our Development Environment

For now, we need just two (2) basic tools to start writing JavaScript. Feel free to skip this part if you already have this tools setup on your computer.

Code Editor
Browser

For the Code Editor, I prefer to use VS Code but they are many out there you can try your hands on depending on your preference.

Also, I enjoying using Chrome for testing and debugging my JavaScript application. You can also try Firefox, Microsoft Edge.

JavaScript is executed on your browser through a JavaScript Engine. On Chrome it is called V8 Engine which is also the engine of the popular Node.js you might have heard about, on Firefox it is known as SpiderMonkey, Microsoft Edge has Chakra/Chakra Core while Apple Safari engine is JavaSCript Core. Just keep this at the back of your mind that JavaScript runs via an engine on the browser.

Things JavaScript can Do

JavaScript can change HTML contents
JavaScript can change HTML attributes
JavaScript can change CSS styles
JavaScript can hide/show HTML elements

We will see how these various operations are performed in the coming chapters.

How to Start Using Javascript

JavaScript can be written through different methods. JavaScript can be written as simple as just using an HTML script tag or through an external Javascript file with a .js extension. First, let's take a look at the written Javascript with the HTML script tag.

<script>
 console.log("Hello World");
</script>

The Javascript script tag can be placed inside the head or the body HTML element.

<!DOCTYPE html>
 <html>
  <head>
   <script>
     console.log("Javascript is Script tag is inside the head");
  </script>
  </head>
  <body>

   <h1>Javascript tutorial</h1>


  </body>
 </html>

It is recommended to place the script tag at the bottom part of the body tag.

 <!DOCTYPE html>
  <html>
   <body>



  <script>
    console.log("Javascript is Script tag is inside the body");
  </script>

  </body>
 </html>

The external method of writing Javascript is highly recommended. As you codebase grows you want to make sure you Javascript is not taking up space in your HTML document. It is advisable to separate your Javascript files. Below is an example of an external Javascript file named app.js

function sumUp(a, b) {
  return a + b;
}

sumUp(20, 12);

Outputting Javascript File

Javascript values can be outputted using different in-built functions readily available to you.

document.write();
window.alert();
console.log();

document.write() is used to display data. It is majorly for testing purpose.

 <!DOCTYPE html>
  <html>
   <body>

   <h1>My first heading</h1>
   <p>My first paragraph.</p>

   <script>
     document.write("Learning Javascript");
   </script>

  </body>
 </html>

window.alert() is also used to display data. It pops up like an alert box.

<!DOCTYPE html>
 <html>
 <body>

  <h1>My first heading</h1>
  <p>My first paragraph.</p>

<script>
  window.alert("This creates an alert");
</script>

</body>
</html>

console.log() is one of the most popularly used. It is very useful for debugging. To access the console data, you need to open up your developer tools on your browser to access the console.

 <!DOCTYPE html>
  <html>
  <body>

  <script>
    console.log("I love using the console");
  </script>

 </body>
 </html>

Clearly Javascript is simple. I am willing to answer any question you might have. You can follow me on Twitter
See you in the next chapter Javascript Variables

The JavaScript String Method - Split();

Saviour Essien — Fri, 03 Jan 2020 21:11:19 +0000

Hello Fam 😍, I have been on dev.to for two months now. I read the articles most of the time and I love it here. This is my first post here 😎. Happy New Year 💥 💥.

This post was made as part of my "Did You Know?" series on Twitter. I wanted to explain more about the string split method concept. In this post, I will explain what split(); does and a use case of how to apply it.

Explanation

The split is a JavaScript String method for modifying and manipulating strings. When using the split() method it returns an array of substrings of the string value. Take a look at the code snippets below.

const hobbies = "Travelling, Reading, Coding, Cuddling";
let hobby = hobbies.split(',');
console.log(hobby); Result // ["Travelling", " Reading", " Coding", " Cuddling"]

Let me explain the snippet, the split() method can take in a separator which in this case is a comma (",") it separated the string after each comma sign (,). The split method can also take a limit (optional) and one other form of the separator of which we will discuss shortly. Notice that the resulting array has a spacing before each word? We would get rid of that extra spacing by doing this.

const hobbies = "Travelling, Reading, Coding, Cuddling";
let hobby = hobbies.split(', ');
console.log(hobby); Result // ["Travelling", "Reading", "Coding", "Cuddling"]

I have added an extra space after the comma (, ) separator to fix the unwanted space.

You can also use the limit to end where you want the split should end the array length.

const hobbies = "Travelling, Reading, Coding, Cuddling";
let hobby = hobbies.split(', ', 2);
console.log(hobby); Result // ["Travelling", "Reading"]

The separator can also separate the string using space.

const hobbies = "Travelling Reading Coding Cuddling";
let hobby = hobbies.split(' ');
console.log(hobby); Result // ["Travelling", "Reading", "Coding", "Cuddling"]

Notice I have gotten rid of the comma(,) in the hobbies variable, then I am separating using space as a separator. This will create a new array value after each space.

Without the space in between the split(""), the string will split between each character like so

const move = "Legwork";
let dance = hobbies.split('');
console.log(dance); Result // ["L","e","g","w","o","r","k"]

An empty split() will have no effect on the original string instead it will return a single array value

const move = "Legwork";
let dance = hobbies.split();
console.log(dance); Result // ["Legwork"]

Use Case

Thank you for taking the time to read through my post. I hope you find it useful 💖. I'd appreciate contributions or questions.

I am currently running this series "Did You Know?" for the 366 Days of 2020 on Twitter, do well to follow me @celebritydev so we can learn together.

Side Note

I was listening to Davido's Sweet in The Middle while writing this post. Go forth and split some strings in the middle 😇