Lesson 1, Topic 1
In Progress

Basic grammar of JavaScript

The basic grammar of JavaScript includes the fundamental building blocks of the language, such as keywords, variables, data types, and basic operators. It also includes explanations of the syntax and structure of JavaScript code, including statements, expressions, and comments. Basic grammar is important for understanding how to write and read JavaScript code and how to structure programs using the language. Additionally, it serves as the foundation for learning more advanced topics in JavaScript development. One of the topics the fundamental building blocks of the language include is the basic syntax: How to structure JavaScript code and use correct syntax.

Explanation of case-sensitivity, curly braces, semicolons, and parentheses

In JavaScript, the basic syntax includes the use of case-sensitive keywords, curly braces to define blocks of code, semicolons to separate statements, and parentheses to define function arguments and control the order of operations in expressions.

  • In JavaScript, the language is case-sensitive, which means that variables, functions, and keywords must always be typed with the correct capitalization. For example, the variable "name" is not the same as the variable "Name" or "NAME". This means that if you declare a variable with one capitalization, you must use that same capitalization every time you refer to that variable in your code.
    Here's an example of case-sensitivity in action:
let name = "John";
console.log(name); // Output: "John"
console.log(Name); // Output: ReferenceError: Name is not defined

In the above example, the variable name is defined with a lowercase 'n' and it is accessed correctly. But when we try to access the variable Name with an uppercase 'N' it throws an error because it is not defined. This is an example of how case-sensitivity affects variables in JavaScript.
It is a best practice to use camelCase when naming variables in JavaScript, where the first word is in lowercase and each subsequent word starts with an uppercase letter. This makes the code more readable and consistent.

  • In JavaScript, curly braces, "{" and "}", are used to define the beginning and end of a block of code, such as a function, loop, or conditional statement. They are used to group statements together and create a scope. For example, the following code defines a function that takes a single parameter and uses curly braces to group the statements inside the function:
function greet(name) {
  console.log("Hello, " + name + "!");
}

In this example, the curly braces define the scope of the function and the statements inside the function will only be executed when the function is called.

Also, curly braces can be used to define an object literal, which is a way to create an object in JavaScript. An object literal is a comma-separated list of name-value pairs wrapped in curly braces, for example:

const person = {
  name: "John Doe",
  age: 30,
  isStudent: false
}

This creates an object called "person" with three properties: "name", "age" and "isStudent".

  • In JavaScript, semicolons are used to separate statements on a line. Each statement must be ended with a semicolon, otherwise, the code may not execute as intended.
    For example, in the following code, the variable "x" is assigned the value of 5, and then the variable "y" is assigned the value of 10.
var x = 5;
var y = 10;

However, if you forget to include the semicolon, the code will be treated as one statement and will result in an error:

var x = 5
var y = 10

In this case, JavaScript will treat it as one single statement, and the code will not execute as intended.

Additionally, it's also important to note that JavaScript also allows for "automatic semicolon insertion" (ASI). This means that if JavaScript encounters a line break instead of a semicolon, it will automatically insert a semicolon for you. However, it's best practice to always include semicolons to avoid any confusion or unexpected behavior.

var x = 5
console.log(x) // 5

Here console.log(x) is treated as a separate statement and executed correctly.

It's also worth noting that in some cases, semicolons can be omitted in JavaScript, such as when they are used to separate function parameters.

function add(a, b) {
  return a + b
}

Here the semicolons are not required and the function will execute correctly.

Although, it's always a good practice to use semicolons in JavaScript to make the code more readable and to avoid confusion or unexpected behavior.

  • In JavaScript, parentheses are used to group expressions and to call functions. They are also used to access array elements and object properties.
    Here are some examples of how parentheses are used in JavaScript:
  1. Grouping expressions:
let result = (5 + 2) * 3;
console.log(result);  // 21
  1. Calling functions:
function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("John"); // Output: "Hello, John!"
  1. Accessing array elements:
let colors = ["red", "green", "blue"];
console.log(colors[0]);  // "red"
  1. Accessing object properties:
let person = {
  name: "John",
  age: 30
};
console.log(person.name);  // "John"

It's also worth noting that in JavaScript, the use of parentheses can also change the order of operations, similar to the use of parentheses in mathematics. In the example above, the expression inside the parentheses is evaluated first, and then the result is multiplied by 3.

As you can see, Parentheses play an important role in the basic grammar of JavaScript and are widely used in various operations.

Summing up the topic

Case-sensitivity

  1. What is the difference between a variable named "variable" and a variable named "Variable"?
  2. Is the following code valid?
    var myVariable = "Hello World";
  3. What will be the output of the following code?
    var myVariable = "Hello";
    var myvariable = "World";
    console.log(myVariable + myvariable);

Curly Braces

  1. What is the purpose of curly braces in JavaScript?
  2. Is the following code valid? if (true) console.log("Hello World");
  3. What will be the output of the following code?
    var x = 10;
    var y = 20;
    if (x < y) {
    console.log("x is less than y");
    } else {
    console.log("x is greater than or equal to y");
    }

Semicolons

  1. Are semicolons required in JavaScript?
  2. Is the following code valid?
    var x = 10
    var y = 20
  3. What will be the output of the following code?
    var x = 10;
    var y = 20;
    console.log(x + y);

Parentheses

  1. What is the purpose of parentheses in JavaScript?
  2. Is the following code valid?
    console.log "Hello World";
  3. What will be the output of the following code?
    console.log(2*(3+5));