When writing on GitHub, you can use Markdown syntax and HTML elements to extend Markdown's functionality. You can use Markdown syntax everywhere in GitHub, such as in the README file, wiki, comments, pull requests, and when creating issues.

For every software developer, learning markdown is an essential step along the path of your career.

To enhance Markdown's basic features, GitHub added some custom functionalities and created GitHub-Flavored Markdown. With this, you can easily interact with other users in pull requests and issues by mentioning user, issue, and PR references and adding emoji.

This tutorial teaches you the basics of GitHub-Flavored Markdown so you can start using it in your projects.

All the code is available in the GitHub repository.

GitHub-Flavored Markdown Syntax

GitHub Flavored Markdown syntax is divided into two parts.

1. Basic Formatting Syntax
2. Advanced Formatting Syntax

We'll look at each one in detail below.

Basic Formatting Syntax

Basic formatting syntax applies to everyone. It contains fundamental essentials such as headings, code, images, quotes, links, and so on – things you'll need to know for writing.

1. Headings
2. Paragraphs
3. Comment
4. Styling text
5. Quotes
6. Code
7. Links
8. Images
9. Lists
10. Mentioning people and teams
11. Referencing issues and pull requests
12. Using emojis
13. Footnotes
14. Alerts

Note that the code samples mostly come from GitHub's documentation.

Headings

You can use the # symbol to create headings. One # creates an H1 heading, two create an H2 heading, and so on, like this:

# A first-level heading
## A second-level heading
### A third-level heading
#### A four-level heading
##### A five-level heading
###### A six-level heading

Paragraphs

To create paragraphs, you can use a blank line to separate one or more lines of text or paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam est odio, commodo id diam sed, pulvinar sagittis tortor. Nam vestibulum purus eros. Sed congue, mi id pretium auctor, nibh augue iaculis arcu, eu tristique quam dolor at erat.

Quisque vel odio condimentum, mollis sem vitae, porta diam. Praesent ligula elit, condimentum eget ex sed, commodo sollicitudin sapien.


Proin volutpat faucibus nulla. Nullam eros sem, ultricies gravida nunc nec, dapibus posuere nisl. Nunc lacinia elementum turpis in pharetra. Aenean eu neque eros.

Comments

Comments are available in almost every programming language. They help developers write notes and add additional information to their code, helping other developers understand what's going on and how the code is working.

To add notes and additional information in Markdown, use the following syntax: <!--- Wrap text --->.

Here's an example:

<!-- This content will not appear in the rendered Markdown -->

Styling text

You can apply basic styles to your text, such as bold, italic, strikethrough, subscript, or superscript, to improve readability and convey your point more clearly.

1. For Bold, you can use the following syntax: **your text**
2. For italics, you can use the following syntax: *your text* or _your text_.
3. For strikethrough, you can use the following syntax: ~~your text~~
4. For subscript, you can use the following syntax: The subscript <sub> text </sub> is here.
5. For superscript, you can use the following syntax: The superscript <sup> text </sup> is here.

## Bold

**your text**

## italics

*your text*
_your text_

## strikethrough

~~your text~~

## subscript

The subscript <sub> text </sub> is here.

## superscript

The subscript <sup> text </sup> is here.

Quotes

A blockquote or quote is a sentence or paragraph formatted to let the reader know that you're quoting someone. To create a blockquote in Markdown, you can use the > symbol.

> Text that is a quote

Code

Markdown files support two types of code samples: inline and code block.

1. To add a code block in a Markdown file, use the following syntax: ``` your code ``` .
2. To add inline code to the Markdown file, use the following syntax: `your code` .

## Code Block

// ES5 syntax var multiply = function(x, y) { return x * y; };

// ES6 arrow function var multiply = (x, y) => { return x * y; };

// Or even simpler var multiply = (x, y) => x * y;

## Inline code 

JavaScript provides three different value comparison operations: strict equality using `===`, loose equality using `==`, and the `Object.is()` method.

