JavaScript – Part #1 Introduction

What is JavaScript?

JavaScript is a popular programming language that is widely used for creating interactive and dynamic websites. It was created in 1995 and since then it has become one of the most widely used languages for web development.

JavaScript is a client-side scripting language, meaning that it runs on the user’s web browser instead of the server. This allows for dynamic and interactive features on web pages, such as pop-up windows, form validation, and animations.

In addition to its use in web development, JavaScript is also used for creating server-side applications, desktop applications, and mobile applications. Its versatility and ease of use make it a popular choice for developers of all levels of experience.

With the growth of web development, JavaScript has continued to evolve and improve over time. Today, it is supported by all major web browsers and has a vast library of frameworks and tools available to make development faster and easier.

Now that we know what JavaScript is and what it’s capable of, let’s dive into it!

Variables

  • Variables hold reusable data in a program and associate it with a name, they are temporarily stored in memory.
  • The var keyword is used in pre-ES6 versions of JS the preferred keyword to declare a mutable variable is let.
  • To declare a constant, we use const.
  • Variables not initialized are given an undefined datatype as the default value.
Assignment & Logical Operators 
 
  • Mathematical assignment operators make it easy to calculate a new value and assign it to the same variable.
  • The + operator is used to concatenate strings including string values held in variables.
  • In ES6, template literals use backticks ` and ${} to interpolate values into a string, in python we would call this a formatted string for the same task.
  • The typeof keyword returns the data type (as a string) of a value.
  • An if statement checks a condition and will execute a task if that condition evaluates to true.
  • if…else statements make binary decisions and execute different code blocks based on a provided condition.
  • We can add more conditions using else if statements.
  • Comparison operators, including <, >, <=, >=, ===, and !== can compare two values.
  • The logical operator, &&, or “and”, checks if both provided expressions are true
  • The logical operator ||, or “or”, checks if either provided expression is true
  • The bang operator  ! switches the boolean values

Conditional Statements

  • If Statements decide whether an expression is true or false and run their specified rule.
  • The ternary operator is shorthand to simplify concise if…else statements. Example: (Condition)?(Expression1):(Expression2) So if the condition is true, expression 1 will run, if not, Expression 2 will do so.
  • A switch statement can be used to simplify the process of writing multiple else-if statements. The break keyword stops the remaining cases from being checked and executed in a switch statement.

Technical Vocabulary (Scope, blocks, local and global variables)

  • Scope refers to where variables can be accessed throughout the program, and is determined by where and how they are declared.
  • Blocks are statements that exist within curly braces {}.
  • Global scope refers to the context within which variables are accessible to every part of the program.
  • Global variables are variables that exist within global scope.
  • Block scope refers to the context within which variables are accessible only within the block they are defined.
  • Local variables are variables that exist within block scope.
  • Global namespace is the space in our code that contains globally scoped information.
  • Scope pollution is when too many variables exist in a namespace or variable names are reused.

Arrays

  • Arrays are lists that store data in JavaScript.
  • Arrays are created with brackets []. e.g: const my_array = [1,2,3,4];
  • Each item in an array can be returned by using its index. e.g: my_array[0]; (We would be accessing index 0, which is number 1 from the array created above).
  • We can also change an item in an array using its index, with syntax like my_array[0] = ‘new string’; 
  • Arrays have a length property, which allows you to see how many items are in an array.
  • Arrays have their own methods, including .push() and .pop(), which add and remove items from an array.
  • Arrays have many methods that perform different tasks, such as .slice(index, index), shift(), unshift(index), and others that manipulate an array, sometimes not directly.
  • Variables that contain arrays can be declared with let or const. Even when declared with const, arrays are still mutable. However, a variable declared with const cannot be reassigned.
  • Arrays mutated inside of a function will keep that change even outside the function.
  • Arrays can be nested inside other arrays, these are called multidimensional arrays.
  • To access elements in nested arrays chain indices using bracket notation with respective indexes.

Miscellaneous Information

  • Data is printed, or logged, to the console, a panel that displays messages, with console.log().]
  • We can write single-line comments with // and multi-line comments between /* and */.
    Strings are characters wrapped in single or double quotes: ‘Sample String’
    The built-in arithmetic operators include +, -, *, /, and %.
  • Objects, including instances of data types, can have properties, and stored information. The properties are denoted with a . after the name of the object, for example: ‘Hello’.length.
  • We can access properties and methods by using the . dot operator.
    Built-in objects, including Math, are collections of methods and properties that JavaScript provides.

For this blog’s conclusion, JavaScript is a good tool that you have to know along with HTML and CSS for web development.