JS- Just Some JavaScript 😎

Introduction

Hello Developers, JavaScript has become one of the most dominant yet beginner-friendly programming languages all around the world. In this article let's get back to the basics of JavaScript and a simple syntax of JavaScript.

JavaScript Basics 🎉

JavaScript is one of the most popular programming languages on the web. It allows you to add interactivity and dynamic behavior to web pages. Here are some JavaScript basics you should know:

What is JavaScript? JavaScript is a lightweight, interpreted programming language. It is used to make web pages interactive. JavaScript enables you to add interactive effects to your web pages.

Some things you can do with JavaScript:

• Manipulate HTML

• Respond to user events

• Create animations

• Validate form data

• Generate content

• Communicate with web servers behind the scenes

Variables, Operators and more...⚡

When we say basics of JavaScript the below topics are the most important to understand to start with any programming language once you understand the below topics you would understand the syntax and how JavaScript works.

1. Variables

2. Operators

3. Conditionals

4. Functions

5. Objects

1.Variables : var, let & const

JavaScript variables are containers that store values. They allow you to store pieces of information and give them a name so you can access and manipulate the data easily.

You can declare a variable in JavaScript using the let keyword. For example:

let name;

You can then assign a value to the variable using the assignment operator =:

let name = "John";

You can also declare and initialize a variable in one statement:

let name = "John";

Variable names can contain letters, numbers, and the symbols $ and _. They are case-sensitive, so name and Name are different variables.

A basic JavaScript variables example would be:

let name = "John";
let age = 30; 
let isApproved = false;

Here we have declared 3 variables - name stores the string "John", age stores the number 30, and isApproved stores the boolean value false.

You can also declare multiple variables in one statement separated by commas:

let name = "John", age = 30, isApproved = false;

2.Operators: + - / *

Operators are symbols that perform operations on operands. Operators allow us to perform useful calculations and logic in JavaScript.

Some main types of operators in JavaScript are:

• Assignment operators (=, +=, -=, etc.)

• Arithmetic operators (+, -, *, /, etc.)

• Comparison operators (==, !=, >, <, etc.)

• Logical operators (&&, ||, !)

• Bitwise operators (&, |, ^, ~, <<, >>, >>>)

• String operators (+ for concatenation)

• Ternary operator (? :)

For example, the assignment operator (=) is used to assign values to variables:

let x = 5;  // Assigns 5 to x

The addition operator (+) performs addition on numbers:

let sum = 2 + 3;  // sum is 5

And it concatenates strings:

let text = 'Hello' + ' ' + 'world!';  // text is 'Hello world!'

Here is a code example using comparison and logical operators:

let x = 5;
let y = 10;

if (x != y && x < y) {
  console.log('x is less than y');

3.Conditionals: if/else

Conditionals are an essential part of JavaScript that allow you to control program flow based on certain conditions. They allow you to run specific code depending on whether an expression evaluates to true or false.

The main types of conditionals in JavaScript are:

• if statements

• else statements

• else if statements

• switch statements

• ternary operator

An if statement has the basic syntax:

if (condition) {
  // code to run if condition is true
}

The condition is evaluated, and if it returns true, the code block inside the curly braces is executed.

An else statement allows you to run alternative code if the condition is false:

if (condition) {
  // code to run if true
} else {
  // code to run if false  
}

You can chain multiple else if statements to check for multiple conditions:

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

The ternary operator provides a concise way to write if/else statements:

condition ? exprIfTrue : exprIfFalse;

For example:

let ageCheck = (age >= 18) ? "Of age" : "Under age";

4.Functions()

Functions are an essential part of JavaScript that allow you to structure your code and reuse it. A function is a block of code that performs a specific task.

The basic syntax for a function in JavaScript is:

function name(parameter1, parameter2) {
  // function body   
}

You start with the function keyword, followed by the function name and parameters in parentheses. The function body - the actual code to be executed - is inside the curly braces.

Parameters act as variables that store the values passed to the function when calling it. For example:

function multiply(a, b) {
  return a * b; 
}

multiply(2, 3); // Returns 6

Here we have a function named multiply that takes two parameters a and b and multiplies them.

Functions can return a value using the return statement. If no return statement is specified, the function returns undefined.

Functions allow code reuse. You can define a function once and call it multiple times with different arguments.

You can also define functions using arrow functions:

const multiply = (a, b) => a * b;

And function expressions:

const multiply = function(a, b) {
  return a * b;
}

Functions can take other functions as arguments, known as callback functions, Which we will discuss in future articles.

5.Objects{}

An object in JavaScript is a collection of related data and functions that represent something in the real world. Objects allow us to model real-world entities like a person, place or thing in our programs.

We can create objects in JavaScript using object literals or constructors. An object literal uses curly braces {} to group a set of name/value pairs representing properties and methods. For example:

const person = {
  name: "John", 
  age: 30,
  greeting() {
    console.log("Hello!") 
  }
}

Here we have an object person with three properties - name, age and a method greeting().

We can access object properties using dot notation:

console.log(person.name); // John
person.greeting(); // Hello!

Or bracket notation:

console.log(person["name"]); // John
person["greeting"](); // Hello!

Bracket notation is useful when the property name is stored in a variable:

let prop = "name";
console.log(person[prop]); // John

We can also add new properties and methods to an object:

person.hairColor = "Brown";
person.getAge = function() {
  return this.age; 
}

And access the object's this keyword to refer to the object itself inside methods:

person.getAge(); // 30

We can also create objects using constructors and the new keyword:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

let john = new Person("John", 30);

Basics Done 🤗

So these are the basics that you should know about JavaScript programming Language. There is still more to be learned as a beginner, just google and get some free resources to learn from JavaScript Basis strong. I will tag some websites where you could learn coding for free :

• W3 Schools

• Codedamn- JavaScript Basics

• Mozilla.org - Document-oriented learning

What Next :-The core of JavaScript 🧨

Below is the core concept of javascript which you should understand from the beginning of your learning process topics to become a pro in the language.

• The call stack and how functions execute

• Scope types: function scope, block scope and lexical scope

• Expressions vs statements

• The event loop and asynchronous execution

• Closures and higher-order functions

• The differences between == and ===

We can look topics one by one in detailed in futhur articles or blogs now lets complete this blog. See you on Next one.....