To support code highlighting in a code block, you can add an optional language identifier after your triple backticks (like JavaScript in the example below):

## Code Block

```javascript

// ES5 syntax
var multiply = function(x, y) {
  return x * y;
};

// ES6 arrow function
var multiply = (x, y) => { return x * y; };

// Or even simpler
var multiply = (x, y) => x * y;

### Links

A markdown file divides links into two categories: **inline** and **relative**.

#### Inline links

To create an inline link in a Markdown file, wrap the link text in brackets `[ ]` followed immediately by the URL in parentheses `( )`.

```markdown
This site was built using [GitHub Pages](https://pages.github.com/).

Relative links

Relative links are defined similarly to inline links but they change in the [] section: the [] section contains the path of the file in your repository.

You use relative links to link two files: for example, to link the CONTRIBUTING file into the README file.

[Contribution guidelines](docs/CONTRIBUTING.md)

Relative links starting with / will be relative to the repository root. You can use all relative link operands, such as ./ and ../.:

[Contribution guidelines](../docs/CONTRIBUTING.md)

Images

To add an image in a markdown file, add a ! and then wrap the alt text in []. Then, wrap the image link with parentheses ().

It looks like this:

![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white)

Lists

A list helps record essential information in order, which can be vital for the reader and makes it easy for people to understand and find information.

Markdown files support three types of lists:

1. Ordered list
2. Unordered list
3. Task list

Ordered list

The first type is an ordered list. To create an ordered list, start with numbers followed by periods.

1. one
2. two
3. three
4. four

Unordered list

The second type is an unordered list. To create an unordered list, use -, + or * (depending on your preference - they'll all render as an unordered list):

* First item
* Second item
* Third item
* Fourth item


- First item
- Second item
- Third item
- Fourth item

+ First item
+ Second item
+ Third item
+ Fourth item

Task list

The third type is a task list. To create a task list, list items start with a hyphen, followed by a space, followed by square brackets []. You can use an x in the bracket [x] to mark a task as complete.

- [x] #739
- [ ] https://github.com/octo-org/octo-repo/issues/740
- [ ] Add delight to the experience when all tasks are complete :tada:

Mentioning people and teams

Mentioning users and teams in markdown

To mention a person or team in a GitHub markdown file, type @ and write the username or team username.

## person or individual username

@officialrajdeepsingh, check out the following change.

## Team or company
The section blog theme is maintained by @frontendweb

Referencing issues and pull requests

Issues and pull requests

To mention issues and pull requests in a GitHub markdown file, type a #, then type the issue or pull request number or title. Then press either tab or enter to complete the highlighted result.

Remove the default _target blank in logo #93

Using emoji

Adding emoji in markdown.

To add an emoji to your writing, type the emoji's code between two colons. If you just type :, a list of suggested emojis on GitHub will appear.

Once you find the emoji you're looking for, press Tab or Enter to choose the highlighted result.

Don't forget to leave a star on our repository! :star:

Footnotes

To add a footnote reference, add a caret and an identifier inside brackets ([^1]) using the following syntax:

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

Alerts

Alerts are a Markdown extension based on the block quote syntax that you can use to emphasize important information.

GitHub Flavored Markdown supports five types of alerts: [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION]. You can use any of them:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

The Alert syntax looks like this in the browser:

Adding alert example in markdown.

Advanced Formatting Syntax

This advanced formatting syntax section contains advanced use cases, such as adding diagrams and tables, collapsed sections, mathematical expressions, and more.

1. Creating a table
2. Creating a collapsed section
3. Creating diagrams
4. Mathematical expressions

Creating a table

To create tables in Markdown, you can use pipes | and hyphens -. Hyphens are used to create a column's header, while pipes are used to separate columns.

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

The table looks like this in the browser:

Table example in markdown.

Creating a collapsed section

To create a collapsed section in a markdown file, you can use the <details> tag. This tag is an HTML element that you can easily use to extend the functionality of GitHub Flavored Markdown. Here's how it works:

<details>
  <summary>Click to here. </summary>

   ### You can add a message here

   You can add text within a collapsed section. 

   You can add an image or a code block, too.

   ```ruby
     puts "Hello World"

The collapsed syntax looks like this in the browser:

![Collapsed example in markdown.](https://www.freecodecamp.org/news/content/images/2024/04/Collapsed-in-markdown.png)
_Collapsed example in markdown._

### Creating diagrams

To add diagrams to a Markdown file, use triple backticks and wrap them inside quadruple backticks. Then, tell which identifier (Mermaid, GeoJSON, TopJSON, ASCII STL) you used for the diagram.

GitHub supports diagrams using four syntaxes: mermaid, geoJSON, topoJSON, and ASCII STL.

1. [Mermaid](#heading-mermaid) 
2. [GeoJSON and TopoJSON](#heading-geojson-and-topojson)
3. [ASCII STL](#heading-ascii-stl)

#### Mermaid 

[Mermaid](https://mermaid.js.org) is a Markdown-inspired tool that renders text into diagrams. You can create flow charts, sequence diagrams, pie charts, and more with Mermaid.

The GitHub-flavored Markdown has extended the functionality of using Mermaid with Markdown.

You can create flow charts, sequence diagrams, pie charts, and so on inside Markdown. GitHub handles the rest of that. So how do you render diagrams on the screen?

```markdown
```mermaid
graph LR;
   A --  and --> B -- to --> C

The mermaid syntax looks like this in the browser.

![Mermaid example in markdown.](https://www.freecodecamp.org/news/content/images/2024/04/mermaid-degram.png)
_Mermaid example in markdown._

#### GeoJSON and TopoJSON

You can use [GeoJSON](https://geojson.org/) or [TopoJSON](https://github.com/topojson/topojson) to add an interactive map to a GitHub repository in a README file or GitHub Wiki.

You can use code block syntax to add an interactive map.

1. GeoJSON can create a map by specifying coordinates. To add an interactive map, use the following syntax:  ` ```geojson  your code ``` `
2. TopoJSON can create a map by specifying coordinates and shapes. To add an interactive map, use the following syntax: ` ```topojson  your code ``` `

**Example using GeoJSON:**

```markdown
```geojson
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "ID": 0
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
              [-90,35],
              [-90,30],
              [-85,30],
              [-85,35],
              [-90,35]
          ]
        ]
      }
    }
  ]
}

**Example of TopJSON:**

```markdown
```topojson
{
  "type": "Topology",
  "transform": {
    "scale": [0.0005000500050005, 0.00010001000100010001],
    "translate": [100, 0]
  },
  "objects": {
    "example": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {"prop0": "value0"},
          "coordinates": [4000, 5000]
        },
        {
          "type": "LineString",
          "properties": {"prop0": "value0", "prop1": 0},
          "arcs": [0]
        },
        {
          "type": "Polygon",
          "properties": {"prop0": "value0",
            "prop1": {"this": "that"}
          },
          "arcs": [[1]]
        }
      ]
    }
  },
  "arcs": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]
}

### ASCII STL

GitHub Flavored Markdown supports STL syntax. STL syntax allows you to add interactive 3D models in markdown. You can use the following syntax: ` ```stl your code.``` `

```markdown
```stl
solid cube_corner
  facet normal 0.0 -1.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 1.0 0.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
  facet normal 0.0 0.0 -1.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 1.0 0.0 0.0
    endloop
  endfacet
  facet normal -1.0 0.0 0.0
    outer loop
      vertex 0.0 0.0 0.0
      vertex 0.0 0.0 1.0
      vertex 0.0 1.0 0.0
    endloop
  endfacet
  facet normal 0.577 0.577 0.577
    outer loop
      vertex 1.0 0.0 0.0
      vertex 0.0 1.0 0.0
      vertex 0.0 0.0 1.0
    endloop
  endfacet
endsolid

The STL syntax looks like this in the browser:

![STL example in markdown.](https://www.freecodecamp.org/news/content/images/2024/04/stl-example.png)
_STL example in markdown._

### Mathematical expressions

You can add mathematical expressions, such as equations, terms, formulas, and so on, to a GitHub markdown file. GitHub uses [LaTeX](https://www.cmor-faculty.rice.edu/~heinken/latex/symbols.pdf) formatted within Markdown. There are two ways to add these expressions:

1. Writing inline math expressions
2. Writing math expressions as code blocks

#### Writing inline math expressions

An inline math expression starts with `$` and ends with `$`. 

```markdown
Inline math expression example: $\sqrt{3x-1}+(1+x)^2$

The inline math syntax looks like this in the browser:

Inline math expression example

Writing math expressions as code blocks

To add a math expression's code block to the Markdown file, use the ```math code block and wrap it inside ``` backticks to display the expression as a block.

To add a math expression's code block to the Markdown file, use the ````math code block and wrap it inside triple backticks to display the expression as a block.

```math
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

```

The math code block syntax looks like this in the browser:

Code block math expression example

Conclusion

Markdown syntax works well in GitHub and all other central Git servers, such as GitLab, Gitea, and so on.

Different tools name their markdown differently. For example, GitHub extends markdown functionality in its own way and builds GitHub Flavored Markdown. GitLab also extends markdown functionality and builds and creates a GitLab-flavored markdown.

Markdown syntax is mostly the same in every Git service. But alerts, diagrams, and a few other features only work in GitHub Flavored Markdown.

Reference

• GitHub docs – quickstart for writing on GitHub
• GitHub docs – basic syntax
• Tutorial about rendering STL in Markdown on GitHub

They could've relied on plain English, but that would not be a good solution because of the potential verbosity and ambiguity. So they used specially designed languages for it.

In this article, you'll learn about two of these widely used languages: BNF and EBNF.

Another fascinating aspect of these special languages or notations is that you can write the grammar of your own language using them and give it as input to some magical computer programs called "parser generators". These can output other programs capable of parsing any text according to the grammar you used. How amazing is that?

This feature can save you a lot of time since manually writing such programs is challenging and time-consuming.

Before learning (E)BNF, it's helpful to be able to distinguish between syntax and semantics. So let's start from there.

Syntax vs Semantics in Programming Languages

Syntax refers to the structure of the elements of a language based on its type. On the other hand, semantics are all about the meaning.

Something written syntactically correctly in a language can be completely meaningless. And no text can be meaningful if its syntax is incorrect.

Two of the most famous sentences regarding syntax and semantics are composed by Noam Chomsky:

1. Colorless green ideas sleep furiously.
2. Furiously sleep ideas green colorless.

The first sentence's syntax is correct but it's meaningless. And since the second one is syntactically wrong, it is far from being meaningful.

The same is true for programming languages too. Let's look at the following two JavaScript code snippets to see what I mean.

The following code is syntactically correct but semantically wrong because it's not possible to reassign something to a constant variable:

const name = "Palash";
name = "Akash";

The following is syntactically incorrect and thus does not even have any chance to be semantically correct.

"Palash" = const name;
"Akash" = name;

You check the syntax of your JavaScript code online with a tool like the Esprima Syntax Validator.

There are two more concepts you need to understand before learning to read BNF/EBNF.

Terminals and Non-Terminals

BNF/EBNF is usually used to specify the grammar of a language. Grammar is a set of rules (also called production rules). Here language refers to nothing but a set of strings that are valid according to the rules of its grammar.

A BNF/EBNF grammar description is an unordered list of rules. Rules are used to define symbols with the help of other symbols.

You can think of symbols as the building blocks of grammar. There are two kinds of symbols:

• Terminal (or Terminal symbol): Terminals are strings written within quotes. They are meant to be used as they are. Nothing is hidden behind them. For example "freeCodeCamp" or "firefly".
• Non-terminal (or Non-terminal symbol): Sometimes we need a name to refer to something else. These are called non-terminals. In BNF, non-terminal names are written within angle brackets (for example <statement>), while in EBNF they don't usually use brackets (for example statement).

The whole language is derived from a single non-terminal symbol. This is called the start or root symbol of the grammar. By convention, it is written as the first non-terminal in the BNF/EBNF grammar description.

Finally, you are ready to learn BNF. It's easier than you might think it is.

What is BNF?

BNF stands for Backus–Naur Form which resulted primarily from the contributions of John Backus and Peter Naur.

The syntax of BNF/EBNF is so simple that many people adopted their styles. So in different places, you will most likely see different styles. If the syntax is different from conventional ones, that's usually documented there. In this article I will use one particular style, just to keep things simple.

Below is an example of a simple production rule in BNF:

<something> ::= "content"

Each rule in BNF (also in ENBF) has three parts:

• Left-hand side: Here we write a non-terminal to define it. In the above example, it is <something>.
• ::=: This character group separates the Left hand side from Right hand side. Read this symbol as "is defined as".
• Right-hand side: The definition of the non-terminal specified on the right-hand side. In the above example, it's "content".

The above <something> is just one thing fixed thing. Let's now see all the ways you can compose a non-terminal.

How to compose a non-terminal

BNF offers two methods to us:

• Sequencing
• Choice

You can just write a combination of one or more terminals or non-terminals in a sequence and the result is their concatenation, with non-terminals being replaced by their content. For example, you can express your breakfast in the following ways:

<breakfast> ::= <drink> " and biscuit"
<drink> ::= "tea"

It means the only option for breakfast for you is "tea and biscuit". Note that here, the order of symbols is important.

Let's say someday you want to drink coffee instead of tea. In this case, you can express your possible breakfast items like below:

<breakfast> ::= <drink> " and biscuit"
<drink> ::= "tea" | "coffee"

The | operator indicates that the parts separated by it are choices. Which means the non-terminal on the left can be any such part. Here the order is unimportant, that is there is no difference between "tea" | "coffee and "coffee" | "tea".

That is really all you need to know about BNF to read and understand it and even express the syntax of your own language using it. Believe it or not, it's that simple. And yet it can be used to describe the syntax of many programming languages and other kinds of coding languages.

The thing that makes it possible to break down complex syntax programming languages easily is the ability to define non-terminal symbols recursively.

As a simple example let's see how you express one or more digits in BNF:

<digits> ::= <digit> | <digit> <digits>
<digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

If you want to see a simple real-world example of BNF grammar checkout: Semver notation.

What is EBNF?

BNF is fine, but sometimes it can become verbose and hard to interpret. EBNF (which stands for Extended Backus–Naur Form) may help you in those cases. For example, the previous example can be written in EBNF like below:

digits = digit { digit }
digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

The braces above mean that its inner part may be repeated 0 or more times. It frees your mind from getting lost in recursion.

One interesting fact is that everything you can express in EBNF can also be expressed in BNF.

EBNF usually uses a slightly different notation than BNF. For example:

• ::= becomes just =.
• There are no angle brackets around non-terminals.

For concatenation, instead of juxtaposition, some prefer `,` to be more explicit. However, I will not use it here.

Don't assume that these styles to be universal. There are several variants of them and they are usually clear from the context. The more important thing to focus on is the new operations it offers like the braces we've seen above.

EBNF extends BNF by adding the following 3 operations:

• Option
• Repetition
• Grouping

Option

Option uses square brackets to make the inner content optional. Example:

thing = "water" [ "melon" ]

So the above thing is either water or watermelon.

Repetition

Curly braces indicate the inner content may be repeated 0 or more times. You have already seen a good example of it above. Below is a very simple one just to make the idea solid in your mind:

long_google = "Goo" { "o" } "gle"

So "Google", "Gooogle", "Gooooooogle" are all valid long_google non-terminal.

Grouping

Parentheses can be used to indicate grouping. It means everything they wrap can be replaced with any of the valid strings that the contents of the group represent according to the rules of EBNF. For example:

fly = ("fire" | "fruit") "fly"

Here fly is either "firefly" or "fruitfly".

With BNF we could not do that in one line. It would look like the following in BNF:

<fly> ::= <type> "fly"
<type> ::= "fire" | "fruit"

The BNF Playground

There is a very nice online playground for BNF and EBNF: Playground.

I recommend you check it out and play with it. It uses a slightly different notation so read the "Grammar Help" section beforehand.

It can test if a string is valid according to the grammar you entered. It can also generate random strings based on your grammar!

For fun this is the syntax of a poem-like text (credit goes to chatGPT):

<poem> ::= <line> | <line> "\n" <poem>
<line> ::= <noun_phrase> " " <verb_phrase> " " <adjective>
<noun_phrase> ::= "the " <adjective> " " <noun> | <noun>
<verb_phrase> ::= <verb> | <verb> " " <adverb>
<adjective> ::= "red" | "blue" | "green" | "yellow"
<noun> ::= "sky" | "sun" | "grass" | "flower"
<verb> ::= "shines" | "glows" | "grows" | "blooms"
<adverb> ::= "brightly" | "slowly" | "vividly" | "peacefully"

Go ahead and copy-paste it into the playground and press the "Generate Random" button to get some mostly meaningless lines of a grammatically correct poem.

Conclusion

BNF and EBNF are simple and powerful notations to write what computer scientists call context-free grammar.

In simple terms it means the expansion of a non-terminal is not dependent on the context (surrounding symbols), that is it's context-free. It is the most widely used grammar form to formalize the syntax of coding languages.

Here are some resources you might find interesting:

• EBNF: How to Describe the Grammar of a Language
• The language of languages
• Parser generators:
  • ANTLR, a very powerful parser generator capable of writing parsers in many languages.
  • If you are a JavaScript person like me and want to get started with a parser generator, take a look at nearly.js for a gentle start.

Below are some real-world grammars written using BNF/EBNF or similar notations that you might find interesting:

• Lisp
• Lua
• Semver
• JavaScript
• JSX
• Python
• Value Definition Syntax in CSS

Thanks for reading. Let me know on Twitter if you have any questions or found this article helpful. Happy learning!

Photo by Ryan Wallace on Unsplash

Learning the syntax of a programming language is key if you want to use that language effectively. This is true for both new and experienced developers.

And one of the most important things to pay attention to while learning a programming language is whether the code you're dealing with is a statement or an expression.

It can sometimes be confusing to differentiate between statements and expressions in programming. So this article is meant to simplify the differences so that you can improve your programming skills and become a better developer.

What is an Expression in Programming?

_Photo by [Unsplash](https://unsplash.com/@krakenimages?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">krakenimages / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

An expression is any word or group of words or symbols that is a value. In programming, an expression is a value, or anything that executes and ends up being a value.

It is necessary to understand that a value is unique. For example, const, let, 2, 4, s, a, true, false, and world are values because each of them is unique in meaning or character.

Let's look at some code as an example:

const price = 500;

Judging from the code above, const, price, =, and 500 are expressions because each of them has a definite and unique meaning or value. But if we take all of them together const price = 500 - then we have a statement.

Let's look at another example:

let multiply = function (firstNumber, secondNumber) {
    return firstNumber * secondNumber;
}

Looking at the code above, you can see an anonymous function is assigned to a variable. Oh, wait! You might know that any function is a statement. Can it also be an expression?

Yes! A "function" and a "class" are both statements and expressions because they can perform actions (do or not do tasks) and still execute to a value.

This brings us to statements – so what are they?

What is a Statement in Programming?

A statement is a group of expressions and/or statements that you design to carry out a task or an action.

Statements are two-sided – that is, they either do tasks or don't do them. Any statement that can return a value is automatically qualified to be used as an expression. That is why a function or class is a statement and also an expression in JavaScript.

If you look at the example of the function under the section on expressions, you can see it is assigned and execute to a value passed to a variable. That is why it is an expression in that case.

Examples of Statements in Programming

Inline statements

let amount = $2000;

The whole of the code above is a statement because it carries out the task of assigning $2000 to amount. It is safe to say a line of code is a statement because most compilers or interpreters don't execute any standalone expression.

Photo by [Unsplash](https://unsplash.com/@1nimidiffa?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Nimi Diffa / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Block statements

Look at the below if statement:

if( iLoveYou ) {
    let status = "you should know I mean it"; 

    console.log(status)
}

The if statement is a statement because it helps us check whether I love you or not. As I have said before, it is two-sided: this code finds out whether "I love you" or not, and that is why it is a statement. Also, it doesn't return any value but it can create side effects.

Here's a loop statement:

for( ) {
   //code block
}

while ( counter < 5 ) {
   console.log(' less than 5' );
}

In short, any loop is a statement because if it can only do the tasks it is meant to do or not – does loop and doesn't loop. But a loop can't execute to a value in the end. They can only have side effects in JavaScript. Once they can execute to a value in a programming language, then they can also be used as an expression.

For example, you can use forloop and if statement as expressions in Python.

# Define a list of numbers
numbers = [1, 2, 3, 4, 5]

# compute the sum of the numbers
total = sum([num for num in numbers])

There is also an "IF" expression in Python. That means that something that is a statement in one language can be an expression (or both statement and expression) in another.

a = 1
result = 'even' if a % 2 == 0 else 'odd'
print(result)

Look at the below function statement:

//we define the function as a statement
function add(firstNumber, secondNumber) {
    return firstNumber * secondNumber;
}

//we call it as a statement
add(2, 3);

We declare the function add(firstNumber, secondNumber) and it returns a value. The function is called with two arguments as in add(2, 3) by declaration and so it is a statement. If you pay close attention, you will realize that calling the function as a statement is useless since it has no side effect.

Hey, stop! How can we turn it into an expression? Oh yeah, we can do it like this:

   const five = add(2, 3)

Though the function is now an expression the way it is called above, the whole of the code is still a statement.

Check out this class statement:

let User = class Person {
  sayHi() {
    alert("Hi");
  }
};

You can see that we declare the class "Person" and instantiate and assign it to "User" immediately. So, it is used as an expression.

Now, let's use it as a statement:

//We write class as a statement
class Person {
  sayHi() {
    alert("Hi");
  }
}

// we instantiate it as a statement.
new Person().sayHi();

// we instantiate it as an expression
let User = Person();

A class is similar to a function in the sense that it can be declared, assigned, or used as an operand just like a class. So, a class is a statement and/or an expression.

The Main Differences Between an Expression and a Statement in Programming

Expressions can be assigned or used as operands, while statements can only be declared.

Statements create side effects to be useful, while expressions are values or execute to values.

Expressions are unique in meaning, while statements are two-sided in execution. For example, 1 has a certain value while go( ) may be executed or not.

Statements are the whole structure, while expressions are the building blocks. For example, a line or a block of code is a statement.

Why You Should Know the Difference

First of all, understanding the difference between statements and expressions should make learning new programming languages less surprising. If you're used to JavaScript, you may be surprised by Python's ability to assign an if statement as a variable which is not possible in JavaScript.

Second, it makes it easy to use programming paradigms across different programming languages.

For example, a JavaScript "if statement" cannot be used as an expression because it can't execute to a value – it can only create side effects. Yet, you can use the ternary operator if you want to avoid the side effects of using an if statement in JavaScript.

For this reason, you can understand why some programmers avoid if statements by using the ternary operator in JavaScript. It is because they want to avoid side effects.

It also makes your realize why you have to be always careful about the scope of your variables whenever you use a statement. This is true because statements mostly have side effects to be useful, and it is reasonable to understand the scope of your variables and operations. For example,

let counter = 0;

function addFive() {
    counter += 5
    console.log(counter)
}

function addTwo() {
    counter += 2
    console.log(counter)
}

addFive(counter);// what will this show in the console?
addTwo(counter);// what will this show in the console?

Hey wait! What would be logged in the console if you ran the code above?

Tell yourself the answer first and then paste the code in the console to confirm. If you you're wrong, you need to learn more about scope and side effects. But if you're right, try to make those functions a bit better to avoid the confusion they may generate.

Knowing the difference also helps you to easily identify non-composable and composable syntaxes (functions, classes, modules, and so on) of a programming language. This makes porting your experience from one programming language to another more interesting and direct.

Wrapping Up

Now that you understand the difference between expressions and statements in programming, and you know why understanding the differences is important, you can identify pieces of code as expressions or statements while coding.

Next time, we'll go even further and help make learning a second programming language easier.

Go and get things done now! See you soon.

I am planning to share a lot about programming tips and tutorials in 2023. If you're struggling to build projects or you want to stay connected with my write-ups and videos, please join my list at YouTooCanCode or subscribe to my YouTube channel at You Too Can Code on YouTube.

Code Blocks and Indentation

One of the most distinctive features of Python is its use of indentation to mark blocks of code. Consider the if-statement from our simple password-checking program:

if pwd == 'apple':
    print('Logging on ...')
else:
    print('Incorrect password.')

print('All done!')

The lines print(‘Logging on …’) and print(‘Incorrect password.’) are two separate code blocks. These ones happen to be only a single line long, but Python lets you write code blocks consisting of any number of statements.

To indicate a block of code in Python, you must indent each line of the block by the same amount. The two blocks of code in our example if-statement are both indented four spaces, which is a typical amount of indentation for Python.

In most other programming languages, indentation is used only to help make the code look pretty. But in Python, it is required for indicating what block of code a statement belongs to. For instance, the final print(‘All done!’) is not indented, and so is not part of the else-block.

Programmers familiar with other languages often bristle at the thought that indentation matters: Many programmers like the freedom to format their code how they please. However, Python indentation rules are quite simple, and most programmers already use indentation to make their code readable. Python simply takes this idea one step further and gives meaning to the indentation.

If/elif-statements

An if/elif-statement is a generalized if-statement with more than one condition. It is used for making complex decisions. For example, suppose an airline has the following “child” ticket rates: Kids 2 years old or younger fly for free, kids older than 2 but younger than 13 pay a discounted child fare, and anyone 13 years or older pays a regular adult fare. The following program determines how much a passenger should pay:

# airfare.py
age = int(input('How old are you? '))
if age <= 2:
    print(' free')
elif 2 < age < 13:
    print(' child fare)
else:
    print('adult fare')

After Python gets age from the user, it enters the if/elif-statement and checks each condition one after the other in the order they are given. So first it checks if age is less than 2, and if so, it indicates that the flying is free and jumps out of the elif-condition. If age is not less than 2, then it checks the next elif-condition to see if age is between 2 and 13. If so, it prints the appropriate message and jumps out of the if/elif-statement. If neither the if-condition nor the elif-condition is True, then it executes the code in the else-block.

Conditional expressions

Python has one more logical operator that some programmers like (and some don’t!). It’s essentially a shorthand notation for if-statements that can be used directly within expressions. Consider this code:

food = input("What's your favorite food? ")
reply = 'yuck' if food == 'lamb' else 'yum'

The expression on the right-hand side of = in the second line is called a conditional expression, and it evaluates to either ‘yuck’ or ‘yum’. It’s equivalent to the following:

food = input("What's your favorite food? ")
if food == 'lamb':
   reply = 'yuck'
else:
   reply = 'yum'

Conditional expressions are usually shorter than the corresponding if/else-statements, although not quite as flexible or easy to read. In general, you should use them when they make your code simpler.

Python Documentation - Indentation