Understanding JavaScript Basics

Introduction
When learning Web Development we have 3 prerequisite languages that goes without saying, a web developer should learn. HTML–Hypertext Markup Language that gives a web page structure. CSS–Cascading style sheet language that styles a web page.

JavaScript–programming language that helps with interactivity of the web. Did you notice only JavaScript is as a programming language? Ideally, a computer doesn’t figure out what to do or display. We need a programming language that tells the computer what to do, or the action expected when a user interacts with the web page.

Code is for humans. Meaning, the code we write is more of instructions that we pass to the web browser or computer. Programming Languages are there to help on how you pass instructions for the computers to execute the instruction.

Learning JavaScript can be intimidating. At least it was for me when I started. Especially when you’re learning on your own, reading countless blogs on web development while trying out the endless free online courses.

All these blogs would talk about the need for learning JavaScript and that it would be the one skill if learned well would get you at that first tech role. Learn, understand thoroughly the fundamentals and practice. Make sure you don’t jump into learning frameworks before understanding the fundamentals as this is the blueprint. There’s a lot of truth in that, so I’ve learnt.

Starting off, we learn the basics. These will get you on the programming journey; help you learn how to create proper websites that users can interact with while browsing. We’ll go through this in a series. For starters, we’ll cover JavaScript basics.

Let’s dive in

Statement

JavaScript as a programming language uses a set of instructions or steps that a computer follows. The instructions or the steps are referred to as statement

let today = new Date()

Comments

Same as in Html & CSS comments are crucial in JavaScript. We use this to communicate – ideally the code enclosed need not to be displayed to the browser. There are two ways to comment in JavaScript as below

// A comment

/*
This is a comment that
has multiple lines!
*/

Variable

A variable can be defined as a container that holds data. In order to use a variable you need to name it. This is done where you declare a variable and we use Var, Let and Const to do so depending on the data you want stored. The difference between the three is based on scope, something we'll expound on later in the series.

var count = 10;

let weather = 'Sunny';

const fullName = 'Grace Brown';

Data Types

When programming we store data that we manipulate and use for one thing or another. A programming language such as JavaScript like other languages use Data Types to do so. When we talk about data what comes to mind is text and numbers right?

In programming languages, these words might be slightly changed in the case where instead of saying “text” we say String. Think of it like string of characters.

// double quotes
console.log("This is a string!")
// single quotes
console.log('Good Morning!')

Numbers

In the case of numbers, for JavaScript a number is just a number.

// The number 8
console.log(8)

// Addition
console.log(3 + 4)

// Subtraction
console.log(20 - 3)

// Multiplication
console.log(3 * 7)

// Division
console.log(50 / 5)

Booleans

Are also a type of data type that represents true or false.

isLogged = true
inStock = false

Null and undefined

They represents the lack of value and are presented in different scenarios making them have a subtle difference. Null means (has no value) while undefined means (has not been given value)

console.log(null)
console.log(undefined)

Object

Represents a collection of data making them composite data types. They represent entities in such that it contains properties that describe it.

let cat = {
name: 'Kat',
legs: 4,
color: 'brown'
}

Arrays

Is a type of a variable (stores data) however the difference is an array stores a list of values. We access items in an array numbering them starting from zero and not one. This type of numbering is called index.

let fruits = ['Mango', 'Kiwi', 'Bananas', 'Watermelon']

Expressions

An expression is code that evaluates to a value. There are two types of expression; one that assigns a value to a variable and one that uses two or more values to return a single value.

60  // a number literal expression

"Hello World" // a string literal expression

5 * 2 // "gives" us the value 10

"Hello " + "Mary" // "gives" the value "Hello Mary"

Operators

They help to create single value from single or more value.

Types of Operators:

Assignment Operators

color = 'grey';

Arithmetic Operators

area = 7 * 5;

String Operator

greetings = 'Hello ' + 'John';

Comparison Operator

Compares two values and returns true or false.

spend = 3 > 5;

Logical Operator

They combine expressions and return true or false

spend = (5 > 3) && (2 <4)

Conclusion

This is just a tip of the iceberg, honestly. We have more to dive into for example; where to use these fundamentals. What works where or when, and so on. Until the next series, keep coding and keep safe.